Variable chip

import { VariableChip } from "@oration/canon/components/variable-chip";export function Kinds() {    return (        <>            <VariableChip name="supplier_name" />            <VariableChip name="payment_date" state="system" />            <VariableChip name="po_number" state="undefined" />        </>    );}

import { VariableChip } from "@oration/canon/components/variable-chip";export function Sizes() {    return (        <div className="flex flex-col gap-4">            <p className="text-xs text-muted-foreground">                Small in 12 and 13px text:{" "}                <VariableChip name="invoice_number" size="sm" />            </p>            <p className="text-sm text-muted-foreground">                Default in 14px text: <VariableChip name="invoice_number" />            </p>        </div>    );}

import { VariableChip } from "@oration/canon/components/variable-chip";export function WithDescription() {    return (        <>            <VariableChip                name="supplier_name"                description="The supplier's legal name from their W-9."            />            <VariableChip                name="remit_to"                description="The remittance address on file, or the bank account for ACH."            />            <VariableChip                name="caller_id"                state="system"                description="The number the supplier called from, filled in when the call connects."            />        </>    );}

import { Label } from "@oration/canon/components/label";import { Textarea } from "@oration/canon/components/textarea";import { VariableChip } from "@oration/canon/components/variable-chip";import * as React from "react";export function InsertPalette() {    const groups = [        {            group: "Supplier",            keys: [                { key: "supplier_name", label: "Supplier name" },                { key: "remit_to", label: "Remit-to address" },            ],        },        {            group: "Payment",            keys: [                { key: "invoice_number", label: "Invoice number" },                { key: "amount", label: "Amount paid" },                { key: "payment_date", label: "Payment date" },            ],        },    ];    const known = groups.flatMap((group) => group.keys.map((k) => k.key));    const id = React.useId();    const ref = React.useRef<HTMLTextAreaElement>(null);    const [text, setText] = React.useState(        "Hi {{supplier_name}}, payment for {{invoice_number}} is on its way. PO {{po_number}}.",    );    const used = Array.from(        text.matchAll(/\{\{\s*([a-z0-9_]+)\s*\}\}/g),        (m) => m[1] ?? "",    );    const unknown = Array.from(        new Set(used.filter((name) => !known.includes(name))),    );    const insert = (key: string) => {        const field = ref.current;        const start = field?.selectionStart ?? text.length;        const end = field?.selectionEnd ?? text.length;        const token = `{{${key}}}`;        setText(text.slice(0, start) + token + text.slice(end));        requestAnimationFrame(() => {            field?.focus();            field?.setSelectionRange(                start + token.length,                start + token.length,            );        });    };    return (        <div className="flex w-full max-w-lg flex-col gap-3">            <div className="flex flex-col gap-2">                <Label htmlFor={id}>Message</Label>                <Textarea                    id={id}                    ref={ref}                    rows={3}                    value={text}                    onChange={(event) => setText(event.target.value)}                    className="font-mono text-xs"                />            </div>            <fieldset className="flex flex-col gap-2">                <legend className="mb-1 text-xs text-muted-foreground">                    Insert a variable                </legend>                {groups.map((group) => (                    <div                        key={group.group}                        className="flex flex-wrap items-center gap-1.5"                    >                        <span className="w-20 shrink-0 text-xs text-muted-foreground">                            {group.group}                        </span>                        {group.keys.map((k) => (                            <VariableChip                                key={k.key}                                name={k.key}                                size="sm"                                description={`${k.label}. Click to insert.`}                                onClick={() => insert(k.key)}                            />                        ))}                    </div>                ))}            </fieldset>            {unknown.length ? (                <p className="flex flex-wrap items-center gap-1.5 text-xs text-warning-foreground dark:text-warning">                    Won't be filled in:                    {unknown.map((name) => (                        <VariableChip                            key={name}                            name={name}                            size="sm"                            state="undefined"                        />                    ))}                </p>            ) : (                <p className="text-xs text-muted-foreground">                    Every variable in this message has a value.                </p>            )}        </div>    );}

import { VariableChip } from "@oration/canon/components/variable-chip";export function VariablesList() {    const variables = [        {            name: "supplier_name",            state: "defined" as const,            description: "Legal name from the W-9",        },        {            name: "open_balance",            state: "defined" as const,            description: "Sum of unpaid invoices",        },        {            name: "caller_id",            state: "system" as const,            description: "Filled in when the call connects",        },        {            name: "call_started_at",            state: "system" as const,            description: "Time the call connected, in the workspace time zone",        },    ];    return (        <div className="w-full max-w-md overflow-hidden rounded-xl bg-card shadow-border">            <ul className="flex flex-col">                {variables.map((variable) => (                    <li                        key={variable.name}                        className="flex items-start gap-3 border-b border-border px-3 py-2.5 last:border-b-0"                    >                        <VariableChip                            name={variable.name}                            state={variable.state}                            size="sm"                            className="mt-0.5"                        />                        <span className="text-13 text-muted-foreground">                            {variable.description}                        </span>                    </li>                ))}            </ul>        </div>    );}

import { VariableChip } from "@oration/canon/components/variable-chip";import { cn } from "@oration/canon/lib/utils";export function StatesMatrix() {    const kinds = [        { state: "defined", label: "Defined" },        { state: "system", label: "System" },        { state: "undefined", label: "Undefined" },    ] as const;    return (        <div className="grid w-full max-w-xl grid-cols-[6rem_repeat(4,minmax(0,1fr))] items-center gap-x-3 gap-y-4">            <span />            {columns.map((column) => (                <span                    key={column}                    className="text-center text-xs text-muted-foreground"                >                    {column}                </span>            ))}            {kinds.map((kind) => (                <div key={kind.state} className="contents">                    <span className="text-13 text-muted-foreground">                        {kind.label}                    </span>                    {columns.map((column) => (                        <div key={column} className="flex justify-center">                            <VariableChip                                name="amount"                                state={kind.state}                                selected={column === "Selected"}                                className={cn(                                    "pointer-events-none",                                    column === "Hover" &&                                        "brightness-[0.97] dark:brightness-110",                                    column === "Focus" && "ring-2 ring-ring/60",                                )}                            />                        </div>                    ))}                </div>            ))}        </div>    );}