@seekalfred/primitives 0.6.0 → 0.7.3

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

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"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 type { Key } from \"react-aria-components\";\n\nimport { Badge } from \"../badge/badge.js\";\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 { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * FilterBar -- a list toolbar that keeps the controls people use every time\n * in the row and puts every other dropdown filter behind ONE \"Filters\"\n * button.\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:\n *\n * - `inline`: always in the row, at its start (status tabs, the search box).\n * - the Filters button: a popover with a one-column form, one full-width\n *   Select per filter with its label above. The button carries a count badge\n *   of the filters that are set.\n * - `end`: always in the row, at its end (a count, Export, a view toggle).\n *\n * While any filter is set, a list of chips sits under the row, each reading\n * \"Label: option label\" with its own remove button, plus \"Clear all\".\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 popover is a dialog named by its\n * trigger, the trigger carries `aria-expanded`, focus moves into the popover\n * and is contained there, Escape closes it and focus returns to the trigger.\n */\n\nexport const filterBarVariants = cva([\"flex flex-col gap-2 box-border font-sans\"]);\n\nexport const filterBarRowVariants = cva([\"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, rendered as a Select in the popover. */\nexport interface FilterBarSelectField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The field's name: the label above the dropdown and the start of its chip. */\n  label: string;\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. The control rendered by `render` names itself. */\n  label: string;\n  /** The control, rendered in the popover. */\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 row, at its start: status tabs and the search box. */\n  inline?: ReactNode;\n  /** Always in the row, at its end: a count, Export, a view toggle. */\n  end?: ReactNode;\n  /** The filters behind the Filters button. 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 popover's name.\n   *\n   * @default \"Filters\"\n   */\n  buttonLabel?: string;\n  /**\n   * The text of both Clear all buttons.\n   *\n   * @default \"Clear all\"\n   */\n  clearAllLabel?: string;\n  /**\n   * The text of the button that closes the popover.\n   *\n   * @default \"Done\"\n   */\n  doneLabel?: 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  /** 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/** 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    if (isCustom(f)) {\n      if (f.activeLabel != null) chips.push({ id: f.id, text: `${f.label}: ${f.activeLabel}`, clear: f.onClear });\n      continue;\n    }\n    if (f.value == null || f.value === f.emptyValue) continue;\n    const option = f.options.find((o) => o.id === f.value);\n    chips.push({\n      id: f.id,\n      text: `${f.label}: ${option ? option.label : String(f.value)}`,\n      clear: () => f.onChange(f.emptyValue),\n    });\n  }\n  return chips;\n}\n\n/** A funnel, drawn inline: this package ships no icon dependency. */\nfunction FunnelGlyph() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d=\"M2 3h12M4.5 8h7M7 13h2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction CrossGlyph() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * A list toolbar with its dropdown filters behind one Filters button.\n *\n * @example\n * <FilterBar\n *   inline={<SearchField aria-label=\"Search\" />}\n *   end={<Button>Export</Button>}\n *   filters={[{ id: \"region\", label: \"Region\", value, emptyValue: \"all\", onChange: setValue,\n *     options: [{ id: \"all\", label: \"All regions\" }, { id: \"nsw\", label: \"NSW\" }] }]}\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\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(function FilterBar(\n  {\n    inline,\n    end,\n    filters,\n    onClearAll,\n    buttonLabel = \"Filters\",\n    clearAllLabel = \"Clear all\",\n    doneLabel = \"Done\",\n    chipsLabel = \"Filters set\",\n    removeLabel = (text) => `Remove filter ${text}`,\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      <div data-slot=\"filter-bar-row\" className={filterBarRowVariants()}>\n        {inline}\n        {filters.length > 0 ? (\n          <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n            <Button variant=\"outlineNeutral\" size=\"sm\" startIcon={<FunnelGlyph />} data-slot=\"filter-bar-button\">\n              {buttonLabel}\n              {chips.length > 0 ? (\n                <Badge tone=\"primary\" appearance=\"solid\" size=\"sm\" shape=\"pill\" data-slot=\"filter-bar-count\">\n                  {chips.length}\n                </Badge>\n              ) : null}\n            </Button>\n            <Popover placement=\"bottom start\" className=\"w-80 max-w-[calc(100vw-2rem)]\">\n              <div data-slot=\"filter-bar-panel\" className=\"flex flex-col gap-3\">\n                <p className=\"m-0 text-sm font-semibold\">{buttonLabel}</p>\n                {filters.map((f) =>\n                  isCustom(f) ? (\n                    <div key={f.id}>{f.render()}</div>\n                  ) : (\n                    <Select\n                      key={f.id}\n                      label={f.label}\n                      size=\"sm\"\n                      selectedKey={f.value}\n                      onSelectionChange={(key) => {\n                        if (key != null) f.onChange(key);\n                      }}\n                    >\n                      {f.options.map((o) => (\n                        <SelectItem key={o.id} id={o.id} textValue={o.label}>\n                          {o.label}\n                        </SelectItem>\n                      ))}\n                    </Select>\n                  ),\n                )}\n                <div className=\"flex items-center justify-between gap-2 pt-1\">\n                  <Button variant=\"ghost\" size=\"sm\" onPress={clearAll} isDisabled={chips.length === 0}>\n                    {clearAllLabel}\n                  </Button>\n                  <Button variant=\"primary\" size=\"sm\" onPress={() => setOpen(false)}>\n                    {doneLabel}\n                  </Button>\n                </div>\n              </div>\n            </Popover>\n          </PopoverTrigger>\n        ) : null}\n        {end ? <div className=\"ms-auto flex flex-wrap items-center gap-2\">{end}</div> : null}\n      </div>\n      {places.list.length > 0 ? (\n        <div ref={frame} data-slot=\"filter-bar-chips-frame\" className=\"height-follow\">\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      ) : 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/gauge/gauge.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/gauge/gauge.d.ts
+/**
+ * Gauge: one value against a range, as a ring open at the bottom with the
+ * number at its centre. Use it for a score or a fill level; use Progress for a
+ * task that finishes.
+ *
+ * The ring fills the first time it is seen, slowly and without overshoot, like
+ * a ring closing. After that it springs to each new value with a little life
+ * while the count follows without overshooting. A band that starts at
+ * `from` sets the colour and names the state ("Healthy", "At risk"): the
+ * highest band the value reaches wins, and it changes exactly as the count
+ * crosses the threshold, so state never rests on colour alone. The label,
+ * status and detail rise in when they change, from the side the value moved
+ * toward.
+ *
+ * Plain SVG and CSS. One small spring tween writes the ring and the count
+ * straight to the DOM. The ring is a `meter` for assistive technology.
+ */
+export type GaugeTone = "primary" | "success" | "warning" | "danger";
+export interface GaugeThreshold {
+  /** The band starts at this value (in the same unit as `value`). */
+  from: number;
+  tone: GaugeTone;
+  /** Names the state. Shown under the number and announced with the value. */
+  label: string;
+}
+export interface GaugeProps extends Omit<ComponentPropsWithoutRef<"figure">, "children"> {
+  value: number;
+  /** @default 0 */
+  min?: number;
+  /** @default 100 */
+  max?: number;
+  /** What is measured. Names the meter. */
+  label: string;
+  /** A line under the label, such as "Up 4 from last week". */
+  detail?: string;
+  /** The colour when no band applies. @default "primary" */
+  tone?: GaugeTone;
+  /** Bands that set the tone and name the state. */
+  thresholds?: GaugeThreshold[];
+}
+export declare const Gauge: import("react").ForwardRefExoticComponent<GaugeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=gauge.d.ts.map

package/dist/gauge/gauge.js

@@ -0,0 +1,219 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { MORPH, REVEAL, SMOOTH, live, retarget } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/gauge/gauge.tsx
+/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */
+const RADIUS = 42;
+const START = -135;
+const SPAN = 270;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+function ringFor(sweep) {
+	const end = START + SPAN * clamp(sweep, 0, 1);
+	const at = (angle) => `${(50 + RADIUS * Math.sin(angle * Math.PI / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos(angle * Math.PI / 180)).toFixed(3)}`;
+	return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;
+}
+const TRACK = ringFor(1);
+const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, detail, tone = "primary", thresholds, className, ...props }, ref) {
+	const safeMax = max > min ? max : min + 1;
+	const percentage = clamp((value - min) / (safeMax - min), 0, 1);
+	const displayValue = Math.round(percentage * 100);
+	const bands = [...thresholds ?? []].sort((a, b) => a.from - b.from);
+	const bandAt = (at) => bands.filter((band) => at >= band.from - 1e-6).pop();
+	const band = bandAt(value);
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const ring = useRef(null);
+	const digits = useRef(null);
+	const sizer = useRef(null);
+	const sweep = useRef(live(0));
+	const count = useRef(live(0));
+	const [seen, setSeen] = useState(false);
+	const [filled, setFilled] = useState(false);
+	const [shownBand, setShownBand] = useState(band);
+	const [moved, setMoved] = useState({
+		value: displayValue,
+		direction: 1
+	});
+	if (moved.value !== displayValue) setMoved({
+		value: displayValue,
+		direction: displayValue < moved.value ? -1 : 1
+	});
+	const latest = useRef({
+		bandAt,
+		min,
+		span: safeMax - min,
+		filled
+	});
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			bandAt,
+			min,
+			span: safeMax - min,
+			filled
+		};
+	});
+	const shownRef = useRef(shownBand);
+	useIsomorphicLayoutEffect(() => {
+		shownRef.current = shownBand;
+	});
+	/** One writer: the ring, its fade-in over the first sliver, and the count. */
+	const paint = useCallback(() => {
+		const to = clamp(sweep.current.value, 0, 1);
+		ring.current?.setAttribute("d", ringFor(to));
+		if (ring.current) ring.current.style.opacity = String(clamp(to / .02, 0, 1));
+		const shown = clamp(count.current.value, 0, 100);
+		if (digits.current) digits.current.textContent = String(Math.round(shown));
+		const { bandAt: pick, min: lo, span, filled: done } = latest.current;
+		if (done) {
+			const next = pick(lo + shown / 100 * span);
+			const current = shownRef.current;
+			if (next?.from !== current?.from || next?.label !== current?.label) {
+				shownRef.current = next;
+				setShownBand(next);
+			}
+		}
+	}, []);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setSeen(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setSeen(true);
+		}, { threshold: .5 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const bandRef = useRef(band);
+	useIsomorphicLayoutEffect(() => {
+		bandRef.current = band;
+	});
+	useEffect(() => {
+		if (!seen) return;
+		const first = !latest.current.filled;
+		retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);
+		retarget(count.current, percentage * 100, first ? REVEAL : SMOOTH, paint, 0, first ? () => {
+			latest.current.filled = true;
+			shownRef.current = bandRef.current;
+			setShownBand(bandRef.current);
+			setFilled(true);
+		} : void 0);
+	}, [
+		percentage,
+		seen,
+		paint
+	]);
+	useEffect(() => {
+		const sweeping = sweep.current;
+		const number = count.current;
+		return () => {
+			sweeping.stop();
+			number.stop();
+		};
+	}, []);
+	useIsomorphicLayoutEffect(paint, [paint]);
+	useEffect(() => {
+		const node = sizer.current;
+		const box = digits.current;
+		if (!node || !box || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const shown = filled ? shownBand : band;
+	const activeTone = (filled ? shownBand : band)?.tone ?? tone;
+	const clampedValue = clamp(value, min, safeMax);
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		...props,
+		"data-slot": "gauge",
+		"data-tone": activeTone,
+		className: cn("gauge", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "gauge-visual",
+			role: "meter",
+			"aria-label": label,
+			"aria-valuemin": min,
+			"aria-valuemax": safeMax,
+			"aria-valuenow": clampedValue,
+			"aria-valuetext": `${displayValue}%${band ? `, ${band.label}` : ""}`,
+			className: "gauge-visual",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 100 90",
+				"aria-hidden": "true",
+				focusable: "false",
+				className: "block size-full overflow-visible",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: TRACK,
+					className: "gauge-track"
+				}), /* @__PURE__ */ jsx("path", {
+					ref: ring,
+					className: "gauge-fill",
+					style: { opacity: 0 }
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "gauge-readout",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "gauge-number",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							ref: digits,
+							className: "gauge-digits"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "gauge-unit",
+							children: "%"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							ref: sizer,
+							className: "gauge-sizer",
+							children: displayValue
+						})
+					]
+				}), thresholds ? /* @__PURE__ */ jsx("span", {
+					className: "gauge-status",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: filled ? shown?.label ?? "" : "",
+						dir: moved.direction,
+						className: "block",
+						children: shown?.label
+					})
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsxs("figcaption", {
+			className: "grid min-w-0 gap-0.5",
+			children: [/* @__PURE__ */ jsx("strong", {
+				className: "text-sm font-medium text-foreground",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: label,
+					className: "block",
+					children: label
+				})
+			}), detail ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs tabular-nums text-text-secondary",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: detail,
+					dir: moved.direction,
+					className: "block",
+					children: detail
+				})
+			}) : null]
+		})]
+	});
+});
+//#endregion
+export { Gauge };
+
+//# sourceMappingURL=gauge.js.map

package/dist/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { live, MORPH, retarget, REVEAL, SMOOTH } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Gauge: one value against a range, as a ring open at the bottom with the\n * number at its centre. Use it for a score or a fill level; use Progress for a\n * task that finishes.\n *\n * The ring fills the first time it is seen, slowly and without overshoot, like\n * a ring closing. After that it springs to each new value with a little life\n * while the count follows without overshooting. A band that starts at\n * `from` sets the colour and names the state (\"Healthy\", \"At risk\"): the\n * highest band the value reaches wins, and it changes exactly as the count\n * crosses the threshold, so state never rests on colour alone. The label,\n * status and detail rise in when they change, from the side the value moved\n * toward.\n *\n * Plain SVG and CSS. One small spring tween writes the ring and the count\n * straight to the DOM. The ring is a `meter` for assistive technology.\n */\nexport type GaugeTone = \"primary\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface GaugeThreshold {\n  /** The band starts at this value (in the same unit as `value`). */\n  from: number;\n  tone: GaugeTone;\n  /** Names the state. Shown under the number and announced with the value. */\n  label: string;\n}\n\nexport interface GaugeProps extends Omit<ComponentPropsWithoutRef<\"figure\">, \"children\"> {\n  value: number;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** What is measured. Names the meter. */\n  label: string;\n  /** A line under the label, such as \"Up 4 from last week\". */\n  detail?: string;\n  /** The colour when no band applies. @default \"primary\" */\n  tone?: GaugeTone;\n  /** Bands that set the tone and name the state. */\n  thresholds?: GaugeThreshold[];\n}\n\n/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */\nconst RADIUS = 42;\nconst START = -135;\nconst SPAN = 270;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\nfunction ringFor(sweep: number) {\n  const end = START + SPAN * clamp(sweep, 0, 1);\n  const at = (angle: number) =>\n    `${(50 + RADIUS * Math.sin((angle * Math.PI) / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos((angle * Math.PI) / 180)).toFixed(3)}`;\n  return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;\n}\nconst TRACK = ringFor(1);\n\nexport const Gauge = forwardRef<HTMLElement, GaugeProps>(function Gauge(\n  { value, min = 0, max = 100, label, detail, tone = \"primary\", thresholds, className, ...props },\n  ref,\n) {\n  const safeMax = max > min ? max : min + 1;\n  const percentage = clamp((value - min) / (safeMax - min), 0, 1);\n  const displayValue = Math.round(percentage * 100);\n  const bands = [...(thresholds ?? [])].sort((a, b) => a.from - b.from);\n  const bandAt = (at: number) => bands.filter((band) => at >= band.from - 1e-6).pop();\n  const band = bandAt(value);\n\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const ring = useRef<SVGPathElement>(null);\n  const digits = useRef<HTMLSpanElement>(null);\n  const sizer = useRef<HTMLSpanElement>(null);\n  const sweep = useRef(live(0));\n  const count = useRef(live(0));\n\n  const [seen, setSeen] = useState(false);\n  const [filled, setFilled] = useState(false);\n  // The band on screen: after the first fill it follows the number as it counts.\n  const [shownBand, setShownBand] = useState(band);\n  const [moved, setMoved] = useState({ value: displayValue, direction: 1 });\n  if (moved.value !== displayValue) {\n    setMoved({ value: displayValue, direction: displayValue < moved.value ? -1 : 1 });\n  }\n\n  const latest = useRef({ bandAt, min, span: safeMax - min, filled });\n  useIsomorphicLayoutEffect(() => {\n    latest.current = { bandAt, min, span: safeMax - min, filled };\n  });\n  const shownRef = useRef(shownBand);\n  useIsomorphicLayoutEffect(() => {\n    shownRef.current = shownBand;\n  });\n\n  /** One writer: the ring, its fade-in over the first sliver, and the count. */\n  const paint = useCallback(() => {\n    const to = clamp(sweep.current.value, 0, 1);\n    ring.current?.setAttribute(\"d\", ringFor(to));\n    if (ring.current) ring.current.style.opacity = String(clamp(to / 0.02, 0, 1));\n    const shown = clamp(count.current.value, 0, 100);\n    if (digits.current) digits.current.textContent = String(Math.round(shown));\n    // After the first fill the state follows the number on screen, so the colour and label change as the count crosses a threshold.\n    const { bandAt: pick, min: lo, span, filled: done } = latest.current;\n    if (done) {\n      const next = pick(lo + (shown / 100) * span);\n      const current = shownRef.current;\n      if (next?.from !== current?.from || next?.label !== current?.label) {\n        shownRef.current = next;\n        setShownBand(next);\n      }\n    }\n  }, []);\n\n  // The ring fills once half of it is in view.\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setSeen(true);\n      },\n      { threshold: 0.5 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // The first fill is slower and never overshoots; later values spring to place, the count a beat calmer.\n  const bandRef = useRef(band);\n  useIsomorphicLayoutEffect(() => {\n    bandRef.current = band;\n  });\n  useEffect(() => {\n    if (!seen) return;\n    const first = !latest.current.filled;\n    retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);\n    retarget(\n      count.current,\n      percentage * 100,\n      first ? REVEAL : SMOOTH,\n      paint,\n      0,\n      first\n        ? () => {\n            latest.current.filled = true;\n            shownRef.current = bandRef.current;\n            setShownBand(bandRef.current);\n            setFilled(true);\n          }\n        : undefined,\n    );\n  }, [percentage, seen, paint]);\n  useEffect(() => {\n    const sweeping = sweep.current;\n    const number = count.current;\n    return () => {\n      sweeping.stop();\n      number.stop();\n    };\n  }, []);\n  useIsomorphicLayoutEffect(paint, [paint]);\n\n  // The digits sit right aligned in a box sized to the target number, so the ones column never jumps while counting and the group recentres when the number gains or loses a digit.\n  useEffect(() => {\n    const node = sizer.current;\n    const box = digits.current;\n    if (!node || !box || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const shown = filled ? shownBand : band;\n  const activeTone = (filled ? shownBand : band)?.tone ?? tone;\n  const clampedValue = clamp(value, min, safeMax);\n\n  return (\n    <figure\n      ref={refs}\n      {...props}\n      data-slot=\"gauge\"\n      data-tone={activeTone}\n      className={cn(\"gauge\", className)}\n    >\n      <div\n        data-slot=\"gauge-visual\"\n        role=\"meter\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={safeMax}\n        aria-valuenow={clampedValue}\n        aria-valuetext={`${displayValue}%${band ? `, ${band.label}` : \"\"}`}\n        className=\"gauge-visual\"\n      >\n        <svg\n          viewBox=\"0 0 100 90\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          className=\"block size-full overflow-visible\"\n        >\n          <path d={TRACK} className=\"gauge-track\" />\n          <path ref={ring} className=\"gauge-fill\" style={{ opacity: 0 }} />\n        </svg>\n        <div aria-hidden=\"true\" className=\"gauge-readout\">\n          <span className=\"gauge-number\">\n            <span ref={digits} className=\"gauge-digits\" />\n            <span className=\"gauge-unit\">%</span>\n            <span ref={sizer} className=\"gauge-sizer\">\n              {displayValue}\n            </span>\n          </span>\n          {thresholds ? (\n            <span className=\"gauge-status\">\n              <SwapText\n                swapKey={filled ? (shown?.label ?? \"\") : \"\"}\n                dir={moved.direction}\n                className=\"block\"\n              >\n                {shown?.label}\n              </SwapText>\n            </span>\n          ) : null}\n        </div>\n      </div>\n      <figcaption className=\"grid min-w-0 gap-0.5\">\n        <strong className=\"text-sm font-medium text-foreground\">\n          <SwapText swapKey={label} className=\"block\">\n            {label}\n          </SwapText>\n        </strong>\n        {detail ? (\n          <span className=\"text-xs tabular-nums text-text-secondary\">\n            <SwapText swapKey={detail} dir={moved.direction} className=\"block\">\n              {detail}\n            </SwapText>\n          </span>\n        ) : null}\n      </figcaption>\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/gauge/index.d.ts

@@ -0,0 +1,2 @@
+import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge.js";
+export { Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone };

package/dist/gauge/index.js

@@ -0,0 +1,2 @@
+import { Gauge } from "./gauge.js";
+export { Gauge };

package/dist/in-view-title/in-view-title.d.ts

@@ -0,0 +1,33 @@
+//#region src/in-view-title/in-view-title.d.ts
+/**
+ * How the title reveals. `blur` sharpens word by word and suits most headings.
+ * `word` and `line` rise out of a clip, for editorial pages. `tracking` opens
+ * tight letter spacing. `wipe` uncovers the title from left to right through a
+ * soft edge.
+ */
+export type InViewTitleVariant = "word" | "line" | "blur" | "tracking" | "wipe";
+/**
+ * InViewTitle: a section title that reveals itself when it scrolls into view,
+ * once. A title already above the viewport shows at once, and a title rendered
+ * on a server appears on its own if scripts are slow, so text is never left
+ * hidden. The title is spoken as one heading (the pieces are a picture); reduced
+ * motion shows it at once.
+ */
+export interface InViewTitleProps {
+  /** The title. */
+  text: string;
+  /** How it reveals. @default "blur" */
+  variant?: InViewTitleVariant;
+  /** The element to render. @default "h2" */
+  as?: "h1" | "h2" | "h3";
+  /** The breaks for the `line` variant. Without them the whole title is one line. */
+  lines?: string[];
+  /** Reveal only the first time it enters. With false it hides again when it leaves below and replays. @default true */
+  once?: boolean;
+  id?: string;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+}
+export declare const InViewTitle: import("react").ForwardRefExoticComponent<InViewTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=in-view-title.d.ts.map

package/dist/in-view-title/in-view-title.js

@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { Fragment, forwardRef, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/in-view-title/in-view-title.tsx
+const TYPE = {
+	h1: "font-display text-h1 leading-(--leading-snug) m-0 font-semibold",
+	h2: "font-display text-h2 leading-(--leading-snug) m-0 font-semibold",
+	h3: "font-display text-h3 leading-(--leading-snug) m-0 font-semibold"
+};
+/** A title is revealed when this much of it is on screen. */
+const THRESHOLD = .45;
+const lateBoot = typeof window !== "undefined" && performance.now() > 2400;
+/** Stagger between words (ms): 60 at most, and 400 in all. Lines stagger 80. Letters of the tracking variant move with their word. */
+const WORD_STEP_MS = 60;
+const WORD_MAX_MS = 400;
+const LINE_STEP_MS = 80;
+const TRACKING_STEP_MS = 32;
+/** How far each letter travels per step from its word's centre in the tracking variant. */
+const TRACK_EM = .06;
+const subscribeNothing = () => () => {};
+const delayOf = (ms) => ({ "--part-delay": `${ms}ms` });
+const InViewTitle = forwardRef(function InViewTitle({ text, variant = "blur", as = "h2", lines, once = true, id, className }, ref) {
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+	const [serverRendered] = useState(!hydrated);
+	const late = serverRendered && lateBoot;
+	const [seen, setSeen] = useState(false);
+	useEffect(() => {
+		const node = root.current;
+		if (!node) return;
+		if (typeof IntersectionObserver === "undefined") {
+			setSeen(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry) return;
+			const passed = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+			if (entry.isIntersecting || passed) {
+				setSeen(true);
+				if (once) observer.disconnect();
+			} else if (!once) setSeen(false);
+		}, { threshold: THRESHOLD });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [once]);
+	const Tag = as;
+	const words = text.split(" ").filter(Boolean);
+	const step = Math.min(WORD_STEP_MS, WORD_MAX_MS / Math.max(words.length, 1));
+	const space = (index, total) => index < total - 1 ? " " : null;
+	let body = null;
+	if (variant === "word") body = words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "in-view-title-clip",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			"data-part": "",
+			style: delayOf(index * step),
+			children: word
+		})
+	}), space(index, words.length)] }, `${word}-${index}`));
+	else if (variant === "line") body = (lines?.length ? lines : [text]).map((line, index) => /* @__PURE__ */ jsx("span", {
+		className: "in-view-title-line-clip",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			"data-part": "",
+			style: delayOf(index * LINE_STEP_MS),
+			children: line
+		})
+	}, `${line}-${index}`));
+	else if (variant === "blur") body = words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"data-part": "",
+		"aria-hidden": "true",
+		style: delayOf(index * step),
+		children: word
+	}), space(index, words.length)] }, `${word}-${index}`));
+	else if (variant === "tracking") body = words.map((word, index) => {
+		const letters = Array.from(word);
+		const centre = (letters.length - 1) / 2;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap",
+			"data-part": "",
+			"aria-hidden": "true",
+			style: delayOf(index * TRACKING_STEP_MS),
+			children: letters.map((letter, letterIndex) => /* @__PURE__ */ jsx("span", {
+				"data-letter": "",
+				style: { "--track-x": `${(centre - letterIndex) * TRACK_EM}em` },
+				children: letter
+			}, letterIndex))
+		}), space(index, words.length)] }, `${word}-${index}`);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: refs,
+		"data-slot": "in-view-title",
+		"data-variant": variant,
+		"data-visible": seen || late ? "" : void 0,
+		"data-instant": late ? "" : void 0,
+		"data-pending": hydrated ? void 0 : "",
+		className: cn("in-view-title", className),
+		children: variant === "wipe" ? /* @__PURE__ */ jsx("div", {
+			"data-part": "",
+			children: /* @__PURE__ */ jsx(Tag, {
+				id,
+				className: TYPE[as],
+				children: text
+			})
+		}) : /* @__PURE__ */ jsx(Tag, {
+			id,
+			"aria-label": text,
+			className: TYPE[as],
+			children: body
+		})
+	});
+});
+//#endregion
+export { InViewTitle };
+
+//# sourceMappingURL=in-view-title.js.map

package/dist/in-view-title/in-view-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"in-view-title.js","names":[],"sources":["../../src/in-view-title/in-view-title.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Fragment,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * How the title reveals. `blur` sharpens word by word and suits most headings.\n * `word` and `line` rise out of a clip, for editorial pages. `tracking` opens\n * tight letter spacing. `wipe` uncovers the title from left to right through a\n * soft edge.\n */\nexport type InViewTitleVariant = \"word\" | \"line\" | \"blur\" | \"tracking\" | \"wipe\";\n\n/**\n * InViewTitle: a section title that reveals itself when it scrolls into view,\n * once. A title already above the viewport shows at once, and a title rendered\n * on a server appears on its own if scripts are slow, so text is never left\n * hidden. The title is spoken as one heading (the pieces are a picture); reduced\n * motion shows it at once.\n */\nexport interface InViewTitleProps {\n  /** The title. */\n  text: string;\n  /** How it reveals. @default \"blur\" */\n  variant?: InViewTitleVariant;\n  /** The element to render. @default \"h2\" */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  /** The breaks for the `line` variant. Without them the whole title is one line. */\n  lines?: string[];\n  /** Reveal only the first time it enters. With false it hides again when it leaves below and replays. @default true */\n  once?: boolean;\n  id?: string;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst TYPE = {\n  h1: \"font-display text-h1 leading-(--leading-snug) m-0 font-semibold\",\n  h2: \"font-display text-h2 leading-(--leading-snug) m-0 font-semibold\",\n  h3: \"font-display text-h3 leading-(--leading-snug) m-0 font-semibold\",\n} as const;\n\n/** A title is revealed when this much of it is on screen. */\nconst THRESHOLD = 0.45;\n/** Matches the stylesheet fallback: a server-rendered title that scripts reach later than this is already showing, so it stays put. */\nconst FALLBACK_MS = 2400;\nconst lateBoot = typeof window !== \"undefined\" && performance.now() > FALLBACK_MS;\n/** Stagger between words (ms): 60 at most, and 400 in all. Lines stagger 80. Letters of the tracking variant move with their word. */\nconst WORD_STEP_MS = 60;\nconst WORD_MAX_MS = 400;\nconst LINE_STEP_MS = 80;\nconst TRACKING_STEP_MS = 32;\n/** How far each letter travels per step from its word's centre in the tracking variant. */\nconst TRACK_EM = 0.06;\n\nconst subscribeNothing = () => () => {};\nconst delayOf = (ms: number) => ({ \"--part-delay\": `${ms}ms` }) as CSSProperties;\n\nexport const InViewTitle = forwardRef<HTMLDivElement, InViewTitleProps>(function InViewTitle(\n  { text, variant = \"blur\", as = \"h2\", lines, once = true, id, className },\n  ref,\n) {\n  const root = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n  const hydrated = useSyncExternalStore(\n    subscribeNothing,\n    () => true,\n    () => false,\n  );\n  // Rendered on a server, and scripts arrived after the stylesheet fallback had already shown it: nothing to reveal.\n  const [serverRendered] = useState(!hydrated);\n  const late = serverRendered && lateBoot;\n  const [seen, setSeen] = useState(false);\n\n  useEffect(() => {\n    const node = root.current;\n    if (!node) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry) return;\n        // Above the viewport (scrolled past, or restored mid-page) counts as seen: there is nothing to scroll to.\n        const passed = !entry.isIntersecting && entry.boundingClientRect.top < 0;\n        if (entry.isIntersecting || passed) {\n          setSeen(true);\n          if (once) observer.disconnect();\n        } else if (!once) setSeen(false);\n      },\n      { threshold: THRESHOLD },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [once]);\n\n  const Tag = as;\n  const words = text.split(\" \").filter(Boolean);\n  const step = Math.min(WORD_STEP_MS, WORD_MAX_MS / Math.max(words.length, 1));\n  const space = (index: number, total: number) => (index < total - 1 ? \" \" : null);\n\n  let body: ReactNode = null;\n  if (variant === \"word\") {\n    body = words.map((word, index) => (\n      <Fragment key={`${word}-${index}`}>\n        <span className=\"in-view-title-clip\" aria-hidden=\"true\">\n          <span data-part=\"\" style={delayOf(index * step)}>\n            {word}\n          </span>\n        </span>\n        {space(index, words.length)}\n      </Fragment>\n    ));\n  } else if (variant === \"line\") {\n    body = (lines?.length ? lines : [text]).map((line, index) => (\n      <span className=\"in-view-title-line-clip\" aria-hidden=\"true\" key={`${line}-${index}`}>\n        <span data-part=\"\" style={delayOf(index * LINE_STEP_MS)}>\n          {line}\n        </span>\n      </span>\n    ));\n  } else if (variant === \"blur\") {\n    body = words.map((word, index) => (\n      <Fragment key={`${word}-${index}`}>\n        <span data-part=\"\" aria-hidden=\"true\" style={delayOf(index * step)}>\n          {word}\n        </span>\n        {space(index, words.length)}\n      </Fragment>\n    ));\n  } else if (variant === \"tracking\") {\n    body = words.map((word, index) => {\n      const letters = Array.from(word);\n      const centre = (letters.length - 1) / 2;\n      return (\n        <Fragment key={`${word}-${index}`}>\n          <span\n            className=\"whitespace-nowrap\"\n            data-part=\"\"\n            aria-hidden=\"true\"\n            style={delayOf(index * TRACKING_STEP_MS)}\n          >\n            {letters.map((letter, letterIndex) => (\n              <span\n                key={letterIndex}\n                data-letter=\"\"\n                style={{ \"--track-x\": `${(centre - letterIndex) * TRACK_EM}em` } as CSSProperties}\n              >\n                {letter}\n              </span>\n            ))}\n          </span>\n          {space(index, words.length)}\n        </Fragment>\n      );\n    });\n  }\n\n  return (\n    <div\n      ref={refs}\n      data-slot=\"in-view-title\"\n      data-variant={variant}\n      data-visible={seen || late ? \"\" : undefined}\n      data-instant={late ? \"\" : undefined}\n      data-pending={hydrated ? undefined : \"\"}\n      className={cn(\"in-view-title\", className)}\n    >\n      {variant === \"wipe\" ? (\n        <div data-part=\"\">\n          <Tag id={id} className={TYPE[as]}>\n            {text}\n          </Tag>\n        </div>\n      ) : (\n        <Tag id={id} aria-label={text} className={TYPE[as]}>\n          {body}\n        </Tag>\n      )}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/in-view-title/index.d.ts

@@ -0,0 +1,2 @@
+import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-title.js";
+export { InViewTitle, type InViewTitleProps, type InViewTitleVariant };

package/dist/in-view-title/index.js

@@ -0,0 +1,2 @@
+import { InViewTitle } from "./in-view-title.js";
+export { InViewTitle };