@krizaka/ui 3.54.0 → 3.55.0

package/dist/{chunk-KBQD6HE3.js.map → chunk-AEP3K4YD.js.map}

@@ -1 +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 { useDebouncedCallback } from \"@krizaka/pacer/react\";\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 } 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"]}
+{"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 { useDebouncedCallback } from \"@krizaka/pacer/react\";\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 } 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-control 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-BDIU5LZB.js

@@ -0,0 +1,18 @@
+"use client";
+
+// src/deprecated.ts
+var DEPRECATED_SINCE = "3.55.0";
+var REMOVED_IN = "4.0.0";
+var warned = /* @__PURE__ */ new Set();
+function warnDeprecated(entry, since = DEPRECATED_SINCE) {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production" || warned.has(entry)) return;
+  warned.add(entry);
+  console.warn(
+    `@krizaka/ui/${entry} is deprecated since ${since} and is removed in ${REMOVED_IN} (ADR-006): no product uses it. Keep it? Comment on krizaka-ui#674 with the issue that needs it. https://ui.krizaka.com/components/${entry.replace(/^native\//, "")}`
+  );
+}
+
+export {
+  warnDeprecated
+};
+//# sourceMappingURL=chunk-BDIU5LZB.js.map

package/dist/chunk-BDIU5LZB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/deprecated.ts"],"sourcesContent":["// The development warning of a deprecated entry (ADR-006 §7, krizaka-ui#674). An entry is deprecated in a minor and\n// removed in the next major; until then it works exactly as before and says so once per page, in development only —\n// never in production, never twice. The same facts live in the entry's `meta.ts` (`status: \"deprecated\"`), which\n// ui.krizaka.com reads for its badge.\n\n/** The release that deprecated the batch. */\nexport const DEPRECATED_SINCE = \"3.55.0\";\n/** The major that removes it. */\nexport const REMOVED_IN = \"4.0.0\";\n\nconst warned = new Set<string>();\n\n/**\n * Warns once per page, in development, that `@krizaka/ui/<entry>` is deprecated. Call it at the top of the entry's\n * components; it costs a `Set` lookup and nothing in production.\n * @param entry the entry's name as imported: `tree-view` for `@krizaka/ui/tree-view`.\n * @param since the release that deprecated it, when it is not this batch's.\n */\nexport function warnDeprecated(entry: string, since: string = DEPRECATED_SINCE): void {\n  if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\" || warned.has(entry)) return;\n  warned.add(entry);\n  console.warn(\n    `@krizaka/ui/${entry} is deprecated since ${since} and is removed in ${REMOVED_IN} (ADR-006): no product uses it. ` +\n      `Keep it? Comment on krizaka-ui#674 with the issue that needs it. https://ui.krizaka.com/components/${entry.replace(/^native\\//, \"\")}`,\n  );\n}\n\n/** Forgets what was warned (tests only). */\nexport function resetDeprecationWarnings(): void {\n  warned.clear();\n}\n"],"mappings":";;;AAMO,IAAM,mBAAmB;AAEzB,IAAM,aAAa;AAE1B,IAAM,SAAS,oBAAI,IAAY;AAQxB,SAAS,eAAe,OAAe,QAAgB,kBAAwB;AACpF,MAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,gBAAgB,OAAO,IAAI,KAAK,EAAG;AAClG,SAAO,IAAI,KAAK;AAChB,UAAQ;AAAA,IACN,eAAe,KAAK,wBAAwB,KAAK,sBAAsB,UAAU,sIACuB,MAAM,QAAQ,aAAa,EAAE,CAAC;AAAA,EACxI;AACF;","names":[]}

package/dist/chunk-CSRKYZ53.js

@@ -0,0 +1,39 @@
+"use client";
+
+// src/switch/switch.tsx
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var switchVariants = tv({
+  slots: {
+    root: "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-fg-muted transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:bg-accent aria-invalid:border-danger",
+    thumb: "pointer-events-none block rounded-full bg-fg-on-media shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5 motion-reduce:transition-none"
+  },
+  variants: {
+    size: {
+      sm: { root: "h-5 w-9", thumb: "h-4 w-4 data-[state=checked]:translate-x-[1.125rem]" },
+      md: { root: "h-6 w-11", thumb: "h-5 w-5 data-[state=checked]:translate-x-[1.375rem]" }
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function Switch({ label, size, invalid, className, ...props }) {
+  const s = switchVariants({ size });
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "aria-label": label,
+      "aria-invalid": invalid || void 0,
+      "data-invalid": invalid ? "" : void 0,
+      className: s.root({ className }),
+      ...props,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: s.thumb() })
+    }
+  );
+}
+
+export {
+  switchVariants,
+  Switch
+};
+//# sourceMappingURL=chunk-CSRKYZ53.js.map

package/dist/chunk-CSRKYZ53.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/switch/switch.tsx"],"sourcesContent":["// Client. Radix Switch: role=\"switch\", aria-checked, Space and Enter toggle, a hidden input inside a form.\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const switchVariants = tv({\n  slots: {\n    root:\n      \"peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-fg-muted transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:bg-accent aria-invalid:border-danger\",\n    thumb:\n      \"pointer-events-none block rounded-full bg-fg-on-media shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5 motion-reduce:transition-none\",\n  },\n  variants: {\n    size: {\n      sm: { root: \"h-5 w-9\", thumb: \"h-4 w-4 data-[state=checked]:translate-x-[1.125rem]\" },\n      md: { root: \"h-6 w-11\", thumb: \"h-5 w-5 data-[state=checked]:translate-x-[1.375rem]\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SwitchVariants = VariantProps<typeof switchVariants>;\n\ntype Named =\n  | {\n      /** The accessible name — required when no visible label names it, passed translated. */\n      label: string;\n    }\n  /** Named by a visible `<label htmlFor={id}>` (e.g. `Field.Label`). */\n  | { label?: undefined; id: string }\n  /** Named by another element. */\n  | { label?: undefined; \"aria-labelledby\": string };\n\nexport type SwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, \"children\"> &\n  SwitchVariants &\n  Named & {\n    /**\n     * sm · md.\n     * @default \"md\"\n     */\n    size?: SwitchVariants[\"size\"];\n    /** Marks it invalid: aria-invalid and data-invalid. */\n    invalid?: boolean;\n  };\n\n/** An on/off switch: `checked`/`defaultChecked` + `onCheckedChange`. */\nexport function Switch({ label, size, invalid, className, ...props }: SwitchProps) {\n  const s = switchVariants({ size });\n  return (\n    <SwitchPrimitive.Root\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className })}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={s.thumb()} />\n    </SwitchPrimitive.Root>\n  );\n}\n"],"mappings":";;;AACA,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAA6B;AAuDhC;AArDC,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MACE;AAAA,IAGF,OACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,WAAW,OAAO,sDAAsD;AAAA,MACpF,IAAI,EAAE,MAAM,YAAY,OAAO,sDAAsD;AAAA,IACvF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AA2BM,SAAS,OAAO,EAAE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,GAAgB;AACjF,QAAM,IAAI,eAAe,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MAEJ,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG;AAAA;AAAA,EAC/C;AAEJ;","names":[]}

package/dist/chunk-HEKDKM5Y.js

@@ -0,0 +1,128 @@
+// src/meter/meter.tsx
+import { tv } from "tailwind-variants";
+
+// src/meter/model.ts
+var MeterOptimum = { Low: "low", High: "high" };
+var MeterLevel = { Ok: "ok", Success: "success", Warning: "warning", Danger: "danger" };
+var clamp01 = (n) => Math.min(1, Math.max(0, n));
+var percent = (ratio) => `${Math.round(ratio * 100)} %`;
+function levelOf(ratio, thresholds, optimum) {
+  if (!thresholds) return MeterLevel.Ok;
+  const good = optimum === MeterOptimum.Low ? MeterLevel.Success : MeterLevel.Danger;
+  const bad = optimum === MeterOptimum.Low ? MeterLevel.Danger : MeterLevel.Success;
+  if (ratio >= thresholds.high) return bad;
+  return ratio >= thresholds.low ? MeterLevel.Warning : good;
+}
+function meterModel({ value = 0, min = 0, max = 100, valueText, thresholds, optimum = MeterOptimum.Low, parts }) {
+  const span = max - min || 1;
+  const ratio = clamp01((value - min) / span);
+  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: clamp01(p.value / span), words: p.valueText ?? percent(p.value / span) }));
+  let start = 0;
+  const arcs = parts ? shares.map((p) => {
+    const arc = { part: p.i, len: p.ratio, start };
+    start += p.ratio;
+    return arc;
+  }) : [{ part: void 0, len: ratio, start: 0 }];
+  return { ratio, level: levelOf(ratio, thresholds, optimum), words: valueText ?? percent(ratio), shares, arcs };
+}
+
+// src/meter/meter.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var meter = tv({
+  slots: {
+    root: "flex w-full flex-col gap-1.5",
+    header: "flex items-baseline gap-2 text-xs",
+    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    figure: "shrink-0 tabular-nums text-fg-secondary",
+    track: "relative flex h-2 w-full gap-0.5 overflow-hidden rounded-sm bg-surface-3",
+    fill: "h-full rounded-sm transition-[width] duration-700 motion-reduce:transition-none",
+    legend: "mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary",
+    swatch: "inline-block h-2 w-2 shrink-0 rounded-full",
+    ring: "relative inline-flex shrink-0 items-center justify-center",
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+  },
+  variants: {
+    size: { sm: { track: "h-1.5", ring: "h-14 w-14" }, md: { ring: "h-24 w-24" }, lg: { track: "h-3", ring: "h-36 w-36" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var BG = { ok: "bg-accent", success: "bg-success", warning: "bg-warning", danger: "bg-danger" };
+var STROKE = { ok: "stroke-accent", success: "stroke-success", warning: "stroke-warning", danger: "stroke-danger" };
+var PART_BG = ["bg-accent", "bg-fg-secondary", "bg-accent-2", "bg-border-strong"];
+var PART_STROKE = ["stroke-accent", "stroke-fg-secondary", "stroke-accent-2", "stroke-border-strong"];
+function Meter({
+  label,
+  value = 0,
+  min = 0,
+  max = 100,
+  valueText,
+  thresholds,
+  optimum = "low",
+  parts,
+  variant = "bar",
+  size = "md",
+  showLabel,
+  className,
+  children,
+  ...props
+}) {
+  const s = meter({ size });
+  const { ratio, level, words, shares, arcs } = meterModel({ value, min, max, valueText, thresholds, optimum, parts });
+  const a11y = parts ? { role: "group", "aria-label": label } : { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-valuetext": words };
+  const legend = parts && /* @__PURE__ */ jsx("ul", { className: s.legend(), children: shares.map((p) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: [s.swatch(), PART_BG[p.i % PART_BG.length]].join(" ") }),
+    /* @__PURE__ */ jsx("span", { className: "text-fg", children: p.label }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: p.words })
+  ] }, p.i)) });
+  if (variant === "ring") {
+    const r = 44;
+    return /* @__PURE__ */ jsxs("div", { ...a11y, "data-level": parts ? void 0 : level, className: ["inline-flex flex-col items-center gap-2", className].filter(Boolean).join(" "), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.ring(), children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: "9", className: "stroke-border-default" }),
+          arcs.map((arc, i) => {
+            const length = Math.max(0, arc.len * 100 - (parts ? 1 : 0));
+            return /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "50",
+                cy: "50",
+                r,
+                fill: "none",
+                strokeWidth: "9",
+                pathLength: 100,
+                strokeDasharray: `${length} ${100 - length}`,
+                strokeDashoffset: -arc.start * 100,
+                className: [arc.part === void 0 ? STROKE[level] : PART_STROKE[arc.part % PART_STROKE.length], "transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"].join(" ")
+              },
+              i
+            );
+          })
+        ] }),
+        children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
+      ] }),
+      legend
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...a11y, "data-level": parts ? void 0 : level, className: s.root({ className }), ...props, children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.caption(), children: label }),
+      !parts && /* @__PURE__ */ jsx("span", { className: s.figure(), children: words })
+    ] }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.track(), children: parts ? shares.map((p) => /* @__PURE__ */ jsx("span", { className: [s.fill(), PART_BG[p.i % PART_BG.length]].join(" "), style: { width: `${p.ratio * 100}%` } }, p.i)) : /* @__PURE__ */ jsx("span", { className: [s.fill(), BG[level]].join(" "), style: { width: `${ratio * 100}%` } }) }),
+    legend
+  ] });
+}
+function MeterValue({ value, caption }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-semibold text-fg tabular-nums", children: value }),
+    caption && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-fg-secondary", children: caption })
+  ] });
+}
+
+export {
+  meter,
+  Meter,
+  MeterValue
+};
+//# sourceMappingURL=chunk-HEKDKM5Y.js.map

package/dist/chunk-HEKDKM5Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/meter/meter.tsx","../src/meter/model.ts"],"sourcesContent":["// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { type MeterLevel, meterModel, type MeterPart, type MeterThresholds } from \"./model\";\n\nexport type { MeterPart };\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-sm bg-surface-3\",\n    fill: \"h-full rounded-sm transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG: Record<MeterLevel, string> = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" };\nconst STROKE: Record<MeterLevel, string> = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" };\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: MeterThresholds;\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const { ratio, level, words, shares, arcs } = meterModel({ value, min, max, valueText, thresholds, optimum, parts });\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((arc, i) => {\n              const length = Math.max(0, arc.len * 100 - (parts ? 1 : 0));\n              return (\n                <circle\n                  key={i}\n                  cx=\"50\"\n                  cy=\"50\"\n                  r={r}\n                  fill=\"none\"\n                  strokeWidth=\"9\"\n                  pathLength={100}\n                  strokeDasharray={`${length} ${100 - length}`}\n                  strokeDashoffset={-arc.start * 100}\n                  className={[arc.part === undefined ? STROKE[level] : PART_STROKE[arc.part % PART_STROKE.length], \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n                />\n              );\n            })}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n","// Headless: the arithmetic of a Meter, read by the web (`meter.tsx`) and the native (`native/meter.tsx`) alike.\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\n/** Which end of the range is good: `low` (a quota) or `high` (a score, a balance). */\nexport const MeterOptimum = { Low: \"low\", High: \"high\" } as const;\nexport type MeterOptimum = (typeof MeterOptimum)[keyof typeof MeterOptimum];\n\n/** The tone of a fill: the accent without thresholds, otherwise good, warning or bad. */\nexport const MeterLevel = { Ok: \"ok\", Success: \"success\", Warning: \"warning\", Danger: \"danger\" } as const;\nexport type MeterLevel = (typeof MeterLevel)[keyof typeof MeterLevel];\n\nexport interface MeterThresholds {\n  readonly low: number;\n  readonly high: number;\n}\n\nexport interface MeterInput {\n  value?: number;\n  min?: number;\n  max?: number;\n  valueText?: string;\n  thresholds?: MeterThresholds;\n  optimum?: MeterOptimum;\n  parts?: readonly MeterPart[];\n}\n\nexport interface MeterShare extends MeterPart {\n  i: number;\n  /** Its share of the range, 0–1. */\n  ratio: number;\n  /** Its value in words. */\n  words: string;\n}\n\n/** One arc of a ring, as fractions of the circle: the part it draws (none for the whole value), its length, where it starts. */\nexport interface MeterArc {\n  part: number | undefined;\n  len: number;\n  start: number;\n}\n\nexport interface MeterModel {\n  ratio: number;\n  level: MeterLevel;\n  words: string;\n  shares: MeterShare[];\n  arcs: MeterArc[];\n}\n\nconst clamp01 = (n: number) => Math.min(1, Math.max(0, n));\nconst percent = (ratio: number) => `${Math.round(ratio * 100)} %`;\n\nfunction levelOf(ratio: number, thresholds: MeterThresholds | undefined, optimum: MeterOptimum): MeterLevel {\n  if (!thresholds) return MeterLevel.Ok;\n  const good = optimum === MeterOptimum.Low ? MeterLevel.Success : MeterLevel.Danger;\n  const bad = optimum === MeterOptimum.Low ? MeterLevel.Danger : MeterLevel.Success;\n  if (ratio >= thresholds.high) return bad;\n  return ratio >= thresholds.low ? MeterLevel.Warning : good;\n}\n\n/** The ratio, tone, words, parts and ring arcs of a meter. */\nexport function meterModel({ value = 0, min = 0, max = 100, valueText, thresholds, optimum = MeterOptimum.Low, parts }: MeterInput): MeterModel {\n  const span = max - min || 1;\n  const ratio = clamp01((value - min) / span);\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: clamp01(p.value / span), words: p.valueText ?? percent(p.value / span) }));\n  let start = 0;\n  const arcs = parts\n    ? shares.map((p) => {\n        const arc = { part: p.i, len: p.ratio, start };\n        start += p.ratio;\n        return arc;\n      })\n    : [{ part: undefined, len: ratio, start: 0 }];\n  return { ratio, level: levelOf(ratio, thresholds, optimum), words: valueText ?? percent(ratio), shares, arcs };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-KGLRZMCY.js

@@ -0,0 +1,16 @@
+// src/deprecated.ts
+var DEPRECATED_SINCE = "3.55.0";
+var REMOVED_IN = "4.0.0";
+var warned = /* @__PURE__ */ new Set();
+function warnDeprecated(entry, since = DEPRECATED_SINCE) {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production" || warned.has(entry)) return;
+  warned.add(entry);
+  console.warn(
+    `@krizaka/ui/${entry} is deprecated since ${since} and is removed in ${REMOVED_IN} (ADR-006): no product uses it. Keep it? Comment on krizaka-ui#674 with the issue that needs it. https://ui.krizaka.com/components/${entry.replace(/^native\//, "")}`
+  );
+}
+
+export {
+  warnDeprecated
+};
+//# sourceMappingURL=chunk-KGLRZMCY.js.map

package/dist/chunk-KGLRZMCY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/deprecated.ts"],"sourcesContent":["// The development warning of a deprecated entry (ADR-006 §7, krizaka-ui#674). An entry is deprecated in a minor and\n// removed in the next major; until then it works exactly as before and says so once per page, in development only —\n// never in production, never twice. The same facts live in the entry's `meta.ts` (`status: \"deprecated\"`), which\n// ui.krizaka.com reads for its badge.\n\n/** The release that deprecated the batch. */\nexport const DEPRECATED_SINCE = \"3.55.0\";\n/** The major that removes it. */\nexport const REMOVED_IN = \"4.0.0\";\n\nconst warned = new Set<string>();\n\n/**\n * Warns once per page, in development, that `@krizaka/ui/<entry>` is deprecated. Call it at the top of the entry's\n * components; it costs a `Set` lookup and nothing in production.\n * @param entry the entry's name as imported: `tree-view` for `@krizaka/ui/tree-view`.\n * @param since the release that deprecated it, when it is not this batch's.\n */\nexport function warnDeprecated(entry: string, since: string = DEPRECATED_SINCE): void {\n  if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\" || warned.has(entry)) return;\n  warned.add(entry);\n  console.warn(\n    `@krizaka/ui/${entry} is deprecated since ${since} and is removed in ${REMOVED_IN} (ADR-006): no product uses it. ` +\n      `Keep it? Comment on krizaka-ui#674 with the issue that needs it. https://ui.krizaka.com/components/${entry.replace(/^native\\//, \"\")}`,\n  );\n}\n\n/** Forgets what was warned (tests only). */\nexport function resetDeprecationWarnings(): void {\n  warned.clear();\n}\n"],"mappings":";AAMO,IAAM,mBAAmB;AAEzB,IAAM,aAAa;AAE1B,IAAM,SAAS,oBAAI,IAAY;AAQxB,SAAS,eAAe,OAAe,QAAgB,kBAAwB;AACpF,MAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,gBAAgB,OAAO,IAAI,KAAK,EAAG;AAClG,SAAO,IAAI,KAAK;AAChB,UAAQ;AAAA,IACN,eAAe,KAAK,wBAAwB,KAAK,sBAAsB,UAAU,sIACuB,MAAM,QAAQ,aAAa,EAAE,CAAC;AAAA,EACxI;AACF;","names":[]}

package/dist/chunk-KID32IRJ.js

@@ -0,0 +1,18 @@
+"use client";
+
+// src/kbd/kbd.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+
+export {
+  Kbd
+};
+//# sourceMappingURL=chunk-KID32IRJ.js.map

package/dist/chunk-KID32IRJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kbd/kbd.tsx"],"sourcesContent":["// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"],"mappings":";;;AAEA,SAAS,UAA6B;AAmB7B;AAjBF,IAAM,cAAc,GAAG;AAAA,EAC5B,MACE;AAAA,EAEF,UAAU,EAAE,MAAM,EAAE,IAAI,gCAAgC,IAAI,6BAA6B,EAAE;AAAA,EAC3F,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAUM,SAAS,IAAI,EAAE,MAAM,WAAW,GAAG,MAAM,GAAa;AAC3D,SAAO,oBAAC,SAAI,WAAW,YAAY,EAAE,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO;AACtE;","names":[]}

package/dist/{chunk-ZQW7LF4Y.js → chunk-OIMXKRXF.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Chip
-} from "./chunk-HHFWK2HH.js";
+} from "./chunk-VIPSZXO4.js";
 import {
   floating
 } from "./chunk-J3NC6ER4.js";
@@ -176,4 +176,4 @@ export {
   readFilterParams,
   writeFilterParams
 };
-//# sourceMappingURL=chunk-ZQW7LF4Y.js.map
+//# sourceMappingURL=chunk-OIMXKRXF.js.map