@financedistrict/apps-ui 0.1.0

package/dist/toast.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface ToastProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /**
+     * Status. `success` → a polite `role="status"` region; `error` → an
+     * assertive `role="alert"` region. Also selects the leading icon + its color.
+     */
+    variation?: "success" | "error";
+    /** The message body (`body-03`). */
+    children: React.ReactNode;
+    /**
+     * Dismiss handler. When provided, the trailing close button is rendered and
+     * wired to it; omit it for a toast with no close affordance.
+     */
+    onClose?: () => void;
+    /** Ref forwarded to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Toast — the Figma `Toast` (node `5020:2203`). A presentational dark
+ * notification chip: a leading status icon, a message, and an optional close
+ * button. It is a live region (`role="status"` for success, `role="alert"` for
+ * error) so it announces when mounted; positioning, stacking, and auto-dismiss
+ * are the consumer's concern (there is no toast manager here).
+ */
+declare function Toast({ variation, children, onClose, className, ref, ...props }: ToastProps): React.JSX.Element;
+
+/**
+ * Toast styling — the Figma `Toast` (node `5020:2203`). Binds ONLY to the
+ * semantic token layer (never primitives); theme switching is automatic via
+ * `.dark`, so no `dark:` variants. The surface is the fixed dark "reversed"
+ * card, so the root is not variation-dependent — only the leading status
+ * icon's color changes with `variation`.
+ */
+/** Root row — dark reversed surface; identical for both variations. */
+declare const toastVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Leading 20px status icon slot; color per variation. */
+declare const toastIconVariants: (props?: ({
+    variation?: "error" | "success" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Trailing close button — muted, brightens on hover; shared ADR-0010 focus
+ * ring (`rounded-xs` so the ring follows the small hit area).
+ */
+declare const toastCloseVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Toast, type ToastProps, toastCloseVariants, toastIconVariants, toastVariants };

package/dist/toast.js

@@ -0,0 +1,2 @@
+export { Toast, toastCloseVariants, toastIconVariants, toastVariants } from './chunk-N4VAP2GB.js';
+import './chunk-7EOSDFS3.js';

package/dist/token-input.cjs

@@ -0,0 +1,415 @@
+'use strict';
+
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/token-input/TokenInput.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var inputVariants = classVarianceAuthority.cva(
+  [
+    // Field row layout — icons + input on one line, vertically centred.
+    "flex w-full items-center",
+    // Colour transitions for the focus border change.
+    "transition-colors",
+    // I-beam text cursor over the WHOLE field row (not just the inner input),
+    // so clicking anywhere in the padding/icon area reads as "type here". This
+    // is the only hover affordance — hover intentionally does NOT recolour the
+    // border (user-authorized deviation from the Figma). `cursor-text` sits in
+    // the base; `has-[:disabled]:cursor-not-allowed` below is declared AFTER it
+    // so it wins on a disabled field (same-specificity utilities, later class
+    // takes precedence — confirmed by tailwind-merge ordering).
+    "cursor-text",
+    // Disabled: not-allowed cursor + block pointer interaction on the whole
+    // field (the native `disabled` on the input already stops typing; icons are
+    // dimmed separately by the `disabled`-derived `iconStateClass` in <Input>).
+    // Declared after `cursor-text` so it overrides the I-beam when disabled.
+    "has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variation: {
+        field: [
+          "bg-input-background border border-input-border rounded-sm",
+          // Focus (mouse or keyboard) strengthens the whole border to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ],
+        line: [
+          "border-b border-input-border",
+          // Focus (mouse or keyboard) strengthens the bottom line to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ]
+      },
+      size: {
+        // sm/lg heights reuse the Button scale; gap follows Figma per size.
+        sm: "h-8 gap-1",
+        lg: "h-10 gap-2"
+      },
+      error: {
+        // Error out-ranks focus: declare the destructive border for the resting
+        // state AND its `focus-within:` form so an errored field never recolours
+        // to the accent when focused (a bare `border-…` alone would lose to the
+        // variation's `focus-within:` accent utility above). No `hover:` form is
+        // needed — hover no longer changes colour on any variation. The `error`
+        // variant's classes are emitted after the variation's, so at equal
+        // specificity the destructive `focus-within:` wins by order.
+        true: "border-input-destructive-foreground-accent focus-within:border-input-destructive-foreground-accent",
+        false: ""
+      },
+      // Bottom-line visibility toggle. LINE ONLY — the hide effect is applied
+      // via a compound variant below (scoped to `variation:line`), so `field`
+      // is unaffected. Boolean → `true`/`false`; `true` (default) keeps today's
+      // behaviour. No classes here: `true` is the resting `border-input-border`
+      // from the variation, and `false`'s hide is the compound variant.
+      showBottomLine: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // field padding — Figma field-lg = px-3 (12px) / py-2 (8px).
+      { variation: "field", size: "lg", className: "px-3 py-2" },
+      // field-sm: DERIVED. px-2 (8px = spacing/2) steps down from field-lg's
+      // px-3 (12px) and equals py-2 for a uniform spacing/2 inset all around.
+      { variation: "field", size: "sm", className: "px-2 py-2" },
+      // line — no horizontal padding (Figma px-0); vertical padding per size.
+      { variation: "line", size: "lg", className: "py-2" },
+      { variation: "line", size: "sm", className: "py-2.5" },
+      // Hide the resting bottom line (LINE ONLY): recolour to transparent while
+      // keeping `border-b` for a stable 1px width (no layout shift). Gated on
+      // `error:false` so an errored field keeps its destructive rest border
+      // (transparent would otherwise last-win over it). Focus still wins:
+      // `focus-within:border-input-border-accent` out-ranks `border-transparent`
+      // (later in class order), so the line reappears on focus. `field` is
+      // untouched — this compound only matches `variation:line`.
+      {
+        variation: "line",
+        showBottomLine: false,
+        error: false,
+        className: "border-transparent"
+      }
+    ],
+    defaultVariants: {
+      variation: "field",
+      size: "lg",
+      error: false,
+      showBottomLine: true
+    }
+  }
+);
+function Token({
+  value,
+  invalid = false,
+  disabled = false,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "token",
+      "data-invalid": invalid || void 0,
+      tabIndex: disabled ? void 0 : 0,
+      onKeyDown: disabled ? void 0 : (event) => {
+        if (event.key === "Delete" || event.key === "Backspace") {
+          event.preventDefault();
+          onRemove("keyboard");
+        }
+      },
+      className: cn(
+        // `group` so the ✕ can react to the badge's hover/focus (see below).
+        // Height is exactly 22px = 20px (`body-03` line) + 2px border, with NO
+        // vertical padding: this keeps the field a constant 40px tall
+        // (badge 22 + 8+8 field padding + 1+1 field border = 40, empty or filled).
+        // Adding `py-*` here would push the field past 40px once tokens appear.
+        "group inline-flex items-center gap-1 min-w-5 rounded-sm border px-1",
+        // Default: neutral card border + background. Invalid: destructive accent
+        // recolour (there is no `card-destructive` token — reuse `input-destructive-*`).
+        invalid ? "border-input-destructive-border bg-card-background" : "border-card-border bg-card-background",
+        // Interactive chrome (only when not disabled): hover/focus fill to
+        // `card-accent` (the DS's "stronger/hover" step up from `card-background`)
+        // and the STANDARD ADR-0010/0012 focus ring on the whole badge — the ✕
+        // itself carries no ring. `cursor-default` overrides the field's I-beam
+        // so a badge doesn't read as "type here".
+        !disabled && "cursor-default hover:bg-card-accent focus-visible:bg-card-accent outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "token-label",
+            className: cn(
+              "body-03",
+              // Disabled wins over invalid: the Figma disabled badge (561:12782) is
+              // fully muted — a disabled field is inert, so no destructive red.
+              disabled ? "text-card-foreground-muted" : invalid ? "text-input-destructive-foreground-accent" : "text-card-foreground"
+            ),
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${value}`,
+            onClick: () => onRemove("pointer"),
+            disabled,
+            tabIndex: -1,
+            "data-slot": "token-remove",
+            className: cn(
+              // Reset native button chrome.
+              "inline-flex cursor-pointer items-center justify-center rounded-xs bg-transparent p-0",
+              // Icon colour follows the badge state. Disabled wins (fully muted, no
+              // hover strengthen — the badge is inert). Valid: muted at rest,
+              // strengthens to `card-foreground` on badge hover/focus (via `group-*`).
+              // Invalid: stays destructive (a strengthen would drop the flag).
+              disabled ? "text-card-foreground-muted" : invalid ? "text-input-destructive-foreground-accent" : "text-card-foreground-muted group-hover:text-card-foreground group-focus-visible:text-card-foreground",
+              "disabled:cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular", "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function splitOnSeparators(raw, separators) {
+  if (separators.length === 0) return [raw];
+  const escaped = separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("");
+  return raw.split(new RegExp(`[${escaped}]`));
+}
+function TokenInput({
+  className,
+  fieldClassName,
+  wrapperClassName,
+  value,
+  defaultValue,
+  onChange,
+  separators = [","],
+  commitOnBlur = false,
+  validate,
+  label,
+  optional = false,
+  hint,
+  error = false,
+  disabled,
+  placeholder,
+  id: idProp,
+  onKeyDown,
+  onBlur,
+  onInput,
+  ref,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [tokensState, setTokensState] = React__namespace.useState(
+    () => defaultValue ?? []
+  );
+  const tokens = isControlled ? value : tokensState;
+  const innerRef = React__namespace.useRef(null);
+  const setInputRef = React__namespace.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
+  );
+  const generatedId = React__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const commitTokens = (next) => {
+    if (!isControlled) setTokensState(next);
+    onChange?.(next);
+  };
+  const addTokens = (pieces) => {
+    const next = [...tokens];
+    const seen = new Set(next.map((t) => t.toLowerCase()));
+    let changed = false;
+    for (const piece of pieces) {
+      const trimmed = piece.trim();
+      if (trimmed === "") continue;
+      const key = trimmed.toLowerCase();
+      if (seen.has(key)) continue;
+      seen.add(key);
+      next.push(trimmed);
+      changed = true;
+    }
+    if (changed) commitTokens(next);
+  };
+  const removeTokenAt = (index, origin) => {
+    commitTokens(tokens.filter((_, i) => i !== index));
+    if (origin === "keyboard") innerRef.current?.focus();
+  };
+  const handleInput = (event) => {
+    onInput?.(event);
+    const input = event.currentTarget;
+    const raw = input.value;
+    if (separators.some((sep) => raw.includes(sep))) {
+      addTokens(splitOnSeparators(raw, separators));
+      input.value = "";
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Backspace" && event.currentTarget.value === "" && tokens.length > 0) {
+      event.preventDefault();
+      removeTokenAt(tokens.length - 1);
+    }
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    if (commitOnBlur) {
+      const input = event.currentTarget;
+      if (input.value.trim() !== "") {
+        addTokens([input.value]);
+        input.value = "";
+      }
+    }
+  };
+  const handleFieldMouseDown = (event) => {
+    const target = event.target;
+    if (target.closest("[data-slot=token]")) return;
+    if (target === innerRef.current) return;
+    event.preventDefault();
+    innerRef.current?.focus();
+  };
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id,
+          "data-slot": "input-label",
+          className: cn(
+            "caption-03-medium uppercase",
+            error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+            disabled && "text-input-foreground-muted"
+          ),
+          children: label
+        }
+      ),
+      optional && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-slot": "input-optional",
+          className: "body-04 text-input-foreground-muted",
+          children: "Optional"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "token-input-field",
+        "data-error": error || void 0,
+        onMouseDown: handleFieldMouseDown,
+        className: cn(
+          // Reuse Input's field styling (bg/border/rounded/focus-within/error).
+          inputVariants({ variation: "field", size: "lg", error }),
+          // Layout overrides (tailwind-merge last-wins): grow with wrapped rows,
+          // keep single-row min height, allow badges + input to wrap, uniform
+          // spacing/2 inset (overrides field-lg's px-3 py-2).
+          "h-auto min-h-10 flex-wrap gap-1 p-2",
+          // Icon slots inherit the shared state colour.
+          iconStateClass,
+          fieldClassName
+        ),
+        children: [
+          tokens.map((token, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            Token,
+            {
+              value: token,
+              invalid: validate ? !validate(token) : false,
+              disabled,
+              onRemove: (origin) => removeTokenAt(index, origin)
+            },
+            `${token}-${index}`
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              "data-slot": "token-input",
+              disabled,
+              placeholder: tokens.length === 0 ? placeholder : void 0,
+              "aria-invalid": error || void 0,
+              "aria-describedby": hintId,
+              className: cn(
+                // Typography + grow to fill remaining row width. `min-w-0` lets the
+                // input shrink; a small basis keeps it usable when tokens wrap.
+                "body-03 w-0 min-w-16 flex-1 bg-transparent outline-none",
+                "text-input-foreground-accent caret-input-foreground-accent",
+                "placeholder:text-input-foreground-muted",
+                "disabled:cursor-not-allowed disabled:text-input-foreground-muted",
+                className
+              ),
+              ref: setInputRef,
+              onInput: handleInput,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              ...props
+            }
+          )
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "input-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+
+exports.TokenInput = TokenInput;

package/dist/token-input.d.cts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+interface TokenInputProps extends Omit<React.ComponentProps<"input">, "size" | "value" | "defaultValue" | "onChange"> {
+    /**
+     * Committed tokens (controlled). Pair with `onChange`. When provided, the
+     * component does not hold its own token state — the parent owns the array.
+     */
+    value?: string[];
+    /**
+     * Initial committed tokens (uncontrolled). Seeds the internal token state;
+     * ignored once `value` is provided (controlled mode).
+     */
+    defaultValue?: string[];
+    /**
+     * Fires whenever a token is added or removed, with the full next tokens array.
+     * The in-progress draft text lives in the native `<input>` and is NOT reported
+     * here — the component's value is the committed tokens array.
+     */
+    onChange?: (tokens: string[]) => void;
+    /**
+     * Characters that commit the current draft into token(s). Default `[","]`.
+     * When the draft contains any of these chars it is split on all of them,
+     * trimmed, empties dropped, case-insensitive duplicates dropped, then pushed.
+     * No key other than a separator commits (Enter never commits).
+     */
+    separators?: string[];
+    /**
+     * Opt-in: commit a non-empty trailing draft as one token on blur. Default
+     * `false` (strict separator-only commit). Useful so a form never loses a
+     * half-typed trailing entry.
+     */
+    commitOnBlur?: boolean;
+    /**
+     * Optional per-token predicate. Default `undefined` = no validation, nothing
+     * is ever flagged (the generic component accepts anything). When provided,
+     * tokens failing it are KEPT but flagged destructive ("flag but allow") and
+     * expose `data-invalid`. The DS ships no domain-specific validator.
+     */
+    validate?: (token: string) => boolean;
+    /**
+     * Uppercase label shown above the field. When omitted the label row is not
+     * rendered. Paired with the `<input>` via generated `id`/`htmlFor` (or your
+     * own `id`) so the control is properly named for assistive tech.
+     */
+    label?: React.ReactNode;
+    /**
+     * Marks the field as not required — renders an "Optional" tag on the right of
+     * the label row (Figma). Has no effect without a `label`.
+     */
+    optional?: boolean;
+    /**
+     * Helper text shown below the field, with a leading 16px icon (info by
+     * default, warning when `error`). Linked to the input via `aria-describedby`.
+     */
+    hint?: React.ReactNode;
+    /**
+     * Field-level error state (distinct from per-token invalid flagging): sets
+     * `aria-invalid`, turns the label, border, icon and hint to the destructive
+     * accent, and swaps the hint icon to a warning — exactly as Input's `error`.
+     */
+    error?: boolean;
+    /** Class names for the outer wrapper (the vertical label/field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for the field row (border/background box), not the `<input>`. */
+    fieldClassName?: string;
+}
+/**
+ * TokenInput — a domain-agnostic token / tag input. As the user types, text
+ * commits into removable badges (tokens) on a configurable separator (default
+ * comma). The DS ships it knowing NOTHING about emails or any other domain:
+ * validation, copy and separators are all supplied at the call site (mirrors
+ * SearchBar-over-Input layering — ship the generic primitive, let the app
+ * specialize it).
+ *
+ * Composition — "reuse variants only": TokenInput does NOT render <Input> (its
+ * badges wrap inside the field and its leading slot is decorative-by-contract).
+ * It reuses `inputVariants({ variation: "field", size: "lg", error })` — the
+ * hard-to-duplicate token/focus/error handling — and overrides layout only via
+ * `cn` (tailwind-merge last-wins): `h-auto min-h-10 flex-wrap p-2`. The thin
+ * label + hint rows are replicated locally, matching Input's exact classes. The
+ * `field`/`lg` axes are fixed and NOT exposed as props (per the Figma scope).
+ *
+ * Value model: committed tokens are a `string[]` (controlled `value`+`onChange`
+ * or uncontrolled `defaultValue`); the draft lives in the native `<input>` (the
+ * source of truth for the in-progress text), read via a merged `ref`. `ref`
+ * forwards to the `<input>`.
+ */
+declare function TokenInput({ className, fieldClassName, wrapperClassName, value, defaultValue, onChange, separators, commitOnBlur, validate, label, optional, hint, error, disabled, placeholder, id: idProp, onKeyDown, onBlur, onInput, ref, ...props }: TokenInputProps): React.JSX.Element;
+
+export { TokenInput, type TokenInputProps };

package/dist/token-input.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+interface TokenInputProps extends Omit<React.ComponentProps<"input">, "size" | "value" | "defaultValue" | "onChange"> {
+    /**
+     * Committed tokens (controlled). Pair with `onChange`. When provided, the
+     * component does not hold its own token state — the parent owns the array.
+     */
+    value?: string[];
+    /**
+     * Initial committed tokens (uncontrolled). Seeds the internal token state;
+     * ignored once `value` is provided (controlled mode).
+     */
+    defaultValue?: string[];
+    /**
+     * Fires whenever a token is added or removed, with the full next tokens array.
+     * The in-progress draft text lives in the native `<input>` and is NOT reported
+     * here — the component's value is the committed tokens array.
+     */
+    onChange?: (tokens: string[]) => void;
+    /**
+     * Characters that commit the current draft into token(s). Default `[","]`.
+     * When the draft contains any of these chars it is split on all of them,
+     * trimmed, empties dropped, case-insensitive duplicates dropped, then pushed.
+     * No key other than a separator commits (Enter never commits).
+     */
+    separators?: string[];
+    /**
+     * Opt-in: commit a non-empty trailing draft as one token on blur. Default
+     * `false` (strict separator-only commit). Useful so a form never loses a
+     * half-typed trailing entry.
+     */
+    commitOnBlur?: boolean;
+    /**
+     * Optional per-token predicate. Default `undefined` = no validation, nothing
+     * is ever flagged (the generic component accepts anything). When provided,
+     * tokens failing it are KEPT but flagged destructive ("flag but allow") and
+     * expose `data-invalid`. The DS ships no domain-specific validator.
+     */
+    validate?: (token: string) => boolean;
+    /**
+     * Uppercase label shown above the field. When omitted the label row is not
+     * rendered. Paired with the `<input>` via generated `id`/`htmlFor` (or your
+     * own `id`) so the control is properly named for assistive tech.
+     */
+    label?: React.ReactNode;
+    /**
+     * Marks the field as not required — renders an "Optional" tag on the right of
+     * the label row (Figma). Has no effect without a `label`.
+     */
+    optional?: boolean;
+    /**
+     * Helper text shown below the field, with a leading 16px icon (info by
+     * default, warning when `error`). Linked to the input via `aria-describedby`.
+     */
+    hint?: React.ReactNode;
+    /**
+     * Field-level error state (distinct from per-token invalid flagging): sets
+     * `aria-invalid`, turns the label, border, icon and hint to the destructive
+     * accent, and swaps the hint icon to a warning — exactly as Input's `error`.
+     */
+    error?: boolean;
+    /** Class names for the outer wrapper (the vertical label/field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for the field row (border/background box), not the `<input>`. */
+    fieldClassName?: string;
+}
+/**
+ * TokenInput — a domain-agnostic token / tag input. As the user types, text
+ * commits into removable badges (tokens) on a configurable separator (default
+ * comma). The DS ships it knowing NOTHING about emails or any other domain:
+ * validation, copy and separators are all supplied at the call site (mirrors
+ * SearchBar-over-Input layering — ship the generic primitive, let the app
+ * specialize it).
+ *
+ * Composition — "reuse variants only": TokenInput does NOT render <Input> (its
+ * badges wrap inside the field and its leading slot is decorative-by-contract).
+ * It reuses `inputVariants({ variation: "field", size: "lg", error })` — the
+ * hard-to-duplicate token/focus/error handling — and overrides layout only via
+ * `cn` (tailwind-merge last-wins): `h-auto min-h-10 flex-wrap p-2`. The thin
+ * label + hint rows are replicated locally, matching Input's exact classes. The
+ * `field`/`lg` axes are fixed and NOT exposed as props (per the Figma scope).
+ *
+ * Value model: committed tokens are a `string[]` (controlled `value`+`onChange`
+ * or uncontrolled `defaultValue`); the draft lives in the native `<input>` (the
+ * source of truth for the in-progress text), read via a merged `ref`. `ref`
+ * forwards to the `<input>`.
+ */
+declare function TokenInput({ className, fieldClassName, wrapperClassName, value, defaultValue, onChange, separators, commitOnBlur, validate, label, optional, hint, error, disabled, placeholder, id: idProp, onKeyDown, onBlur, onInput, ref, ...props }: TokenInputProps): React.JSX.Element;
+
+export { TokenInput, type TokenInputProps };

package/dist/token-input.js

@@ -0,0 +1,3 @@
+export { TokenInput } from './chunk-E6KPNTWW.js';
+import './chunk-IEVN3J2F.js';
+import './chunk-7EOSDFS3.js';