@seekalfred/primitives 0.7.4 → 0.8.0

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  type TabListProps as AriaTabListProps,\n  type TabPanelProps as AriaTabPanelProps,\n  type TabProps as AriaTabProps,\n  type TabsProps as AriaTabsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Tabs, ported from the legacy shadcn/Radix component.\n *\n * The largest legacy surface in this migration: 18 files, `TabsTrigger`\n * 51, `TabsContent` 31, `Tabs` 17, `TabsList` 17. Props: `value` 88,\n * `className` 76, `defaultValue` 12, `onValueChange` 10, `disabled` 6.\n *\n * The rename is mechanical but it touches every one of those:\n * `value` -> `selectedKey`, `defaultValue` -> `defaultSelectedKey`,\n * `onValueChange` -> `onSelectionChange`, and the `value` on each trigger\n * and panel becomes `id`. React Aria pairs a Tab to its TabPanel by that\n * id, exactly as Radix paired them by value.\n *\n * THE SELECTED TAB GAINS A BORDER, and that is a contrast fix rather than\n * a decoration. The legacy marks the selected tab with `bg-background` on\n * a `bg-muted` list -- 1.13:1, which is not a boundary anybody can see --\n * and leans on `shadow-sm` to carry the rest. Under WCAG 1.4.11 the thing\n * telling you which tab is active has to clear 3:1. `border-border` on\n * `muted` is 4.65:1 and is already in the contrast contract.\n *\n * Two bracket values are gone because check:hardcoding rejects them:\n * `p-[3px]` on the list and `h-[calc(100%-1px)]` on the trigger. The list\n * is `p-1` and the trigger sizes to the list rather than to a value one\n * pixel short of it.\n *\n * ONE BEHAVIOUR DIFFERS AND IS WORTH KNOWING. Radix keeps every mounted\n * TabsContent in the DOM and hides the inactive ones; React Aria renders\n * ONLY the selected panel. A panel that holds uncommitted form state, a\n * running video or a scroll position will lose it on tab change. React\n * Aria's `shouldForceMount` on TabPanel restores the old behaviour where\n * a call site needs it.\n */\nexport const tabsVariants = cva([\n  \"flex flex-col gap-2 box-border font-sans\",\n  // May be narrower than its tabs: in a flex row (a toolbar beside a search\n  // field) it shrinks to the space it has instead of pushing the page wider.\n  \"min-w-0 max-w-full\",\n]);\n\nexport const tabListVariants = cva([\n  \"inline-flex w-fit items-center justify-center gap-1\",\n  // p-1, not the legacy p-[3px]: a bracket value check:hardcoding rejects.\n  \"rounded-control p-1\",\n  \"bg-muted text-muted-foreground\",\n  // The selection highlight that glides between tabs (styles.css).\n  \"tab-highlight\",\n  \"box-border\",\n\n  // A ROW WIDER THAN ITS BOX SCROLLS INSIDE IT. Capped at the parent's\n  // width; while its tabs are wider than that, TabList sets\n  // data-overflowing and the row scrolls sideways on its own. A row that\n  // fits never carries the attribute, so nothing about it changes.\n  \"max-w-full\",\n  // How wide the fade is, and where it starts measured from the far edge.\n  \"[--fade-tabs:--spacing(6)] [--fade-tabs-from:calc(100%-var(--fade-tabs))]\",\n  \"data-[overflowing]:overflow-x-auto data-[overflowing]:overscroll-x-contain\",\n  // justify-center spills centred overflow out of BOTH sides, and a scroll\n  // box cannot reach the spill on its start side: the first tab would be\n  // cut off for good. Scrolling rows start at the start edge.\n  \"data-[overflowing]:justify-start\",\n  // The cue that there is more: the side with tabs out of view fades out.\n  // Masks are physical, so the start and end swap sides in RTL.\n  \"ltr:data-[fade-start]:mask-l-from-(--fade-tabs-from) rtl:data-[fade-start]:mask-r-from-(--fade-tabs-from)\",\n  \"ltr:data-[fade-end]:mask-r-from-(--fade-tabs-from) rtl:data-[fade-end]:mask-l-from-(--fade-tabs-from)\",\n]);\n\n/**\n * Sets data-overflowing, data-fade-start and data-fade-end on a tab row\n * while its tabs are wider than its box, and on the first measurement that\n * finds it too wide, scrolls the selected tab into view INSIDE the row\n * (never the page, so a row below the fold does not drag the page to it).\n *\n * The attributes are written straight onto the element, so a scroll or a\n * resize re-renders nothing. Arrow keys need no help: React Aria keeps the\n * focused tab in view in the row that scrolls.\n */\nconst FADE_PX = 24;\n\nfunction useScrollWhenTooWide() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let revealed = false;\n    const measure = () => {\n      const overflowing = row.scrollWidth > row.clientWidth + 1;\n      // Distance from the start edge; scrollLeft runs negative in RTL.\n      const scrolled = Math.abs(row.scrollLeft);\n      row.toggleAttribute(\"data-overflowing\", overflowing);\n      row.toggleAttribute(\"data-fade-start\", overflowing && scrolled > 1);\n      row.toggleAttribute(\n        \"data-fade-end\",\n        overflowing && scrolled + row.clientWidth < row.scrollWidth - 1,\n      );\n      if (!overflowing || revealed) return;\n      revealed = true;\n      const selected = row.querySelector<HTMLElement>(\"[data-selected]\");\n      if (!selected) return;\n      // Clear of the fade: --spacing(6), the width the mask draws.\n      const fade = FADE_PX;\n      const box = row.getBoundingClientRect();\n      const tab = selected.getBoundingClientRect();\n      if (tab.left < box.left + fade) row.scrollLeft -= box.left + fade - tab.left;\n      else if (tab.right > box.right - fade) row.scrollLeft += tab.right - (box.right - fade);\n      // The scroll event lands a frame later; the fades are right on first paint.\n      measure();\n    };\n    // The row's box changes with its parent; a tab's width changes when its\n    // label does (a count that loads).\n    const resized = new ResizeObserver(measure);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const added = new MutationObserver(() => {\n      watch();\n      measure();\n    });\n    watch();\n    added.observe(row, { childList: true });\n    row.addEventListener(\"scroll\", measure, { passive: true });\n    measure();\n    return () => {\n      resized.disconnect();\n      added.disconnect();\n      row.removeEventListener(\"scroll\", measure);\n    };\n  }, [row]);\n  return setRow;\n}\n\n/**\n * Places the selection highlight (see tab-highlight in styles.css) on the selected\n * tab and keeps it there as tabs resize, and tells the tabs root which way the\n * selection moved (`--tab-dir`) so the next panel arrives from that side. All of it\n * is written straight onto the elements, so no render happens. The first placement\n * has no transition; `data-hl-ready` turns it on two frames later.\n */\nfunction useTabHighlight() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let previous: HTMLElement | null = null;\n    let frames = [0, 0];\n    const place = () => {\n      const selected = row.querySelector<HTMLElement>('[role=\"tab\"][data-selected]');\n      if (!selected) {\n        row.removeAttribute(\"data-hl\");\n        previous = null;\n        return;\n      }\n      row.style.setProperty(\"--hl-x\", `${selected.offsetLeft}px`);\n      row.style.setProperty(\"--hl-y\", `${selected.offsetTop}px`);\n      row.style.setProperty(\"--hl-w\", `${selected.offsetWidth}px`);\n      row.style.setProperty(\"--hl-h\", `${selected.offsetHeight}px`);\n      row.setAttribute(\"data-hl\", \"\");\n      if (previous && previous !== selected && previous.isConnected) {\n        const all = Array.from(row.querySelectorAll('[role=\"tab\"]'));\n        const forward = all.indexOf(selected) > all.indexOf(previous);\n        // The row reads right to left in RTL, so the same order change is the other way.\n        const flip = getComputedStyle(row).direction === \"rtl\";\n        const root = row.closest<HTMLElement>('[data-slot=\"tabs\"]');\n        root?.style.setProperty(\"--tab-dir\", String(forward !== flip ? 1 : -1));\n        root?.setAttribute(\"data-tab-changed\", \"\");\n      }\n      previous = selected;\n    };\n    const resized = new ResizeObserver(place);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const changed = new MutationObserver((records) => {\n      if (records.some((record) => record.type === \"childList\")) watch();\n      place();\n    });\n    watch();\n    changed.observe(row, { attributes: true, attributeFilter: [\"data-selected\"], childList: true, subtree: true });\n    place();\n    frames[0] = requestAnimationFrame(() => {\n      frames[1] = requestAnimationFrame(() => row.setAttribute(\"data-hl-ready\", \"\"));\n    });\n    return () => {\n      resized.disconnect();\n      changed.disconnect();\n      frames.forEach(cancelAnimationFrame);\n      frames = [0, 0];\n    };\n  }, [row]);\n  return setRow;\n}\n\nexport const tabVariants = cva([\n  \"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap\",\n  \"rounded-md px-2 py-1\",\n  \"text-sm leading-(--leading-normal) font-medium text-foreground\",\n  \"cursor-pointer select-none box-border\",\n  // A transparent border at rest so selecting one does not move the text.\n  \"border-(length:--border-width) border-transparent\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // The selected tab. bg-background on a muted list is 1.13:1 -- invisible\n  // as a boundary -- so the border is what satisfies WCAG 1.4.11 at\n  // 4.65:1. The fill and the shadow are the polish on top of it.\n  // Until the row has placed its gliding highlight (data-hl), the tab paints\n  // its own fill so there is never a frame without a boundary.\n  \"not-in-data-[hl]:data-[selected]:bg-surface not-in-data-[hl]:data-[selected]:border-border\",\n  \"not-in-data-[hl]:data-[selected]:shadow-surface\",\n\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none and the width utility resolves its style from that same variable,\n  // so a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const tabPanelVariants = cva([\n  \"flex-1 box-border font-sans text-foreground\",\n  // Arrives from the side the new tab sits on, once the selection has changed.\n  \"tab-panel-motion\",\n  // React Aria gives the panel tabindex=0 when it holds no focusable\n  // child, so it can take a ring it does not want at rest.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A set of panels, one visible at a time.\n *\n * @example\n * <Tabs defaultSelectedKey=\"overview\">\n *   <TabList aria-label=\"Sections\">\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"activity\">Activity</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">...</TabPanel>\n *   <TabPanel id=\"activity\">...</TabPanel>\n * </Tabs>\n */\nexport interface TabsProps extends Omit<AriaTabsProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabs ref={ref} {...props} data-slot=\"tabs\" className={cn(tabsVariants(), className)} />\n  );\n});\n\n/**\n * The row of tabs.\n *\n * `aria-label` is worth passing: a tablist is a landmark-ish grouping and\n * a page with two of them is ambiguous without one.\n */\nexport interface TabListProps extends Omit<AriaTabListProps<object>, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  const watch = useScrollWhenTooWide();\n  const glide = useTabHighlight();\n  // Memoised: a new callback every render would detach and reattach the row.\n  const merged = useMemo(() => mergeRefs(ref, watch, glide), [ref, watch, glide]);\n  return (\n    <AriaTabList\n      ref={merged}\n      {...props}\n      data-slot=\"tab-list\"\n      className={cn(tabListVariants(), className)}\n    />\n  );\n});\n\n/** One tab. Its `id` pairs it with the panel of the same `id`. */\nexport interface TabProps extends Omit<AriaTabProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab({ className, ...props }, ref) {\n  return <AriaTab ref={ref} {...props} data-slot=\"tab\" className={cn(tabVariants(), className)} />;\n});\n\n/** One panel. Its `id` pairs it with the tab of the same `id`. */\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabPanel\n      ref={ref}\n      {...props}\n      data-slot=\"tab-panel\"\n      className={cn(tabPanelVariants(), className)}\n    />\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["Tabs","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  type TabListProps as AriaTabListProps,\n  type TabPanelProps as AriaTabPanelProps,\n  type TabProps as AriaTabProps,\n  type TabsProps as AriaTabsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Tabs, ported from the legacy shadcn/Radix component.\n *\n * The largest legacy surface in this migration: 18 files, `TabsTrigger`\n * 51, `TabsContent` 31, `Tabs` 17, `TabsList` 17. Props: `value` 88,\n * `className` 76, `defaultValue` 12, `onValueChange` 10, `disabled` 6.\n *\n * The rename is mechanical but it touches every one of those:\n * `value` -> `selectedKey`, `defaultValue` -> `defaultSelectedKey`,\n * `onValueChange` -> `onSelectionChange`, and the `value` on each trigger\n * and panel becomes `id`. React Aria pairs a Tab to its TabPanel by that\n * id, exactly as Radix paired them by value.\n *\n * THE SELECTED TAB GAINS A BORDER, and that is a contrast fix rather than\n * a decoration. The legacy marks the selected tab with `bg-background` on\n * a `bg-muted` list -- 1.13:1, which is not a boundary anybody can see --\n * and leans on `shadow-sm` to carry the rest. Under WCAG 1.4.11 the thing\n * telling you which tab is active has to clear 3:1. The border is\n * `primary-strong` on the `primary-subtle` track, and is in the contrast\n * contract. Tab text is `primary-strong` for active and inactive tabs alike\n * (UX owner, 2026-11-01).\n *\n * Two bracket values are gone because check:hardcoding rejects them:\n * `p-[3px]` on the list and `h-[calc(100%-1px)]` on the trigger. The list\n * is `p-1` and the trigger sizes to the list rather than to a value one\n * pixel short of it.\n *\n * ONE BEHAVIOUR DIFFERS AND IS WORTH KNOWING. Radix keeps every mounted\n * TabsContent in the DOM and hides the inactive ones; React Aria renders\n * ONLY the selected panel. A panel that holds uncommitted form state, a\n * running video or a scroll position will lose it on tab change. React\n * Aria's `shouldForceMount` on TabPanel restores the old behaviour where\n * a call site needs it.\n */\nexport const tabsVariants = cva([\n  \"flex flex-col gap-2 box-border font-sans\",\n  // May be narrower than its tabs: in a flex row (a toolbar beside a search\n  // field) it shrinks to the space it has instead of pushing the page wider.\n  \"min-w-0 max-w-full\",\n]);\n\nexport const tabListVariants = cva([\n  \"inline-flex w-fit items-center justify-center gap-1\",\n  // p-1, not the legacy p-[3px]: a bracket value check:hardcoding rejects.\n  \"rounded-control p-1\",\n  \"bg-primary-subtle text-primary-strong\",\n  // The selection highlight that glides between tabs (styles.css).\n  \"tab-highlight\",\n  \"box-border\",\n\n  // A ROW WIDER THAN ITS BOX SCROLLS INSIDE IT. Capped at the parent's\n  // width; while its tabs are wider than that, TabList sets\n  // data-overflowing and the row scrolls sideways on its own. A row that\n  // fits never carries the attribute, so nothing about it changes.\n  \"max-w-full\",\n  // How wide the fade is, and where it starts measured from the far edge.\n  \"[--fade-tabs:--spacing(6)] [--fade-tabs-from:calc(100%-var(--fade-tabs))]\",\n  \"data-[overflowing]:overflow-x-auto data-[overflowing]:overscroll-x-contain\",\n  // justify-center spills centred overflow out of BOTH sides, and a scroll\n  // box cannot reach the spill on its start side: the first tab would be\n  // cut off for good. Scrolling rows start at the start edge.\n  \"data-[overflowing]:justify-start\",\n  // The cue that there is more: the side with tabs out of view fades out.\n  // Masks are physical, so the start and end swap sides in RTL.\n  \"ltr:data-[fade-start]:mask-l-from-(--fade-tabs-from) rtl:data-[fade-start]:mask-r-from-(--fade-tabs-from)\",\n  \"ltr:data-[fade-end]:mask-r-from-(--fade-tabs-from) rtl:data-[fade-end]:mask-l-from-(--fade-tabs-from)\",\n]);\n\n/**\n * Sets data-overflowing, data-fade-start and data-fade-end on a tab row\n * while its tabs are wider than its box, and on the first measurement that\n * finds it too wide, scrolls the selected tab into view INSIDE the row\n * (never the page, so a row below the fold does not drag the page to it).\n *\n * The attributes are written straight onto the element, so a scroll or a\n * resize re-renders nothing. Arrow keys need no help: React Aria keeps the\n * focused tab in view in the row that scrolls.\n */\nconst FADE_PX = 24;\n\nfunction useScrollWhenTooWide() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let revealed = false;\n    const measure = () => {\n      const overflowing = row.scrollWidth > row.clientWidth + 1;\n      // Distance from the start edge; scrollLeft runs negative in RTL.\n      const scrolled = Math.abs(row.scrollLeft);\n      row.toggleAttribute(\"data-overflowing\", overflowing);\n      row.toggleAttribute(\"data-fade-start\", overflowing && scrolled > 1);\n      row.toggleAttribute(\n        \"data-fade-end\",\n        overflowing && scrolled + row.clientWidth < row.scrollWidth - 1,\n      );\n      if (!overflowing || revealed) return;\n      revealed = true;\n      const selected = row.querySelector<HTMLElement>(\"[data-selected]\");\n      if (!selected) return;\n      // Clear of the fade: --spacing(6), the width the mask draws.\n      const fade = FADE_PX;\n      const box = row.getBoundingClientRect();\n      const tab = selected.getBoundingClientRect();\n      if (tab.left < box.left + fade) row.scrollLeft -= box.left + fade - tab.left;\n      else if (tab.right > box.right - fade) row.scrollLeft += tab.right - (box.right - fade);\n      // The scroll event lands a frame later; the fades are right on first paint.\n      measure();\n    };\n    // The row's box changes with its parent; a tab's width changes when its\n    // label does (a count that loads).\n    const resized = new ResizeObserver(measure);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const added = new MutationObserver(() => {\n      watch();\n      measure();\n    });\n    watch();\n    added.observe(row, { childList: true });\n    row.addEventListener(\"scroll\", measure, { passive: true });\n    measure();\n    return () => {\n      resized.disconnect();\n      added.disconnect();\n      row.removeEventListener(\"scroll\", measure);\n    };\n  }, [row]);\n  return setRow;\n}\n\n/**\n * Places the selection highlight (see tab-highlight in styles.css) on the selected\n * tab and keeps it there as tabs resize, and tells the tabs root which way the\n * selection moved (`--tab-dir`) so the next panel arrives from that side. All of it\n * is written straight onto the elements, so no render happens. The first placement\n * has no transition; `data-hl-ready` turns it on two frames later.\n */\nfunction useTabHighlight() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let previous: HTMLElement | null = null;\n    let frames = [0, 0];\n    const place = () => {\n      const selected = row.querySelector<HTMLElement>('[role=\"tab\"][data-selected]');\n      if (!selected) {\n        row.removeAttribute(\"data-hl\");\n        previous = null;\n        return;\n      }\n      row.style.setProperty(\"--hl-x\", `${selected.offsetLeft}px`);\n      row.style.setProperty(\"--hl-y\", `${selected.offsetTop}px`);\n      row.style.setProperty(\"--hl-w\", `${selected.offsetWidth}px`);\n      row.style.setProperty(\"--hl-h\", `${selected.offsetHeight}px`);\n      row.setAttribute(\"data-hl\", \"\");\n      if (previous && previous !== selected && previous.isConnected) {\n        const all = Array.from(row.querySelectorAll('[role=\"tab\"]'));\n        const forward = all.indexOf(selected) > all.indexOf(previous);\n        // The row reads right to left in RTL, so the same order change is the other way.\n        const flip = getComputedStyle(row).direction === \"rtl\";\n        const root = row.closest<HTMLElement>('[data-slot=\"tabs\"]');\n        root?.style.setProperty(\"--tab-dir\", String(forward !== flip ? 1 : -1));\n        root?.setAttribute(\"data-tab-changed\", \"\");\n      }\n      previous = selected;\n    };\n    const resized = new ResizeObserver(place);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const changed = new MutationObserver((records) => {\n      if (records.some((record) => record.type === \"childList\")) watch();\n      place();\n    });\n    watch();\n    changed.observe(row, { attributes: true, attributeFilter: [\"data-selected\"], childList: true, subtree: true });\n    place();\n    frames[0] = requestAnimationFrame(() => {\n      frames[1] = requestAnimationFrame(() => row.setAttribute(\"data-hl-ready\", \"\"));\n    });\n    return () => {\n      resized.disconnect();\n      changed.disconnect();\n      frames.forEach(cancelAnimationFrame);\n      frames = [0, 0];\n    };\n  }, [row]);\n  return setRow;\n}\n\nexport const tabVariants = cva([\n  \"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap\",\n  \"rounded-md px-2 py-1\",\n  \"text-sm leading-(--leading-normal) font-medium text-primary-strong\",\n  \"cursor-pointer select-none box-border\",\n  // A transparent border at rest so selecting one does not move the text.\n  \"border-(length:--border-width) border-transparent\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // The selected tab: a white fill with a 1px primary-strong border on the\n  // primary-subtle track (UX owner, 2026-11-01). Text is primary-strong for\n  // the active and the inactive tabs alike. A white fill on that track is\n  // barely a boundary, so the border is what satisfies WCAG 1.4.11 (it is\n  // graded in contrast-pairs.json); the fill and the shadow are polish.\n  // Until the row has placed its gliding highlight (data-hl), the tab paints\n  // its own fill so there is never a frame without a boundary.\n  \"not-in-data-[hl]:data-[selected]:bg-surface not-in-data-[hl]:data-[selected]:border-primary-strong\",\n  \"not-in-data-[hl]:data-[selected]:shadow-surface\",\n\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none and the width utility resolves its style from that same variable,\n  // so a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const tabPanelVariants = cva([\n  \"flex-1 box-border font-sans text-foreground\",\n  // Arrives from the side the new tab sits on, once the selection has changed.\n  \"tab-panel-motion\",\n  // React Aria gives the panel tabindex=0 when it holds no focusable\n  // child, so it can take a ring it does not want at rest.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A set of panels, one visible at a time.\n *\n * @example\n * <Tabs defaultSelectedKey=\"overview\">\n *   <TabList aria-label=\"Sections\">\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"activity\">Activity</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">...</TabPanel>\n *   <TabPanel id=\"activity\">...</TabPanel>\n * </Tabs>\n */\nexport interface TabsProps extends Omit<AriaTabsProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabs ref={ref} {...props} data-slot=\"tabs\" className={cn(tabsVariants(), className)} />\n  );\n});\n\n/**\n * The row of tabs.\n *\n * `aria-label` is worth passing: a tablist is a landmark-ish grouping and\n * a page with two of them is ambiguous without one.\n */\nexport interface TabListProps extends Omit<AriaTabListProps<object>, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  const watch = useScrollWhenTooWide();\n  const glide = useTabHighlight();\n  // Memoised: a new callback every render would detach and reattach the row.\n  const merged = useMemo(() => mergeRefs(ref, watch, glide), [ref, watch, glide]);\n  return (\n    <AriaTabList\n      ref={merged}\n      {...props}\n      data-slot=\"tab-list\"\n      className={cn(tabListVariants(), className)}\n    />\n  );\n});\n\n/** One tab. Its `id` pairs it with the panel of the same `id`. */\nexport interface TabProps extends Omit<AriaTabProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab({ className, ...props }, ref) {\n  return <AriaTab ref={ref} {...props} data-slot=\"tab\" className={cn(tabVariants(), className)} />;\n});\n\n/** One panel. Its `id` pairs it with the tab of the same `id`. */\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabPanel\n      ref={ref}\n      {...props}\n      data-slot=\"tab-panel\"\n      className={cn(tabPanelVariants(), className)}\n    />\n  );\n});\n"],"mappings":"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"}

package/dist/tag-input/tag-input.js

@@ -2,9 +2,9 @@
 import { cn, cnAll } from "../lib/cn.js";
 import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { useHeightFollow } from "../lib/height-follow.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
 import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { useLeavingList } from "../lib/leaving-list.js";
-import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button, Group, Input, Tag, TagGroup, TagList } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/textarea/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { FieldShell, hasFieldProps, useFieldWiring } from "../lib/field-shell.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { TextArea } from "react-aria-components";

package/dist/toast/toast.d.ts

@@ -34,11 +34,11 @@ import { UNSTABLE_ToastQueue } from "react-aria-components";
 /** Where the region sits. Fixed, above everything, out of the way of content. */
 export declare const toastRegionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const toastVariants: (props?: ({
-  tone?: "neutral" | "warning" | "success" | "info" | "danger" | null | undefined;
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** The status icon's circle: the tone's light fill with its AA text colour. */
 export declare const toastIconVariants: (props?: ({
-  tone?: "neutral" | "warning" | "success" | "info" | "danger" | null | undefined;
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const toastCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /** What a toast carries. `title` is required: an unnamed toast announces nothing. */

package/dist/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+import { ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, toggleButtonGroupVariants, toggleButtonVariants } from "./toggle-button.js";
+export { ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, toggleButtonGroupVariants, toggleButtonVariants };

package/dist/toggle-button/index.js

@@ -0,0 +1,2 @@
+import { ToggleButton, ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants } from "./toggle-button.js";
+export { ToggleButton, ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants };

package/dist/toggle-button/toggle-button.d.ts

@@ -0,0 +1,93 @@
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+import { ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components";
+//#region src/toggle-button/toggle-button.d.ts
+/**
+ * ToggleButton: a button that stays pressed. One question, two answers
+ * ("Has new reply", "Primary key"), where a Switch would sit in a form row and
+ * a Checkbox would need a label beside a box.
+ *
+ * Built on React Aria's `ToggleButton`, so it is a real `<button>` with
+ * `aria-pressed`; in a {@link ToggleButtonGroup} that allows one choice the
+ * same buttons are a toolbar of `aria-pressed` buttons. It is NOT Button with `aria-pressed` and a
+ * swapped variant, which is what the apps hand-build today: the selected look
+ * here does not rest on colour.
+ *
+ * SELECTED IS SHOWN THREE WAYS. A tint, a `primary-strong` edge and a check
+ * mark drawn in `currentColor`, so the state survives forced colours and
+ * colour-blindness (WCAG 1.4.1). The mark sits INSIDE the control's own box,
+ * in the corner, so it never shifts the layout when it appears and is never
+ * clipped by a table row or scroll area outside the border. An icon-only
+ * toggle carries it too.
+ *
+ * FOCUS follows the field surface: on `:focus-visible` the control's own 1px
+ * border turns dark and nothing else is drawn, no ring. Forced colours
+ * override a border colour, so only there does an outline come back.
+ *
+ * Every string is a STATIC literal. Tailwind scans source text, so a class
+ * assembled at runtime is invisible to it and would never be emitted.
+ */
+export declare const toggleButtonVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+  iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The group's row. Buttons wrap rather than overflow a narrow container. */
+export declare const toggleButtonGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface ToggleButtonProps$1 extends Omit<ToggleButtonProps, "className" | "style" | "children">, Omit<VariantProps<typeof toggleButtonVariants>, "iconOnly"> {
+  /** The label, or the glyph of an `iconOnly` toggle. */
+  children?: ReactNode;
+  /**
+   * Only a glyph, in a square button. Pass the glyph as `children` and name the
+   * button with `aria-label`; without one it has no accessible name.
+   *
+   * @default false
+   */
+  iconOnly?: boolean;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A button that is on or off. Controlled with `isSelected` and
+ * `onChange(isSelected)`, or uncontrolled with `defaultSelected`.
+ *
+ * Give an icon-only toggle an `aria-label`, and wrap it in a `TooltipTrigger`
+ * when the glyph alone is not enough. The label should name the control, not
+ * its state: assistive technology says "pressed" itself.
+ *
+ * @example
+ * <ToggleButton isSelected={unread} onChange={setUnread}>Has new reply</ToggleButton>
+ * <ToggleButton iconOnly aria-label="Primary key"><KeyIcon /></ToggleButton>
+ */
+declare const ToggleButton$1: import("react").ForwardRefExoticComponent<ToggleButtonProps$1 & import("react").RefAttributes<HTMLButtonElement>>;
+interface ToggleButtonGroupProps$1 extends Omit<ToggleButtonGroupProps, "className" | "style"> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A row of ToggleButtons that share a selection. Always a toolbar of
+ * `aria-pressed` buttons: ONE tab stop, arrow keys move focus, Space or Enter
+ * toggles the focused button (selection never follows focus).
+ *
+ * `selectionMode="single"` (the default) lets one button be pressed at a time:
+ * pressing another moves the selection to it, and pressing the pressed one
+ * clears it unless `disallowEmptySelection`. Tab enters the group on the pressed
+ * button (on the first when none is). `"multiple"` lets any number be pressed.
+ * Each child needs an `id`, which is its key in `selectedKeys`.
+ *
+ * Why not `role="radiogroup"`: React Aria's single mode is a radio group in
+ * name only. Its arrows move focus and do not check, and every button is a tab
+ * stop, which is not the APG radio pattern. A true radio group needs the
+ * selection to follow focus, which a button that you press does not do. The
+ * toolbar of pressed buttons is the APG pattern that matches how these behave.
+ * If you need a radio group, use `RadioGroup` (`variant="card"` for the framed look).
+ *
+ * @example
+ * <ToggleButtonGroup aria-label="Range" selectionMode="single" disallowEmptySelection>
+ *   <ToggleButton id="7d">7 days</ToggleButton>
+ *   <ToggleButton id="30d">30 days</ToggleButton>
+ * </ToggleButtonGroup>
+ */
+declare const ToggleButtonGroup$1: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps$1 & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToggleButton$1 as ToggleButton, ToggleButtonGroup$1 as ToggleButtonGroup, ToggleButtonGroupProps$1 as ToggleButtonGroupProps, ToggleButtonProps$1 as ToggleButtonProps };
+//# sourceMappingURL=toggle-button.d.ts.map

package/dist/toggle-button/toggle-button.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/toggle-button/toggle-button.tsx
+/**
+* ToggleButton: a button that stays pressed. One question, two answers
+* ("Has new reply", "Primary key"), where a Switch would sit in a form row and
+* a Checkbox would need a label beside a box.
+*
+* Built on React Aria's `ToggleButton`, so it is a real `<button>` with
+* `aria-pressed`; in a {@link ToggleButtonGroup} that allows one choice the
+* same buttons are a toolbar of `aria-pressed` buttons. It is NOT Button with `aria-pressed` and a
+* swapped variant, which is what the apps hand-build today: the selected look
+* here does not rest on colour.
+*
+* SELECTED IS SHOWN THREE WAYS. A tint, a `primary-strong` edge and a check
+* mark drawn in `currentColor`, so the state survives forced colours and
+* colour-blindness (WCAG 1.4.1). The mark sits INSIDE the control's own box,
+* in the corner, so it never shifts the layout when it appears and is never
+* clipped by a table row or scroll area outside the border. An icon-only
+* toggle carries it too.
+*
+* FOCUS follows the field surface: on `:focus-visible` the control's own 1px
+* border turns dark and nothing else is drawn, no ring. Forced colours
+* override a border colour, so only there does an outline come back.
+*
+* Every string is a STATIC literal. Tailwind scans source text, so a class
+* assembled at runtime is invisible to it and would never be emitted.
+*/
+const toggleButtonVariants = cva([
+	"relative inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap",
+	"rounded-control font-sans font-medium text-foreground",
+	"cursor-pointer select-none box-border",
+	"border-(length:--border-width) border-border bg-surface shadow-surface",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
+	"[-webkit-tap-highlight-color:transparent]",
+	"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+	"data-[hovered]:bg-muted data-[hovered]:border-border-strong",
+	"data-[selected]:bg-primary-subtle data-[selected]:border-primary-strong",
+	"data-[selected]:data-[hovered]:bg-primary-subtle",
+	"outline-none",
+	"data-[focus-visible]:border-foreground",
+	"data-[focus-visible]:data-[selected]:border-foreground",
+	"forced-colors:data-[focus-visible]:outline-solid",
+	"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:text-text-disabled data-[disabled]:border-border",
+	"data-[disabled]:data-[selected]:bg-muted data-[disabled]:data-[selected]:border-border"
+], {
+	variants: {
+		size: {
+			sm: "h-(--density-control-h-sm) text-sm",
+			md: "h-(--density-control-h-md) text-sm"
+		},
+		/** A square button that holds only a glyph. It must carry an `aria-label`. */
+		iconOnly: {
+			true: "px-0 text-base",
+			false: "ps-4 pe-5"
+		}
+	},
+	compoundVariants: [{
+		size: "sm",
+		iconOnly: true,
+		class: "w-(--density-control-h-sm)"
+	}, {
+		size: "md",
+		iconOnly: true,
+		class: "w-(--density-control-h-md)"
+	}],
+	defaultVariants: {
+		size: "sm",
+		iconOnly: false
+	}
+});
+/** The group's row. Buttons wrap rather than overflow a narrow container. */
+const toggleButtonGroupVariants = cva(["box-border inline-flex flex-wrap gap-2 font-sans", "data-[orientation=vertical]:flex-col"]);
+const TabStopContext = createContext(null);
+const CHECK_PLACEMENT = {
+	label: "size-3 end-1.5 top-1/2 -translate-y-1/2",
+	icon: "size-2.5 end-1.5 top-1.5"
+};
+/**
+* A button that is on or off. Controlled with `isSelected` and
+* `onChange(isSelected)`, or uncontrolled with `defaultSelected`.
+*
+* Give an icon-only toggle an `aria-label`, and wrap it in a `TooltipTrigger`
+* when the glyph alone is not enough. The label should name the control, not
+* its state: assistive technology says "pressed" itself.
+*
+* @example
+* <ToggleButton isSelected={unread} onChange={setUnread}>Has new reply</ToggleButton>
+* <ToggleButton iconOnly aria-label="Primary key"><KeyIcon /></ToggleButton>
+*/
+const ToggleButton$1 = forwardRef(function ToggleButton$2({ className, size, iconOnly = false, children, excludeFromTabOrder, ...props }, ref) {
+	const stop = useContext(TabStopContext);
+	const skipTab = stop !== null && String(props.id) !== stop;
+	return /* @__PURE__ */ jsx(ToggleButton, {
+		ref,
+		...props,
+		excludeFromTabOrder: excludeFromTabOrder ?? skipTab,
+		"data-slot": "toggle-button",
+		"data-key": props.id,
+		className: cn(toggleButtonVariants({
+			size,
+			iconOnly
+		}), className),
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, isSelected ? /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			"data-slot": "toggle-button-check",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: cn("pointer-events-none absolute", iconOnly ? CHECK_PLACEMENT.icon : CHECK_PLACEMENT.label),
+			children: /* @__PURE__ */ jsx("path", { d: "M2.5 6.25 5 8.75 9.5 3.5" })
+		}) : null] })
+	});
+});
+/**
+* A row of ToggleButtons that share a selection. Always a toolbar of
+* `aria-pressed` buttons: ONE tab stop, arrow keys move focus, Space or Enter
+* toggles the focused button (selection never follows focus).
+*
+* `selectionMode="single"` (the default) lets one button be pressed at a time:
+* pressing another moves the selection to it, and pressing the pressed one
+* clears it unless `disallowEmptySelection`. Tab enters the group on the pressed
+* button (on the first when none is). `"multiple"` lets any number be pressed.
+* Each child needs an `id`, which is its key in `selectedKeys`.
+*
+* Why not `role="radiogroup"`: React Aria's single mode is a radio group in
+* name only. Its arrows move focus and do not check, and every button is a tab
+* stop, which is not the APG radio pattern. A true radio group needs the
+* selection to follow focus, which a button that you press does not do. The
+* toolbar of pressed buttons is the APG pattern that matches how these behave.
+* If you need a radio group, use `RadioGroup` (`variant="card"` for the framed look).
+*
+* @example
+* <ToggleButtonGroup aria-label="Range" selectionMode="single" disallowEmptySelection>
+*   <ToggleButton id="7d">7 days</ToggleButton>
+*   <ToggleButton id="30d">30 days</ToggleButton>
+* </ToggleButtonGroup>
+*/
+const ToggleButtonGroup$1 = forwardRef(function ToggleButtonGroup$2({ className, selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }, ref) {
+	const single = selectionMode === "single";
+	const [inner, setInner] = useState(() => new Set(defaultSelectedKeys ?? []));
+	const chosen = selectedKeys === void 0 ? inner : new Set(selectedKeys);
+	const own = useRef(null);
+	const [stop, setStop] = useState(null);
+	useIsomorphicLayoutEffect(() => {
+		if (!single || chosen.size === 0) return setStop(null);
+		const enabled = [...own.current?.querySelectorAll("[data-slot=\"toggle-button\"]") ?? []].filter((el) => !el.disabled);
+		const pressed = enabled.find((el) => el.getAttribute("aria-pressed") === "true");
+		setStop((pressed ?? enabled[0])?.getAttribute("data-key") ?? null);
+	});
+	const shared = {
+		ref: useMemo(() => mergeRefs(own, ref), [ref]),
+		...props,
+		"data-slot": "toggle-button-group",
+		className: cn(toggleButtonGroupVariants(), className)
+	};
+	if (!single) return /* @__PURE__ */ jsx(ToggleButtonGroup, {
+		...shared,
+		selectionMode: "multiple",
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange
+	});
+	const change = (next) => {
+		if (next === "all") return;
+		let keys = next;
+		if (next.size > 1) {
+			const added = [...next].find((key) => !chosen.has(key));
+			keys = /* @__PURE__ */ new Set([added ?? [...next][0]]);
+		}
+		if (selectedKeys === void 0) setInner(keys);
+		onSelectionChange?.(keys);
+	};
+	return /* @__PURE__ */ jsx(TabStopContext.Provider, {
+		value: stop,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			...shared,
+			selectionMode: "multiple",
+			selectedKeys: chosen,
+			onSelectionChange: change
+		})
+	});
+});
+//#endregion
+export { ToggleButton$1 as ToggleButton, ToggleButtonGroup$1 as ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants };
+
+//# sourceMappingURL=toggle-button.js.map

package/dist/toggle-button/toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.js","names":["ToggleButton","AriaToggleButton","ToggleButtonGroup","AriaToggleButtonGroup"],"sources":["../../src/toggle-button/toggle-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  ToggleButton as AriaToggleButton,\n  ToggleButtonGroup as AriaToggleButtonGroup,\n  type ToggleButtonGroupProps as AriaToggleButtonGroupProps,\n  type Key,\n  type Selection,\n  type ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\n/**\n * ToggleButton: a button that stays pressed. One question, two answers\n * (\"Has new reply\", \"Primary key\"), where a Switch would sit in a form row and\n * a Checkbox would need a label beside a box.\n *\n * Built on React Aria's `ToggleButton`, so it is a real `<button>` with\n * `aria-pressed`; in a {@link ToggleButtonGroup} that allows one choice the\n * same buttons are a toolbar of `aria-pressed` buttons. It is NOT Button with `aria-pressed` and a\n * swapped variant, which is what the apps hand-build today: the selected look\n * here does not rest on colour.\n *\n * SELECTED IS SHOWN THREE WAYS. A tint, a `primary-strong` edge and a check\n * mark drawn in `currentColor`, so the state survives forced colours and\n * colour-blindness (WCAG 1.4.1). The mark sits INSIDE the control's own box,\n * in the corner, so it never shifts the layout when it appears and is never\n * clipped by a table row or scroll area outside the border. An icon-only\n * toggle carries it too.\n *\n * FOCUS follows the field surface: on `:focus-visible` the control's own 1px\n * border turns dark and nothing else is drawn, no ring. Forced colours\n * override a border colour, so only there does an outline come back.\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 toggleButtonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    \"rounded-control font-sans font-medium text-foreground\",\n    \"cursor-pointer select-none box-border\",\n    \"border-(length:--border-width) border-border bg-surface shadow-surface\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n    \"[-webkit-tap-highlight-color:transparent]\",\n    \"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n    // Hover darkens the edge a step, as on a text field.\n    \"data-[hovered]:bg-muted data-[hovered]:border-border-strong\",\n\n    // Selected: tint and edge. The check mark below is the cue that is not colour.\n    \"data-[selected]:bg-primary-subtle data-[selected]:border-primary-strong\",\n    \"data-[selected]:data-[hovered]:bg-primary-subtle\",\n\n    // Focus is the control's own border going dark. Declared last and doubled\n    // with the selected state so a pressed, focused toggle shows it too.\n    // outline-none, then the outline only under forced colours, where a border\n    // colour is overridden and would leave no indicator (same recipe as\n    // fieldSurfaceVariants).\n    \"outline-none\",\n    \"data-[focus-visible]:border-foreground\",\n    \"data-[focus-visible]:data-[selected]:border-foreground\",\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    // Disabled comes after, and doubled with the selected state for the same reason, so a\n    // disabled, selected toggle drops the tint and the edge and keeps only the check mark.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:text-text-disabled data-[disabled]:border-border\",\n    \"data-[disabled]:data-[selected]:bg-muted data-[disabled]:data-[selected]:border-border\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-(--density-control-h-sm) text-sm\",\n        md: \"h-(--density-control-h-md) text-sm\",\n      },\n      /** A square button that holds only a glyph. It must carry an `aria-label`. */\n      iconOnly: {\n        true: \"px-0 text-base\",\n        // 4px more at the end than the start: room for the selected mark, always, so nothing moves.\n        false: \"ps-4 pe-5\",\n      },\n    },\n    compoundVariants: [\n      { size: \"sm\", iconOnly: true, class: \"w-(--density-control-h-sm)\" },\n      { size: \"md\", iconOnly: true, class: \"w-(--density-control-h-md)\" },\n    ],\n    defaultVariants: { size: \"sm\", iconOnly: false },\n  },\n);\n\n/** The group's row. Buttons wrap rather than overflow a narrow container. */\nexport const toggleButtonGroupVariants = cva([\n  \"box-border inline-flex flex-wrap gap-2 font-sans\",\n  \"data-[orientation=vertical]:flex-col\",\n]);\n\n// The key (as a string) of a single-choice group's one tab stop, or null when the group has\n// no opinion (outside a group, in multiple mode, nothing pressed, or nothing enabled).\nconst TabStopContext = createContext<string | null>(null);\n\nexport interface ToggleButtonProps\n  extends\n    Omit<AriaToggleButtonProps, \"className\" | \"style\" | \"children\">,\n    Omit<VariantProps<typeof toggleButtonVariants>, \"iconOnly\"> {\n  /** The label, or the glyph of an `iconOnly` toggle. */\n  children?: ReactNode;\n  /**\n   * Only a glyph, in a square button. Pass the glyph as `children` and name the\n   * button with `aria-label`; without one it has no accessible name.\n   *\n   * @default false\n   */\n  iconOnly?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n// Where the mark sits inside the box. A label toggle keeps 4px more padding at the end\n// (always, so nothing moves when the mark appears) and the mark is centred in it; an\n// icon-only toggle has no spare room, so the mark takes the top corner, drawn smaller.\nconst CHECK_PLACEMENT = {\n  label: \"size-3 end-1.5 top-1/2 -translate-y-1/2\",\n  icon: \"size-2.5 end-1.5 top-1.5\",\n} as const;\n\n/**\n * A button that is on or off. Controlled with `isSelected` and\n * `onChange(isSelected)`, or uncontrolled with `defaultSelected`.\n *\n * Give an icon-only toggle an `aria-label`, and wrap it in a `TooltipTrigger`\n * when the glyph alone is not enough. The label should name the control, not\n * its state: assistive technology says \"pressed\" itself.\n *\n * @example\n * <ToggleButton isSelected={unread} onChange={setUnread}>Has new reply</ToggleButton>\n * <ToggleButton iconOnly aria-label=\"Primary key\"><KeyIcon /></ToggleButton>\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  { className, size, iconOnly = false, children, excludeFromTabOrder, ...props },\n  ref,\n) {\n  // Single choice: Tab enters the group on the chosen button, the rest are reached by arrows.\n  const stop = useContext(TabStopContext);\n  const skipTab = stop !== null && String(props.id) !== stop;\n  return (\n    <AriaToggleButton\n      ref={ref}\n      {...props}\n      excludeFromTabOrder={excludeFromTabOrder ?? skipTab}\n      data-slot=\"toggle-button\"\n      data-key={props.id}\n      className={cn(toggleButtonVariants({ size, iconOnly }), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {children}\n          {isSelected ? (\n            // Decorative: the button's own pressed state carries it for assistive technology.\n            <svg\n              aria-hidden=\"true\"\n              data-slot=\"toggle-button-check\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.75\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className={cn(\n                \"pointer-events-none absolute\",\n                iconOnly ? CHECK_PLACEMENT.icon : CHECK_PLACEMENT.label,\n              )}\n            >\n              <path d=\"M2.5 6.25 5 8.75 9.5 3.5\" />\n            </svg>\n          ) : null}\n        </>\n      )}\n    </AriaToggleButton>\n  );\n});\n\nexport interface ToggleButtonGroupProps extends Omit<\n  AriaToggleButtonGroupProps,\n  \"className\" | \"style\"\n> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * A row of ToggleButtons that share a selection. Always a toolbar of\n * `aria-pressed` buttons: ONE tab stop, arrow keys move focus, Space or Enter\n * toggles the focused button (selection never follows focus).\n *\n * `selectionMode=\"single\"` (the default) lets one button be pressed at a time:\n * pressing another moves the selection to it, and pressing the pressed one\n * clears it unless `disallowEmptySelection`. Tab enters the group on the pressed\n * button (on the first when none is). `\"multiple\"` lets any number be pressed.\n * Each child needs an `id`, which is its key in `selectedKeys`.\n *\n * Why not `role=\"radiogroup\"`: React Aria's single mode is a radio group in\n * name only. Its arrows move focus and do not check, and every button is a tab\n * stop, which is not the APG radio pattern. A true radio group needs the\n * selection to follow focus, which a button that you press does not do. The\n * toolbar of pressed buttons is the APG pattern that matches how these behave.\n * If you need a radio group, use `RadioGroup` (`variant=\"card\"` for the framed look).\n *\n * @example\n * <ToggleButtonGroup aria-label=\"Range\" selectionMode=\"single\" disallowEmptySelection>\n *   <ToggleButton id=\"7d\">7 days</ToggleButton>\n *   <ToggleButton id=\"30d\">30 days</ToggleButton>\n * </ToggleButtonGroup>\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      className,\n      selectionMode = \"single\",\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange,\n      ...props\n    },\n    ref,\n  ) {\n    const single = selectionMode === \"single\";\n    const [inner, setInner] = useState<Set<Key>>(() => new Set(defaultSelectedKeys ?? []));\n    const chosen = selectedKeys === undefined ? inner : new Set(selectedKeys);\n\n    // The one tab stop: the pressed button, or the first enabled one when the pressed button is\n    // disabled. Read from the DOM after each render because disabled may come from any wrapper.\n    const own = useRef<HTMLDivElement | null>(null);\n    const [stop, setStop] = useState<string | null>(null);\n    useIsomorphicLayoutEffect(() => {\n      if (!single || chosen.size === 0) return setStop(null);\n      const enabled = [\n        ...(own.current?.querySelectorAll<HTMLElement>('[data-slot=\"toggle-button\"]') ?? []),\n      ].filter((el) => !(el as HTMLButtonElement).disabled);\n      const pressed = enabled.find((el) => el.getAttribute(\"aria-pressed\") === \"true\");\n      setStop((pressed ?? enabled[0])?.getAttribute(\"data-key\") ?? null);\n    });\n\n    // Memoized on the caller's ref so the merged callback is stable across renders: a new function\n    // each render would have React call the caller's callback ref with null and then the node again.\n    const mergedRef = useMemo(() => mergeRefs(own, ref), [ref]);\n\n    const shared = {\n      ref: mergedRef,\n      ...props,\n      \"data-slot\": \"toggle-button-group\",\n      className: cn(toggleButtonGroupVariants(), className),\n    };\n\n    if (!single) {\n      return (\n        <AriaToggleButtonGroup\n          {...shared}\n          selectionMode=\"multiple\"\n          selectedKeys={selectedKeys}\n          defaultSelectedKeys={defaultSelectedKeys}\n          onSelectionChange={onSelectionChange}\n        />\n      );\n    }\n\n    // React Aria's own single mode is a radio group; we want the toolbar, so run it as\n    // \"multiple\" and keep it to one key: the newly pressed key replaces the old one.\n    const change = (next: Selection) => {\n      if (next === \"all\") return;\n      let keys: Set<Key> = next;\n      if (next.size > 1) {\n        const added = [...next].find((key) => !chosen.has(key));\n        keys = new Set([added ?? [...next][0]!]);\n      }\n      if (selectedKeys === undefined) setInner(keys);\n      onSelectionChange?.(keys);\n    };\n\n    return (\n      <TabStopContext.Provider value={stop}>\n        <AriaToggleButtonGroup\n          {...shared}\n          selectionMode=\"multiple\"\n          selectedKeys={chosen}\n          onSelectionChange={change}\n        />\n      </TabStopContext.Provider>\n    );\n  },\n);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekalfred/primitives",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "type": "module",
   "license": "MIT",
   "description": "Accessible, styled primitives built on React Aria Components.",
@@ -104,6 +104,14 @@
       "types": "./dist/chip-group/index.d.ts",
       "default": "./dist/chip-group/index.js"
     },
+    "./code-block": {
+      "types": "./dist/code-block/index.d.ts",
+      "default": "./dist/code-block/index.js"
+    },
+    "./command-palette": {
+      "types": "./dist/command-palette/index.d.ts",
+      "default": "./dist/command-palette/index.js"
+    },
     "./confirm-morph": {
       "types": "./dist/confirm-morph/index.d.ts",
       "default": "./dist/confirm-morph/index.js"
@@ -160,6 +168,10 @@
       "types": "./dist/gauge/index.d.ts",
       "default": "./dist/gauge/index.js"
     },
+    "./info-tooltip": {
+      "types": "./dist/info-tooltip/index.d.ts",
+      "default": "./dist/info-tooltip/index.js"
+    },
     "./input": {
       "types": "./dist/input/index.d.ts",
       "default": "./dist/input/index.js"
@@ -360,6 +372,10 @@
       "types": "./dist/toast/index.d.ts",
       "default": "./dist/toast/index.js"
     },
+    "./toggle-button": {
+      "types": "./dist/toggle-button/index.d.ts",
+      "default": "./dist/toggle-button/index.js"
+    },
     "./tooltip": {
       "types": "./dist/tooltip/index.d.ts",
       "default": "./dist/tooltip/index.js"
@@ -395,7 +411,7 @@
     "@lexical/rich-text": "0.52.0",
     "@lexical/selection": "0.52.0",
     "@lexical/utils": "0.52.0",
-    "@seekalfred/tokens": "^0.7.4",
+    "@seekalfred/tokens": "^0.8.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "lexical": "0.52.0",
@@ -404,7 +420,7 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
     "@internationalized/date": "3.12.4",
-    "@seekalfred/styles": "^0.7.4",
+    "@seekalfred/styles": "^0.8.0",
     "@seekalfred/tsconfig": "0.0.0",
     "@size-limit/preset-small-lib": "13.0.3",
     "@storybook/react-vite": "10.6.0",