@seekalfred/primitives 0.7.1 → 0.7.3

package/dist/filter-bar/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":["Button","AriaMenu","MenuItem","Popover"],"sources":["../../src/filter-bar/filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Menu as AriaMenu, type Key } from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport { useMenuHighlight } from \"../lib/menu-highlight.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { MenuItem, menuVariants } from \"../menu/menu.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\n\n/**\n * FilterBar -- a filter toolbar: one pill that shows what is filtered as\n * removable chips (\"No filters applied\" while nothing is), with an \"Add filter\"\n * button that opens a menu of the filters.\n *\n * Why it exists: list screens grew a row of four to seven dropdowns beside\n * the search box and the status tabs. At desktop width that row wraps onto a\n * second line; on a phone it scrolls sideways. The bar keeps the row to one\n * line and makes what IS filtered visible as chips instead of as the\n * resting text of a dropdown.\n *\n * Three regions, all inside the one pill:\n *\n * - `inline`: always in the pill, at its start (status tabs, a search box).\n * - the chips, then \"Clear all\" once any filter is set; or the empty note.\n * - the Add filter button, then `end`: always in the pill, at its end (a\n *   count, Export, a view toggle).\n *\n * The button opens a menu of the filters: each row is the filter's icon and\n * name, the value it holds now, and a chevron. A row opens that filter's own\n * options in the same panel (a back button returns to the list); choosing an\n * option sets the filter and closes the menu. A custom filter shows its own\n * control in that step.\n *\n * The bar holds NO filter state. Every value and every change belongs to the\n * caller: removing a chip hands the filter's `emptyValue` back to its\n * `onChange`; Clear all does that for each set filter, or calls\n * `onClearAll` when the caller resets its filters in one step.\n *\n * Accessibility comes from the parts: the panel is a dialog named by its\n * trigger, the trigger carries `aria-expanded`, focus moves into the panel and\n * is contained there, Escape closes it and focus returns to the trigger, and\n * each list is a real menu with arrow keys and type-ahead.\n */\n\n/** The toolbar: one pill with a light border on the surface. */\nexport const filterBarVariants = cva([\n  \"flex flex-wrap items-center gap-x-3 gap-y-2 rounded-full\",\n  \"border-(length:--border-width) border-border bg-surface\",\n  \"px-4 py-2 box-border font-sans\",\n]);\n\n/** The group at the pill's end: the Add filter button and the caller's `end`. */\nexport const filterBarRowVariants = cva([\"ms-auto flex flex-wrap items-center gap-2\"]);\n\nexport const filterBarChipVariants = cva([\n  \"inline-flex items-center gap-1 rounded-full\",\n  \"border-(length:--border-width) border-border bg-muted\",\n  \"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground\",\n  \"box-border font-sans\",\n]);\n\n/** One option of a dropdown filter. */\nexport interface FilterBarOption {\n  /** The option's value, handed to `onChange`. */\n  id: Key;\n  /** The option's text: in the list, on the trigger and on the chip. */\n  label: string;\n}\n\n/** A dropdown filter: a row in the Add filter menu that opens its options. */\nexport interface FilterBarSelectField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The field's name: its row in the menu and the start of its chip. */\n  label: string;\n  /** An icon before the name in the menu row. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** The current value. `null` reads as not set. */\n  value: Key | null;\n  /** The value that means \"not filtered\" (the \"All\" option's id). */\n  emptyValue: Key;\n  /** The options, the \"All\" option included. */\n  options: readonly FilterBarOption[];\n  /** Told the chosen option's id, or `emptyValue` when the chip is removed. */\n  onChange: (value: Key) => void;\n}\n\n/**\n * A filter that is not a plain dropdown (a date range, a searchable picker):\n * the caller renders the control and says what its chip reads.\n */\nexport interface FilterBarCustomField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The start of its chip, and its row in the menu. The control rendered by `render` names itself. */\n  label: string;\n  /** An icon before the name in the menu row. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** The control, rendered in the menu's step for this filter. */\n  render: () => ReactNode;\n  /** The chip's value text while the filter is set, or `null` while it is not. */\n  activeLabel: string | null;\n  /** Unsets the filter: the chip's remove button and Clear all call it. */\n  onClear: () => void;\n}\n\nexport type FilterBarField = FilterBarSelectField | FilterBarCustomField;\n\nexport interface FilterBarProps {\n  /** Always in the pill, at its start: status tabs and the search box. */\n  inline?: ReactNode;\n  /** Always in the pill, at its end: a count, Export, a view toggle. */\n  end?: ReactNode;\n  /** The filters in the Add filter menu. With none, no button renders. */\n  filters: readonly FilterBarField[];\n  /** Resets every filter in one step. Without it, each set filter is handed its `emptyValue`. */\n  onClearAll?: () => void;\n  /**\n   * The button's text, and the menu's name.\n   *\n   * @default \"Add filter\"\n   */\n  buttonLabel?: string;\n  /**\n   * The text of Clear all.\n   *\n   * @default \"Clear all\"\n   */\n  clearAllLabel?: string;\n  /**\n   * Ignored: the menu has no Done button, because choosing an option closes it.\n   *\n   * @deprecated Kept so existing callers still compile.\n   */\n  doneLabel?: string;\n  /**\n   * The note shown while no filter is set.\n   *\n   * @default \"No filters applied\"\n   */\n  emptyLabel?: string;\n  /**\n   * The accessible name of the list of chips.\n   *\n   * @default \"Filters set\"\n   */\n  chipsLabel?: string;\n  /**\n   * The accessible name of a chip's remove button, given the chip's text.\n   *\n   * @default (text) => `Remove filter ${text}`\n   */\n  removeLabel?: (chipText: string) => string;\n  /**\n   * The accessible name of the menu's back button.\n   *\n   * @default \"Back to filters\"\n   */\n  backLabel?: string;\n  /** Extra classes on the root. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst isCustom = (f: FilterBarField): f is FilterBarCustomField => \"render\" in f;\n\ninterface Chip {\n  id: string;\n  text: string;\n  clear: () => void;\n}\n\n/** What a filter holds now, for its menu row and its chip: `null` while it is not set. */\nfunction valueOf(f: FilterBarField): string | null {\n  if (isCustom(f)) return f.activeLabel;\n  if (f.value == null || f.value === f.emptyValue) return null;\n  const option = f.options.find((o) => o.id === f.value);\n  return option ? option.label : String(f.value);\n}\n\n/** The set filters, each with its chip text and how to unset it. */\nfunction chipsFor(filters: readonly FilterBarField[]): Chip[] {\n  const chips: Chip[] = [];\n  for (const f of filters) {\n    const value = valueOf(f);\n    if (value == null) continue;\n    chips.push({\n      id: f.id,\n      text: `${f.label}: ${value}`,\n      clear: isCustom(f) ? f.onClear : () => f.onChange(f.emptyValue),\n    });\n  }\n  return chips;\n}\n\nfunction Glyph({ path }: { path: string }) {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d={path} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nconst PlusGlyph = () => <Glyph path=\"M8 3v10M3 8h10\" />;\nconst CrossGlyph = () => <Glyph path=\"M4 4l8 8M12 4l-8 8\" />;\nconst ChevronRightGlyph = () => <Glyph path=\"M6 3l5 5-5 5\" />;\nconst ChevronLeftGlyph = () => <Glyph path=\"M10 3 5 8l5 5\" />;\nconst CheckGlyph = () => <Glyph path=\"M3 8.5l3.5 3.5L13 4.5\" />;\n\n/**\n * A list toolbar with its filters behind one Add filter button.\n *\n * @example\n * <FilterBar\n *   end={<Button>Export</Button>}\n *   filters={[{ id: \"status\", label: \"Status\", icon: <StatusIcon aria-hidden />, value, emptyValue: \"all\",\n *     onChange: setValue, options: [{ id: \"all\", label: \"Any status\" }, { id: \"open\", label: \"Open\" }] }]}\n * />\n */\n/**\n * One place in the chip row, for a chip or for Clear all. A slot added after the\n * first render opens from nothing while its content fades up and scales in, so the\n * chips beside it glide over; one that is removed stays, shrinking and collapsing,\n * until its exit ends. Nothing animates at first render.\n */\nfunction Slot({\n  leaving,\n  ready,\n  onDone,\n  id,\n  children,\n}: {\n  leaving: boolean;\n  ready: boolean;\n  onDone: (id: string) => void;\n  id: string;\n  children: ReactNode;\n}) {\n  // Decided once, at this slot's own mount.\n  const [fresh] = useState(ready);\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(leaving, remove, 900);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) remove();\n  }, [leaving, remove]);\n  return (\n    <li\n      data-slot={leaving ? \"filter-bar-leaving\" : undefined}\n      aria-hidden={leaving || undefined}\n      ref={(node) => {\n        if (!node) return;\n        if (leaving) node.setAttribute(\"inert\", \"\");\n        else node.removeAttribute(\"inert\");\n      }}\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.animationName === \"chip-slot-out\")\n          remove();\n      }}\n      className={cnAll(\n        \"min-w-0 flex-none [interpolate-size:allow-keywords]\",\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : fresh && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </li>\n  );\n}\n\n/** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */\nfunction ChipText({ text }: { text: string }) {\n  const content = useRef<HTMLSpanElement>(null);\n  useMorphWidth(content, text);\n  return (\n    <span className=\"button-slot\">\n      <span ref={content} className=\"inline-flex flex-none items-center\">\n        <SwapText swapKey={text} className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\n/** A filter's icon, drawn at the control icon size in the secondary ink. */\nfunction RowIcon({ icon }: { icon: ReactNode }) {\n  return icon ? (\n    <span aria-hidden=\"true\" className=\"inline-flex text-text-secondary\">\n      {icon}\n    </span>\n  ) : null;\n}\n\n/** The note for no filters. Arriving after the first render (the last chip has gone) it fades in; at first render it does not. */\nfunction EmptyNote({ ready, children }: { ready: boolean; children: ReactNode }) {\n  // Decided once, at this note's own mount: adding the class later would start the animation on a note already on screen.\n  const [fresh] = useState(ready);\n  return (\n    <span\n      data-slot=\"filter-bar-empty\"\n      className={cn(\"text-sm text-text-secondary\" + (fresh ? \" motion-safe:animate-fade-in\" : \"\"))}\n    >\n      {children}\n    </span>\n  );\n}\n\nconst STEP = \"motion-safe:animate-filter-step-in motion-reduce:animate-fade-in\";\n\n/**\n * The Add filter menu's panel, in two steps: the list of filters, then the\n * chosen filter's options (or its own control). A step arrives from the side it\n * was reached from; the first one, on open, does not animate by itself (the\n * popover grows from the button instead).\n */\nfunction FilterPanel({\n  filters,\n  label,\n  backLabel,\n  onClose,\n}: {\n  filters: readonly FilterBarField[];\n  label: string;\n  backLabel: string;\n  onClose: () => void;\n}) {\n  const [fieldId, setFieldId] = useState<string | null>(null);\n  // null until the user has navigated: the first step does not animate by itself.\n  const [dir, setDir] = useState<1 | -1 | null>(null);\n  // The filter whose step we came back from: focus returns to its row.\n  const [returnTo, setReturnTo] = useState<string | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const bindFields = useMenuHighlight();\n  const bindOptions = useMenuHighlight();\n  const field = filters.find((f) => f.id === fieldId) ?? null;\n\n  // Coming back, focus lands on the row that was opened rather than on the first one.\n  // The rows of a React Aria menu land a frame after it mounts, so this waits for the row.\n  useEffect(() => {\n    if (field || returnTo === null) return;\n    const id = returnTo;\n    let frame = 0;\n    let tries = 0;\n    const focusRow = () => {\n      const row = Array.from(\n        listRef.current?.querySelectorAll<HTMLElement>(\"[data-slot='menu-item']\") ?? [],\n      ).find((node) => node.dataset.key === id);\n      if (row) row.focus();\n      else if (tries++ < 20) frame = requestAnimationFrame(focusRow);\n    };\n    focusRow();\n    return () => cancelAnimationFrame(frame);\n  }, [field, returnTo]);\n\n  const open = (id: Key) => {\n    setDir(1);\n    setFieldId(String(id));\n  };\n  const back = () => {\n    if (!field) return;\n    setReturnTo(field.id);\n    setDir(-1);\n    setFieldId(null);\n  };\n  const stepClass = dir === null ? \"\" : cn(STEP + (dir === 1 ? \" [--step-dir:1]\" : \" [--step-dir:-1]\"));\n\n  return (\n    <div data-slot=\"filter-bar-panel\" className=\"overflow-x-clip\">\n      {field ? (\n        <div\n          key={field.id}\n          className={stepClass}\n          onKeyDown={(event) => {\n            // Arrow left steps back, from the options list; a custom control keeps its own keys.\n            if (event.key === \"ArrowLeft\" && !isCustom(field)) {\n              event.preventDefault();\n              back();\n            }\n          }}\n        >\n          <div className=\"flex items-center gap-1 px-1 pb-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label={backLabel}\n              onPress={back}\n              className=\"size-8 flex-none rounded-full\"\n            >\n              <ChevronLeftGlyph />\n            </Button>\n            <span className=\"min-w-0 truncate text-sm font-medium text-foreground\">{field.label}</span>\n          </div>\n          {isCustom(field) ? (\n            <div className=\"p-1.5\">{field.render()}</div>\n          ) : (\n            <AriaMenu\n              ref={bindOptions}\n              aria-label={field.label}\n              data-slot=\"filter-bar-options\"\n              autoFocus=\"first\"\n              selectionMode=\"single\"\n              disallowEmptySelection\n              selectedKeys={field.value == null ? [] : [field.value]}\n              onAction={(key) => {\n                field.onChange(key);\n                onClose();\n              }}\n              className={menuVariants()}\n            >\n              {field.options.map((o) => (\n                <MenuItem key={o.id} id={o.id} textValue={o.label}>\n                  <span className=\"min-w-0 flex-1 truncate\">{o.label}</span>\n                  <span\n                    aria-hidden=\"true\"\n                    className={\n                      o.id === field.value\n                        ? \"inline-flex text-foreground\"\n                        : \"inline-flex text-foreground opacity-0\"\n                    }\n                  >\n                    <CheckGlyph />\n                  </span>\n                </MenuItem>\n              ))}\n            </AriaMenu>\n          )}\n        </div>\n      ) : (\n        <div key=\"fields\" ref={listRef} className={stepClass}>\n          <AriaMenu\n            ref={bindFields}\n            aria-label={label}\n            data-slot=\"filter-bar-fields\"\n            autoFocus={returnTo === null ? \"first\" : false}\n            onAction={open}\n            // Choosing a filter opens its options; it must not close the panel.\n            onClose={() => {}}\n            className={menuVariants()}\n          >\n            {filters.map((f) => {\n              const value = valueOf(f);\n              return (\n                <MenuItem key={f.id} id={f.id} textValue={f.label}>\n                  <RowIcon icon={f.icon} />\n                  <span className=\"min-w-0 flex-1 truncate\">{f.label}</span>\n                  {value ? (\n                    <span className=\"max-w-24 truncate text-xs text-text-secondary\">{value}</span>\n                  ) : null}\n                  <span aria-hidden=\"true\" className=\"inline-flex text-text-secondary\">\n                    <ChevronRightGlyph />\n                  </span>\n                </MenuItem>\n              );\n            })}\n          </AriaMenu>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(function FilterBar(\n  {\n    inline,\n    end,\n    filters,\n    onClearAll,\n    buttonLabel = \"Add filter\",\n    clearAllLabel = \"Clear all\",\n    emptyLabel = \"No filters applied\",\n    chipsLabel = \"Filters set\",\n    removeLabel = (text) => `Remove filter ${text}`,\n    backLabel = \"Back to filters\",\n    className,\n  },\n  ref,\n) {\n  const [open, setOpen] = useState(false);\n  const chips = chipsFor(filters);\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    // A frame after mount: chips added from then on arrive animated, the first ones do not.\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n  // The chips, with Clear all as the row's last place, each kept on screen while it leaves.\n  const places = useLeavingList([\n    ...chips.map((chip) => ({ id: chip.id, chip })),\n    ...(chips.length > 0 ? [{ id: \"\\u0000clear\", chip: null }] : []),\n  ]);\n  const frame = useRef<HTMLDivElement>(null);\n  const row = useRef<HTMLUListElement>(null);\n  // The row follows its height when a chip makes a line wrap or unwrap.\n  useHeightFollow(frame, row, chips.map((chip) => chip.id).join());\n  const clearAll = () => {\n    if (onClearAll) onClearAll();\n    else for (const c of chips) c.clear();\n  };\n\n  return (\n    <div ref={ref} data-slot=\"filter-bar\" className={cn(filterBarVariants(), className)}>\n      {inline ? <div className=\"flex flex-wrap items-center gap-2\">{inline}</div> : null}\n      <div\n        data-slot=\"filter-bar-chips-area\"\n        className=\"flex min-h-(--density-control-h-sm) min-w-0 flex-[1_1_8rem] items-center\"\n      >\n        {places.list.length > 0 ? (\n          <div ref={frame} data-slot=\"filter-bar-chips-frame\" className=\"height-follow min-w-0\">\n            <ul\n              ref={row}\n              aria-label={chipsLabel}\n              data-slot=\"filter-bar-chips\"\n              className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\"\n            >\n              {places.list.map(({ item, leaving }) =>\n                item.chip ? (\n                  <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                    <span data-slot=\"filter-bar-chip\" className={filterBarChipVariants()}>\n                      <ChipText text={item.chip.text} />\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        aria-label={removeLabel(item.chip.text)}\n                        onPress={item.chip.clear}\n                        className=\"h-6 px-1\"\n                      >\n                        <CrossGlyph />\n                      </Button>\n                    </span>\n                  </Slot>\n                ) : (\n                  <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                    <Button variant=\"link\" size=\"sm\" onPress={clearAll}>\n                      {clearAllLabel}\n                    </Button>\n                  </Slot>\n                ),\n              )}\n            </ul>\n          </div>\n        ) : (\n          <EmptyNote ready={ready}>{emptyLabel}</EmptyNote>\n        )}\n      </div>\n      {filters.length > 0 || end ? (\n        <div data-slot=\"filter-bar-actions\" className={filterBarRowVariants()}>\n          {filters.length > 0 ? (\n            <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n              <Button\n                variant=\"outlineNeutral\"\n                size=\"sm\"\n                startIcon={<PlusGlyph />}\n                data-slot=\"filter-bar-button\"\n              >\n                {buttonLabel}\n              </Button>\n              <Popover\n                placement=\"bottom end\"\n                offset={8}\n                className=\"w-64 max-w-[calc(100vw-2rem)] p-1.5\"\n              >\n                <FilterPanel\n                  filters={filters}\n                  label={buttonLabel}\n                  backLabel={backLabel}\n                  onClose={() => setOpen(false)}\n                />\n              </Popover>\n            </PopoverTrigger>\n          ) : null}\n          {end}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"filter-bar.js","names":["Button","AriaMenu","MenuItem","Popover"],"sources":["../../src/filter-bar/filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Menu as AriaMenu, type Key } from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport { useMenuHighlight } from \"../lib/menu-highlight.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { MenuItem, menuVariants } from \"../menu/menu.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\n\n/**\n * FilterBar -- a filter toolbar: one pill that shows what is filtered as\n * removable chips (\"No filters applied\" while nothing is), with an \"Add filter\"\n * button that opens a menu of the filters.\n *\n * Why it exists: list screens grew a row of four to seven dropdowns beside\n * the search box and the status tabs. At desktop width that row wraps onto a\n * second line; on a phone it scrolls sideways. The bar keeps the row to one\n * line and makes what IS filtered visible as chips instead of as the\n * resting text of a dropdown.\n *\n * Three regions, all inside the one pill:\n *\n * - `inline`: always in the pill, at its start (status tabs, a search box).\n * - the chips, then \"Clear all\" once any filter is set; or the empty note.\n * - the Add filter button, then `end`: always in the pill, at its end (a\n *   count, Export, a view toggle).\n *\n * The button opens a menu of the filters: each row is the filter's icon and\n * name, the value it holds now, and a chevron. A row opens that filter's own\n * options in the same panel (a back button returns to the list); choosing an\n * option sets the filter and closes the menu. A custom filter shows its own\n * control in that step.\n *\n * The bar holds NO filter state. Every value and every change belongs to the\n * caller: removing a chip hands the filter's `emptyValue` back to its\n * `onChange`; Clear all does that for each set filter, or calls\n * `onClearAll` when the caller resets its filters in one step.\n *\n * Accessibility comes from the parts: the panel is a dialog named by its\n * trigger, the trigger carries `aria-expanded`, focus moves into the panel and\n * is contained there, Escape closes it and focus returns to the trigger, and\n * each list is a real menu with arrow keys and type-ahead. Removing a chip, by\n * keyboard or pointer, moves focus to the chip that takes its place (the one\n * before it when it was last); removing the last chip, or Clear all, moves it to\n * the Add filter button.\n */\n\n/** The toolbar: one pill with a light border on the surface. */\nexport const filterBarVariants = cva([\n  \"flex flex-wrap items-center gap-x-3 gap-y-2 rounded-full\",\n  \"border-(length:--border-width) border-border bg-surface\",\n  \"px-4 py-2 box-border font-sans\",\n]);\n\n/** The group at the pill's end: the Add filter button and the caller's `end`. */\nexport const filterBarRowVariants = cva([\"ms-auto flex flex-wrap items-center gap-2\"]);\n\nexport const filterBarChipVariants = cva([\n  \"inline-flex items-center gap-1 rounded-full\",\n  \"border-(length:--border-width) border-border bg-muted\",\n  \"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground\",\n  \"box-border font-sans\",\n]);\n\n/** One option of a dropdown filter. */\nexport interface FilterBarOption {\n  /** The option's value, handed to `onChange`. */\n  id: Key;\n  /** The option's text: in the list, on the trigger and on the chip. */\n  label: string;\n}\n\n/** A dropdown filter: a row in the Add filter menu that opens its options. */\nexport interface FilterBarSelectField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The field's name: its row in the menu and the start of its chip. */\n  label: string;\n  /** An icon before the name in the menu row. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** The current value. `null` reads as not set. */\n  value: Key | null;\n  /** The value that means \"not filtered\" (the \"All\" option's id). */\n  emptyValue: Key;\n  /** The options, the \"All\" option included. */\n  options: readonly FilterBarOption[];\n  /** Told the chosen option's id, or `emptyValue` when the chip is removed. */\n  onChange: (value: Key) => void;\n}\n\n/**\n * A filter that is not a plain dropdown (a date range, a searchable picker):\n * the caller renders the control and says what its chip reads.\n */\nexport interface FilterBarCustomField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The start of its chip, and its row in the menu. The control rendered by `render` names itself. */\n  label: string;\n  /** An icon before the name in the menu row. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** The control, rendered in the menu's step for this filter. */\n  render: () => ReactNode;\n  /** The chip's value text while the filter is set, or `null` while it is not. */\n  activeLabel: string | null;\n  /** Unsets the filter: the chip's remove button and Clear all call it. */\n  onClear: () => void;\n}\n\nexport type FilterBarField = FilterBarSelectField | FilterBarCustomField;\n\nexport interface FilterBarProps {\n  /** Always in the pill, at its start: status tabs and the search box. */\n  inline?: ReactNode;\n  /** Always in the pill, at its end: a count, Export, a view toggle. */\n  end?: ReactNode;\n  /** The filters in the Add filter menu. With none, no button renders. */\n  filters: readonly FilterBarField[];\n  /** Resets every filter in one step. Without it, each set filter is handed its `emptyValue`. */\n  onClearAll?: () => void;\n  /**\n   * The button's text, and the menu's name.\n   *\n   * @default \"Add filter\"\n   */\n  buttonLabel?: string;\n  /**\n   * The text of Clear all.\n   *\n   * @default \"Clear all\"\n   */\n  clearAllLabel?: string;\n  /**\n   * Ignored: the menu has no Done button, because choosing an option closes it.\n   *\n   * @deprecated Kept so existing callers still compile.\n   */\n  doneLabel?: string;\n  /**\n   * The note shown while no filter is set.\n   *\n   * @default \"No filters applied\"\n   */\n  emptyLabel?: string;\n  /**\n   * The accessible name of the list of chips.\n   *\n   * @default \"Filters set\"\n   */\n  chipsLabel?: string;\n  /**\n   * The accessible name of a chip's remove button, given the chip's text.\n   *\n   * @default (text) => `Remove filter ${text}`\n   */\n  removeLabel?: (chipText: string) => string;\n  /**\n   * The accessible name of the menu's back button.\n   *\n   * @default \"Back to filters\"\n   */\n  backLabel?: string;\n  /** Extra classes on the root. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst isCustom = (f: FilterBarField): f is FilterBarCustomField => \"render\" in f;\n\ninterface Chip {\n  id: string;\n  text: string;\n  clear: () => void;\n}\n\n/** What a filter holds now, for its menu row and its chip: `null` while it is not set. */\nfunction valueOf(f: FilterBarField): string | null {\n  if (isCustom(f)) return f.activeLabel;\n  if (f.value == null || f.value === f.emptyValue) return null;\n  const option = f.options.find((o) => o.id === f.value);\n  return option ? option.label : String(f.value);\n}\n\n/** The set filters, each with its chip text and how to unset it. */\nfunction chipsFor(filters: readonly FilterBarField[]): Chip[] {\n  const chips: Chip[] = [];\n  for (const f of filters) {\n    const value = valueOf(f);\n    if (value == null) continue;\n    chips.push({\n      id: f.id,\n      text: `${f.label}: ${value}`,\n      clear: isCustom(f) ? f.onClear : () => f.onChange(f.emptyValue),\n    });\n  }\n  return chips;\n}\n\nfunction Glyph({ path }: { path: string }) {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d={path} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nconst PlusGlyph = () => <Glyph path=\"M8 3v10M3 8h10\" />;\nconst CrossGlyph = () => <Glyph path=\"M4 4l8 8M12 4l-8 8\" />;\nconst ChevronRightGlyph = () => <Glyph path=\"M6 3l5 5-5 5\" />;\nconst ChevronLeftGlyph = () => <Glyph path=\"M10 3 5 8l5 5\" />;\nconst CheckGlyph = () => <Glyph path=\"M3 8.5l3.5 3.5L13 4.5\" />;\n\n/**\n * A list toolbar with its filters behind one Add filter button.\n *\n * @example\n * <FilterBar\n *   end={<Button>Export</Button>}\n *   filters={[{ id: \"status\", label: \"Status\", icon: <StatusIcon aria-hidden />, value, emptyValue: \"all\",\n *     onChange: setValue, options: [{ id: \"all\", label: \"Any status\" }, { id: \"open\", label: \"Open\" }] }]}\n * />\n */\n/**\n * One place in the chip row, for a chip or for Clear all. A slot added after the\n * first render opens from nothing while its content fades up and scales in, so the\n * chips beside it glide over; one that is removed stays, shrinking and collapsing,\n * until its exit ends. Nothing animates at first render.\n */\nfunction Slot({\n  leaving,\n  ready,\n  onDone,\n  id,\n  children,\n}: {\n  leaving: boolean;\n  ready: boolean;\n  onDone: (id: string) => void;\n  id: string;\n  children: ReactNode;\n}) {\n  // Decided once, at this slot's own mount.\n  const [fresh] = useState(ready);\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(leaving, remove, 900);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) remove();\n  }, [leaving, remove]);\n  return (\n    <li\n      data-slot={leaving ? \"filter-bar-leaving\" : undefined}\n      aria-hidden={leaving || undefined}\n      ref={(node) => {\n        if (!node) return;\n        if (leaving) node.setAttribute(\"inert\", \"\");\n        else node.removeAttribute(\"inert\");\n      }}\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.animationName === \"chip-slot-out\")\n          remove();\n      }}\n      className={cnAll(\n        \"min-w-0 flex-none [interpolate-size:allow-keywords]\",\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : fresh && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </li>\n  );\n}\n\n/**\n * A chip's remove button. It registers itself with the bar under its chip's id\n * through a ref callback that stays the same across renders, so React does not\n * detach and re-attach it on every commit.\n */\nfunction ChipRemove({\n  id,\n  label,\n  register,\n  onPress,\n}: {\n  id: string;\n  label: string;\n  register: (id: string, node: HTMLButtonElement | null) => void;\n  onPress: () => void;\n}) {\n  const ref = useCallback((node: HTMLButtonElement | null) => register(id, node), [register, id]);\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"sm\"\n      aria-label={label}\n      onPress={onPress}\n      // The ring is drawn inside the button, which fits inside the chip: the\n      // default ring sits outside, stood taller than the chip and covered the end\n      // of its label.\n      className=\"h-6 rounded-full px-1 data-[focus-visible]:-outline-offset-(--focus-ring-width)\"\n    >\n      <CrossGlyph />\n    </Button>\n  );\n}\n\n/** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */\nfunction ChipText({ text }: { text: string }) {\n  const content = useRef<HTMLSpanElement>(null);\n  useMorphWidth(content, text);\n  return (\n    <span className=\"button-slot\">\n      <span ref={content} className=\"inline-flex flex-none items-center\">\n        <SwapText swapKey={text} className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\n/** A filter's icon, drawn at the control icon size in the secondary ink. */\nfunction RowIcon({ icon }: { icon: ReactNode }) {\n  return icon ? (\n    <span aria-hidden=\"true\" className=\"inline-flex text-text-secondary\">\n      {icon}\n    </span>\n  ) : null;\n}\n\n/** The note for no filters. Arriving after the first render (the last chip has gone) it fades in; at first render it does not. */\nfunction EmptyNote({ ready, children }: { ready: boolean; children: ReactNode }) {\n  // Decided once, at this note's own mount: adding the class later would start the animation on a note already on screen.\n  const [fresh] = useState(ready);\n  return (\n    <span\n      data-slot=\"filter-bar-empty\"\n      className={cn(\"text-sm text-text-secondary\" + (fresh ? \" motion-safe:animate-fade-in\" : \"\"))}\n    >\n      {children}\n    </span>\n  );\n}\n\nconst STEP = \"motion-safe:animate-filter-step-in motion-reduce:animate-fade-in\";\n\n/**\n * The Add filter menu's panel, in two steps: the list of filters, then the\n * chosen filter's options (or its own control). A step arrives from the side it\n * was reached from; the first one, on open, does not animate by itself (the\n * popover grows from the button instead).\n */\nfunction FilterPanel({\n  filters,\n  label,\n  backLabel,\n  onClose,\n}: {\n  filters: readonly FilterBarField[];\n  label: string;\n  backLabel: string;\n  onClose: () => void;\n}) {\n  const [fieldId, setFieldId] = useState<string | null>(null);\n  // null until the user has navigated: the first step does not animate by itself.\n  const [dir, setDir] = useState<1 | -1 | null>(null);\n  // The filter whose step we came back from: focus returns to its row.\n  const [returnTo, setReturnTo] = useState<string | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const bindFields = useMenuHighlight();\n  const bindOptions = useMenuHighlight();\n  const field = filters.find((f) => f.id === fieldId) ?? null;\n\n  // Coming back, focus lands on the row that was opened rather than on the first one.\n  // The rows of a React Aria menu land a frame after it mounts, so this waits for the row.\n  useEffect(() => {\n    if (field || returnTo === null) return;\n    const id = returnTo;\n    let frame = 0;\n    let tries = 0;\n    const focusRow = () => {\n      const row = Array.from(\n        listRef.current?.querySelectorAll<HTMLElement>(\"[data-slot='menu-item']\") ?? [],\n      ).find((node) => node.dataset.key === id);\n      if (row) row.focus();\n      else if (tries++ < 20) frame = requestAnimationFrame(focusRow);\n    };\n    focusRow();\n    return () => cancelAnimationFrame(frame);\n  }, [field, returnTo]);\n\n  const open = (id: Key) => {\n    setDir(1);\n    setFieldId(String(id));\n  };\n  const back = () => {\n    if (!field) return;\n    setReturnTo(field.id);\n    setDir(-1);\n    setFieldId(null);\n  };\n  const stepClass = dir === null ? \"\" : cn(STEP + (dir === 1 ? \" [--step-dir:1]\" : \" [--step-dir:-1]\"));\n\n  return (\n    <div data-slot=\"filter-bar-panel\" className=\"overflow-x-clip\">\n      {field ? (\n        <div\n          key={field.id}\n          className={stepClass}\n          onKeyDown={(event) => {\n            // Arrow left steps back, from the options list; a custom control keeps its own keys.\n            if (event.key === \"ArrowLeft\" && !isCustom(field)) {\n              event.preventDefault();\n              back();\n            }\n          }}\n        >\n          <div className=\"flex items-center gap-1 px-1 pb-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label={backLabel}\n              onPress={back}\n              className=\"size-8 flex-none rounded-full\"\n            >\n              <ChevronLeftGlyph />\n            </Button>\n            <span className=\"min-w-0 truncate text-sm font-medium text-foreground\">{field.label}</span>\n          </div>\n          {isCustom(field) ? (\n            <div className=\"p-1.5\">{field.render()}</div>\n          ) : (\n            <AriaMenu\n              ref={bindOptions}\n              aria-label={field.label}\n              data-slot=\"filter-bar-options\"\n              autoFocus=\"first\"\n              selectionMode=\"single\"\n              disallowEmptySelection\n              selectedKeys={field.value == null ? [] : [field.value]}\n              onAction={(key) => {\n                field.onChange(key);\n                onClose();\n              }}\n              className={menuVariants()}\n            >\n              {field.options.map((o) => (\n                <MenuItem key={o.id} id={o.id} textValue={o.label}>\n                  <span className=\"min-w-0 flex-1 truncate\">{o.label}</span>\n                  <span\n                    aria-hidden=\"true\"\n                    className={\n                      o.id === field.value\n                        ? \"inline-flex text-foreground\"\n                        : \"inline-flex text-foreground opacity-0\"\n                    }\n                  >\n                    <CheckGlyph />\n                  </span>\n                </MenuItem>\n              ))}\n            </AriaMenu>\n          )}\n        </div>\n      ) : (\n        <div key=\"fields\" ref={listRef} className={stepClass}>\n          <AriaMenu\n            ref={bindFields}\n            aria-label={label}\n            data-slot=\"filter-bar-fields\"\n            autoFocus={returnTo === null ? \"first\" : false}\n            onAction={open}\n            // Choosing a filter opens its options; it must not close the panel.\n            onClose={() => {}}\n            className={menuVariants()}\n          >\n            {filters.map((f) => {\n              const value = valueOf(f);\n              return (\n                <MenuItem key={f.id} id={f.id} textValue={f.label}>\n                  <RowIcon icon={f.icon} />\n                  <span className=\"min-w-0 flex-1 truncate\">{f.label}</span>\n                  {value ? (\n                    <span className=\"max-w-24 truncate text-xs text-text-secondary\">{value}</span>\n                  ) : null}\n                  <span aria-hidden=\"true\" className=\"inline-flex text-text-secondary\">\n                    <ChevronRightGlyph />\n                  </span>\n                </MenuItem>\n              );\n            })}\n          </AriaMenu>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(function FilterBar(\n  {\n    inline,\n    end,\n    filters,\n    onClearAll,\n    buttonLabel = \"Add filter\",\n    clearAllLabel = \"Clear all\",\n    emptyLabel = \"No filters applied\",\n    chipsLabel = \"Filters set\",\n    removeLabel = (text) => `Remove filter ${text}`,\n    backLabel = \"Back to filters\",\n    className,\n  },\n  ref,\n) {\n  const [open, setOpen] = useState(false);\n  const chips = chipsFor(filters);\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    // A frame after mount: chips added from then on arrive animated, the first ones do not.\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n  // The chips, with Clear all as the row's last place, each kept on screen while it leaves.\n  const places = useLeavingList([\n    ...chips.map((chip) => ({ id: chip.id, chip })),\n    ...(chips.length > 0 ? [{ id: \"\\u0000clear\", chip: null }] : []),\n  ]);\n  const frame = useRef<HTMLDivElement>(null);\n  const row = useRef<HTMLUListElement>(null);\n  // The row follows its height when a chip makes a line wrap or unwrap.\n  const chipKey = chips.map((chip) => chip.id).join();\n  useHeightFollow(frame, row, chipKey);\n  // A removed chip's slot turns inert as it leaves, which would drop focus to the\n  // page: where focus goes instead is noted on the press (the removed chip's index,\n  // or \"add\" for Clear all) and moved once the caller's change has removed it.\n  const removeButtons = useRef(new Map<string, HTMLButtonElement>());\n  const registerRemove = useCallback((id: string, node: HTMLButtonElement | null) => {\n    if (node) removeButtons.current.set(id, node);\n    else removeButtons.current.delete(id);\n  }, []);\n  const addButton = useRef<HTMLButtonElement>(null);\n  const focusAfter = useRef<number | \"add\" | null>(null);\n  const noteFocusAfter = (after: number | \"add\") => {\n    focusAfter.current = after;\n    // A caller that ignores the press changes no chip, so the note is never\n    // applied; drop it a frame later, or it would move focus on some later,\n    // unrelated change to the chips. A caller that does change them commits\n    // inside the press, before this frame.\n    requestAnimationFrame(() => {\n      if (focusAfter.current === after) focusAfter.current = null;\n    });\n  };\n  useIsomorphicLayoutEffect(() => {\n    const after = focusAfter.current;\n    if (after === null) return;\n    focusAfter.current = null;\n    const next =\n      after === \"add\" || chips.length === 0 ? null : chips[Math.min(after, chips.length - 1)]!;\n    (next ? removeButtons.current.get(next.id) : addButton.current)?.focus();\n  }, [chipKey]);\n  const clearAll = () => {\n    noteFocusAfter(\"add\");\n    if (onClearAll) onClearAll();\n    else for (const c of chips) c.clear();\n  };\n\n  return (\n    <div ref={ref} data-slot=\"filter-bar\" className={cn(filterBarVariants(), className)}>\n      {inline ? <div className=\"flex flex-wrap items-center gap-2\">{inline}</div> : null}\n      <div\n        data-slot=\"filter-bar-chips-area\"\n        className=\"flex min-h-(--density-control-h-sm) min-w-0 flex-[1_1_8rem] items-center\"\n      >\n        {places.list.length > 0 ? (\n          <div ref={frame} data-slot=\"filter-bar-chips-frame\" className=\"height-follow min-w-0\">\n            <ul\n              ref={row}\n              aria-label={chipsLabel}\n              data-slot=\"filter-bar-chips\"\n              className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\"\n            >\n              {places.list.map(({ item, leaving }) =>\n                item.chip ? (\n                  <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                    <span data-slot=\"filter-bar-chip\" className={filterBarChipVariants()}>\n                      <ChipText text={item.chip.text} />\n                      <ChipRemove\n                        id={item.id}\n                        label={removeLabel(item.chip.text)}\n                        register={registerRemove}\n                        onPress={() => {\n                          noteFocusAfter(chips.findIndex((chip) => chip.id === item.id));\n                          item.chip.clear();\n                        }}\n                      />\n                    </span>\n                  </Slot>\n                ) : (\n                  <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                    <Button variant=\"link\" size=\"sm\" onPress={clearAll}>\n                      {clearAllLabel}\n                    </Button>\n                  </Slot>\n                ),\n              )}\n            </ul>\n          </div>\n        ) : (\n          <EmptyNote ready={ready}>{emptyLabel}</EmptyNote>\n        )}\n      </div>\n      {filters.length > 0 || end ? (\n        <div data-slot=\"filter-bar-actions\" className={filterBarRowVariants()}>\n          {filters.length > 0 ? (\n            <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n              <Button\n                ref={addButton}\n                variant=\"outlineNeutral\"\n                size=\"sm\"\n                startIcon={<PlusGlyph />}\n                data-slot=\"filter-bar-button\"\n              >\n                {buttonLabel}\n              </Button>\n              <Popover\n                placement=\"bottom end\"\n                offset={8}\n                className=\"w-64 max-w-[calc(100vw-2rem)] p-1.5\"\n              >\n                <FilterPanel\n                  filters={filters}\n                  label={buttonLabel}\n                  backLabel={backLabel}\n                  onClose={() => setOpen(false)}\n                />\n              </Popover>\n            </PopoverTrigger>\n          ) : null}\n          {end}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ActionButton, ActionButtonProps } from "./action-button/action-button.j
 import { ActivityDay, ActivityDayDetail, ActivityHeatmap, ActivityHeatmapProps } from "./activity-heatmap/activity-heatmap.js";
 import { Dialog, DialogFooter, DialogFooterProps, DialogProps, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
-import { Alert, AlertProps, alertVariants } from "./alert/alert.js";
+import { Alert, AlertDestructiveIcon as DestructiveGlyph, AlertInfoIcon as InfoGlyph, AlertProps, AlertStatusIconProps as StatusIconProps, AlertSuccessIcon as SuccessGlyph, AlertWarningIcon as WarningGlyph, alertIconVariants, alertVariants } from "./alert/alert.js";
 import { AnimatedCounter, AnimatedCounterProps } from "./animated-counter/animated-counter.js";
 import { Announcement, AnnouncementAction, AnnouncementBar, AnnouncementBarProps, clearAnnouncementDismissal } from "./announcement-bar/announcement-bar.js";
 import { Avatar, AvatarProps, avatarVariants } from "./avatar/avatar.js";
@@ -25,8 +25,8 @@ import { Countdown, CountdownProps, CountdownUnit } from "./countdown/countdown.
 import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
 import { DateRangePicker, DateRangePickerMessages, DateRangePickerProps, DateRangePickerValue, DateRangePreset, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
 import { DatePicker, DatePickerProps } from "./date-picker/date-picker.js";
-import { DonutChart, DonutChartDatum, DonutChartProps } from "./donut-chart/donut-chart.js";
-import { EmptyState, EmptyStateProps, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
+import { DonutChart, DonutChartCenter, DonutChartDatum, DonutChartProps } from "./donut-chart/donut-chart.js";
+import { EmptyState, EmptyStateProps, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants } from "./empty-state/empty-state.js";
 import { ExpandingButtonGroup, ExpandingButtonGroupItem, ExpandingButtonGroupProps, ExpandingButtonGroupSize, ExpandingButtonGroupTone } from "./expanding-button-group/expanding-button-group.js";
 import { FileDropZone, FileDropZoneProps, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
 import { FilterBar, FilterBarCustomField, FilterBarField, FilterBarOption, FilterBarProps, FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
@@ -37,12 +37,12 @@ import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-tit
 import { Input, InputProps, inputVariants } from "./input/input.js";
 import { Label, LabelProps, labelVariants } from "./label/label.js";
 import { cn, cnAll } from "./lib/cn.js";
-import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartSeries } from "./line-chart/line-chart.js";
+import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartReference, LineChartSeries } from "./line-chart/line-chart.js";
 import { Mention, MentionChannel, MentionInput, MentionInputHandle, MentionInputProps, MentionKind, MentionPerson, MentionValue, mentionText, serializeMentions } from "./mention-input/mention-input.js";
 import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
 import { MoneyInput, MoneyInputDetails, MoneyInputProps } from "./money-input/money-input.js";
 import { MorphSelect, MorphSelectGroup, MorphSelectItem, MorphSelectOption, MorphSelectProps } from "./morph-select/morph-select.js";
-import { MultiSelect, MultiSelectProps } from "./multi-select/multi-select.js";
+import { MultiSelect, MultiSelectGroup, MultiSelectGroupProps, MultiSelectProps, multiSelectGroupHeaderVariants, multiSelectGroupVariants } from "./multi-select/multi-select.js";
 import { NumberField, NumberFieldProps } from "./number-field/number-field.js";
 import { OnboardingChecklist, OnboardingChecklistProps, OnboardingStep } from "./onboarding-checklist/onboarding-checklist.js";
 import { PageHeader, PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
@@ -50,9 +50,9 @@ import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswo
 import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRuleOptions, PasswordStrength, PasswordStrengthLevels, PasswordStrengthMessages, PasswordStrengthMessagesInput, PasswordStrengthProps, PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength/password-strength.js";
 import { PHONE_COUNTRIES, PhoneCountry, PhoneStatus, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
 import { PhoneInput, PhoneInputDetails, PhoneInputProps } from "./phone-input/phone-input.js";
-import { Popover, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
+import { Popover, PopoverHoverTrigger, PopoverHoverTriggerProps, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
 import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
-import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
+import { Radio, RadioGroup, RadioGroupProps, RadioGroupVariant, RadioProps, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
 import { Reaction, ReactionOption, Reactions, ReactionsProps } from "./reactions/reactions.js";
 import { Ridgeline, RidgelineProps, RidgelineSeries } from "./ridgeline/ridgeline.js";
 import { ScrollArea, ScrollAreaProps, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area/scroll-area.js";
@@ -74,7 +74,7 @@ import { Spinner, SpinnerProps, spinnerVariants } from "./spinner/spinner.js";
 import { SplitBar, SplitBarProps, SplitSegment } from "./split-bar/split-bar.js";
 import { SplitButton, SplitButtonAction, SplitButtonProps } from "./split-button/split-button.js";
 import { SPARKLINE_DRAW_MS, Sparkline, SparklineProps, SparklineTone, sparklineVariants } from "./sparkline/sparkline.js";
-import { StatCard, StatCardProps, StatCardTone, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
+import { StatCard, StatCardChangeTone, StatCardProps, StatCardTone, StatCardTrend, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
 import { Stepper, StepperOrientation, StepperProps, StepperStatus, StepperStep } from "./stepper/stepper.js";
 import { Streamgraph, StreamgraphDatum, StreamgraphProps, StreamgraphSeries } from "./streamgraph/streamgraph.js";
 import { SwipeAction, SwipeActions, SwipeActionsProps, SwipeActionsRow, SwipeActionsRowProps } from "./swipe-actions/swipe-actions.js";
@@ -92,6 +92,6 @@ import { TimePicker, TimePickerProps, timePickerItemVariants, timePickerListVari
 import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
 import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
 import { Treemap, TreemapNode, TreemapProps } from "./treemap/treemap.js";
-import { UsageMeter, UsageMeterProps, UsageMeterSegment } from "./usage-meter/usage-meter.js";
+import { UsageMeter, UsageMeterProps, UsageMeterSegment, UsageMeterStatus } from "./usage-meter/usage-meter.js";
 import { WaffleCategory, WaffleChart, WaffleChartProps } from "./waffle-chart/waffle-chart.js";
-export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, type AlertProps, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartDatum, type LineChartProps, type LineChartSeries, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardProps, type StatCardTone, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type WaffleCategory, WaffleChart, type WaffleChartProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartCenter, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartDatum, type LineChartProps, type LineChartReference, type LineChartSeries, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, type PopoverHoverTriggerProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardChangeTone, type StatCardProps, type StatCardTone, type StatCardTrend, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type UsageMeterStatus, type WaffleCategory, WaffleChart, type WaffleChartProps, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };

package/dist/index.js

@@ -7,7 +7,7 @@ import { ActivityHeatmap } from "./activity-heatmap/activity-heatmap.js";
 import { Dialog, DialogFooter, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel } from "./alert-dialog/alert-dialog.js";
 import { AnimatedCounter } from "./animated-counter/animated-counter.js";
-import { Alert, alertVariants } from "./alert/alert.js";
+import { Alert, AlertDestructiveIcon as DestructiveGlyph, AlertInfoIcon as InfoGlyph, AlertSuccessIcon as SuccessGlyph, AlertWarningIcon as WarningGlyph, alertIconVariants, alertVariants } from "./alert/alert.js";
 import { AnnouncementBar, clearAnnouncementDismissal } from "./announcement-bar/announcement-bar.js";
 import { Avatar, avatarVariants } from "./avatar/avatar.js";
 import { Badge, badgeVariants } from "./badge/badge.js";
@@ -25,12 +25,12 @@ import { ChipGroup } from "./chip-group/chip-group.js";
 import { ConfirmMorph } from "./confirm-morph/confirm-morph.js";
 import { CopyButton } from "./copy-button/copy-button.js";
 import { Countdown } from "./countdown/countdown.js";
-import { Popover, PopoverTrigger, popoverVariants } from "./popover/popover.js";
+import { Popover, PopoverHoverTrigger, PopoverTrigger, popoverVariants } from "./popover/popover.js";
 import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
 import { DateRangePicker, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
 import { DatePicker } from "./date-picker/date-picker.js";
 import { DonutChart } from "./donut-chart/donut-chart.js";
-import { EmptyState, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
+import { EmptyState, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants } from "./empty-state/empty-state.js";
 import { ExpandingButtonGroup } from "./expanding-button-group/expanding-button-group.js";
 import { FileDropZone, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
 import { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
@@ -46,7 +46,7 @@ import { MentionInput, mentionText, serializeMentions } from "./mention-input/me
 import { Select, SelectItem, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
 import { MoneyInput } from "./money-input/money-input.js";
 import { MorphSelect } from "./morph-select/morph-select.js";
-import { MultiSelect } from "./multi-select/multi-select.js";
+import { MultiSelect, MultiSelectGroup, multiSelectGroupHeaderVariants, multiSelectGroupVariants } from "./multi-select/multi-select.js";
 import { NumberField } from "./number-field/number-field.js";
 import { OnboardingChecklist } from "./onboarding-checklist/onboarding-checklist.js";
 import { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
@@ -56,7 +56,7 @@ import { ScrollArea, scrollAreaRootVariants, scrollAreaVariants } from "./scroll
 import { PHONE_COUNTRIES, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
 import { PhoneInput } from "./phone-input/phone-input.js";
 import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
-import { Radio, RadioGroup, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
+import { Radio, RadioGroup, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
 import { Reactions } from "./reactions/reactions.js";
 import { Ridgeline } from "./ridgeline/ridgeline.js";
 import { evaluateScrubExpression } from "./scrub-input/evaluate.js";
@@ -74,7 +74,7 @@ import { Spinner, spinnerVariants } from "./spinner/spinner.js";
 import { SplitBar } from "./split-bar/split-bar.js";
 import { SplitButton } from "./split-button/split-button.js";
 import { SPARKLINE_DRAW_MS, Sparkline, sparklineVariants } from "./sparkline/sparkline.js";
-import { StatCard, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
+import { StatCard, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
 import { Stepper } from "./stepper/stepper.js";
 import { Streamgraph } from "./streamgraph/streamgraph.js";
 import { SwipeActions, SwipeActionsRow } from "./swipe-actions/swipe-actions.js";
@@ -91,4 +91,4 @@ import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants
 import { Treemap } from "./treemap/treemap.js";
 import { UsageMeter } from "./usage-meter/usage-meter.js";
 import { WaffleChart } from "./waffle-chart/waffle-chart.js";
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, MultiSelectGroup, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };

package/dist/input/input.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { FieldShell, hasFieldProps, useFieldWiring } from "../lib/field-shell.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
@@ -54,9 +54,9 @@ const inputVariants = cva([
 		* a tablet in landscape got 14px and zoomed.
 		*/
 		size: {
-			sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm pointer-coarse:text-base",
-			md: "h-(--density-control-h-md) px-(--density-control-pad-md) text-base",
-			lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg) text-base"
+			sm: [fieldBoxSize.sm, fieldTextSize.sm],
+			md: [fieldBoxSize.md, fieldTextSize.md],
+			lg: [fieldBoxSize.lg, fieldTextSize.lg]
 		},
 		hasStartIcon: { true: "" },
 		hasEndIcon: { true: "" }

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      /**\n       * Height and inline padding from the control scale, so `data-density`\n       * moves a whole form at once. Same three names and the same tokens as\n       * Button, because they sit in the same row: Button's `sm` is the app's\n       * second most common at 167 call sites, and while the field was locked\n       * to `md` the pair was 10px out of alignment with no supported fix.\n       *\n       * Type follows Button's sm rung, with one guard. `sm` is 14px, the\n       * size of the body text a small field sits among (Button's sm label is\n       * text-sm for the same reason). `md` and `lg` stay 16px.\n       *\n       * The guard: iOS Safari zooms the viewport when a focused field's text\n       * is under 16px, so a coarse pointer (a touch screen) keeps 16px on\n       * `sm` too. The switch is the input device, not the viewport width:\n       * the legacy `text-base md:text-sm` changed size at a breakpoint that\n       * has nothing to do with zoom, so a narrow desktop window got 16px and\n       * a tablet in landscape got 14px and zoomed.\n       */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm pointer-coarse:text-base\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-base\",\n      },\n      // Declared empty and filled by the compound variants below: the affix\n      // inset depends on BOTH whether a slot is used and which rung it is on.\n      hasStartIcon: { true: \"\" },\n      hasEndIcon: { true: \"\" },\n    },\n    compoundVariants: [\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing keeping the value from running\n      // underneath a glyph is this padding. It is the same three tokens that\n      // place the glyph -- inline padding, icon box, control gap -- so the\n      // text and the glyph move together across density AND size. A\n      // hand-tuned `pl-9` at the call site can do neither, and the product\n      // app has eighteen of those.\n      {\n        size: \"sm\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"sm\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: { start: \"\", end: \"\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    // The glyph's inset is the field's own inline padding, so it lines up with\n    // where the value would have started. That makes it a pair of axes, not\n    // one: a small field at the medium inset puts the glyph under the text.\n    compoundVariants: [\n      { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n      { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n      { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n      { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n      { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n      { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Control scale. Height and inline padding come from the same\n   * `--density-control-*` tokens as Button, so a field and a button on one\n   * rung are the same height.\n   *\n   * Type does not scale with it: the field stays at 16px everywhere, because\n   * iOS Safari zooms the viewport when a focused input's text is smaller.\n   *\n   * This REPLACES the native `size` attribute, which React Aria inherits from\n   * `InputHTMLAttributes` as a character count. No call site in the census\n   * used it; set a width with `className` instead.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n  /**\n   * A visible label above the field, tied to it with `htmlFor`. Passing any of\n   * `label`, `description` or `error` (even as `undefined`) wraps the field;\n   * with none of them the DOM is exactly the bare input. Do not also pass\n   * `aria-label`: it wins over the label, so the visible name is not the\n   * accessible one (WCAG 2.5.3). Ignored inside a React Aria `TextField`,\n   * which supplies its own label and messages.\n   */\n  label?: ReactNode;\n  /**\n   * Helper text under the field, named by `aria-describedby`. It opens on a\n   * spring when it appears after mount, changed words rise in and numbers roll\n   * digit by digit; nothing animates on first render, and reduced motion swaps\n   * it instantly. A string, because the copy is animated word by word.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the field takes its\n   * invalid border, and is announced as an alert when it appears. Opens and\n   * closes like `description`. An empty or `undefined` value closes the row.\n   */\n  error?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(allProps, ref) {\n  const {\n    className,\n    size = \"md\",\n    startIcon,\n    endIcon,\n    label,\n    description,\n    error,\n    ...props\n  } = allProps;\n  const field = useFieldWiring({\n    enabled: hasFieldProps(allProps),\n    id: props.id,\n    describedBy: props[\"aria-describedby\"],\n    invalid: props[\"aria-invalid\"],\n    description,\n    error,\n  });\n  const input = (\n    <AriaInput\n      // The ref goes on the INPUT, never on the wrapper span below. A ref\n      // pointing at the wrapper is still non-null, so it satisfies the obvious\n      // assertion while breaking `.focus()`, `.select()` and every\n      // react-hook-form site -- but only at the call sites that pass an icon.\n      // RefLandsOnTheInputNotTheWrapper is the guard.\n      ref={ref}\n      {...props}\n      {...field.controlProps}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          size,\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  //\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  const control =\n    startIcon === undefined && endIcon === undefined ? (\n      input\n    ) : (\n      <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n        {input}\n        {startIcon === undefined ? null : (\n          <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n            {startIcon}\n          </span>\n        )}\n        {endIcon === undefined ? null : (\n          <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n            {endIcon}\n          </span>\n        )}\n      </span>\n    );\n\n  // Without a field prop there is no field wrapper either, and the DOM is the bare input (or the icon wrapper).\n  if (!field.active) return control;\n  return (\n    <FieldShell\n      label={label}\n      controlId={field.controlId}\n      description={description}\n      hintId={field.hintId}\n      error={error}\n      errorId={field.errorId}\n    >\n      {control}\n    </FieldShell>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAIrB;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;EAmBR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAuEA,MAAaA,UAAQ,WAAyC,SAASA,QAAM,UAAU,KAAK;CAC1F,MAAM,EACJ,WACA,OAAO,MACP,WACA,SACA,OACA,aACA,OACA,GAAG,UACD;CACJ,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,QACJ,oBAACC,OAAD;EAMO;EACL,GAAI;EACJ,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAiBH,MAAM,UACJ,cAAc,KAAA,KAAa,YAAY,KAAA,IACrC,QAEA,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;CAIV,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EAEd,UAAA;CACS,CAAA;AAEhB,CAAC"}
+{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      /**\n       * Height and inline padding from the control scale, so `data-density`\n       * moves a whole form at once. Same three names and the same tokens as\n       * Button, because they sit in the same row: Button's `sm` is the app's\n       * second most common at 167 call sites, and while the field was locked\n       * to `md` the pair was 10px out of alignment with no supported fix.\n       *\n       * Type follows Button's sm rung, with one guard. `sm` is 14px, the\n       * size of the body text a small field sits among (Button's sm label is\n       * text-sm for the same reason). `md` and `lg` stay 16px.\n       *\n       * The guard: iOS Safari zooms the viewport when a focused field's text\n       * is under 16px, so a coarse pointer (a touch screen) keeps 16px on\n       * `sm` too. The switch is the input device, not the viewport width:\n       * the legacy `text-base md:text-sm` changed size at a breakpoint that\n       * has nothing to do with zoom, so a narrow desktop window got 16px and\n       * a tablet in landscape got 14px and zoomed.\n       */\n      size: {\n        sm: [fieldBoxSize.sm, fieldTextSize.sm],\n        md: [fieldBoxSize.md, fieldTextSize.md],\n        lg: [fieldBoxSize.lg, fieldTextSize.lg],\n      },\n      // Declared empty and filled by the compound variants below: the affix\n      // inset depends on BOTH whether a slot is used and which rung it is on.\n      hasStartIcon: { true: \"\" },\n      hasEndIcon: { true: \"\" },\n    },\n    compoundVariants: [\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing keeping the value from running\n      // underneath a glyph is this padding. It is the same three tokens that\n      // place the glyph -- inline padding, icon box, control gap -- so the\n      // text and the glyph move together across density AND size. A\n      // hand-tuned `pl-9` at the call site can do neither, and the product\n      // app has eighteen of those.\n      {\n        size: \"sm\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"sm\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: { start: \"\", end: \"\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    // The glyph's inset is the field's own inline padding, so it lines up with\n    // where the value would have started. That makes it a pair of axes, not\n    // one: a small field at the medium inset puts the glyph under the text.\n    compoundVariants: [\n      { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n      { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n      { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n      { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n      { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n      { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Control scale. Height and inline padding come from the same\n   * `--density-control-*` tokens as Button, so a field and a button on one\n   * rung are the same height.\n   *\n   * Type does not scale with it: the field stays at 16px everywhere, because\n   * iOS Safari zooms the viewport when a focused input's text is smaller.\n   *\n   * This REPLACES the native `size` attribute, which React Aria inherits from\n   * `InputHTMLAttributes` as a character count. No call site in the census\n   * used it; set a width with `className` instead.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n  /**\n   * A visible label above the field, tied to it with `htmlFor`. Passing any of\n   * `label`, `description` or `error` (even as `undefined`) wraps the field;\n   * with none of them the DOM is exactly the bare input. Do not also pass\n   * `aria-label`: it wins over the label, so the visible name is not the\n   * accessible one (WCAG 2.5.3). Ignored inside a React Aria `TextField`,\n   * which supplies its own label and messages.\n   */\n  label?: ReactNode;\n  /**\n   * Helper text under the field, named by `aria-describedby`. It opens on a\n   * spring when it appears after mount, changed words rise in and numbers roll\n   * digit by digit; nothing animates on first render, and reduced motion swaps\n   * it instantly. A string, because the copy is animated word by word.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the field takes its\n   * invalid border, and is announced as an alert when it appears. Opens and\n   * closes like `description`. An empty or `undefined` value closes the row.\n   */\n  error?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(allProps, ref) {\n  const {\n    className,\n    size = \"md\",\n    startIcon,\n    endIcon,\n    label,\n    description,\n    error,\n    ...props\n  } = allProps;\n  const field = useFieldWiring({\n    enabled: hasFieldProps(allProps),\n    id: props.id,\n    describedBy: props[\"aria-describedby\"],\n    invalid: props[\"aria-invalid\"],\n    description,\n    error,\n  });\n  const input = (\n    <AriaInput\n      // The ref goes on the INPUT, never on the wrapper span below. A ref\n      // pointing at the wrapper is still non-null, so it satisfies the obvious\n      // assertion while breaking `.focus()`, `.select()` and every\n      // react-hook-form site -- but only at the call sites that pass an icon.\n      // RefLandsOnTheInputNotTheWrapper is the guard.\n      ref={ref}\n      {...props}\n      {...field.controlProps}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          size,\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  //\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  const control =\n    startIcon === undefined && endIcon === undefined ? (\n      input\n    ) : (\n      <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n        {input}\n        {startIcon === undefined ? null : (\n          <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n            {startIcon}\n          </span>\n        )}\n        {endIcon === undefined ? null : (\n          <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n            {endIcon}\n          </span>\n        )}\n      </span>\n    );\n\n  // Without a field prop there is no field wrapper either, and the DOM is the bare input (or the icon wrapper).\n  if (!field.active) return control;\n  return (\n    <FieldShell\n      label={label}\n      controlId={field.controlId}\n      description={description}\n      hintId={field.hintId}\n      error={error}\n      errorId={field.errorId}\n    >\n      {control}\n    </FieldShell>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAIrB;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;EAmBR,MAAM;GACJ,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;GACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;GACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;EACxC;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAuEA,MAAaA,UAAQ,WAAyC,SAASA,QAAM,UAAU,KAAK;CAC1F,MAAM,EACJ,WACA,OAAO,MACP,WACA,SACA,OACA,aACA,OACA,GAAG,UACD;CACJ,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,QACJ,oBAACC,OAAD;EAMO;EACL,GAAI;EACJ,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAiBH,MAAM,UACJ,cAAc,KAAA,KAAa,YAAY,KAAA,IACrC,QAEA,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;CAIV,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EAEd,UAAA;CACS,CAAA;AAEhB,CAAC"}

package/dist/lib/field-shell.js

@@ -32,6 +32,8 @@ function useFieldWiring({ enabled, id, describedBy, invalid, description, error
 	const errorId = active && error ? `${controlId}-error` : void 0;
 	return {
 		active,
+		/** True inside a React Aria field, which supplies the label and its own messages. */
+		inside,
 		controlId,
 		hintId,
 		errorId,
@@ -47,15 +49,20 @@ function useFieldWiring({ enabled, id, describedBy, invalid, description, error
 	};
 }
 /** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */
-function FieldShell({ label, controlId, description, hintId, error, errorId, wordExit, numbers, children }) {
+function FieldShell({ label, controlId, description, hintId, error, errorId, wordExit, numbers, required = false, children }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "field",
 		className: "grid min-w-0 font-sans",
 		children: [
-			label == null ? null : /* @__PURE__ */ jsx(Label$1, {
+			label == null ? null : /* @__PURE__ */ jsxs(Label$1, {
 				htmlFor: controlId,
 				className: "mb-1.5",
-				children: label
+				children: [label, required ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "field-required",
+					className: "-ms-1 text-destructive-strong",
+					children: "*"
+				}) : null]
 			}),
 			children,
 			/* @__PURE__ */ jsx(FieldMessage, {

package/dist/lib/field-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-shell.js","names":["Label"],"sources":["../../src/lib/field-shell.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { InputContext, LabelContext, useSlottedContext } from \"react-aria-components\";\n\nimport { Label } from \"../label/label.js\";\nimport { FieldMessage, type WordExit } from \"./field-message.js\";\n\n/*\n * The label, helper text and error text around a text control, for Input and\n * Textarea. The first lib file that imports a sibling component (Label): the\n * layer rule allows primitives to use primitives, and a field's label is the\n * same Label everywhere else.\n */\n\n/**\n * True when any field prop was passed at all, even as `undefined`. Deciding by\n * presence, not value, is what keeps `error={maybeMessage}` from moving the\n * control between a wrapper and no wrapper when the message appears: that would\n * remount the control and drop focus and an uncontrolled value.\n */\nexport const hasFieldProps = (props: object) =>\n  \"label\" in props || \"description\" in props || \"error\" in props;\n\n/** A control inside a React Aria `TextField` already has its label and messages supplied by the field. */\nfunction useInsideReactAriaField() {\n  const label = useSlottedContext(LabelContext);\n  const input = useSlottedContext(InputContext);\n  return Object.keys(label ?? {}).length > 0 || Object.keys(input ?? {}).length > 0;\n}\n\n/**\n * The ids and aria wiring for a control with field props. `active` is false\n * when no field prop was passed, or inside a React Aria field, and then\n * `controlProps` is empty: the control's own props are untouched, and a bare\n * control has no generated `id`.\n */\nexport function useFieldWiring({\n  enabled,\n  id,\n  describedBy,\n  invalid,\n  description,\n  error,\n}: {\n  enabled: boolean;\n  id: string | undefined;\n  describedBy: string | undefined;\n  invalid: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined;\n  description: string | undefined;\n  error: string | undefined;\n}) {\n  const generated = useId();\n  const inside = useInsideReactAriaField();\n  const active = enabled && !inside;\n  const controlId = id ?? generated;\n  const hintId = active && description ? `${controlId}-description` : undefined;\n  const errorId = active && error ? `${controlId}-error` : undefined;\n  return {\n    active,\n    controlId,\n    hintId,\n    errorId,\n    controlProps: active\n      ? {\n          id: controlId,\n          \"aria-invalid\": error ? true : invalid,\n          \"aria-describedby\": [describedBy, hintId, errorId].filter(Boolean).join(\" \") || undefined,\n        }\n      : {},\n  };\n}\n\n/** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */\nexport function FieldShell({\n  label,\n  controlId,\n  description,\n  hintId,\n  error,\n  errorId,\n  wordExit,\n  numbers,\n  children,\n}: {\n  label: ReactNode;\n  controlId: string;\n  description: string | undefined;\n  hintId: string | undefined;\n  error: string | undefined;\n  errorId: string | undefined;\n  wordExit?: WordExit;\n  numbers?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div data-slot=\"field\" className=\"grid min-w-0 font-sans\">\n      {label == null ? null : (\n        // 6px, the gap Select and DatePicker keep between their label and control, so a labelled Input sits level with them.\n        <Label htmlFor={controlId} className=\"mb-1.5\">\n          {label}\n        </Label>\n      )}\n      {children}\n      <FieldMessage\n        id={hintId}\n        text={description}\n        tone=\"description\"\n        wordExit={wordExit}\n        numbers={numbers}\n      />\n      <FieldMessage id={errorId} text={error} tone=\"error\" wordExit={wordExit} numbers={numbers} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,iBAAiB,UAC5B,WAAW,SAAS,iBAAiB,SAAS,WAAW;;AAG3D,SAAS,0BAA0B;CACjC,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;AAClF;;;;;;;AAQA,SAAgB,eAAe,EAC7B,SACA,IACA,aACA,SACA,aACA,SAQC;CACD,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,wBAAwB;CACvC,MAAM,SAAS,WAAW,CAAC;CAC3B,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,UAAU,cAAc,GAAG,UAAU,gBAAgB,KAAA;CACpE,MAAM,UAAU,UAAU,QAAQ,GAAG,UAAU,UAAU,KAAA;CACzD,OAAO;EACL;EACA;EACA;EACA;EACA,cAAc,SACV;GACE,IAAI;GACJ,gBAAgB,QAAQ,OAAO;GAC/B,oBAAoB;IAAC;IAAa;IAAQ;GAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;EAClF,IACA,CAAC;CACP;AACF;;AAGA,SAAgB,WAAW,EACzB,OACA,WACA,aACA,QACA,OACA,SACA,UACA,SACA,YAWC;CACD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAQ,WAAU;EAAjC,UAAA;GACG,SAAS,OAAO,OAEf,oBAACA,SAAD;IAAO,SAAS;IAAW,WAAU;IAClC,UAAA;GACI,CAAA;GAER;GACD,oBAAC,cAAD;IACE,IAAI;IACJ,MAAM;IACN,MAAK;IACK;IACD;GACV,CAAA;GACD,oBAAC,cAAD;IAAc,IAAI;IAAS,MAAM;IAAO,MAAK;IAAkB;IAAmB;GAAU,CAAA;EACzF;;AAET"}
+{"version":3,"file":"field-shell.js","names":["Label"],"sources":["../../src/lib/field-shell.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { InputContext, LabelContext, useSlottedContext } from \"react-aria-components\";\n\nimport { Label } from \"../label/label.js\";\nimport { FieldMessage, type WordExit } from \"./field-message.js\";\n\n/*\n * The label, helper text and error text around a text control, for Input and\n * Textarea. The first lib file that imports a sibling component (Label): the\n * layer rule allows primitives to use primitives, and a field's label is the\n * same Label everywhere else.\n */\n\n/**\n * True when any field prop was passed at all, even as `undefined`. Deciding by\n * presence, not value, is what keeps `error={maybeMessage}` from moving the\n * control between a wrapper and no wrapper when the message appears: that would\n * remount the control and drop focus and an uncontrolled value.\n */\nexport const hasFieldProps = (props: object) =>\n  \"label\" in props || \"description\" in props || \"error\" in props;\n\n/** A control inside a React Aria `TextField` already has its label and messages supplied by the field. */\nfunction useInsideReactAriaField() {\n  const label = useSlottedContext(LabelContext);\n  const input = useSlottedContext(InputContext);\n  return Object.keys(label ?? {}).length > 0 || Object.keys(input ?? {}).length > 0;\n}\n\n/**\n * The ids and aria wiring for a control with field props. `active` is false\n * when no field prop was passed, or inside a React Aria field, and then\n * `controlProps` is empty: the control's own props are untouched, and a bare\n * control has no generated `id`.\n */\nexport function useFieldWiring({\n  enabled,\n  id,\n  describedBy,\n  invalid,\n  description,\n  error,\n}: {\n  enabled: boolean;\n  id: string | undefined;\n  describedBy: string | undefined;\n  invalid: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined;\n  description: string | undefined;\n  error: string | undefined;\n}) {\n  const generated = useId();\n  const inside = useInsideReactAriaField();\n  const active = enabled && !inside;\n  const controlId = id ?? generated;\n  const hintId = active && description ? `${controlId}-description` : undefined;\n  const errorId = active && error ? `${controlId}-error` : undefined;\n  return {\n    active,\n    /** True inside a React Aria field, which supplies the label and its own messages. */\n    inside,\n    controlId,\n    hintId,\n    errorId,\n    controlProps: active\n      ? {\n          id: controlId,\n          \"aria-invalid\": error ? true : invalid,\n          \"aria-describedby\": [describedBy, hintId, errorId].filter(Boolean).join(\" \") || undefined,\n        }\n      : {},\n  };\n}\n\n/** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */\nexport function FieldShell({\n  label,\n  controlId,\n  description,\n  hintId,\n  error,\n  errorId,\n  wordExit,\n  numbers,\n  required = false,\n  children,\n}: {\n  label: ReactNode;\n  controlId: string;\n  description: string | undefined;\n  hintId: string | undefined;\n  error: string | undefined;\n  errorId: string | undefined;\n  wordExit?: WordExit;\n  numbers?: boolean;\n  /**\n   * Draws the required marker after the label. Decoration only (aria-hidden):\n   * the control's own `required` is what a screen reader announces, so the\n   * name stays \"Password\", not \"Password star\".\n   */\n  required?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div data-slot=\"field\" className=\"grid min-w-0 font-sans\">\n      {label == null ? null : (\n        // 6px, the gap Select and DatePicker keep between their label and control, so a labelled Input sits level with them.\n        <Label htmlFor={controlId} className=\"mb-1.5\">\n          {label}\n          {required ? (\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"field-required\"\n              className=\"-ms-1 text-destructive-strong\"\n            >\n              *\n            </span>\n          ) : null}\n        </Label>\n      )}\n      {children}\n      <FieldMessage\n        id={hintId}\n        text={description}\n        tone=\"description\"\n        wordExit={wordExit}\n        numbers={numbers}\n      />\n      <FieldMessage id={errorId} text={error} tone=\"error\" wordExit={wordExit} numbers={numbers} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,iBAAiB,UAC5B,WAAW,SAAS,iBAAiB,SAAS,WAAW;;AAG3D,SAAS,0BAA0B;CACjC,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;AAClF;;;;;;;AAQA,SAAgB,eAAe,EAC7B,SACA,IACA,aACA,SACA,aACA,SAQC;CACD,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,wBAAwB;CACvC,MAAM,SAAS,WAAW,CAAC;CAC3B,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,UAAU,cAAc,GAAG,UAAU,gBAAgB,KAAA;CACpE,MAAM,UAAU,UAAU,QAAQ,GAAG,UAAU,UAAU,KAAA;CACzD,OAAO;EACL;;EAEA;EACA;EACA;EACA;EACA,cAAc,SACV;GACE,IAAI;GACJ,gBAAgB,QAAQ,OAAO;GAC/B,oBAAoB;IAAC;IAAa;IAAQ;GAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;EAClF,IACA,CAAC;CACP;AACF;;AAGA,SAAgB,WAAW,EACzB,OACA,WACA,aACA,QACA,OACA,SACA,UACA,SACA,WAAW,OACX,YAiBC;CACD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAQ,WAAU;EAAjC,UAAA;GACG,SAAS,OAAO,OAEf,qBAACA,SAAD;IAAO,SAAS;IAAW,WAAU;IAArC,UAAA,CACG,OACA,WACC,oBAAC,QAAD;KACE,eAAY;KACZ,aAAU;KACV,WAAU;KACX,UAAA;IAEK,CAAA,IACJ,IACC;;GAER;GACD,oBAAC,cAAD;IACE,IAAI;IACJ,MAAM;IACN,MAAK;IACK;IACD;GACV,CAAA;GACD,oBAAC,cAAD;IAAc,IAAI;IAAS,MAAM;IAAO,MAAK;IAAkB;IAAmB;GAAU,CAAA;EACzF;;AAET"}

package/dist/lib/field-surface.js

@@ -37,7 +37,28 @@ const fieldSurfaceVariants = cva([
 	"[&:has(:is(input,textarea,[role=spinbutton]):focus):not([data-invalid]):not(:where(.group[data-invalid]_*))]:border-foreground",
 	"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-(--opacity-disabled)"
 ]);
+/**
+* The control scale of a text entry box: height and inline padding from the
+* `--density-control-*` tokens, the same three rungs as Button, so a field
+* sits level with the buttons in its row. Input, Select and SearchField all
+* read it, so the rungs cannot drift apart.
+*/
+const fieldBoxSize = {
+	sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm)",
+	md: "h-(--density-control-h-md) px-(--density-control-pad-md)",
+	lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg)"
+};
+/**
+* The type rule that goes with `fieldBoxSize`: `sm` is 14px, except on a
+* coarse pointer, where iOS would zoom a focused field under 16px; `md` and
+* `lg` are 16px. See Input's `size` variant for the reasoning.
+*/
+const fieldTextSize = {
+	sm: "text-sm pointer-coarse:text-base",
+	md: "text-base",
+	lg: "text-base"
+};
 //#endregion
-export { fieldSurfaceVariants };
+export { fieldBoxSize, fieldSurfaceVariants, fieldTextSize };
 
 //# sourceMappingURL=field-surface.js.map

package/dist/lib/field-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-surface.js","names":[],"sources":["../../src/lib/field-surface.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The shared surface of a text entry control.\n *\n * Extracted at the Rule of Two, and for a reason the legacy demonstrates:\n * its `input.tsx` and `textarea.tsx` styled the same surface twice and had\n * already drifted. The input is `bg-transparent`, the textarea is\n * `bg-background`. The input focuses with `focus-visible:border-ring` plus a\n * 3px ring; the textarea uses a 2px ring with an offset. The input has\n * `aria-invalid` treatment, the textarea has none. None of those differences\n * is a decision anyone made -- they are two files edited at different times.\n *\n * Everything that must look identical between an Input and a Textarea lives\n * here. Only the box geometry differs, and that is the caller's variant.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\nexport const fieldSurfaceVariants = cva([\n  \"w-full min-w-0\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // A bare <input> keeps the user-agent border, background and Arial face,\n  // and content-box would add the padding on top of the width.\n  \"box-border font-sans\",\n\n  \"rounded-control border-(length:--border-width) border-border\",\n  \"bg-surface text-foreground\",\n  \"shadow-surface\",\n\n  // --color-muted-foreground is 5.25:1 on the page, so the placeholder is\n  // legible rather than the usual near-invisible grey. It is still text and\n  // the contrast contract holds it to the 4.5 floor.\n  \"placeholder:text-muted-foreground\",\n  \"selection:bg-primary selection:text-primary-foreground\",\n\n  // Only the two properties that change, on the settle curve: the border darkens\n  // on hover and focus, and the background turns muted when disabled. The focus\n  // outline is not animated (it switches between none and solid).\n  \"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n  // outline-solid is load-bearing. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus rule can apply\n  // a width and a colour while faithfully re-applying none, and paint\n  // nothing. Button shipped exactly that.\n  //\n  // A text field shows focus on its own border (below), not a separate ring:\n  // UX decision (Oct 2026). The outline comes back only under forced colours,\n  // where a border colour is overridden and would leave no focus indicator.\n  \"outline-none\",\n  \"forced-colors:data-[focus-visible]:outline-solid\",\n  \"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n\n  // React Aria sets data-invalid from the native `aria-invalid` attribute,\n  // so this costs no API surface and works both bare and inside a\n  // TextField. destructive-strong rather than destructive: the fill token\n  // is 2.44:1-class and cannot describe a boundary (WCAG 1.4.11).\n  //\n  // The border CHANGES COLOUR only. Colour alone is not a state cue\n  // (WCAG 1.4.1), which is why an invalid field must also carry a message --\n  // that is the consumer's job, and the migration table says so.\n  \"data-[invalid]:border-destructive-strong\",\n\n  // Hover and focus darken the border to border-strong, in addition to the\n  // outline ring above (which stays: forced-colours drops a border colour, and\n  // WCAG 2.4.7 wants a visible indicator). The conditions sit inside :where(),\n  // which adds no specificity, so the invalid border always wins by specificity\n  // rather than by the order Tailwind happens to emit utilities in -- on an\n  // Input through data-[invalid], on a Select or DatePicker trigger through\n  // group-data-[invalid], because their ROOT carries the state. A disabled field\n  // does not darken: React Aria's TextArea still reports hover while disabled.\n  \"[&:where([data-hovered]:not([data-disabled]))]:border-border-strong\",\n  // Focus turns the border itself dark, same width, no gap. An invalid field\n  // keeps its red border while focused.\n  \"data-[focus-visible]:not-data-[invalid]:not-group-data-[invalid]:border-foreground\",\n  // A mouse click into a text box is not \"focus-visible\" to React Aria, but the\n  // border must still show focus: key off real focus on the input itself, or on\n  // the input, textarea or date segment inside a wrapping box.\n  \"[&:is(input,textarea):focus:not([data-invalid])]:border-foreground\",\n  \"[&:has(:is(input,textarea,[role=spinbutton]):focus):not([data-invalid]):not(:where(.group[data-invalid]_*))]:border-foreground\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,IAAI;CACtC;CAKA;CAEA;CACA;CACA;CAKA;CACA;CAKA;CAWA;CACA;CACA;CACA;CAUA;CAUA;CAGA;CAIA;CACA;CAEA;AACF,CAAC"}
+{"version":3,"file":"field-surface.js","names":[],"sources":["../../src/lib/field-surface.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The shared surface of a text entry control.\n *\n * Extracted at the Rule of Two, and for a reason the legacy demonstrates:\n * its `input.tsx` and `textarea.tsx` styled the same surface twice and had\n * already drifted. The input is `bg-transparent`, the textarea is\n * `bg-background`. The input focuses with `focus-visible:border-ring` plus a\n * 3px ring; the textarea uses a 2px ring with an offset. The input has\n * `aria-invalid` treatment, the textarea has none. None of those differences\n * is a decision anyone made -- they are two files edited at different times.\n *\n * Everything that must look identical between an Input and a Textarea lives\n * here. Only the box geometry differs, and that is the caller's variant.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\nexport const fieldSurfaceVariants = cva([\n  \"w-full min-w-0\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // A bare <input> keeps the user-agent border, background and Arial face,\n  // and content-box would add the padding on top of the width.\n  \"box-border font-sans\",\n\n  \"rounded-control border-(length:--border-width) border-border\",\n  \"bg-surface text-foreground\",\n  \"shadow-surface\",\n\n  // --color-muted-foreground is 5.25:1 on the page, so the placeholder is\n  // legible rather than the usual near-invisible grey. It is still text and\n  // the contrast contract holds it to the 4.5 floor.\n  \"placeholder:text-muted-foreground\",\n  \"selection:bg-primary selection:text-primary-foreground\",\n\n  // Only the two properties that change, on the settle curve: the border darkens\n  // on hover and focus, and the background turns muted when disabled. The focus\n  // outline is not animated (it switches between none and solid).\n  \"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n  // outline-solid is load-bearing. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus rule can apply\n  // a width and a colour while faithfully re-applying none, and paint\n  // nothing. Button shipped exactly that.\n  //\n  // A text field shows focus on its own border (below), not a separate ring:\n  // UX decision (Oct 2026). The outline comes back only under forced colours,\n  // where a border colour is overridden and would leave no focus indicator.\n  \"outline-none\",\n  \"forced-colors:data-[focus-visible]:outline-solid\",\n  \"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n\n  // React Aria sets data-invalid from the native `aria-invalid` attribute,\n  // so this costs no API surface and works both bare and inside a\n  // TextField. destructive-strong rather than destructive: the fill token\n  // is 2.44:1-class and cannot describe a boundary (WCAG 1.4.11).\n  //\n  // The border CHANGES COLOUR only. Colour alone is not a state cue\n  // (WCAG 1.4.1), which is why an invalid field must also carry a message --\n  // that is the consumer's job, and the migration table says so.\n  \"data-[invalid]:border-destructive-strong\",\n\n  // Hover and focus darken the border to border-strong, in addition to the\n  // outline ring above (which stays: forced-colours drops a border colour, and\n  // WCAG 2.4.7 wants a visible indicator). The conditions sit inside :where(),\n  // which adds no specificity, so the invalid border always wins by specificity\n  // rather than by the order Tailwind happens to emit utilities in -- on an\n  // Input through data-[invalid], on a Select or DatePicker trigger through\n  // group-data-[invalid], because their ROOT carries the state. A disabled field\n  // does not darken: React Aria's TextArea still reports hover while disabled.\n  \"[&:where([data-hovered]:not([data-disabled]))]:border-border-strong\",\n  // Focus turns the border itself dark, same width, no gap. An invalid field\n  // keeps its red border while focused.\n  \"data-[focus-visible]:not-data-[invalid]:not-group-data-[invalid]:border-foreground\",\n  // A mouse click into a text box is not \"focus-visible\" to React Aria, but the\n  // border must still show focus: key off real focus on the input itself, or on\n  // the input, textarea or date segment inside a wrapping box.\n  \"[&:is(input,textarea):focus:not([data-invalid])]:border-foreground\",\n  \"[&:has(:is(input,textarea,[role=spinbutton]):focus):not([data-invalid]):not(:where(.group[data-invalid]_*))]:border-foreground\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * The control scale of a text entry box: height and inline padding from the\n * `--density-control-*` tokens, the same three rungs as Button, so a field\n * sits level with the buttons in its row. Input, Select and SearchField all\n * read it, so the rungs cannot drift apart.\n */\nexport const fieldBoxSize = {\n  sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n  md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n  lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n} as const;\n\n/**\n * The type rule that goes with `fieldBoxSize`: `sm` is 14px, except on a\n * coarse pointer, where iOS would zoom a focused field under 16px; `md` and\n * `lg` are 16px. See Input's `size` variant for the reasoning.\n */\nexport const fieldTextSize = {\n  sm: \"text-sm pointer-coarse:text-base\",\n  md: \"text-base\",\n  lg: \"text-base\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,IAAI;CACtC;CAKA;CAEA;CACA;CACA;CAKA;CACA;CAKA;CAWA;CACA;CACA;CACA;CAUA;CAUA;CAGA;CAIA;CACA;CAEA;AACF,CAAC;;;;;;;AAQD,MAAa,eAAe;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}