@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/checkbox.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /**
+     * The words beside the box. Rendered as a `<label for>` rather than a label that
+     * wraps the input, so `description` and `error` can sit under it without becoming
+     * part of the accessible NAME — a wrapping label would have the screen reader read
+     * the whole paragraph as the checkbox's name.
+     */
+    label?: ReactNode;
+    /** Secondary text under the label ("Used when no account is chosen"). Pointed at by
+     *  `aria-describedby`, merged with any the caller passed. Kastlan's
+     *  `CheckboxField` `description` variant. */
+    description?: ReactNode;
+    /**
+     * "Some but not all" — the header box of a list whose rows are partly selected.
+     * A DOM property with no HTML attribute, so it is set on the element after every
+     * render; it does not touch `checked`, and a click clears it (the browser's rule,
+     * and the caller's `onChange` decides what the click means).
+     */
+    indeterminate?: boolean;
+    /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,
+     *  so the two cannot be spelled separately. */
+    invalid?: boolean;
+    /** What is wrong, in the caller's words ("Accept the terms to continue"). Rendered
+     *  under the label, attached with `aria-describedby`, and implies `invalid`. */
+    error?: ReactNode;
+    /** The checked state as a boolean — the `(next) => …` shape Lenkbank's
+     *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not
+     *  have to unwrap `event.target.checked` at every call site. Fires alongside
+     *  `onChange`, never instead of it. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —
+     *  the row when there is a label, the box's own wrapper when there is not — which
+     *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */
+    inputClassName?: string;
+}
+/**
+ * A native checkbox in the kit's tokens, with an optional label, description and
+ * error.
+ *
+ * Without `label`, `description` or `error` it renders the box and nothing else, so
+ * it drops into a table cell or a caller's own `<label>` exactly as the raw input
+ * did — give it an `aria-label` there. Every other prop reaches the `<input>`
+ * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works
+ * controlled, uncontrolled, and inside a plain `<form>`.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/components/checkbox.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef } from "react";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts.js";
+const BOX = "peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors checked:border-[var(--brand)] checked:bg-[var(--brand)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed";
+const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
+const BOX_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] checked:border-[var(--danger-border)] focus-visible:ring-[var(--danger)]";
+const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const Checkbox = forwardRef(function Checkbox2({
+  label,
+  description,
+  indeterminate = false,
+  invalid,
+  error,
+  onCheckedChange,
+  onChange,
+  className,
+  inputClassName,
+  id,
+  disabled,
+  ...rest
+}, ref) {
+  const generated = useId();
+  const inputId = id ?? generated;
+  const descriptionId = `${inputId}-description`;
+  const errorId = `${inputId}-error`;
+  const showError = hasMessage(error);
+  const showDescription = hasMessage(description);
+  const isInvalid = Boolean(invalid) || showError;
+  const bare = label === void 0 && !showDescription && !showError;
+  const local = useRef(null);
+  const setRef = useCallback(
+    (node) => {
+      local.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
+  useEffect(() => {
+    if (local.current) local.current.indeterminate = indeterminate;
+  });
+  const box = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: setRef,
+        id: bare ? id : inputId,
+        disabled,
+        ...rest,
+        type: "checkbox",
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": mergeDescribedBy(
+          rest["aria-describedby"],
+          showDescription && descriptionId,
+          showError && errorId
+        ),
+        onChange: (e) => {
+          onChange?.(e);
+          onCheckedChange?.(e.target.checked);
+        },
+        className: cn(BOX, indeterminate && BOX_MIXED, isInvalid && BOX_INVALID, inputClassName)
+      }
+    ),
+    indeterminate ? /* @__PURE__ */ jsx(
+      Minus,
+      {
+        "aria-hidden": true,
+        strokeWidth: 3,
+        className: "pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Check,
+      {
+        "aria-hidden": true,
+        strokeWidth: 3,
+        className: "pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible"
+      }
+    )
+  ] });
+  if (bare) return box;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // `items-start` + a 20px cell for the box: the box centres on the label's FIRST
+        // line (text-sm is 20px tall), so a label that wraps keeps the box at the top
+        // rather than floating to the middle of a paragraph.
+        "flex items-start gap-2",
+        // The whole row fades, the way ToggleGroup and the fields do, so the label does
+        // not stay at full strength beside a box you cannot change.
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-5 shrink-0 items-center", children: box }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+          label !== void 0 && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: inputId,
+              className: cn(
+                "block text-sm leading-5 text-[var(--text-primary)]",
+                // `select-none`: a double-click to toggle twice would otherwise select the
+                // words, and a drag that starts on them starts a native text drag.
+                disabled ? "cursor-not-allowed" : "cursor-pointer select-none"
+              ),
+              children: label
+            }
+          ),
+          showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-[var(--text-muted)]", children: description }),
+          showError && /* @__PURE__ */ jsx("span", { id: errorId, className: cn("block", ERROR_CLASS), children: error })
+        ] })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useRef } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * A checkbox that is still `<input type=\"checkbox\">`.\n *\n * The three consuming apps had three answers: ~30 raw inputs in Keksdose leaning on\n * `tokens.css`'s `accent-color`, a label-plus-box `CheckboxField` in Lenkbank, and a\n * Radix `<button role=\"checkbox\">` in Kastlan. The native element is the one that\n * needs no ARIA to be a checkbox — it submits with its form, answers to `required`,\n * resets with the form and takes a `<label for>` click — so it stays underneath, and\n * only its paint is replaced (`appearance-none`, a token-coloured box, and a glyph\n * laid over it that ignores the pointer so the click still lands on the input).\n *\n * `accent-color` alone was not enough: it tints the native box but cannot change its\n * border, so an INVALID checkbox had no way to say so, and the unchecked box kept the\n * browser's own grey outline in both themes.\n */\n\n// The box. 16px, like every raw checkbox it replaces, so a migration moves nothing.\n//\n// `focus-visible`, with an offset in the surface colour: a --brand ring touching a\n// --brand-filled (checked) box would be a ring painted in the colour it sits on —\n// present in the DOM and invisible on screen. The offset is what separates the two.\nconst BOX =\n  \"peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors \" +\n  \"checked:border-[var(--brand)] checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// A mixed box wears the checked fill whether or not the underlying input is checked:\n// `indeterminate` is a property the browser keeps separately from `checked`, and the\n// dash means \"some\", which is neither answer.\nconst BOX_MIXED = \"border-[var(--brand)] bg-[var(--brand)]\";\n\n// The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight\n// survives fractional display scaling on every edge (see the note in ui.tsx). The\n// focus ring turns danger too, so focusing a wrong box does not repaint it as fine.\nconst BOX_INVALID =\n  \"border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] checked:border-[var(--danger-border)] focus-visible:ring-[var(--danger)]\";\n\nconst ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * The words beside the box. Rendered as a `<label for>` rather than a label that\n   * wraps the input, so `description` and `error` can sit under it without becoming\n   * part of the accessible NAME — a wrapping label would have the screen reader read\n   * the whole paragraph as the checkbox's name.\n   */\n  label?: ReactNode;\n  /** Secondary text under the label (\"Used when no account is chosen\"). Pointed at by\n   *  `aria-describedby`, merged with any the caller passed. Kastlan's\n   *  `CheckboxField` `description` variant. */\n  description?: ReactNode;\n  /**\n   * \"Some but not all\" — the header box of a list whose rows are partly selected.\n   * A DOM property with no HTML attribute, so it is set on the element after every\n   * render; it does not touch `checked`, and a click clears it (the browser's rule,\n   * and the caller's `onChange` decides what the click means).\n   */\n  indeterminate?: boolean;\n  /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,\n   *  so the two cannot be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words (\"Accept the terms to continue\"). Rendered\n   *  under the label, attached with `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean — the `(next) => …` shape Lenkbank's\n   *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not\n   *  have to unwrap `event.target.checked` at every call site. Fires alongside\n   *  `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —\n   *  the row when there is a label, the box's own wrapper when there is not — which\n   *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */\n  inputClassName?: string;\n}\n\n/**\n * A native checkbox in the kit's tokens, with an optional label, description and\n * error.\n *\n * Without `label`, `description` or `error` it renders the box and nothing else, so\n * it drops into a table cell or a caller's own `<label>` exactly as the raw input\n * did — give it an `aria-label` there. Every other prop reaches the `<input>`\n * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works\n * controlled, uncontrolled, and inside a plain `<form>`.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    description,\n    indeterminate = false,\n    invalid,\n    error,\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showError = hasMessage(error);\n  const showDescription = hasMessage(description);\n  const isInvalid = Boolean(invalid) || showError;\n  // Nothing to lay out beside the box: render the box alone, as the raw input was.\n  const bare = label === undefined && !showDescription && !showError;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After EVERY render, not only when the prop changes: a click clears the property\n  // in the DOM, and a controlled caller that keeps `indeterminate` true expects the\n  // dash back on the next render even though the prop never changed.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = indeterminate;\n  });\n\n  const box = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && className)}>\n      <input\n        ref={setRef}\n        id={bare ? id : inputId}\n        disabled={disabled}\n        {...rest}\n        // After the spread, like Switch: a props object spread at a checkbox must not\n        // be able to turn it into something else.\n        type=\"checkbox\"\n        // OR-ed with the spread so a caller's own `aria-invalid` survives — Input's rule.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          showError && errorId,\n        )}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(BOX, indeterminate && BOX_MIXED, isInvalid && BOX_INVALID, inputClassName)}\n      />\n      {/* The glyph is drawn over the box, not inside it (an input has no children),\n          and ignores the pointer so a click on the tick still toggles the input. The\n          tick is shown by `peer-checked`, so an UNCONTROLLED box shows it too; the\n          dash replaces it outright while `indeterminate` holds. */}\n      {indeterminate ? (\n        <Minus\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n        />\n      ) : (\n        <Check\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n        />\n      )}\n    </span>\n  );\n\n  if (bare) return box;\n\n  return (\n    <div\n      className={cn(\n        // `items-start` + a 20px cell for the box: the box centres on the label's FIRST\n        // line (text-sm is 20px tall), so a label that wraps keeps the box at the top\n        // rather than floating to the middle of a paragraph.\n        \"flex items-start gap-2\",\n        // The whole row fades, the way ToggleGroup and the fields do, so the label does\n        // not stay at full strength beside a box you cannot change.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      <span className=\"flex h-5 shrink-0 items-center\">{box}</span>\n      <span className=\"min-w-0\">\n        {label !== undefined && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"block text-sm leading-5 text-[var(--text-primary)]\",\n              // `select-none`: a double-click to toggle twice would otherwise select the\n              // words, and a drag that starts on them starts a native text drag.\n              disabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            )}\n          >\n            {label}\n          </label>\n        )}\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </div>\n  );\n});\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";AAuII,SACE,KADF;AAvIJ,SAAS,YAAY,aAAa,WAAW,OAAO,cAAc;AAClE,SAAS,OAAO,aAAa;AAE7B,SAAS,UAAU;AACnB,SAAS,WAAW,YAAY,wBAAwB;AAuBxD,MAAM,MACJ;AAQF,MAAM,YAAY;AAKlB,MAAM,cACJ;AAEF,MAAM,cAAc;AAgDb,MAAM,WAAW,WAA4C,SAASA,UAC3E;AAAA,EACE;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,UAAU,GAAG,OAAO;AAC1B,QAAM,YAAY,WAAW,KAAK;AAClC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,YAAY,QAAQ,OAAO,KAAK;AAEtC,QAAM,OAAO,UAAU,UAAa,CAAC,mBAAmB,CAAC;AAEzD,QAAM,QAAQ,OAAgC,IAAI;AAClD,QAAM,SAAS;AAAA,IACb,CAAC,SAAkC;AACjC,YAAM,UAAU;AAChB,gBAAU,KAAK,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAIA,YAAU,MAAM;AACd,QAAI,MAAM,QAAS,OAAM,QAAQ,gBAAgB;AAAA,EACnD,CAAC;AAED,QAAM,MACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,SAAS,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI,OAAO,KAAK;AAAA,QAChB;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QAEL,gBAAc,aAAa,KAAK,cAAc,KAAK;AAAA,QACnD,oBAAkB;AAAA,UAChB,KAAK,kBAAkB;AAAA,UACvB,mBAAmB;AAAA,UACnB,aAAa;AAAA,QACf;AAAA,QACA,UAAU,CAAC,MAAqC;AAC9C,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,KAAK,iBAAiB,WAAW,aAAa,aAAa,cAAc;AAAA;AAAA,IACzF;AAAA,IAKC,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,aAAa;AAAA,QACb,WAAU;AAAA;AAAA,IACZ,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,aAAa;AAAA,QACb,WAAU;AAAA;AAAA,IACZ;AAAA,KAEJ;AAGF,MAAI,KAAM,QAAO;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA;AAAA,QAGA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,kCAAkC,eAAI;AAAA,QACtD,qBAAC,UAAK,WAAU,WACb;AAAA,oBAAU,UACT;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAW;AAAA,gBACT;AAAA;AAAA;AAAA,gBAGA,WAAW,uBAAuB;AAAA,cACpC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAU,iDAChC,uBACH;AAAA,UAED,aACC,oBAAC,UAAK,IAAI,SAAS,WAAW,GAAG,SAAS,WAAW,GAClD,iBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,SAAS,cAAc;","names":["Checkbox"]}

package/dist/components/chip.d.ts

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { ReactNode, KeyboardEvent, ComponentPropsWithoutRef } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * A chip: a compact pill carrying one value.
+ *
+ * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link
+ * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is
+ * which prop you pass, not which component you pick. Keeping them together is what stops
+ * an app growing three near-identical pills that drift apart; it is the shape this kit
+ * already uses for `Button`, which is a link when it is given an href.
+ *
+ * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a
+ * VALUE rather than as an action — which matters because a row of eight buttons says
+ * "choose one of eight things to do" and a row of eight chips says "here are eight
+ * things". Using `Button` for both is the mistake this exists to prevent.
+ */
+type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info";
+type ChipSize = "sm" | "md";
+interface ChipProps {
+    children: ReactNode;
+    tone?: ChipTone;
+    size?: ChipSize;
+    icon?: LucideIcon;
+    /** Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a toggle. */
+    selected?: boolean;
+    /** Renders the chip as a link. Mutually exclusive with `onClick`. */
+    href?: string;
+    /** Renders the chip as a toggle button. Mutually exclusive with `href`. */
+    onClick?: () => void;
+    /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */
+    onRemove?: () => void;
+    /** Accessible name for the dismiss button. Default: `common.remove` from the
+     *  {@link UiKitProvider}, else "Remove". */
+    removeLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    /**
+     * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).
+     * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a
+     * `tabIndex` and a `role` and it becomes the thing arrow keys move between.
+     */
+    tabIndex?: number;
+    role?: string;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    onFocus?: () => void;
+    /** Accessible name, when the visible text is not the whole story. */
+    "aria-label"?: string;
+    /** Escape hatch for a test id, a `data-tour` anchor, or an `aria-describedby`. */
+    [key: `data-${string}`]: unknown;
+}
+/**
+ * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or
+ * a link, so when both are present the chip renders a wrapper holding TWO siblings — the
+ * interactive body and the dismiss control. That is why the outer element is not always
+ * the interactive one, and why the focus ring is drawn on the body rather than the
+ * wrapper.
+ */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLElement>>;
+interface ChipInputLabels {
+    /** Announced after a value is added. Receives the value. */
+    added: (value: string) => string;
+    /** Announced after a value is removed. Receives the value. */
+    removed: (value: string) => string;
+    /** Accessible name for each chip's dismiss button. */
+    remove: string;
+    /** Shown when `max` is reached. Receives the limit. */
+    atLimit: (max: number) => string;
+    /** Shown when a duplicate is rejected. Receives the value. */
+    duplicate: (value: string) => string;
+}
+declare const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels;
+declare function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels;
+/**
+ * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper
+ * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this
+ * component's, forwarded to the inner `<input>`; the div has none of its own.
+ */
+interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "placeholder" | "children"> {
+    value: string[];
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    /** Visible label, rendered above the field. Without one, name the field with
+     *  `aria-label`. */
+    label?: string;
+    /**
+     * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit
+     * now uses. Still honoured, and still second to `aria-label` when both are given.
+     */
+    ariaLabel?: string;
+    /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */
+    validate?: (raw: string) => string | null;
+    /** Characters that commit the current text, besides Enter. Default: comma. */
+    separators?: string[];
+    allowDuplicates?: boolean;
+    max?: number;
+    tone?: ChipTone;
+    size?: ChipSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Error text. Wires `aria-describedby` and implies `invalid`. */
+    error?: ReactNode;
+    labels?: Partial<ChipInputLabels>;
+    className?: string;
+}
+/**
+ * A field whose value is a LIST, entered as chips.
+ *
+ * The keyboard model is the whole component; the pills are the easy part. Per the WAI
+ * pattern for a "tag" input:
+ *
+ *   Enter, or any separator  commit the typed text
+ *   Backspace on empty text  move focus to the last chip (does NOT delete it)
+ *   ← →  while on a chip     move between chips
+ *   Backspace / Delete       remove the focused chip, focus its neighbour
+ *   Escape                   clear what is typed but keep the committed chips
+ *   paste                    splits on the separators, so a pasted CSV becomes chips
+ *
+ * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately
+ * is more common and is a trap: it is a destructive action with no feedback on a key
+ * people hit by reflex, and the value it destroys may have taken a while to type. Moving
+ * focus first makes the second Backspace a deliberate one, and it is what lets a
+ * keyboard user reach a chip at all.
+ */
+declare function ChipInput({ value, onChange, placeholder, label, ariaLabel, validate, separators, allowDuplicates, max, tone, size, disabled, invalid, error, labels, className, "aria-label": ariaLabelAttr, ...rest }: ChipInputProps): react.JSX.Element;
+
+export { Chip, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipProps, type ChipSize, type ChipTone, DEFAULT_CHIP_INPUT_LABELS, resolveChipInputLabels };