@krizaka/ui 2.2.0 → 2.4.0

package/dist/chunk-XUMJA5ZI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/combobox/combobox.tsx"],"sourcesContent":["// Client. The ARIA 1.2 combobox (`../listbox`): a text input that filters a listbox, the focus never leaves the input\n// (`aria-activedescendant`), the number of results announced in a polite live region. Static options filtered here,\n// or `onSearch` (debounced, the previous request aborted) for a server's; one value or several (chips, Backspace\n// removes the last), and new values created from the query when `creatable`.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Chip } from \"../chip\";\nimport { CheckGlyph, ChevronGlyph, CloseGlyph, PlusGlyph } from \"../glyphs\";\nimport { useListbox } from \"../listbox\";\nimport { useControllable, useDebouncedCallback } from \"../media\";\n\nexport const combobox = tv({\n  slots: {\n    root: \"relative flex w-full flex-col gap-1.5\",\n    label: \"text-xs font-semibold text-fg-secondary\",\n    control:\n      \"flex min-h-11 w-full flex-wrap items-center gap-1.5 rounded-lg border border-border-default bg-surface-2 py-1.5 pl-2 pr-1 text-sm text-fg \" +\n      \"transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring \" +\n      \"data-[invalid]:border-danger data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n    input: \"h-8 min-w-24 flex-1 bg-transparent px-1 text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed\",\n    icon:\n      \"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    list: \"absolute inset-x-0 top-full z-50 mt-1 max-h-64 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg\",\n    option:\n      \"flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg \" +\n      \"data-[active]:bg-surface-3 aria-disabled:cursor-not-allowed aria-disabled:opacity-40\",\n    check: \"h-4 w-4 shrink-0 text-fg-accent\",\n    description: \"block text-xs text-fg-secondary\",\n    status: \"px-2.5 py-3 text-sm text-fg-secondary\",\n    hint: \"text-xs text-fg-secondary\",\n    error: \"flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger\",\n  },\n});\n\nexport type ComboboxOption = {\n  /** What the app stores. */\n  value: string;\n  /** What the person reads, passed translated. */\n  label: string;\n  /** A second line under the label. */\n  description?: string;\n  /** Shown but not choosable. */\n  disabled?: boolean;\n};\n\nexport type ComboboxLabels = {\n  /** No option matches (\"No results\"). */\n  empty: string;\n  /** While `onSearch` runs (\"Searching…\"). */\n  loading: string;\n  /** `onSearch` failed (\"Search unavailable\"). */\n  error: string;\n  /** The option that creates a value: `(query) => \"Create “\" + query + \"”\"`. */\n  create: (query: string) => string;\n  /** A chip's remove button: `(label) => \"Remove \" + label`. */\n  remove: (label: string) => string;\n  /** The button that empties a single choice (\"Clear\"). */\n  clear: string;\n  /** The button that opens the list (\"Show options\"). */\n  toggle: string;\n  /** Announced when the results change: `(n) => n + \" results\"`. */\n  results: (count: number) => string;\n};\n\nexport const comboboxLabels: ComboboxLabels = {\n  empty: \"No results\",\n  loading: \"Searching…\",\n  error: \"Search unavailable\",\n  create: (query) => `Create “${query}”`,\n  remove: (label) => `Remove ${label}`,\n  clear: \"Clear\",\n  toggle: \"Show options\",\n  results: (count) => (count === 1 ? \"1 result\" : `${count} results`),\n};\n\ntype BaseProps = {\n  /** The visible label of the field, passed translated (also its accessible name). */\n  label: string;\n  /** Hides the label visually, keeping it as the accessible name (a search bar with its own context). */\n  hideLabel?: boolean;\n  /** The options, filtered as the person types (by `filter`). */\n  options?: readonly ComboboxOption[];\n  /** Fetches the options for a query (debounced by `debounce`); the `signal` aborts when a newer query starts. */\n  onSearch?: (query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>;\n  /** The wait, in ms, between the last key and `onSearch`. Default 250. */\n  debounce?: number;\n  /** Whether an option matches a query. Default: its label contains the query, ignoring case and accents. */\n  filter?: (option: ComboboxOption, query: string) => boolean;\n  /** Offers to create the query as a new value when no option has that exact label. */\n  creatable?: boolean;\n  /** Turns a query into the created option (an id from the server…). Default `{ value: query, label: query }`. */\n  onCreate?: (query: string) => ComboboxOption;\n  /** Keys that create the query at once, as Enter does (`[\",\"]` for tags); a paste is split on them too. */\n  separators?: readonly string[];\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** A help text under the field. */\n  hint?: string;\n  /** An error under the field: marks it invalid and is read with it. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of a hidden input holding the value(s), for a plain `<form>` post. */\n  name?: string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ComboboxLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n  /** The id of the text input (default: generated). */\n  id?: string;\n};\n\ntype SingleProps = BaseProps & {\n  /** One value (default) or several. */\n  multiple?: false;\n  /** The chosen option (controlled), `null` for none. */\n  value?: ComboboxOption | null;\n  /** The chosen option at first, uncontrolled. */\n  defaultValue?: ComboboxOption | null;\n  /** Called with the chosen option, or `null` when it is cleared. */\n  onValueChange?: (value: ComboboxOption | null) => void;\n  /** Most options that can be chosen (several values only). */\n  maxSelected?: never;\n};\n\ntype MultipleProps = BaseProps & {\n  /** Several values, shown as chips. */\n  multiple: true;\n  /** The chosen options (controlled). */\n  value?: readonly ComboboxOption[];\n  /** The chosen options at first, uncontrolled. */\n  defaultValue?: readonly ComboboxOption[];\n  /** Called with every chosen option. */\n  onValueChange?: (value: ComboboxOption[]) => void;\n  /** Most options that can be chosen; the list stops offering more past it. */\n  maxSelected?: number;\n};\n\nexport type ComboboxProps = SingleProps | MultipleProps;\n\nconst fold = (text: string) => text.normalize(\"NFD\").replace(/\\p{Diacritic}/gu, \"\").toLowerCase();\nconst defaultFilter = (option: ComboboxOption, query: string) => fold(option.label).includes(fold(query.trim()));\n\ntype Item = { kind: \"option\"; option: ComboboxOption } | { kind: \"create\"; query: string };\n\n/** A text field that suggests, filters and completes: one value or several (chips), static or fetched, creatable. */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    label,\n    hideLabel,\n    options,\n    onSearch,\n    debounce = 250,\n    filter = defaultFilter,\n    creatable,\n    onCreate = (query: string) => ({ value: query, label: query }),\n    separators,\n    placeholder,\n    hint,\n    error,\n    disabled,\n    name,\n    labels: given,\n    className,\n    id: givenId,\n  } = props;\n  const labels = { ...comboboxLabels, ...given };\n  const s = combobox();\n  const autoId = React.useId();\n  const inputId = givenId ?? `${autoId}-input`;\n  const hintId = `${autoId}-hint`;\n  const errorId = `${autoId}-error`;\n  const multiple = props.multiple === true;\n\n  const [values, setValues] = useControllable<readonly ComboboxOption[]>(\n    props.value === undefined ? undefined : multiple ? (props.value as readonly ComboboxOption[]) : props.value ? [props.value as ComboboxOption] : [],\n    multiple ? ((props.defaultValue as readonly ComboboxOption[]) ?? []) : props.defaultValue ? [props.defaultValue as ComboboxOption] : [],\n    (next) => (multiple ? (props.onValueChange as ((v: ComboboxOption[]) => void) | undefined)?.([...next]) : (props.onValueChange as ((v: ComboboxOption | null) => void) | undefined)?.(next[0] ?? null)),\n  );\n  const single = multiple ? null : (values[0] ?? null);\n  const [query, setQuery] = React.useState(single?.label ?? \"\");\n  const [editing, setEditing] = React.useState(false);\n  const [open, setOpenState] = React.useState(false);\n  const [remote, setRemote] = React.useState<{ query: string; options: readonly ComboboxOption[]; state: \"idle\" | \"loading\" | \"error\" }>({ query: \"\", options: [], state: \"idle\" });\n  const request = React.useRef<AbortController | null>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  // The single choice's label shows in the input while the person is not typing.\n  const shownQuery = !multiple && !editing ? (single?.label ?? \"\") : query;\n  const searchQuery = editing ? query : \"\";\n\n  const search = useDebouncedCallback((text: string) => {\n    if (!onSearch) return;\n    request.current?.abort();\n    const controller = new AbortController();\n    request.current = controller;\n    onSearch(text, controller.signal).then(\n      (found) => !controller.signal.aborted && setRemote({ query: text, options: found, state: \"idle\" }),\n      () => !controller.signal.aborted && setRemote({ query: text, options: [], state: \"error\" }),\n    );\n  }, debounce);\n  React.useEffect(() => () => request.current?.abort(), []);\n\n  const setOpen = (next: boolean) => {\n    if (next && onSearch && remote.state === \"idle\" && remote.query !== searchQuery) {\n      setRemote((r) => ({ ...r, state: \"loading\" }));\n      search(searchQuery);\n    }\n    setOpenState(next);\n  };\n\n  const chosen = new Set(values.map((v) => v.value));\n  const source = onSearch ? remote.options : (options ?? []).filter((o) => !searchQuery.trim() || filter(o, searchQuery));\n  const full = multiple && props.maxSelected !== undefined && values.length >= props.maxSelected;\n  const trimmed = searchQuery.trim();\n  const exact = [...source, ...values].some((o) => fold(o.label) === fold(trimmed));\n  const items: Item[] = [\n    ...source.map((option) => ({ kind: \"option\" as const, option })),\n    ...(creatable && trimmed && !exact && !full ? [{ kind: \"create\" as const, query: trimmed }] : []),\n  ];\n  const isDisabled = (i: number) => {\n    const item = items[i];\n    if (!item) return true;\n    if (item.kind === \"create\") return false;\n    return Boolean(item.option.disabled) || (full && !chosen.has(item.option.value));\n  };\n\n  const commit = (option: ComboboxOption) => {\n    if (multiple) {\n      setValues(chosen.has(option.value) ? values.filter((v) => v.value !== option.value) : [...values, option]);\n      setQuery(\"\");\n      listbox.setActive(-1);\n    } else {\n      setValues([option]);\n      setQuery(option.label);\n      setEditing(false);\n      setOpenState(false);\n    }\n  };\n  const create = (text: string) => {\n    const clean = text.trim();\n    if (!clean || full) return;\n    const existing = [...source, ...values].find((o) => fold(o.label) === fold(clean));\n    if (multiple && existing && chosen.has(existing.value)) {\n      setQuery(\"\");\n      return;\n    }\n    commit(existing ?? onCreate(clean));\n  };\n  const pick = (i: number) => {\n    const item = items[i];\n    if (!item) return;\n    if (item.kind === \"create\") create(item.query);\n    else commit(item.option);\n  };\n\n  const listbox = useListbox({ count: items.length, isDisabled, onPick: pick, open, setOpen });\n\n  const onChange = (text: string) => {\n    setQuery(text);\n    setEditing(true);\n    listbox.setActive(-1);\n    if (onSearch) {\n      setRemote((r) => ({ ...r, state: \"loading\" }));\n      search(text);\n    }\n    setOpenState(true);\n    if (!multiple && text === \"\" && single) setValues([]);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (separators?.includes(event.key) && query.trim()) {\n      event.preventDefault();\n      create(query);\n      return;\n    }\n    if (listbox.onKeyDown(event)) return;\n    if (event.key === \"Enter\" && creatable && query.trim()) {\n      event.preventDefault();\n      create(query);\n    } else if (event.key === \"Backspace\" && multiple && query === \"\" && values.length > 0) {\n      setValues(values.slice(0, -1));\n    } else if (event.key === \"Escape\" && !multiple && editing) {\n      setEditing(false);\n      setQuery(single?.label ?? \"\");\n    }\n  };\n\n  const onPaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    if (!separators?.length || !multiple) return;\n    const text = event.clipboardData.getData(\"text\");\n    const parts = text.split(new RegExp(`[${separators.map((c) => c.replace(/[\\\\\\]^-]/g, \"\\\\$&\")).join(\"\")}\\\\n]`)).map((p) => p.trim()).filter(Boolean);\n    if (parts.length < 2) return;\n    event.preventDefault();\n    const next = [...values];\n    for (const part of parts) {\n      if (props.maxSelected !== undefined && next.length >= props.maxSelected) break;\n      if (next.some((v) => fold(v.label) === fold(part))) continue;\n      next.push((options ?? []).find((o) => fold(o.label) === fold(part)) ?? onCreate(part));\n    }\n    setValues(next);\n  };\n\n  const loading = Boolean(onSearch) && remote.state === \"loading\";\n  const failed = Boolean(onSearch) && remote.state === \"error\";\n  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(\" \") || undefined;\n\n  return (\n    <div\n      className={s.root({ className })}\n      onBlur={(event) => {\n        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n        setOpenState(false);\n        if (!multiple) {\n          setEditing(false);\n          setQuery(single?.label ?? \"\");\n        }\n      }}\n    >\n      <label htmlFor={inputId} className={hideLabel ? \"sr-only\" : s.label()}>\n        {label}\n      </label>\n      <div className={s.control()} data-invalid={error ? \"\" : undefined} data-disabled={disabled ? \"\" : undefined} onMouseDown={(event) => {\n        if (event.target === event.currentTarget) {\n          event.preventDefault();\n          inputRef.current?.focus();\n        }\n      }}>\n        {multiple &&\n          values.map((option) => (\n            <Chip key={option.value} size=\"sm\" removable removeLabel={labels.remove(option.label)} disabled={disabled} onRemove={() => setValues(values.filter((v) => v.value !== option.value))}>\n              {option.label}\n            </Chip>\n          ))}\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"text\"\n          autoComplete=\"off\"\n          spellCheck={false}\n          {...listbox.inputProps}\n          aria-describedby={describedBy}\n          aria-invalid={error ? true : undefined}\n          aria-busy={loading || undefined}\n          value={shownQuery}\n          placeholder={multiple && values.length > 0 ? undefined : placeholder}\n          disabled={disabled}\n          className={s.input()}\n          onChange={(event) => onChange(event.target.value)}\n          onKeyDown={onKeyDown}\n          onPaste={onPaste}\n          onClick={() => !open && setOpen(true)}\n        />\n        {!multiple && single && !disabled ? (\n          <button type=\"button\" aria-label={labels.clear} className={s.icon()} onClick={() => {\n            setValues([]);\n            setQuery(\"\");\n            inputRef.current?.focus();\n          }}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </button>\n        ) : null}\n        <button type=\"button\" tabIndex={-1} aria-label={labels.toggle} aria-expanded={open} aria-controls={listbox.listId} disabled={disabled} className={s.icon()} onClick={() => {\n          setOpen(!open);\n          inputRef.current?.focus();\n        }}>\n          <ChevronGlyph direction={open ? \"up\" : \"down\"} className=\"h-4 w-4\" />\n        </button>\n      </div>\n      {name && values.map((v) => <input key={v.value} type=\"hidden\" name={name} value={v.value} />)}\n      <div id={listbox.listId} role=\"listbox\" aria-label={label} aria-multiselectable={multiple || undefined} hidden={!open || (items.length === 0 && !loading && !failed && !labels.empty)} className={s.list()}>\n        {open && loading && items.length === 0 ? <div className={s.status()}>{labels.loading}</div> : null}\n        {open && failed ? <div className={s.status()}>{labels.error}</div> : null}\n        {open && !loading && !failed && items.length === 0 && labels.empty ? <div className={s.status()}>{labels.empty}</div> : null}\n        {open &&\n          items.map((item, i) =>\n            item.kind === \"create\" ? (\n              <div key=\"__create\" {...listbox.optionProps(i, false)} className={s.option()}>\n                <PlusGlyph className={s.check()} />\n                {labels.create(item.query)}\n              </div>\n            ) : (\n              <div key={item.option.value} {...listbox.optionProps(i, chosen.has(item.option.value))} className={s.option()}>\n                <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{chosen.has(item.option.value) ? <CheckGlyph className={s.check()} /> : null}</span>\n                <span className=\"min-w-0 flex-1\">\n                  {item.option.label}\n                  {item.option.description ? <span className={s.description()}>{item.option.description}</span> : null}\n                </span>\n              </div>\n            ),\n          )}\n      </div>\n      <span className=\"sr-only\" aria-live=\"polite\" aria-atomic>\n        {open && !loading ? labels.results(items.length) : \"\"}\n      </span>\n      {hint ? (\n        <p id={hintId} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p id={errorId} className={s.error()}>\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["query"]}

package/dist/chunk-YH4LMWRU.js

@@ -0,0 +1,92 @@
+"use client";
+
+// src/chip/chip.tsx
+import { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var chip = tv({
+  slots: {
+    group: "flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+    base: "inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg",
+    remove: "-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  },
+  variants: {
+    size: { sm: { base: "h-7 px-3 text-xs" }, md: { base: "h-9 px-3.5 text-xs" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var ChipGroupContext = React.createContext(null);
+function RemoveIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+}
+function ChipBase(props) {
+  const group = React.useContext(ChipGroupContext);
+  if (props.removable) {
+    const { removable: _removable2, removeLabel, onRemove, disabled, size: size2, className: className2, children, ...rest2 } = props;
+    const s2 = chip({ size: size2 ?? group?.size });
+    return /* @__PURE__ */ jsxs("span", { "data-removable": "", className: s2.base({ className: className2 }), ...rest2, children: [
+      children,
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": removeLabel, title: removeLabel, disabled, onClick: onRemove, className: s2.remove(), children: /* @__PURE__ */ jsx(RemoveIcon, {}) })
+    ] });
+  }
+  const { removable: _removable, value, selected, defaultSelected, onSelectedChange, size, className, ...rest } = props;
+  const s = chip({ size: size ?? group?.size });
+  if (group) {
+    if (value === void 0) throw new Error("Chip: a chip inside Chip.Group needs a `value`.");
+    return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { value, className: s.base({ className }), ...rest });
+  }
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      pressed: selected,
+      defaultPressed: defaultSelected,
+      onPressedChange: onSelectedChange,
+      className: s.base({ className }),
+      ...rest
+    }
+  );
+}
+function ChipGroup({ label, size, className, children, ...props }) {
+  const s = chip({ size });
+  const context = React.useMemo(() => ({ size }), [size]);
+  const common = { "aria-label": label, className: s.group({ className }) };
+  let group;
+  if (props.type === "single") {
+    const { type: _type, value, defaultValue, onValueChange, required, ...rest } = props;
+    group = /* @__PURE__ */ jsx(SingleGroup, { ...rest, ...common, value, defaultValue, onValueChange, required, children });
+  } else {
+    const { type: _type, required: _required, ...rest } = props;
+    group = /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, { type: "multiple", ...rest, ...common, children });
+  }
+  return /* @__PURE__ */ jsx(ChipGroupContext.Provider, { value: context, children: group });
+}
+function SingleGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  required,
+  ...props
+}) {
+  const [inner, setInner] = React.useState(defaultValue ?? "");
+  const current = value ?? inner;
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      type: "single",
+      value: current,
+      onValueChange: (next) => {
+        if (required && !next) return;
+        if (value === void 0) setInner(next);
+        onValueChange?.(next);
+      },
+      ...props
+    }
+  );
+}
+var Chip = Object.assign(ChipBase, { Group: ChipGroup });
+
+export {
+  Chip
+};
+//# sourceMappingURL=chunk-YH4LMWRU.js.map

package/dist/chunk-YH4LMWRU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip/chip.tsx"],"sourcesContent":["// Client (a context). A chip is a pressable pill: alone it is a Radix Toggle (aria-pressed), inside `Chip.Group` an\n// item of a Radix Toggle Group (roving focus with the arrows; `single` = radio semantics, `multiple` = pressed\n// buttons). A `removable` chip is a static label with its own remove button (two buttons cannot nest).\nimport { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const chip = tv({\n  slots: {\n    group: \"flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n    base:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 \" +\n      \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg \" +\n      \"data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg\",\n    remove:\n      \"-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    size: { sm: { base: \"h-7 px-3 text-xs\" }, md: { base: \"h-9 px-3.5 text-xs\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type ChipVariants = VariantProps<typeof chip>;\n\ntype GroupContext = { size: ChipVariants[\"size\"] };\nconst ChipGroupContext = React.createContext<GroupContext | null>(null);\n\nfunction RemoveIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype ToggleChipProps = Omit<React.ComponentProps<\"button\">, \"value\" | \"defaultValue\"> &\n  ChipVariants & {\n    /**\n     * sm · md (inside `Chip.Group`, the group's size by default).\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** Inside `Chip.Group`: the value this chip stands for (required there, ignored alone). */\n    value?: string;\n    /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */\n    selected?: boolean;\n    /** Alone: pressed at first, uncontrolled. */\n    defaultSelected?: boolean;\n    /** Alone: called with the new state on every press. */\n    onSelectedChange?: (selected: boolean) => void;\n    /** A pressable chip (the default); `true` makes it a static chip with a remove button. */\n    removable?: false;\n  };\n\ntype RemovableChipProps = Omit<React.ComponentProps<\"span\">, \"onSelect\"> &\n  ChipVariants & {\n    /** A static chip (a chosen tag, an applied filter) with a remove button. */\n    removable: true;\n    /** The accessible name of the remove button — passed translated, e.g. \"Remove #night\". */\n    removeLabel: string;\n    /** Runs when the remove button is pressed. */\n    onRemove: () => void;\n    /** Disables the remove button. */\n    disabled?: boolean;\n  };\n\nexport type ChipProps = ToggleChipProps | RemovableChipProps;\n\n/** A selectable pill (`selected` / `onSelectedChange`), an item of `Chip.Group` (`value`), or `removable`. */\nfunction ChipBase(props: ChipProps) {\n  const group = React.useContext(ChipGroupContext);\n  if (props.removable) {\n    const { removable: _removable, removeLabel, onRemove, disabled, size, className, children, ...rest } = props;\n    const s = chip({ size: size ?? group?.size });\n    return (\n      <span data-removable=\"\" className={s.base({ className })} {...rest}>\n        {children}\n        <button type=\"button\" aria-label={removeLabel} title={removeLabel} disabled={disabled} onClick={onRemove} className={s.remove()}>\n          <RemoveIcon />\n        </button>\n      </span>\n    );\n  }\n  const { removable: _removable, value, selected, defaultSelected, onSelectedChange, size, className, ...rest } = props;\n  const s = chip({ size: size ?? group?.size });\n  if (group) {\n    if (value === undefined) throw new Error(\"Chip: a chip inside Chip.Group needs a `value`.\");\n    return <ToggleGroupPrimitive.Item value={value} className={s.base({ className })} {...rest} />;\n  }\n  return (\n    <TogglePrimitive.Root\n      pressed={selected}\n      defaultPressed={defaultSelected}\n      onPressedChange={onSelectedChange}\n      className={s.base({ className })}\n      {...rest}\n    />\n  );\n}\n\ntype GroupBase = Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"dir\"> &\n  ChipVariants & {\n    /**\n     * sm · md: the size of every chip of the group.\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** The group's accessible name — passed translated (\"Filter by format\"). */\n    label?: string;\n    /** The arrow keys that move: left / right (horizontal, a row) or up / down (vertical, a column). */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Arrow keys wrap from the last chip to the first (default `true`). */\n    loop?: boolean;\n    /** Disables every chip of the group. */\n    disabled?: boolean;\n  };\n\nexport type ChipGroupProps =\n  | (GroupBase & {\n      /** One choice: the chips behave as radios. */\n      type: \"single\";\n      /** The chosen value (controlled), `\"\"` when none. */\n      value?: string;\n      /** The value chosen at first, uncontrolled. */\n      defaultValue?: string;\n      /** Called with the new value on every choice. */\n      onValueChange?: (value: string) => void;\n      /** Keeps one chip selected: pressing the selected chip does not clear it (default `false`). */\n      required?: boolean;\n    })\n  | (GroupBase & {\n      /** Any number of choices: the chips are pressed buttons. */\n      type: \"multiple\";\n      /** The chosen values (controlled). */\n      value?: string[];\n      /** The values chosen at first, uncontrolled. */\n      defaultValue?: string[];\n      /** Called with the new values on every press. */\n      onValueChange?: (value: string[]) => void;\n      required?: never;\n    });\n\n/** Chips that choose together: `type` single · multiple, `value`/`defaultValue` + `onValueChange`. */\nexport function ChipGroup({ label, size, className, children, ...props }: ChipGroupProps) {\n  const s = chip({ size });\n  const context = React.useMemo(() => ({ size }), [size]);\n  const common = { \"aria-label\": label, className: s.group({ className }) };\n  let group: React.ReactNode;\n  if (props.type === \"single\") {\n    const { type: _type, value, defaultValue, onValueChange, required, ...rest } = props;\n    group = <SingleGroup {...rest} {...common} value={value} defaultValue={defaultValue} onValueChange={onValueChange} required={required}>{children}</SingleGroup>;\n  } else {\n    const { type: _type, required: _required, ...rest } = props;\n    group = (\n      <ToggleGroupPrimitive.Root type=\"multiple\" {...rest} {...common}>\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  }\n  return <ChipGroupContext.Provider value={context}>{group}</ChipGroupContext.Provider>;\n}\n\n/** Radix's single group, plus `required`: the value is held here so that an empty change can be refused. */\nfunction SingleGroup({\n  value,\n  defaultValue,\n  onValueChange,\n  required,\n  ...props\n}: Omit<GroupBase, \"size\" | \"label\"> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  required?: boolean;\n}) {\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const current = value ?? inner;\n  return (\n    <ToggleGroupPrimitive.Root\n      type=\"single\"\n      value={current}\n      onValueChange={(next) => {\n        if (required && !next) return;\n        if (value === undefined) setInner(next);\n        onValueChange?.(next);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** `Chip` (selectable, removable) and `Chip.Group` (single · multiple). */\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"mappings":"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","names":["_removable","size","className","rest","s"]}

package/dist/chunk-YX6CNVJA.js

@@ -0,0 +1,94 @@
+"use client";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var PlayGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, fill: true, children: /* @__PURE__ */ jsx("path", { d: "M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" }) });
+var PauseGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, fill: true, children: [
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1" })
+] });
+var VolumeGlyph = ({ muted, ...p }) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 5 6 9H3v6h3l5 4V5Z" }),
+  muted ? /* @__PURE__ */ jsx("path", { d: "m22 9-6 6m0-6 6 6" }) : /* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13" })
+] });
+var FullscreenGlyph = ({ exit, ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: exit ? /* @__PURE__ */ jsx("path", { d: "M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5" }) : /* @__PURE__ */ jsx("path", { d: "M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5" }) });
+var CaptionsGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3" })
+] });
+var PipGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx("rect", { x: "12", y: "12", width: "6", height: "4", rx: "1" })
+] });
+var SearchGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
+] });
+var CloseGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+var CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var PlusGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+var CalendarGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 3v4M16 3v4" })
+] });
+var UploadGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 16V4m0 0L7 9m5-5 5 5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" })
+] });
+var FileGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" })
+] });
+var CameraGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13.5", r: "3.5" })
+] });
+var FlipGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3" }),
+  /* @__PURE__ */ jsx("path", { d: "M18 3v4h-4M6 21v-4h4" })
+] });
+var RetryGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 12a8 8 0 1 0 2.3-5.7L4 8.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 4v4.5h4.5" })
+] });
+var SortGlyph = ({ direction, ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: direction === "ascending" ? /* @__PURE__ */ jsx("path", { d: "m7 14 5-5 5 5" }) : direction === "descending" ? /* @__PURE__ */ jsx("path", { d: "m7 10 5 5 5-5" }) : /* @__PURE__ */ jsx("path", { d: "m8 9 4-4 4 4M8 15l4 4 4-4" }) });
+
+export {
+  PlayGlyph,
+  PauseGlyph,
+  VolumeGlyph,
+  FullscreenGlyph,
+  CaptionsGlyph,
+  PipGlyph,
+  SearchGlyph,
+  CloseGlyph,
+  ChevronGlyph,
+  CheckGlyph,
+  PlusGlyph,
+  CalendarGlyph,
+  UploadGlyph,
+  FileGlyph,
+  CameraGlyph,
+  FlipGlyph,
+  RetryGlyph,
+  SortGlyph
+};
+//# sourceMappingURL=chunk-YX6CNVJA.js.map

package/dist/chunk-YX6CNVJA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/glyphs.tsx"],"sourcesContent":["// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-ZIXB33X7.js

@@ -0,0 +1,95 @@
+"use client";
+
+// src/listbox.ts
+import * as React from "react";
+function useListbox({ count, isDisabled = () => false, onPick, open, setOpen }) {
+  const id = React.useId();
+  const listId = `${id}-list`;
+  const [chosen, setActive] = React.useState(-1);
+  const active = open ? Math.min(chosen, count - 1) : -1;
+  const optionId = (index) => `${id}-opt-${index}`;
+  const step = (from, delta) => {
+    for (let i = 1; i <= count; i += 1) {
+      const next = (from + delta * i + count * 2) % count;
+      if (!isDisabled(next)) return next;
+    }
+    return -1;
+  };
+  const first = () => step(-1, 1);
+  const last = () => step(count, -1);
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActive(event.altKey ? -1 : first());
+        } else setActive(active < 0 ? first() : step(active, 1));
+        return true;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActive(last());
+        } else setActive(active < 0 ? last() : step(active, -1));
+        return true;
+      case "Home":
+      case "End":
+        if (!open || count === 0) return false;
+        event.preventDefault();
+        setActive(event.key === "Home" ? first() : last());
+        return true;
+      case "Enter":
+        if (!open || active < 0) return false;
+        event.preventDefault();
+        onPick(active);
+        return true;
+      case "Escape":
+        if (!open) return false;
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        return true;
+      case "Tab":
+        if (open) setOpen(false);
+        return false;
+      default:
+        return false;
+    }
+  };
+  React.useEffect(() => {
+    if (active < 0 || typeof document === "undefined") return;
+    document.getElementById(`${id}-opt-${active}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [active, id]);
+  return {
+    listId,
+    active,
+    setActive,
+    optionId,
+    onKeyDown,
+    /** The ARIA of the text input. */
+    inputProps: {
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": listId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0
+    },
+    /** The ARIA and pointer handlers of option `i` (a mouse down keeps the focus in the input). */
+    optionProps: (index, selected) => ({
+      id: optionId(index),
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": isDisabled(index) || void 0,
+      "data-active": index === active ? "" : void 0,
+      onMouseDown: (event) => event.preventDefault(),
+      onMouseMove: () => !isDisabled(index) && index !== active && setActive(index),
+      onClick: () => !isDisabled(index) && onPick(index)
+    })
+  };
+}
+
+export {
+  useListbox
+};
+//# sourceMappingURL=chunk-ZIXB33X7.js.map

package/dist/chunk-ZIXB33X7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/listbox.ts"],"sourcesContent":["// The ARIA 1.2 combobox engine shared by `combobox`, `tag-input` and `search-field` (client): the focus stays in the\n// text input, the active option is pointed at by `aria-activedescendant`, the arrows walk the enabled options, Enter\n// picks, Escape closes. The caller renders the input and the options; this hook gives them their ARIA and keys.\nimport * as React from \"react\";\n\nexport type ListboxOptions = {\n  /** How many options are shown. */\n  count: number;\n  /** Whether option `i` can be picked. */\n  isDisabled?: (index: number) => boolean;\n  /** Called when option `i` is picked (Enter or a click). */\n  onPick: (index: number) => void;\n  /** Whether the list is shown. */\n  open: boolean;\n  /** Opens or closes the list. */\n  setOpen: (open: boolean) => void;\n};\n\nexport function useListbox({ count, isDisabled = () => false, onPick, open, setOpen }: ListboxOptions) {\n  const id = React.useId();\n  const listId = `${id}-list`;\n  const [chosen, setActive] = React.useState(-1);\n  // The active option is cleared when the list closes and stays inside it when it shrinks.\n  const active = open ? Math.min(chosen, count - 1) : -1;\n  const optionId = (index: number) => `${id}-opt-${index}`;\n\n  const step = (from: number, delta: 1 | -1) => {\n    for (let i = 1; i <= count; i += 1) {\n      const next = (from + delta * i + count * 2) % count;\n      if (!isDisabled(next)) return next;\n    }\n    return -1;\n  };\n  const first = () => step(-1, 1);\n  const last = () => step(count, -1);\n\n  /** Keys of the text input. Returns `true` when the key was handled (the caller then does nothing else with it). */\n  const onKeyDown = (event: React.KeyboardEvent): boolean => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!open) {\n          setOpen(true);\n          setActive(event.altKey ? -1 : first());\n        } else setActive(active < 0 ? first() : step(active, 1));\n        return true;\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (!open) {\n          setOpen(true);\n          setActive(last());\n        } else setActive(active < 0 ? last() : step(active, -1));\n        return true;\n      case \"Home\":\n      case \"End\":\n        if (!open || count === 0) return false;\n        event.preventDefault();\n        setActive(event.key === \"Home\" ? first() : last());\n        return true;\n      case \"Enter\":\n        if (!open || active < 0) return false;\n        event.preventDefault();\n        onPick(active);\n        return true;\n      case \"Escape\":\n        if (!open) return false;\n        event.preventDefault();\n        event.stopPropagation();\n        setOpen(false);\n        return true;\n      case \"Tab\":\n        if (open) setOpen(false);\n        return false;\n      default:\n        return false;\n    }\n  };\n\n  // Keeps the active option in view while the arrows walk a long list.\n  React.useEffect(() => {\n    if (active < 0 || typeof document === \"undefined\") return;\n    document.getElementById(`${id}-opt-${active}`)?.scrollIntoView?.({ block: \"nearest\" });\n  }, [active, id]);\n\n  return {\n    listId,\n    active,\n    setActive,\n    optionId,\n    onKeyDown,\n    /** The ARIA of the text input. */\n    inputProps: {\n      role: \"combobox\" as const,\n      \"aria-expanded\": open,\n      \"aria-controls\": listId,\n      \"aria-autocomplete\": \"list\" as const,\n      \"aria-activedescendant\": open && active >= 0 ? optionId(active) : undefined,\n    },\n    /** The ARIA and pointer handlers of option `i` (a mouse down keeps the focus in the input). */\n    optionProps: (index: number, selected: boolean) => ({\n      id: optionId(index),\n      role: \"option\" as const,\n      \"aria-selected\": selected,\n      \"aria-disabled\": isDisabled(index) || undefined,\n      \"data-active\": index === active ? \"\" : undefined,\n      onMouseDown: (event: React.MouseEvent) => event.preventDefault(),\n      onMouseMove: () => !isDisabled(index) && index !== active && setActive(index),\n      onClick: () => !isDisabled(index) && onPick(index),\n    }),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/combobox.d.ts

@@ -0,0 +1,188 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const combobox: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            option?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            option?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    input: string;
+    icon: string;
+    list: string;
+    option: string;
+    check: string;
+    description: string;
+    status: string;
+    hint: string;
+    error: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            option?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    control: string;
+    input: string;
+    icon: string;
+    list: string;
+    option: string;
+    check: string;
+    description: string;
+    status: string;
+    hint: string;
+    error: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    label: string;
+    control: string;
+    input: string;
+    icon: string;
+    list: string;
+    option: string;
+    check: string;
+    description: string;
+    status: string;
+    hint: string;
+    error: string;
+}>>;
+type ComboboxOption = {
+    /** What the app stores. */
+    value: string;
+    /** What the person reads, passed translated. */
+    label: string;
+    /** A second line under the label. */
+    description?: string;
+    /** Shown but not choosable. */
+    disabled?: boolean;
+};
+type ComboboxLabels = {
+    /** No option matches ("No results"). */
+    empty: string;
+    /** While `onSearch` runs ("Searching…"). */
+    loading: string;
+    /** `onSearch` failed ("Search unavailable"). */
+    error: string;
+    /** The option that creates a value: `(query) => "Create “" + query + "”"`. */
+    create: (query: string) => string;
+    /** A chip's remove button: `(label) => "Remove " + label`. */
+    remove: (label: string) => string;
+    /** The button that empties a single choice ("Clear"). */
+    clear: string;
+    /** The button that opens the list ("Show options"). */
+    toggle: string;
+    /** Announced when the results change: `(n) => n + " results"`. */
+    results: (count: number) => string;
+};
+declare const comboboxLabels: ComboboxLabels;
+type BaseProps = {
+    /** The visible label of the field, passed translated (also its accessible name). */
+    label: string;
+    /** Hides the label visually, keeping it as the accessible name (a search bar with its own context). */
+    hideLabel?: boolean;
+    /** The options, filtered as the person types (by `filter`). */
+    options?: readonly ComboboxOption[];
+    /** Fetches the options for a query (debounced by `debounce`); the `signal` aborts when a newer query starts. */
+    onSearch?: (query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>;
+    /** The wait, in ms, between the last key and `onSearch`. Default 250. */
+    debounce?: number;
+    /** Whether an option matches a query. Default: its label contains the query, ignoring case and accents. */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    /** Offers to create the query as a new value when no option has that exact label. */
+    creatable?: boolean;
+    /** Turns a query into the created option (an id from the server…). Default `{ value: query, label: query }`. */
+    onCreate?: (query: string) => ComboboxOption;
+    /** Keys that create the query at once, as Enter does (`[","]` for tags); a paste is split on them too. */
+    separators?: readonly string[];
+    /** The input's placeholder, passed translated. */
+    placeholder?: string;
+    /** A help text under the field. */
+    hint?: string;
+    /** An error under the field: marks it invalid and is read with it. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** The name of a hidden input holding the value(s), for a plain `<form>` post. */
+    name?: string;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<ComboboxLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+    /** The id of the text input (default: generated). */
+    id?: string;
+};
+type SingleProps = BaseProps & {
+    /** One value (default) or several. */
+    multiple?: false;
+    /** The chosen option (controlled), `null` for none. */
+    value?: ComboboxOption | null;
+    /** The chosen option at first, uncontrolled. */
+    defaultValue?: ComboboxOption | null;
+    /** Called with the chosen option, or `null` when it is cleared. */
+    onValueChange?: (value: ComboboxOption | null) => void;
+    /** Most options that can be chosen (several values only). */
+    maxSelected?: never;
+};
+type MultipleProps = BaseProps & {
+    /** Several values, shown as chips. */
+    multiple: true;
+    /** The chosen options (controlled). */
+    value?: readonly ComboboxOption[];
+    /** The chosen options at first, uncontrolled. */
+    defaultValue?: readonly ComboboxOption[];
+    /** Called with every chosen option. */
+    onValueChange?: (value: ComboboxOption[]) => void;
+    /** Most options that can be chosen; the list stops offering more past it. */
+    maxSelected?: number;
+};
+type ComboboxProps = SingleProps | MultipleProps;
+/** A text field that suggests, filters and completes: one value or several (chips), static or fetched, creatable. */
+declare function Combobox(props: ComboboxProps): React.JSX.Element;
+
+export { Combobox, type ComboboxLabels, type ComboboxOption, type ComboboxProps, combobox, comboboxLabels };

package/dist/combobox.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  Combobox,
+  combobox,
+  comboboxLabels
+} from "./chunk-XUMJA5ZI.js";
+import "./chunk-YH4LMWRU.js";
+import "./chunk-ZIXB33X7.js";
+import "./chunk-EUPTXKH7.js";
+import "./chunk-YX6CNVJA.js";
+export {
+  Combobox,
+  combobox,
+  comboboxLabels
+};
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}