@eifi1/ui-kit 0.6.1 → 0.7.0

package/dist/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_INVALID } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"danger\"\n  | \"warning\"\n  | \"success\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px. */\nexport type ChipSize = \"sm\" | \"md\" | \"lg\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]\",\n    selected: \"border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]\",\n  },\n  brand: {\n    idle: \"border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]\",\n    selected: \"border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  },\n  danger: {\n    idle: \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]\",\n    selected: \"border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  },\n  warning: {\n    idle: \"border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n    selected: \"border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n  },\n  success: {\n    idle: \"border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]\",\n    selected: \"border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]\",\n  },\n  info: {\n    idle: \"border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]\",\n    selected: \"border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]\",\n  },\n  // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry\n  // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text\n  // contrast, and a filled amber pill beside an amber figure reads as one smear.\n  // `border-current` takes its hue from the text, so the two cannot drift apart.\n  income: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-income)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-income)]\",\n  },\n  expense: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-expense)]\",\n  },\n};\n\nconst SIZE: Record<ChipSize, { body: string; icon: string; remove: string }> = {\n  sm: { body: \"gap-1 px-2 py-0.5 text-xs\", icon: \"size-3\", remove: \"size-3\" },\n  md: { body: \"gap-1.5 px-2.5 py-1 text-sm\", icon: \"size-3.5\", remove: \"size-3.5\" },\n  lg: { body: \"min-h-11 gap-2 px-4 py-2 text-sm\", icon: \"size-4\", remove: \"size-4\" },\n};\n\nconst CHIP_BASE =\n  \"inline-flex max-w-full items-center rounded-full border transition-colors \" +\n  // `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n  // ChipInput moves focus onto one after a removal) and a ring that appears on a\n  // pointer click reads as a stuck selection.\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\nexport interface ChipProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  size?: ChipSize;\n  icon?: LucideIcon;\n  /**\n   * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a\n   * toggle.\n   *\n   * On a toggle, keep the LABEL the same in both states and let `selected` carry the\n   * state. A label that flips with it (\"Skip this month\" / \"Ask again this month\") is\n   * announced together with \"pressed\", and then says the opposite of what it does.\n   */\n  selected?: boolean;\n  /** Renders the chip as a link. Mutually exclusive with `onClick`. */\n  href?: string;\n  /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives the\n   *  click, so a chip inside a clickable row can `stopPropagation()`. */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Any other ARIA attribute — `aria-describedby`, `aria-expanded`, `aria-controls`,\n   *  `aria-haspopup` — reaches the chip's interactive element. */\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  /** A test id, a `data-tour` anchor, or any other data attribute. */\n  [key: `data-${string}`]: unknown;\n  id?: string;\n  /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */\n  title?: string;\n}\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. That is why the outer element is not always\n * the interactive one, and why the focus ring is drawn on the body rather than the\n * wrapper.\n */\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\n  {\n    children,\n    tone = \"neutral\",\n    size = \"md\",\n    icon: Icon,\n    selected = false,\n    href,\n    onClick,\n    onRemove,\n    removeLabel,\n    disabled = false,\n    className,\n    tabIndex,\n    role,\n    onKeyDown,\n    onFocus,\n    ...rest\n  },\n  ref,\n) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const s = SIZE[size];\n  const palette = TONE[tone];\n  const interactive = !!href || !!onClick;\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    selected ? palette.selected : palette.idle,\n    interactive && !disabled && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    disabled && \"cursor-default opacity-50\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={\n        typeof children === \"string\" && children\n          ? common.fieldValue(common.remove, children)\n          : common.remove\n      }\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        onRemove();\n      }}\n      disabled={disabled}\n      className={cn(\n        \"-mr-0.5 ml-0.5 shrink-0 rounded-full p-0.5 transition-colors\",\n        \"hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        disabled && \"pointer-events-none\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    const link = (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        className={cn(look, remove && \"pr-1.5\")}\n        {...rest}\n      >\n        {body}\n        {!remove && null}\n      </a>\n    );\n    return remove ? (\n      <span className=\"inline-flex items-center\">\n        {link}\n        {remove}\n      </span>\n    ) : (\n      link\n    );\n  }\n\n  if (onClick) {\n    const button = (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-pressed={selected}\n        className={cn(look, remove && \"pr-1.5\")}\n        {...rest}\n      >\n        {body}\n      </button>\n    );\n    return remove ? (\n      <span className=\"inline-flex items-center\">\n        {button}\n        {remove}\n      </span>\n    ) : (\n      button\n    );\n  }\n\n  return (\n    <span\n      ref={ref as React.Ref<HTMLSpanElement>}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n});\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\nexport const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels = {\n  added: (v) => `${v} added`,\n  removed: (v) => `${v} removed`,\n  remove: \"Remove\",\n  atLimit: (max) => `Limit of ${max} reached`,\n  duplicate: (v) => `${v} is already in the list`,\n};\n\nexport function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels {\n  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;\n}\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field. Without one, name the field with\n   *  `aria-label`. */\n  label?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit\n   * now uses. Still honoured, and still second to `aria-label` when both are given.\n   */\n  ariaLabel?: string;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: Partial<ChipInputLabels>;\n  className?: string;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  ariaLabel,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English — the same order\n  // `resolveChipInputLabels` gives outside a provider.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const isInvalid = invalid || !!error;\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Escape\" && draft) {\n      e.preventDefault();\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    if (e.key === \"ArrowLeft\" && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (e.key === \"ArrowRight\") {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-[var(--text-secondary)]\">\n          {label}\n        </label>\n      )}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"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\",\n          \"focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]\",\n          disabled && \"cursor-default bg-[var(--bg-surface-2)]\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two. Failing that, the DOM spelling wins and\n          // the deprecated `ariaLabel` is the fallback.\n          aria-label={label ? undefined : (ariaLabelAttr ?? ariaLabel)}\n          aria-describedby={error ? errorId : undefined}\n          aria-invalid={isInvalid || undefined}\n          className=\"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\"\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {error && (\n        <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Chip"]}
+{"version":3,"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * A chip: a compact pill carrying one value.\n *\n * Three jobs, deliberately one component. A chip can be inert (a tag on a row), a link\n * (a jump to a section), or a toggle (a filter that is on or off) — and the difference is\n * which prop you pass, not which component you pick. Keeping them together is what stops\n * an app growing three near-identical pills that drift apart; it is the shape this kit\n * already uses for `Button`, which is a link when it is given an href.\n *\n * A chip is not a `Button`. It is smaller, it is rounded to a pill, and it reads as a\n * VALUE rather than as an action — which matters because a row of eight buttons says\n * \"choose one of eight things to do\" and a row of eight chips says \"here are eight\n * things\". Using `Button` for both is the mistake this exists to prevent.\n */\n\nexport type ChipTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"danger\"\n  | \"warning\"\n  | \"success\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px. */\nexport type ChipSize = \"sm\" | \"md\" | \"lg\";\n\nconst TONE: Record<ChipTone, { idle: string; selected: string }> = {\n  neutral: {\n    idle: \"border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-secondary)]\",\n    selected: \"border-[var(--border-strong)] bg-[var(--bg-active)] text-[var(--text-primary)]\",\n  },\n  brand: {\n    idle: \"border-[var(--border)] bg-[var(--brand-bg)] text-[var(--brand-muted)]\",\n    selected: \"border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]\",\n  },\n  danger: {\n    idle: \"border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)]\",\n    selected: \"border-[var(--danger)] bg-[var(--danger)] text-[var(--danger-contrast)]\",\n  },\n  warning: {\n    idle: \"border-[var(--warning-border)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n    selected: \"border-[var(--warning)] bg-[var(--warning-bg)] text-[var(--warning)]\",\n  },\n  success: {\n    idle: \"border-[var(--success-border)] bg-[var(--success-bg)] text-[var(--success)]\",\n    selected: \"border-[var(--success)] bg-[var(--success-bg)] text-[var(--success)]\",\n  },\n  info: {\n    idle: \"border-[var(--info-border)] bg-[var(--info-bg)] text-[var(--info)]\",\n    selected: \"border-[var(--info)] bg-[var(--info-bg)] text-[var(--info)]\",\n  },\n  // The money pair (Keksdose's direction toggle). Only the TEXT and the BORDER carry\n  // the tint, on the neutral chip's own surfaces: the money tokens are chosen for text\n  // contrast, and a filled amber pill beside an amber figure reads as one smear.\n  // `border-current` takes its hue from the text, so the two cannot drift apart.\n  income: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-income)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-income)]\",\n  },\n  expense: {\n    idle: \"border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]\",\n    selected: \"border-current bg-[var(--bg-active)] text-[var(--money-expense)]\",\n  },\n};\n\n/**\n * `body` is the whole pill when the chip is ONE element. When a link or a button also has\n * a dismiss control, the pill is a wrapper holding two siblings (see the note on\n * {@link Chip}): `split` is then the interactive part's own padding — the full start\n * inset, a short end one before the ×; `tail` is the wrapper's end inset after the ×.\n */\nconst SIZE: Record<\n  ChipSize,\n  { body: string; split: string; tail: string; icon: string; remove: string }\n> = {\n  sm: {\n    body: \"gap-1 px-2 py-0.5 text-xs\",\n    split: \"gap-1 ps-2 pe-1 py-0.5 text-xs\",\n    tail: \"pe-1.5\",\n    icon: \"size-3\",\n    remove: \"size-3\",\n  },\n  md: {\n    body: \"gap-1.5 px-2.5 py-1 text-sm\",\n    split: \"gap-1.5 ps-2.5 pe-1.5 py-1 text-sm\",\n    tail: \"pe-2\",\n    icon: \"size-3.5\",\n    remove: \"size-3.5\",\n  },\n  lg: {\n    body: \"min-h-11 gap-2 px-4 py-2 text-sm\",\n    split: \"min-h-11 gap-2 ps-4 pe-2 py-2 text-sm\",\n    tail: \"min-h-11 pe-3.5\",\n    icon: \"size-4\",\n    remove: \"size-4\",\n  },\n};\n\nconst CHIP_PILL = \"inline-flex max-w-full items-center rounded-full border transition-colors\";\n// `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the\n// ChipInput moves focus onto one after a removal) and a ring that appears on a\n// pointer click reads as a stuck selection.\nconst CHIP_RING =\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\nconst CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;\n\ninterface ChipBaseProps {\n  children: ReactNode;\n  tone?: ChipTone;\n  size?: ChipSize;\n  icon?: LucideIcon;\n  /**\n   * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a\n   * toggle.\n   *\n   * On an ON/OFF toggle, keep the LABEL the same in both states and let `selected`\n   * carry the state. A label that flips with it (\"Skip this month\" / \"Ask again this\n   * month\") is announced together with \"pressed\", and then says the opposite of what\n   * it does.\n   *\n   * A control that switches between two NAMED states (outflow ⇄ inflow) is not a\n   * toggle but an ACTION button: leave `selected` out, let the visible label and the\n   * tone follow the state (\"− Outflow\" / \"+ Inflow\"), and name the action in\n   * `aria-label` (\"Direction: outflow — tap for inflow\"). Without `selected` the chip\n   * reports no pressed state at all. A fixed label there contradicts the figure beside\n   * it — \"+ Outflow\" in green next to an inflow (keksdose #417).\n   */\n  selected?: boolean;\n  /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */\n  onRemove?: () => void;\n  /** Accessible name for the dismiss button. Default: `common.remove` from the\n   *  {@link UiKitProvider}, else \"Remove\". */\n  removeLabel?: string;\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Roving focus, for a container that manages a row of chips (see {@link ChipInput}).\n   * A chip with no `href`/`onClick` is inert and unfocusable by default; give it a\n   * `tabIndex` and a `role` and it becomes the thing arrow keys move between.\n   */\n  tabIndex?: number;\n  role?: string;\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  onFocus?: () => void;\n  /** Accessible name, when the visible text is not the whole story. */\n  \"aria-label\"?: string;\n  /** Any other ARIA attribute — `aria-describedby`, `aria-expanded`, `aria-controls`,\n   *  `aria-haspopup` — reaches the chip's interactive element. */\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  /** A test id, a `data-tour` anchor, or any other data attribute. */\n  [key: `data-${string}`]: unknown;\n  id?: string;\n  /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */\n  title?: string;\n}\n\n/**\n * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were\n * accepted and `onClick` was silently dropped whenever `href` was set; a link that must\n * also run code wants a router `Link`-style `onClick` on the anchor, which is a different\n * component's job.\n */\nexport type ChipProps = ChipBaseProps &\n  (\n    | {\n        /** Renders the chip as a link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Renders the chip as a toggle button. Mutually exclusive with `href`. Receives\n         *  the click, so a chip inside a clickable row can `stopPropagation()`. */\n        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n      }\n  );\n\n/**\n * Note on `onRemove` with `href`/`onClick`: a button cannot be nested inside a button or\n * a link, so when both are present the chip renders a wrapper holding TWO siblings — the\n * interactive body and the dismiss control. The WRAPPER is the visual pill (border, tone,\n * `className`) and the two sit inside it, so the × reads as part of the chip; the body's\n * focus ring is drawn on the body alone, and `ref`, `id` and the ARIA props still reach\n * the body — the interactive element.\n */\nexport const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(\n  {\n    children,\n    tone = \"neutral\",\n    size = \"md\",\n    icon: Icon,\n    selected,\n    href,\n    onClick,\n    onRemove,\n    removeLabel,\n    disabled = false,\n    className,\n    tabIndex,\n    role,\n    onKeyDown,\n    onFocus,\n    ...rest\n  },\n  ref,\n) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { remove: removeLabel });\n  const s = SIZE[size];\n  const palette = TONE[tone];\n  const interactive = !!href || !!onClick;\n  const surface = cn(\n    selected ? palette.selected : palette.idle,\n    disabled && \"cursor-default opacity-50\",\n  );\n  const look = cn(\n    CHIP_BASE,\n    s.body,\n    surface,\n    interactive && !disabled && \"cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon className={cn(s.icon, \"shrink-0\")} aria-hidden />}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </>\n  );\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      // The name carries WHAT is being removed, not just \"Remove\" — a screen-reader user\n      // tabbing a row of eight dismiss buttons otherwise hears the same word eight times\n      // with no way to tell which one they are on.\n      // Composed through `common.fieldValue` because the punctuation between the two\n      // halves is the language's, not ours. A chip whose content is not plain text\n      // has no value to name, and gets the bare verb rather than a dangling colon.\n      aria-label={\n        typeof children === \"string\" && children\n          ? common.fieldValue(common.remove, children)\n          : common.remove\n      }\n      onClick={(e) => {\n        // The chip may itself be a link; removing it must not also follow it.\n        e.preventDefault();\n        e.stopPropagation();\n        onRemove();\n      }}\n      disabled={disabled}\n      className={cn(\n        // Logical margins: the × sits at the END of the pill, which is the left in RTL.\n        \"-me-0.5 ms-0.5 shrink-0 rounded-full p-0.5 transition-colors\",\n        \"hover:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        disabled && \"pointer-events-none\",\n      )}\n    >\n      <X className={s.remove} aria-hidden />\n    </button>\n  ) : null;\n\n  // ── The combined shape: one pill, two interactive siblings inside it.\n  const pill = (inner: ReactNode) => (\n    <span className={cn(CHIP_PILL, s.tail, surface, className)}>\n      {inner}\n      {remove}\n    </span>\n  );\n  // The body inside a pill: no border or surface of its own (the pill has them), a\n  // hover wash in the text's own hue so it works on every tone.\n  const inner = cn(\n    \"inline-flex min-w-0 items-center self-stretch rounded-full transition-colors\",\n    CHIP_RING,\n    s.split,\n    !disabled && \"cursor-pointer hover:bg-current/10\",\n    disabled && \"cursor-default\",\n  );\n\n  // ── The three shapes.\n  if (href && !disabled) {\n    const link = (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={href}\n        aria-current={selected ? \"true\" : undefined}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </a>\n    );\n    return remove ? pill(link) : link;\n  }\n\n  if (onClick) {\n    const button = (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        // Only when `selected` is PASSED: a chip with `onClick` and no `selected` is an\n        // action button (it does something), not a toggle (it is on or off), and\n        // announcing it \"not pressed\" would claim a state it does not have.\n        aria-pressed={selected}\n        className={remove ? inner : look}\n        {...rest}\n      >\n        {body}\n      </button>\n    );\n    return remove ? pill(button) : button;\n  }\n\n  return (\n    <span\n      ref={ref as React.Ref<HTMLSpanElement>}\n      className={look}\n      tabIndex={tabIndex}\n      role={role}\n      onKeyDown={onKeyDown}\n      onFocus={onFocus}\n      {...rest}\n    >\n      {body}\n      {remove}\n    </span>\n  );\n});\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\nexport const DEFAULT_CHIP_INPUT_LABELS: ChipInputLabels = {\n  added: (v) => `${v} added`,\n  removed: (v) => `${v} removed`,\n  remove: \"Remove\",\n  atLimit: (max) => `Limit of ${max} reached`,\n  duplicate: (v) => `${v} is already in the list`,\n};\n\nexport function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels {\n  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;\n}\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field. Without one, name the field with\n   *  `aria-label`. */\n  label?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling the rest of this kit\n   * now uses. Still honoured, and still second to `aria-label` when both are given.\n   */\n  ariaLabel?: string;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: Partial<ChipInputLabels>;\n  className?: string;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  ariaLabel,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English — the same order\n  // `resolveChipInputLabels` gives outside a provider.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  // The last refusal, shown under the field until the next edit. The live region alone\n  // told only a screen-reader user why Enter did nothing; everyone else saw the text\n  // simply stay put.\n  const [rejected, setRejected] = useState<string | null>(null);\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const rejectedId = `${id}-rejected`;\n  const isInvalid = invalid || !!error;\n  const describedBy = [error ? errorId : null, rejected ? rejectedId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    setRejected(rejection);\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    setRejected(null);\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Escape\" && draft) {\n      e.preventDefault();\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    // ←/→ follow the reading direction, not DOM order: in RTL the previous chip is to\n    // the RIGHT, and ArrowLeft moves on towards the input.\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step === -1 && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (step === 1) {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-[var(--text-secondary)]\">\n          {label}\n        </label>\n      )}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"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\",\n          \"focus-within:border-[var(--brand)] focus-within:ring-1 focus-within:ring-[var(--brand)]\",\n          disabled && \"cursor-default bg-[var(--bg-surface-2)]\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n            setRejected(null);\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two. Failing that, the DOM spelling wins and\n          // the deprecated `ariaLabel` is the fallback.\n          aria-label={label ? undefined : (ariaLabelAttr ?? ariaLabel)}\n          aria-describedby={describedBy || undefined}\n          aria-invalid={isInvalid || !!rejected || undefined}\n          className=\"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\"\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {error && (\n        <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n      {rejected && (\n        <p id={rejectedId} className=\"text-xs text-[var(--danger)]\" data-chip-input-rejected=\"\">\n          {rejected}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Chip","inner"]}

package/dist/components/choice-card.d.ts

@@ -46,6 +46,14 @@ interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "t
     onCheckedChange?: (checked: boolean) => void;
     /** Classes for the `<input>`. `className` styles the card. */
     inputClassName?: string;
+    /**
+     * Must be ticked to submit. Reaches the `<input>` as the native `required` (a
+     * `<form>` refuses to submit without it, a screen reader announces "required"),
+     * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s
+     * contract, down to writing the title WITHOUT a literal "*". Inside a
+     * {@link ChoiceCardGroup} the star goes on the legend instead, once.
+     */
+    required?: boolean;
 }
 declare const ChoiceCard: react.ForwardRefExoticComponent<ChoiceCardProps & react.RefAttributes<HTMLInputElement>>;
 interface ChoiceCardOption<T extends string> {
@@ -71,7 +79,16 @@ interface ChoiceCardGroupBaseProps<T extends string> {
     /** What is wrong with the answer as a whole. Rendered under the cards and attached
      *  to the fieldset. */
     error?: ReactNode;
-    /** Radio mode only: marks the first input `required`, which is how a radio set is. */
+    /**
+     * An answer is needed. Draws the required star after the `legend` (none without
+     * one — the name then comes from `aria-label`, which has nowhere to draw it), and
+     * reaches the inputs as the native `required`:
+     *  - radios: every radio of the set, which is how HTML marks a radio group — the
+     *    group is satisfied by any one of them, and each announces "required";
+     *  - checkboxes: every box while NONE is ticked, dropped from all of them once one
+     *    is — "at least one", which checkboxes cannot say natively. A form then refuses
+     *    to submit an empty set, and nothing is left demanding a second box.
+     */
     required?: boolean;
 }
 /** One of the set: radios. `value` is `null` while nothing is chosen. */

package/dist/components/choice-card.js

@@ -1,9 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useRef } from "react";
+import { createContext, forwardRef, useCallback, useContext, 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 InGroupContext = createContext(false);
+function RequiredMark() {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-[var(--danger)]", children: "*" });
+}
 const CARD = "flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
 const CARD_DISABLED = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
 const CARD_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] has-[:checked]:border-[var(--danger-border)] has-[:checked]:ring-[var(--danger-border)]";
@@ -24,8 +28,10 @@ const ChoiceCard = forwardRef(function ChoiceCard2({
   inputClassName,
   id,
   disabled,
+  required,
   ...rest
 }, ref) {
+  const inGroup = useContext(InGroupContext);
   const generated = useId();
   const inputId = id ?? generated;
   const titleId = `${inputId}-title`;
@@ -59,6 +65,7 @@ const ChoiceCard = forwardRef(function ChoiceCard2({
               ref: setRef,
               id: inputId,
               disabled,
+              required,
               ...rest,
               type,
               "aria-labelledby": rest["aria-labelledby"] ?? titleId,
@@ -98,12 +105,15 @@ const ChoiceCard = forwardRef(function ChoiceCard2({
         ] }),
         Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]" }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "span",
             {
               id: titleId,
               className: "block select-none text-sm font-medium leading-5 text-[var(--text-primary)]",
-              children: title
+              children: [
+                title,
+                required && !inGroup && /* @__PURE__ */ jsx(RequiredMark, {})
+              ]
             }
           ),
           showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-[var(--text-muted)]", children: description }),
@@ -131,7 +141,7 @@ function ChoiceCardGroup(props) {
       props.onChange(v);
     }
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(InGroupContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(
     "fieldset",
     {
       "aria-label": props["aria-label"],
@@ -139,8 +149,11 @@ function ChoiceCardGroup(props) {
       disabled,
       className: "min-w-0",
       children: [
-        legend !== void 0 && /* @__PURE__ */ jsx("legend", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: legend }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 sm:grid-cols-2", className), children: options.map((o, i) => /* @__PURE__ */ jsx(
+        legend !== void 0 && /* @__PURE__ */ jsxs("legend", { className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: [
+          legend,
+          required && /* @__PURE__ */ jsx(RequiredMark, {})
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 sm:grid-cols-2", className), children: options.map((o) => /* @__PURE__ */ jsx(
           ChoiceCard,
           {
             type: props.multiple ? "checkbox" : "radio",
@@ -151,7 +164,7 @@ function ChoiceCardGroup(props) {
             icon: o.icon,
             disabled: o.disabled,
             invalid: showError,
-            required: !props.multiple && required && i === 0 ? true : void 0,
+            required: required && (!props.multiple || props.value.length === 0) ? true : void 0,
             checked: isChecked(o.value),
             onCheckedChange: (on) => toggle(o.value, on),
             className: cardClassName
@@ -161,7 +174,7 @@ function ChoiceCardGroup(props) {
         showError && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: error })
       ]
     }
-  );
+  ) });
 }
 export {
   ChoiceCard,

package/dist/components/choice-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useRef } from \"react\";\nimport type { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n  /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n   *  a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n  type?: ChoiceCardType;\n  /** The option's name — the input's accessible name. */\n  title: ReactNode;\n  /** A line or two under the title. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n  indeterminate?: boolean;\n  /** Paints the card and sets `aria-invalid` together. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words. Rendered in the card and attached with\n   *  `aria-describedby`; implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>`. `className` styles the card. */\n  inputClassName?: string;\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n  \"flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors \" +\n  \"hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] \" +\n  \"has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] \" +\n  // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n  // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n  // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n  // order, and the loser would be the focus mark. Offset, so the two never merge.\n  \"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] \" +\n  // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n  \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\nconst CARD_INVALID =\n  \"border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] has-[:checked]:border-[var(--danger-border)] has-[:checked]:ring-[var(--danger-border)]\";\n\nconst BOX =\n  \"peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors \" +\n  \"checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded-[4px] checked:bg-[var(--brand)]\";\n// A radio's dot is its BORDER: a 5px brand border round a surface-coloured 4px\n// centre. No glyph to lay over it, and it scales with the box.\nconst RADIO = \"rounded-full checked:border-[5px]\";\n\nexport const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(\n  {\n    type = \"checkbox\",\n    title,\n    description,\n    icon: Icon,\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 titleId = `${inputId}-title`;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showDescription = hasMessage(description);\n  const showError = hasMessage(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const mixed = type === \"checkbox\" && indeterminate;\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, as Checkbox does: a click clears the DOM property.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = mixed;\n  });\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n    >\n      {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n      <span className=\"relative flex h-5 shrink-0 items-center\">\n        <input\n          ref={setRef}\n          id={inputId}\n          disabled={disabled}\n          {...rest}\n          type={type}\n          aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\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(\n            BOX,\n            type === \"radio\" ? RADIO : CHECKBOX,\n            mixed && \"border-[var(--brand)] bg-[var(--brand)]\",\n            inputClassName,\n          )}\n        />\n        {type === \"checkbox\" &&\n          (mixed ? (\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      {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span\n          id={titleId}\n          // `select-none`: a double-click to toggle twice would otherwise select the words.\n          className=\"block select-none text-sm font-medium leading-5 text-[var(--text-primary)]\"\n        >\n          {title}\n        </span>\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=\"mt-1 block text-[11px] leading-tight text-[var(--danger)]\">\n            {error}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nChoiceCard.displayName = \"ChoiceCard\";\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n  value: T;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ChoiceCardProps[\"icon\"];\n  disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n  options: ChoiceCardOption<T>[];\n  /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n   *  what names the group. Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  \"aria-label\"?: string;\n  /** Shared by every input — what a plain form submits under. Generated if omitted. */\n  name?: string;\n  /** Classes for the card grid. Default: one column, two from `sm` up. */\n  className?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n  disabled?: boolean;\n  /** What is wrong with the answer as a whole. Rendered under the cards and attached\n   *  to the fieldset. */\n  error?: ReactNode;\n  /** Radio mode only: marks the first input `required`, which is how a radio set is. */\n  required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple?: false;\n  value: T | null;\n  onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple: true;\n  value: T[];\n  onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n  | ChoiceCardSingleProps<T>\n  | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n  const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n  const generated = useId();\n  const groupName = name ?? generated;\n  const errorId = `${generated}-error`;\n  const showError = hasMessage(error);\n\n  const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n  const toggle = (v: T, on: boolean) => {\n    if (props.multiple) {\n      const next = new Set(props.value);\n      if (on) next.add(v);\n      else next.delete(v);\n      props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n    } else if (on) {\n      props.onChange(v);\n    }\n  };\n\n  return (\n    <fieldset\n      aria-label={props[\"aria-label\"]}\n      aria-describedby={showError ? errorId : undefined}\n      disabled={disabled}\n      className=\"min-w-0\"\n    >\n      {legend !== undefined && (\n        <legend className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">{legend}</legend>\n      )}\n      <div className={cn(\"grid gap-2 sm:grid-cols-2\", className)}>\n        {options.map((o, i) => (\n          <ChoiceCard\n            key={o.value}\n            type={props.multiple ? \"checkbox\" : \"radio\"}\n            name={groupName}\n            value={o.value}\n            title={o.title}\n            description={o.description}\n            icon={o.icon}\n            disabled={o.disabled}\n            invalid={showError}\n            required={!props.multiple && required && i === 0 ? true : undefined}\n            checked={isChecked(o.value)}\n            onCheckedChange={(on) => toggle(o.value, on)}\n            className={cardClassName}\n          />\n        ))}\n      </div>\n      {showError && (\n        <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"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","names":["ChoiceCard"]}
+{"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n  /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n   *  a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n  type?: ChoiceCardType;\n  /** The option's name — the input's accessible name. */\n  title: ReactNode;\n  /** A line or two under the title. Attached with `aria-describedby`. */\n  description?: ReactNode;\n  /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n  indeterminate?: boolean;\n  /** Paints the card and sets `aria-invalid` together. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words. Rendered in the card and attached with\n   *  `aria-describedby`; implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>`. `className` styles the card. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n   * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n   * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n   * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n   * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n   */\n  required?: boolean;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n *  cards inside it draw none of their own. Private — not a prop a caller could set\n *  by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n *  announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n  return (\n    <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n      *\n    </span>\n  );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n  \"flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors \" +\n  \"hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] \" +\n  \"has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] \" +\n  // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n  // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n  // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n  // order, and the loser would be the focus mark. Offset, so the two never merge.\n  \"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] \" +\n  // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n  \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\nconst CARD_INVALID =\n  \"border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] has-[:checked]:border-[var(--danger-border)] has-[:checked]:ring-[var(--danger-border)]\";\n\nconst BOX =\n  \"peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors \" +\n  \"checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded-[4px] checked:bg-[var(--brand)]\";\n// A radio's dot is its BORDER: a 5px brand border round a surface-coloured 4px\n// centre. No glyph to lay over it, and it scales with the box.\nconst RADIO = \"rounded-full checked:border-[5px]\";\n\nexport const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(\n  {\n    type = \"checkbox\",\n    title,\n    description,\n    icon: Icon,\n    indeterminate = false,\n    invalid,\n    error,\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    ...rest\n  },\n  ref,\n) {\n  const inGroup = useContext(InGroupContext);\n  const generated = useId();\n  const inputId = id ?? generated;\n  const titleId = `${inputId}-title`;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showDescription = hasMessage(description);\n  const showError = hasMessage(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const mixed = type === \"checkbox\" && indeterminate;\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, as Checkbox does: a click clears the DOM property.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = mixed;\n  });\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n    >\n      {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n      <span className=\"relative flex h-5 shrink-0 items-center\">\n        <input\n          ref={setRef}\n          id={inputId}\n          disabled={disabled}\n          required={required}\n          {...rest}\n          type={type}\n          aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\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(\n            BOX,\n            type === \"radio\" ? RADIO : CHECKBOX,\n            mixed && \"border-[var(--brand)] bg-[var(--brand)]\",\n            inputClassName,\n          )}\n        />\n        {type === \"checkbox\" &&\n          (mixed ? (\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      {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span\n          id={titleId}\n          // `select-none`: a double-click to toggle twice would otherwise select the words.\n          className=\"block select-none text-sm font-medium leading-5 text-[var(--text-primary)]\"\n        >\n          {title}\n          {required && !inGroup && <RequiredMark />}\n        </span>\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=\"mt-1 block text-[11px] leading-tight text-[var(--danger)]\">\n            {error}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nChoiceCard.displayName = \"ChoiceCard\";\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n  value: T;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ChoiceCardProps[\"icon\"];\n  disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n  options: ChoiceCardOption<T>[];\n  /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n   *  what names the group. Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  \"aria-label\"?: string;\n  /** Shared by every input — what a plain form submits under. Generated if omitted. */\n  name?: string;\n  /** Classes for the card grid. Default: one column, two from `sm` up. */\n  className?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n  disabled?: boolean;\n  /** What is wrong with the answer as a whole. Rendered under the cards and attached\n   *  to the fieldset. */\n  error?: ReactNode;\n  /**\n   * An answer is needed. Draws the required star after the `legend` (none without\n   * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n   * reaches the inputs as the native `required`:\n   *  - radios: every radio of the set, which is how HTML marks a radio group — the\n   *    group is satisfied by any one of them, and each announces \"required\";\n   *  - checkboxes: every box while NONE is ticked, dropped from all of them once one\n   *    is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n   *    to submit an empty set, and nothing is left demanding a second box.\n   */\n  required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple?: false;\n  value: T | null;\n  onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n  multiple: true;\n  value: T[];\n  onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n  | ChoiceCardSingleProps<T>\n  | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n  const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n  const generated = useId();\n  const groupName = name ?? generated;\n  const errorId = `${generated}-error`;\n  const showError = hasMessage(error);\n\n  const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n  const toggle = (v: T, on: boolean) => {\n    if (props.multiple) {\n      const next = new Set(props.value);\n      if (on) next.add(v);\n      else next.delete(v);\n      props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n    } else if (on) {\n      props.onChange(v);\n    }\n  };\n\n  return (\n    <InGroupContext.Provider value={true}>\n      <fieldset\n        aria-label={props[\"aria-label\"]}\n        aria-describedby={showError ? errorId : undefined}\n        disabled={disabled}\n        className=\"min-w-0\"\n      >\n        {legend !== undefined && (\n          <legend className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n            {legend}\n            {required && <RequiredMark />}\n          </legend>\n        )}\n        <div className={cn(\"grid gap-2 sm:grid-cols-2\", className)}>\n          {options.map((o) => (\n            <ChoiceCard\n              key={o.value}\n              type={props.multiple ? \"checkbox\" : \"radio\"}\n              name={groupName}\n              value={o.value}\n              title={o.title}\n              description={o.description}\n              icon={o.icon}\n              disabled={o.disabled}\n              invalid={showError}\n              required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n              checked={isChecked(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n      </fieldset>\n    </InGroupContext.Provider>\n  );\n}\n"],"mappings":"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","names":["ChoiceCard"]}

package/dist/components/combobox-core.d.ts

@@ -3,6 +3,20 @@ import { ReactNode, RefObject, Dispatch, SetStateAction, ComponentPropsWithoutRe
 import { AnchorRect } from '../hooks/use-anchored-rect.js';
 import { AnchoredPanel } from '../hooks/use-anchored-panel.js';
 
+/**
+ * What an entity picker hands `onChange` when it is cleared — `clearValue` on
+ * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.
+ *
+ * A closed set rather than any value, on purpose: every member is something no
+ * option can be (an option's value is a `string | number`, and `""` is never a real
+ * id), so the picker can also READ it back — a field whose `value` is the clear
+ * value shows as empty, with no clear button, exactly as `null` does. An arbitrary
+ * sentinel could collide with an id and would make that read ambiguous.
+ *
+ * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as
+ * the default and emit `null` — the one outcome the caller had asked not to get.
+ */
+type ComboClearValue = null | "";
 interface ComboOption<V extends string | number> {
     value: V;
     label: string;
@@ -16,7 +30,52 @@ interface ComboOption<V extends string | number> {
      * Searchable like `sublabel`.
      */
     group?: string;
+    /**
+     * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the
+     * arrow keys, and a click or Enter on it does nothing. For a row whose existence is
+     * the information — a write-locked result, an account that is closed — where
+     * leaving it out would read as "there is no such thing". Say WHY in `sublabel`: a
+     * hover tooltip is the one explanation a phone cannot show.
+     *
+     * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel
+     * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already
+     * chosen disabled option stays chosen — the row only refuses to be toggled.
+     */
+    disabled?: boolean;
 }
+/** A row the user may take — present and not {@link ComboOption.disabled}. */
+declare const isOptionEnabled: (o: {
+    disabled?: boolean;
+} | undefined) => boolean;
+/**
+ * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a
+ * disabled row is passed over, as the APG allows. Stays on `from` at the end of the
+ * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is
+ * not a row and there is nothing to step to.
+ */
+declare function stepEnabled(rows: readonly {
+    disabled?: boolean;
+}[], from: number, dir: 1 | -1): number;
+/** `i` when that row is takeable, else the nearest takeable one after it, else
+ *  before it, else `-1`. For a highlight that starts on a fixed index (the panel
+ *  pickers open on row 0) and must never rest on a disabled row. */
+declare function settleEnabled(rows: readonly {
+    disabled?: boolean;
+}[], i: number): number;
+/** Classes a disabled row adds over its normal ones — dimmed, no hover, the
+ *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */
+declare const DISABLED_ROW_CLASS = "cursor-not-allowed opacity-50 hover:bg-transparent";
+/**
+ * The family's floating label, as a real `<label for>` (lenkbank): the input is then
+ * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks
+ * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which
+ * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those
+ * compose their own "label: value" name. `pointer-events-none` (from the class)
+ * keeps a press on it landing on the field under it, as before.
+ */
+declare function ComboboxFieldLabel({ htmlFor, className, children, ...rest }: ComponentPropsWithoutRef<"label"> & {
+    htmlFor: string;
+}): react.JSX.Element;
 /**
  * Where a combobox's rows come from, and how a query narrows them. Shared by the
  * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so
@@ -161,7 +220,7 @@ interface ComboboxPanelProps<V extends string | number> extends ComponentPropsWi
 }
 /**
  * The portalled dropdown (search header + result rows + optional create row)
- * shared by the single- and multi-value comboboxes. Left-aligned to the trigger
+ * shared by the single- and multi-value comboboxes. Start-aligned to the trigger
  * and sized to its width; `multi` swaps the trailing check for a leading
  * checkbox. `onChoose` decides whether to close (single) or stay open (multi).
  *
@@ -187,4 +246,4 @@ interface ComboboxPanelProps<V extends string | number> extends ComponentPropsWi
  */
 declare function ComboboxPanel<V extends string | number>({ core, listboxId, searchPlaceholder, emptyLabel, multi, isSelected, onChoose, showCreate, onCreate, createContent, sheetTitle, closeLabel, loadErrorLabel, className, style, ...rest }: ComboboxPanelProps<V>): react.JSX.Element | null;
 
-export { type ComboOption, type ComboboxCore, type ComboboxCoreOptions, ComboboxPanel, type ComboboxPanelProps, type OptionSource, type OptionSourceOptions, SUGGESTION_LIST_CLASS, suggestionRowClass, useActiveOptionScroll, useComboboxCore, useComboboxFieldError, useOptionSource };
+export { type ComboClearValue, type ComboOption, type ComboboxCore, type ComboboxCoreOptions, ComboboxFieldLabel, ComboboxPanel, type ComboboxPanelProps, DISABLED_ROW_CLASS, type OptionSource, type OptionSourceOptions, SUGGESTION_LIST_CLASS, isOptionEnabled, settleEnabled, stepEnabled, suggestionRowClass, useActiveOptionScroll, useComboboxCore, useComboboxFieldError, useOptionSource };