@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/chip.js

@@ -1,92 +1,93 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useCallback, useId, useLayoutEffect, useRef, useState } from "react";
+import { isValidElement, useCallback, useId } from "react";
 import { Check, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { horizontalStep } from "../lib/direction.js";
-import { FIELD_INVALID, FIELD_TOUCH_TEXT, TOUCH_TARGET_LARGE } from "./ui.js";
+import { TOUCH_TARGET_LARGE } from "./button-look.js";
 import { FOCUS_RING } from "./focus-ring.js";
-import { DisabledReasonLine, useDisabledReasonLine } from "./field-parts.js";
-import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels.js";
+import { assignRef, LockedReason } from "./field-parts.js";
+import { hasContent } from "../lib/presence.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer } from "./text-link.js";
-import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
+import { useSnapEdges } from "../lib/chip-edge-snap.js";
+import { refreshChipEdges } from "../lib/chip-edge-snap.js";
 const TONE = {
   neutral: {
-    idle: "border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]",
-    selected: "border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]"
+    idle: "border-subtle bg-surface-2 text-secondary",
+    selected: "border-strong bg-active text-primary"
   },
   brand: {
-    idle: "border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]",
-    selected: "border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]"
+    idle: "border-subtle bg-brand-soft text-brand-muted",
+    selected: "border-brand bg-brand text-brand-contrast"
   },
   danger: {
-    idle: "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]",
-    selected: "border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]"
+    idle: "border-danger bg-danger-soft text-danger",
+    selected: "border-[var(--danger)] bg-danger text-danger-contrast"
   },
   warning: {
-    idle: "border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]",
-    selected: "border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]"
+    idle: "border-warning bg-warning-soft text-warning",
+    selected: "border-[var(--warning)] bg-warning-soft text-warning"
   },
   success: {
-    idle: "border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]",
-    selected: "border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]"
+    idle: "border-success bg-success-soft text-success",
+    selected: "border-[var(--success)] bg-success-soft text-success"
   },
   info: {
-    idle: "border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]",
-    selected: "border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]"
+    idle: "border-info bg-info-soft text-info",
+    selected: "border-[var(--info)] bg-info-soft text-info"
   },
   // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry
   // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text
   // contrast, and a filled amber pill beside an amber figure reads as one smear.
   // `border-current` takes its hue from the text, so the two cannot drift apart.
   income: {
-    idle: "border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-income)]",
-    selected: "border-current bg-[var(--bg-active)] text-[var(--money-income)]"
+    idle: "border-current/40 bg-surface-2 text-money-income",
+    selected: "border-current bg-active text-money-income"
   },
   expense: {
-    idle: "border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]",
-    selected: "border-current bg-[var(--bg-active)] text-[var(--money-expense)]"
+    idle: "border-current/40 bg-surface-2 text-money-expense",
+    selected: "border-current bg-active text-money-expense"
   },
   // The categorical hues: the `info` recipe with its own token triple, so a hue chip
   // and a status chip in one row carry the same weight.
   blue: {
-    idle: "border-[var(--hue-blue-border)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]",
-    selected: "border-[var(--hue-blue)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]"
+    idle: "border-hue-blue bg-hue-blue-soft text-hue-blue",
+    selected: "border-[var(--hue-blue)] bg-hue-blue-soft text-hue-blue"
   },
   indigo: {
-    idle: "border-[var(--hue-indigo-border)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]",
-    selected: "border-[var(--hue-indigo)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]"
+    idle: "border-hue-indigo bg-hue-indigo-soft text-hue-indigo",
+    selected: "border-[var(--hue-indigo)] bg-hue-indigo-soft text-hue-indigo"
   },
   purple: {
-    idle: "border-[var(--hue-purple-border)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]",
-    selected: "border-[var(--hue-purple)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]"
+    idle: "border-hue-purple bg-hue-purple-soft text-hue-purple",
+    selected: "border-[var(--hue-purple)] bg-hue-purple-soft text-hue-purple"
   },
   teal: {
-    idle: "border-[var(--hue-teal-border)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]",
-    selected: "border-[var(--hue-teal)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]"
+    idle: "border-hue-teal bg-hue-teal-soft text-hue-teal",
+    selected: "border-[var(--hue-teal)] bg-hue-teal-soft text-hue-teal"
   },
   orange: {
-    idle: "border-[var(--hue-orange-border)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]",
-    selected: "border-[var(--hue-orange)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]"
+    idle: "border-hue-orange bg-hue-orange-soft text-hue-orange",
+    selected: "border-[var(--hue-orange)] bg-hue-orange-soft text-hue-orange"
   }
 };
 const OUTLINE = {
-  neutral: "border-[var(--border-strong)] bg-transparent text-[var(--text-secondary)]",
+  neutral: "border-strong bg-transparent text-secondary",
   // The brand AS TEXT is `--brand-muted` (0.33): `--brand` itself is solved to 3:1, a
   // fill's boundary, and as text it fell to 3.0:1 in the derived dark presets.
-  brand: "border-[var(--brand)] bg-transparent text-brand-muted",
-  danger: "border-[var(--danger-border)] bg-transparent text-[var(--danger)]",
-  warning: "border-[var(--warning-border)] bg-transparent text-[var(--warning)]",
-  success: "border-[var(--success-border)] bg-transparent text-[var(--success)]",
-  info: "border-[var(--info-border)] bg-transparent text-[var(--info)]",
-  income: "border-current/60 bg-transparent text-[var(--money-income)]",
-  expense: "border-current/60 bg-transparent text-[var(--money-expense)]",
-  blue: "border-[var(--hue-blue-border)] bg-transparent text-[var(--hue-blue)]",
-  indigo: "border-[var(--hue-indigo-border)] bg-transparent text-[var(--hue-indigo)]",
-  purple: "border-[var(--hue-purple-border)] bg-transparent text-[var(--hue-purple)]",
-  teal: "border-[var(--hue-teal-border)] bg-transparent text-[var(--hue-teal)]",
-  orange: "border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]"
+  brand: "border-brand bg-transparent text-brand-muted",
+  danger: "border-danger bg-transparent text-danger",
+  warning: "border-warning bg-transparent text-warning",
+  success: "border-success bg-transparent text-success",
+  info: "border-info bg-transparent text-info",
+  income: "border-current/60 bg-transparent text-money-income",
+  expense: "border-current/60 bg-transparent text-money-expense",
+  blue: "border-hue-blue bg-transparent text-hue-blue",
+  indigo: "border-hue-indigo bg-transparent text-hue-indigo",
+  purple: "border-hue-purple bg-transparent text-hue-purple",
+  teal: "border-hue-teal bg-transparent text-hue-teal",
+  orange: "border-hue-orange bg-transparent text-hue-orange"
 };
 const SOLID = {
   neutral: "border-transparent bg-inverse text-inverse",
@@ -105,18 +106,18 @@ const SOLID = {
 };
 const DOT = {
   neutral: "bg-[var(--text-muted)]",
-  brand: "bg-[var(--brand)]",
-  danger: "bg-[var(--danger)]",
-  warning: "bg-[var(--warning)]",
-  success: "bg-[var(--success)]",
-  info: "bg-[var(--info)]",
-  income: "bg-[var(--money-income)]",
-  expense: "bg-[var(--money-expense)]",
-  blue: "bg-[var(--hue-blue)]",
-  indigo: "bg-[var(--hue-indigo)]",
-  purple: "bg-[var(--hue-purple)]",
-  teal: "bg-[var(--hue-teal)]",
-  orange: "bg-[var(--hue-orange)]"
+  brand: "bg-brand",
+  danger: "bg-danger",
+  warning: "bg-warning",
+  success: "bg-success",
+  info: "bg-info",
+  income: "bg-money-income",
+  expense: "bg-money-expense",
+  blue: "bg-hue-blue",
+  indigo: "bg-hue-indigo",
+  purple: "bg-hue-purple",
+  teal: "bg-hue-teal",
+  orange: "bg-hue-orange"
 };
 const DOT_SIZE = { xs: "size-1.5", sm: "size-2", md: "size-2", lg: "size-2.5" };
 const CAPS = {
@@ -128,10 +129,10 @@ const CAPS = {
 function surfaceOf(tone, variant, selected) {
   const palette = TONE[tone];
   if (variant === "dot") {
-    return selected ? "border-transparent bg-transparent font-medium text-[var(--text-primary)]" : "border-transparent bg-transparent text-[var(--text-secondary)]";
+    return selected ? "border-transparent bg-transparent font-medium text-primary" : "border-transparent bg-transparent text-secondary";
   }
   if (variant === "solid") {
-    return cn(SOLID[tone], selected && "ring-2 ring-[var(--border-strong)] ring-offset-1 ring-offset-[var(--bg-surface)]");
+    return cn(SOLID[tone], selected && "ring-2 ring-strong ring-offset-1 ring-offset-surface");
   }
   if (selected) return palette.selected;
   return variant === "outline" ? OUTLINE[tone] : palette.idle;
@@ -166,141 +167,14 @@ const SIZE = {
     remove: "size-4"
   }
 };
-function chipEdgeGrid(dpr) {
-  for (let n = 1; n <= 4; n++) if (Math.abs(n * dpr - Math.round(n * dpr)) < 1e-3) return n;
-  return 0;
-}
-function snappedChipEdgeWidth(natural, left, dpr) {
-  const n = chipEdgeGrid(dpr);
-  if (n <= 2) return natural;
-  const l = Math.round(left);
-  let w = Math.ceil(natural - 0.01);
-  while (((2 * l + w) % n + n) % n !== 0) w++;
-  return w;
-}
-const snapped = /* @__PURE__ */ new Set();
-const written = /* @__PURE__ */ new WeakMap();
-let snapFrame = 0;
-let snapObserver = null;
-let ratioQuery = null;
-function clearOwn(el) {
-  const own = written.get(el);
-  if (own !== void 0 && el.style.minWidth === own) el.style.minWidth = "";
-  written.delete(el);
-}
-function refreshChipEdges() {
-  if (snapFrame) {
-    cancelAnimationFrame(snapFrame);
-    snapFrame = 0;
-  }
-  if (typeof window === "undefined" || !snapped.size) return;
-  const dpr = window.devicePixelRatio || 1;
-  const els = [...snapped];
-  for (const el of els) clearOwn(el);
-  const n = chipEdgeGrid(dpr);
-  if (n <= 2) return;
-  let pending = els;
-  for (let pass = 0; pass <= n && pending.length; pass++) {
-    const reads = pending.map((el) => {
-      const r = el.getBoundingClientRect();
-      const label = el.querySelector(".truncate-until-large");
-      if (!r.width || label && (label.scrollWidth > label.clientWidth || labelWraps(label))) return null;
-      const width = Math.round(r.width * 64) / 64;
-      const target = snappedChipEdgeWidth(width, r.left + window.scrollX, dpr);
-      return target === width ? null : target;
-    });
-    const next = [];
-    pending.forEach((el, i) => {
-      const target = reads[i];
-      if (target == null) return;
-      if (pass === n) {
-        clearOwn(el);
-        return;
-      }
-      const own = written.get(el);
-      const value = `${pass > 0 && own !== void 0 ? parseFloat(own) + 1 : target}px`;
-      el.style.minWidth = value;
-      written.set(el, value);
-      next.push(el);
-    });
-    pending = next;
-  }
-}
-function labelWraps(label) {
-  const line = Number.parseFloat(getComputedStyle(label).lineHeight);
-  return line > 0 && label.clientHeight > 1.5 * line;
-}
-function scheduleChipEdges() {
-  if (snapFrame || typeof requestAnimationFrame === "undefined") return;
-  snapFrame = requestAnimationFrame(() => {
-    snapFrame = 0;
-    refreshChipEdges();
-  });
-}
-function watchRatio() {
-  ratioQuery?.removeEventListener("change", onRatioChange);
-  ratioQuery = typeof window.matchMedia === "function" ? window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`) : null;
-  ratioQuery?.addEventListener("change", onRatioChange);
-}
-function onRatioChange() {
-  watchRatio();
-  scheduleChipEdges();
-}
-function registerSnap(el) {
-  if (snapped.has(el)) return;
-  if (!snapped.size) {
-    if (typeof ResizeObserver !== "undefined") snapObserver = new ResizeObserver(scheduleChipEdges);
-    window.addEventListener("resize", scheduleChipEdges);
-    watchRatio();
-  }
-  snapped.add(el);
-  snapObserver?.observe(el);
-  scheduleChipEdges();
-}
-function unregisterSnap(el) {
-  if (!snapped.delete(el)) return;
-  snapObserver?.unobserve(el);
-  clearOwn(el);
-  if (snapped.size) return;
-  snapObserver?.disconnect();
-  snapObserver = null;
-  window.removeEventListener("resize", scheduleChipEdges);
-  ratioQuery?.removeEventListener("change", onRatioChange);
-  ratioQuery = null;
-}
-function useSnapEdges(on) {
-  const node = useRef(null);
-  const ref = useCallback(
-    (el) => {
-      if (el === node.current) return;
-      const prev = node.current;
-      node.current = el;
-      if (prev) queueMicrotask(() => node.current !== prev && unregisterSnap(prev));
-      if (el && on) registerSnap(el);
-    },
-    [on]
-  );
-  useLayoutEffect(() => {
-    const el = node.current;
-    if (!el) return;
-    if (on) {
-      registerSnap(el);
-      scheduleChipEdges();
-    } else unregisterSnap(el);
-  });
-  return ref;
-}
-function assignRef(target, value) {
-  if (typeof target === "function") target(value);
-  else if (target) target.current = value;
-}
 const CHIP_PILL = "inline-flex max-w-full items-center rounded-full border transition-colors";
-const CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]`;
+const CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface`;
 const CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;
 const CHIP_LABEL_TRUNCATE = "truncate-until-large";
 const CHIP_TOUCH_LARGE = `${TOUCH_TARGET_LARGE} large:justify-center`;
 const REMOVE_HIT_AREA_LARGE = "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']";
-const Chip = forwardRef(function Chip2({
+function Chip({
+  ref,
   children,
   tone = "neutral",
   size = "md",
@@ -327,11 +201,11 @@ const Chip = forwardRef(function Chip2({
   disabledReasonDisplay,
   commit,
   ...rest
-}, ref) {
+}) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
   const reasonId = useId();
   const disabledReason = useCommitReason(commit, ownDisabledReason);
-  const locked = Boolean(onClick) && !href && hasReason(disabledReason);
+  const locked = Boolean(onClick) && !href && hasContent(disabledReason);
   const kitLink = useKitLink();
   const s = SIZE[size];
   const interactive = !!href || !!onClick;
@@ -371,6 +245,7 @@ const Chip = forwardRef(function Chip2({
     snap && "justify-center",
     className
   );
+  const toneData = { "data-tone": onRemove ? void 0 : tone };
   const isCheckbox = checkbox && !!onClick && !href;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     isCheckbox && /* @__PURE__ */ jsx(
@@ -420,7 +295,7 @@ const Chip = forwardRef(function Chip2({
         FOCUS_RING,
         // §4: the × is a 48 px target at Large without growing the chip around it.
         REMOVE_HIT_AREA_LARGE,
-        !locked && "hover:bg-[var(--bg-active)]",
+        !locked && "hover:bg-active",
         locked && "cursor-not-allowed",
         (disabled && !locked || removeDisabled) && "pointer-events-none",
         // A disabled chip is already dimmed as a whole; dimming the × again on top
@@ -434,6 +309,7 @@ const Chip = forwardRef(function Chip2({
     "span",
     {
       ref: snap ? snapRef : void 0,
+      "data-tone": tone,
       className: cn(CHIP_PILL, s.tail, radius, surface, target && CHIP_TOUCH_LARGE, snap && "justify-center", className),
       children: [
         inner2,
@@ -454,6 +330,7 @@ const Chip = forwardRef(function Chip2({
   if (href && !disabled) {
     const onLinkClick = onClick;
     const linkProps = {
+      ...toneData,
       ...rest,
       ref: remove ? ref : ownRef,
       href,
@@ -471,6 +348,7 @@ const Chip = forwardRef(function Chip2({
       "a",
       {
         ref: remove ? ref : ownRef,
+        ...toneData,
         href,
         "aria-current": selected ? "true" : void 0,
         onClick: onLinkClick,
@@ -488,6 +366,7 @@ const Chip = forwardRef(function Chip2({
       "button",
       {
         ref: remove ? ref : ownRef,
+        ...toneData,
         type: "button",
         onClick: (e) => {
           if (locked) {
@@ -509,7 +388,7 @@ const Chip = forwardRef(function Chip2({
     );
     const shaped = remove ? pill(button) : button;
     if (!locked) return shaped;
-    return /* @__PURE__ */ jsx(ChipReasonFrame, { reason: disabledReason, reasonId, display: disabledReasonDisplay, children: shaped });
+    return /* @__PURE__ */ jsx(LockedReason, { lock: { reason: disabledReason, reasonId }, display: disabledReasonDisplay, children: shaped });
   }
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are
@@ -519,6 +398,7 @@ const Chip = forwardRef(function Chip2({
       "span",
       {
         ref: ownRef,
+        ...toneData,
         className: look,
         tabIndex,
         role,
@@ -532,24 +412,6 @@ const Chip = forwardRef(function Chip2({
       }
     )
   );
-});
-function ChipReasonFrame({
-  reason,
-  reasonId,
-  display,
-  children
-}) {
-  const line = useDisabledReasonLine(display);
-  if (line) {
-    return /* @__PURE__ */ jsx(DisabledReasonLine, { id: reasonId, reason, children });
-  }
-  return /* @__PURE__ */ jsx(Tooltip, { label: reason, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    children,
-    /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: reason })
-  ] }) });
-}
-function hasReason(node) {
-  return node !== void 0 && node !== null && node !== false && node !== "";
 }
 function RenderedLink({
   render,
@@ -557,222 +419,8 @@ function RenderedLink({
 }) {
   return render(props);
 }
-const DEFAULT_CHIP_INPUT_LABELS = {
-  added: (v) => `${v} added`,
-  removed: (v) => `${v} removed`,
-  remove: "Remove",
-  atLimit: (max) => `Limit of ${max} reached`,
-  duplicate: (v) => `${v} is already in the list`
-};
-function resolveChipInputLabels(labels) {
-  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;
-}
-function ChipInput({
-  value,
-  onChange,
-  placeholder,
-  label,
-  ariaLabel,
-  validate,
-  separators = [","],
-  allowDuplicates = false,
-  max,
-  tone = "neutral",
-  size = "md",
-  disabled = false,
-  invalid = false,
-  error,
-  labels,
-  className,
-  "aria-label": ariaLabelAttr,
-  ...rest
-}) {
-  const text = useKitLabels("chipInput", DEFAULT_CHIP_INPUT_LABELS, labels);
-  const locale = useKitLocale();
-  const [draft, setDraft] = useState("");
-  const [message, setMessage] = useState("");
-  const [rejected, setRejected] = useState(null);
-  const [focusedChip, setFocusedChip] = useState(null);
-  const inputRef = useRef(null);
-  const chipRefs = useRef([]);
-  const id = useId();
-  const listId = `${id}-list`;
-  const errorId = `${id}-error`;
-  const rejectedId = `${id}-rejected`;
-  const isInvalid = invalid || !!error;
-  const describedBy = [error ? errorId : null, rejected ? rejectedId : null].filter(Boolean).join(" ");
-  const focusChip = (index) => {
-    setFocusedChip(index);
-    if (index === null) inputRef.current?.focus();
-    else chipRefs.current[index]?.focus();
-  };
-  const commitMany = (raws) => {
-    const next = [...value];
-    const added = [];
-    let rejection = null;
-    for (const raw of raws) {
-      const candidate = raw.trim();
-      if (!candidate) continue;
-      if (max !== void 0 && next.length >= max) {
-        rejection ??= text.atLimit(max);
-        break;
-      }
-      if (!allowDuplicates && next.includes(candidate)) {
-        rejection ??= text.duplicate(candidate);
-        continue;
-      }
-      const invalidReason = validate?.(candidate);
-      if (invalidReason) {
-        rejection ??= invalidReason;
-        continue;
-      }
-      next.push(candidate);
-      added.push(candidate);
-    }
-    if (added.length) onChange(next);
-    const addedList = new Intl.ListFormat(locale, { type: "conjunction", style: "long" });
-    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : ""));
-    setRejected(rejection);
-    return { added, rejection };
-  };
-  const commit = (raw) => commitMany([raw]).added.length > 0;
-  const removeAt = (index) => {
-    const removed = value[index];
-    onChange(value.filter((_, i) => i !== index));
-    setMessage(text.removed(removed));
-    setRejected(null);
-    const next = index >= value.length - 1 ? null : index;
-    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));
-  };
-  const onInputKeyDown = (e) => {
-    if (e.key === "Enter") {
-      if (draft.trim()) {
-        e.preventDefault();
-        if (commit(draft)) setDraft("");
-      }
-      return;
-    }
-    if (separators.includes(e.key)) {
-      e.preventDefault();
-      if (commit(draft)) setDraft("");
-      return;
-    }
-    if (e.key === "Escape" && draft) {
-      e.preventDefault();
-      setDraft("");
-      return;
-    }
-    if (e.key === "Backspace" && !draft && value.length) {
-      e.preventDefault();
-      focusChip(value.length - 1);
-    }
-  };
-  const onChipKeyDown = (e, index) => {
-    if (e.key === "Backspace" || e.key === "Delete") {
-      e.preventDefault();
-      removeAt(index);
-      return;
-    }
-    const step = horizontalStep(e.key, e.currentTarget);
-    if (step === -1 && index > 0) {
-      e.preventDefault();
-      focusChip(index - 1);
-      return;
-    }
-    if (step === 1) {
-      e.preventDefault();
-      focusChip(index === value.length - 1 ? null : index + 1);
-      return;
-    }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      focusChip(null);
-    }
-  };
-  return (
-    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id
-    // wants to point at — while the accessible name below goes on the `<input>`,
-    // because that is what a screen-reader user actually lands in. Spreading the two
-    // to the same element would have named a decorative wrapper and left the field
-    // anonymous.
-    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("space-y-1", className), children: [
-      label && /* @__PURE__ */ jsx("label", { htmlFor: `${id}-input`, className: "block text-sm text-[var(--text-secondary)]", children: label }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-wrap items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-sm",
-            "focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]",
-            disabled && "cursor-default bg-[var(--bg-surface-2)]",
-            isInvalid && FIELD_INVALID
-          ),
-          onClick: () => !disabled && inputRef.current?.focus(),
-          children: [
-            /* @__PURE__ */ jsx("ul", { id: listId, role: "list", className: "contents", children: value.map((v, i) => /* @__PURE__ */ jsx("li", { role: "presentation", className: "contents", children: /* @__PURE__ */ jsx(
-              Chip,
-              {
-                ref: (el) => {
-                  chipRefs.current[i] = el;
-                },
-                tone,
-                size,
-                disabled,
-                removeLabel: text.remove,
-                onRemove: disabled ? void 0 : () => removeAt(i),
-                tabIndex: focusedChip === i ? 0 : -1,
-                role: "listitem",
-                "aria-label": v,
-                onKeyDown: (e) => onChipKeyDown(e, i),
-                onFocus: () => setFocusedChip(i),
-                "data-chip-index": i,
-                children: v
-              }
-            ) }, `${v}-${i}`)) }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id: `${id}-input`,
-                ref: inputRef,
-                value: draft,
-                onChange: (e) => {
-                  setDraft(e.target.value);
-                  setMessage("");
-                  setRejected(null);
-                },
-                onKeyDown: onInputKeyDown,
-                onBlur: () => {
-                  if (draft.trim() && commit(draft)) setDraft("");
-                },
-                onPaste: (e) => {
-                  const pasted = e.clipboardData.getData("text");
-                  const pattern = new RegExp(`[${separators.map((s) => `\\${s}`).join("")}
-\r]`);
-                  if (!pattern.test(pasted)) return;
-                  e.preventDefault();
-                  if (commitMany(pasted.split(pattern)).added.length) setDraft("");
-                },
-                placeholder: value.length ? void 0 : placeholder,
-                disabled,
-                "aria-label": label ? void 0 : ariaLabelAttr ?? ariaLabel,
-                "aria-describedby": describedBy || void 0,
-                "aria-invalid": isInvalid || !!rejected || void 0,
-                className: cn("w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default", FIELD_TOUCH_TEXT)
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": true, className: "sr-only-fixed", children: message })
-          ]
-        }
-      ),
-      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-[var(--danger)]", children: error }),
-      rejected && /* @__PURE__ */ jsx("p", { id: rejectedId, className: "text-xs text-[var(--danger)]", "data-chip-input-rejected": "", children: rejected })
-    ] })
-  );
-}
 export {
   Chip,
-  ChipInput,
-  DEFAULT_CHIP_INPUT_LABELS,
-  refreshChipEdges,
-  resolveChipInputLabels
+  refreshChipEdges
 };
 //# sourceMappingURL=chip.js.map