@epilot/spark-ui 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/components/tabs.js

@@ -117,7 +117,7 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 		onClick: scrollByPage(dir),
 		tabIndex: -1,
 		type: "button",
-		className: cn("absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-[var(--color-gray-1)]/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12", dir === 1 ? "right-0 group-data-[overflow-end]/tabs:flex" : "left-0 group-data-[overflow-start]/tabs:flex"),
+		className: cn("absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-gray-1/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12", dir === 1 ? "right-0 group-data-overflow-end/tabs:flex" : "left-0 group-data-overflow-start/tabs:flex"),
 		children: /* @__PURE__ */ jsx(MaterialSymbol, { name: dir === 1 ? "chevron_right" : "chevron_left" })
 	});
 	return /* @__PURE__ */ jsxs("div", {
@@ -131,7 +131,7 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 			/* @__PURE__ */ jsx(Tabs$1.List, {
 				"data-slot": "tabs-scroller",
 				ref: scrollerCallbackRef,
-				className: cn("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-[var(--tabs-indicator-x,0px)] after:h-1 after:w-[var(--tabs-indicator-w,0px)] after:rounded-full after:bg-[var(--spark-tabs-indicator,var(--spark-indicator))] after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
+				className: cn("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
 				...props
 			}),
 			chevron(1)
@@ -141,11 +141,11 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 function TabsTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
-		className: cn("group/trigger inline-flex min-w-[var(--tabs-trigger-minw,0px)] shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors", "data-active:text-[color:var(--spark-tabs-ink,var(--spark-a11))]", "focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", "group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]", "group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5", "group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium", "group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3", "group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6", className),
+		className: cn("group/trigger inline-flex min-w-(--tabs-trigger-minw,0px) shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors", "data-active:text-(--spark-tabs-ink,var(--spark-a11))", "focus-visible:outline-hidden", "group-data-[variant=pill]/tabs:focus-visible:ring-2 group-data-[variant=pill]/tabs:focus-visible:ring-offset-1", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", "group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]", "group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5", "group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium", "group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3", "group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6", className),
 		...props,
 		children: /* @__PURE__ */ jsx("span", {
 			"data-slot": "tabs-trigger-inner",
-			className: cn("inline-flex items-center gap-1", "group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors", "group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3"),
+			className: cn("inline-flex items-center gap-1", "group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors", "group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3", "group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-2 group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-offset-1"),
 			children
 		})
 	});

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["React","TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\n// useLayoutEffect warns during SSR; the isomorphic swap is the standard Radix idiom.\nconst useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\n// Merge our internal scroller ref with a consumer-forwarded ref. Written locally\n// and React 19-correct: it propagates cleanup-returning callback refs and nulls\n// plain refs on unmount.\ntype PossibleRef<T> = React.Ref<T> | undefined\n\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) ref.current = value\n  return undefined\n}\n\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n  return (node: T) => {\n    let hasCleanup = false\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node)\n      if (typeof cleanup === 'function') hasCleanup = true\n      return cleanup\n    })\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < refs.length; i++) {\n          const cleanup = cleanups[i]\n          if (typeof cleanup === 'function') cleanup()\n          else setRef(refs[i], null)\n        }\n      }\n    }\n    return undefined\n  }\n}\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\nfunction Tabs(props: TabsProps) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" {...props} />\n}\n\ntype TabsListVariant = 'underline'\n\n/**\n * @deprecated Not part of Spark's tab design — use `'underline'`. `'pill'` (a\n * segmented control) and the old text-only `'default'` still render for\n * back-compat but are undocumented and may be removed.\n */\ntype TabsListVariantLegacy = 'default' | 'pill'\n\ntype TabsListProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.List>,\n  'style'\n> & {\n  /** `underline` — the Spark tab: bold label + a sliding accent bar. */\n  variant?: TabsListVariant | TabsListVariantLegacy\n  // style lands on the plain wrapper div, so no Base UI state-callback form\n  style?: React.CSSProperties\n}\n\n// how much of a neighboring tab a scroll-into-view reveals (matches scroll-mx-10)\nconst REVEAL_PEEK = 40\n// worm indicator: the accent bar stretches across old+new, then contracts to the\n// new tab. WORM_MS must be >= the bar's CSS transition (200ms) so the stretch fully\n// settles before the contract begins — then contract sets left+width from rest in\n// one synced transition, pinning the leading edge so the motion never jiggles (a\n// contract that starts mid-stretch desyncs the two edges → wobble on big jumps).\nconst WORM_MS = 210\n\nfunction TabsList({\n  className,\n  style,\n  variant = 'underline',\n  ref,\n  ...props\n}: TabsListProps) {\n  // 'underline' is the only real variant. Deprecated 'pill' still renders (a\n  // segmented control, kept for back-compat); anything else (incl. the old\n  // text-only 'default') folds into underline.\n  const resolved = variant === 'pill' ? 'pill' : 'underline'\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null)\n  const scrollerRef = React.useRef<HTMLDivElement | null>(null)\n  // stable identity (keyed on the forwarded ref) so React doesn't detach/re-attach\n  // the scroller ref on every render — TabsList re-renders on each selection.\n  const scrollerCallbackRef = React.useMemo(\n    () => composeRefs<HTMLDivElement>(scrollerRef, ref),\n    [ref],\n  )\n\n  // Sliding underline + overflow state + travel-into-view. The bar lives on the\n  // SCROLLER (::after scrolls with the content) and follows the active trigger via\n  // two measured vars; useLayoutEffect measures before paint (no flash); the\n  // MutationObserver tracks selection + children + text changes; the ResizeObserver\n  // re-measures on container/scroller reflow. Together they cover everything that\n  // moves a tab: selection, add/remove, a counter Badge growing, and resize.\n  useIsomorphicLayoutEffect(() => {\n    const wrapper = wrapperRef.current\n    const scroller = scrollerRef.current\n    if (!wrapper || !scroller) return\n    // the edge chevrons show per side while more content hides in that direction\n    const syncOverflow = () => {\n      // 2px epsilon absorbs sub-pixel rounding at fractional browser zoom\n      // (scrollWidth/clientWidth round to int, scrollLeft is fractional). Assumes\n      // LTR (scrollLeft >= 0) — Spark's tab strips are LTR.\n      const max = scroller.scrollWidth - scroller.clientWidth\n      wrapper.toggleAttribute('data-overflow-start', scroller.scrollLeft > 2)\n      wrapper.toggleAttribute(\n        'data-overflow-end',\n        scroller.scrollLeft < max - 2,\n      )\n    }\n    // scroller-local reveal — deliberately NOT scrollIntoView, which also scrolls\n    // ancestors and would yank the page when the list is half off-screen. The peek\n    // keeps the neighboring tab partially visible (\"there's more here\").\n    const reveal = (el: HTMLElement) => {\n      // jsdom (unit tests) doesn't implement Element.scrollTo\n      if (typeof scroller.scrollTo !== 'function') return\n      const start = el.offsetLeft - REVEAL_PEEK\n      const end = el.offsetLeft + el.offsetWidth + REVEAL_PEEK\n      if (start < scroller.scrollLeft) {\n        scroller.scrollTo({ left: Math.max(0, start) })\n      } else if (end > scroller.scrollLeft + scroller.clientWidth) {\n        scroller.scrollTo({ left: end - scroller.clientWidth })\n      }\n    }\n    // matchMedia guarded for jsdom (unit tests); read .matches live so toggling the\n    // OS reduce-motion setting mid-session takes effect on the next selection.\n    const motionQuery =\n      typeof window.matchMedia === 'function'\n        ? window.matchMedia('(prefers-reduced-motion: reduce)')\n        : null\n    const setBar = (x: number, w: number) => {\n      scroller.style.setProperty('--tabs-indicator-x', `${x}px`)\n      scroller.style.setProperty('--tabs-indicator-w', `${w}px`)\n    }\n    let lastActive: HTMLElement | null = null\n    let mounted = false\n    let wormTimer: ReturnType<typeof setTimeout> | undefined\n    const measure = () => {\n      const active = scroller.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-active]',\n      )\n      const changed = active !== lastActive\n      if (resolved === 'underline') {\n        if (!active) {\n          // no selection → collapse the bar (width 0), forget the previous tab, and\n          // cancel any pending contract, so a later selection never worms from a\n          // stale/removed node\n          clearTimeout(wormTimer)\n          lastActive = null\n          scroller.style.setProperty('--tabs-indicator-w', '0px')\n        } else if (\n          changed &&\n          lastActive?.isConnected &&\n          mounted &&\n          !motionQuery?.matches\n        ) {\n          // worm: stretch across old + new (one edge holds, the other reaches),\n          // then contract to the new tab (the trailing edge catches up). The union\n          // makes it direction-agnostic. isConnected guards dynamic tab removal — a\n          // detached old node reports offsets of 0 and would sweep the bar from x=0.\n          const from = Math.min(lastActive.offsetLeft, active.offsetLeft)\n          const to = Math.max(\n            lastActive.offsetLeft + lastActive.offsetWidth,\n            active.offsetLeft + active.offsetWidth,\n          )\n          setBar(from, to - from)\n          clearTimeout(wormTimer)\n          const el = active\n          wormTimer = setTimeout(\n            () => setBar(el.offsetLeft, el.offsetWidth),\n            WORM_MS,\n          )\n        } else {\n          // first paint, reduced motion, detached previous, or a resize (same tab)\n          // → settle on the active tab, no worm\n          clearTimeout(wormTimer)\n          setBar(active.offsetLeft, active.offsetWidth)\n        }\n      }\n      syncOverflow()\n      // travel the active tab into view on selection change — and on mount, so a\n      // defaulted off-screen tab is visible. reveal() is scroller-local, so it never\n      // scrolls the page/ancestors.\n      if (active && changed) {\n        reveal(active)\n        lastActive = active\n      }\n      mounted = true\n    }\n    measure()\n    scroller.addEventListener('scroll', syncOverflow, { passive: true })\n    const mo = new MutationObserver(measure)\n    mo.observe(scroller, {\n      subtree: true,\n      childList: true,\n      // characterData catches a trigger's text growing (e.g. a counter Badge 9→120):\n      // in overflow the scroller's border-box is pinned, so that only changes\n      // scrollWidth (never reported by the ResizeObserver) yet shifts every tab.\n      characterData: true,\n      attributeFilter: ['data-active'],\n    })\n    const ro = new ResizeObserver(measure)\n    ro.observe(scroller)\n    return () => {\n      scroller.removeEventListener('scroll', syncOverflow)\n      clearTimeout(wormTimer)\n      mo.disconnect()\n      ro.disconnect()\n    }\n  }, [resolved])\n\n  const scrollByPage = (dir: 1 | -1) => () => {\n    const scroller = scrollerRef.current\n    if (typeof scroller?.scrollBy !== 'function') return\n    // behavior omitted → follows the scroller's CSS scroll-behavior (smooth,\n    // motion-reduce → auto)\n    scroller.scrollBy({ left: dir * scroller.clientWidth * 0.6 })\n  }\n  // Pointer-only affordance: keyboard users page through tabs with arrow keys\n  // (focus auto-scrolls), so the chevrons are aria-hidden and out of the tab\n  // order — they exist to make hidden overflow visible and clickable. They also\n  // can't live INSIDE the list: role=tablist allows only tab children (ARIA),\n  // and an absolute child of the scroll container would scroll away with it.\n  const chevron = (dir: 1 | -1) => (\n    <button\n      aria-hidden=\"true\"\n      data-slot={dir === 1 ? 'tabs-scroll-next' : 'tabs-scroll-prev'}\n      onClick={scrollByPage(dir)}\n      tabIndex={-1}\n      type=\"button\"\n      className={cn(\n        // frosted-glass overflow indicator: a 40x40 icon button (button-aligned\n        // radius) floating at the overflowing edge, vertically centered. The\n        // backdrop-blur reads the tabs sliding under it, so the chevron stays\n        // legible over any tab colour — no shadow needed.\n        'absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-[var(--color-gray-1)]/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12',\n        dir === 1\n          ? 'right-0 group-data-[overflow-end]/tabs:flex'\n          : 'left-0 group-data-[overflow-start]/tabs:flex',\n      )}\n    >\n      <MaterialSymbol name={dir === 1 ? 'chevron_right' : 'chevron_left'} />\n    </button>\n  )\n\n  return (\n    // the wrapper is the public box (data-slot tabs-list, consumer className +\n    // style) — group/tabs + data-variant here drive the trigger's group-data-[…]/tabs\n    // styling, and data-overflow-start/end (set above) show/hide the chevrons.\n    // className + style both land here so a consumer's layout (margin/width) moves\n    // the whole control, not just the inner scroller (which would offset the chevrons).\n    <div\n      className={cn('group/tabs relative inline-block max-w-full', className)}\n      data-slot=\"tabs-list\"\n      data-variant={resolved}\n      ref={wrapperRef}\n      style={style}\n    >\n      {chevron(-1)}\n      <TabsPrimitive.List\n        data-slot=\"tabs-scroller\"\n        ref={scrollerCallbackRef}\n        className={cn(\n          // mobile-first: scrolls horizontally when the tabs don't fit (inert\n          // otherwise). `relative` makes THIS the containing block + offsetParent\n          // for the sliding bar: the ::after is laid out in the scroll content, so\n          // it travels with its tab, and triggers measure content-relative\n          // offsetLeft. scroll-smooth makes every scroll travel — clicks/focus\n          // (which honor the triggers' scroll-mx peek), the chevrons' scrollBy,\n          // and the observer's reveal.\n          'relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto',\n          // underline: no continuous track — each trigger carries its OWN bottom\n          // rail (below), so the rails read as per-tab segments with gaps between\n          // them. items-stretch keeps every trigger full height so their rails (and\n          // the accent bar) line up on one baseline.\n          resolved === 'underline' && 'gap-2',\n          // underline: the sliding accent bar — driven by --tabs-indicator-x/-w\n          // (measured above; internal vars, not theme knobs). It rides ON TOP of the\n          // active tab's own rail (4px accent over the 2px neutral rail), and worms\n          // between tabs. An absolute child of the scroll container scrolls with the\n          // content, so it tracks its tab mid-overflow. Color = the parity token\n          // --spark-indicator (step 9), HC deepens to 12.\n          resolved === 'underline' &&\n            \"after:pointer-events-none after:absolute after:bottom-0 after:left-[var(--tabs-indicator-x,0px)] after:h-1 after:w-[var(--tabs-indicator-w,0px)] after:rounded-full after:bg-[var(--spark-tabs-indicator,var(--spark-indicator))] after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none\",\n          // pill: soft neutral track, radius follows the knob (never a full circle)\n          resolved === 'pill' && 'gap-0 rounded-md bg-gray-a3 p-1',\n        )}\n        {...props}\n      />\n      {chevron(1)}\n    </div>\n  )\n}\n\ntype TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction TabsTrigger({ className, children, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        // shared: state-driven ink — rest = full neutral (per Figma, not dimmed),\n        // active = accent (HC deepens via --spark-tabs-ink). Hover is Radix-style\n        // NEUTRAL in both variants (soft fill only, ink stays gray-12 until\n        // selected) — berni 2026-07-06, over the Figma no-counter accent hover.\n        // scroll-mx = the peek margin every scroll-into-view honors (native focus\n        // scrolling included): a revealed tab always drags 40px of its neighbor in\n        // group/trigger lets the inner label box react to hover ANYWHERE on the\n        // full hit target (the paint shrinks, the target doesn't). min-w reads a var\n        // (set per-variant below) via a PLAIN utility, so a consumer's className\n        // min-w-* wins by tailwind-merge — a group-data:min-w-* would outrank it on\n        // specificity (e.g. icon-only tabs that want to be narrow).\n        'group/trigger inline-flex min-w-[var(--tabs-trigger-minw,0px)] shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors',\n        'data-active:text-[color:var(--spark-tabs-ink,var(--spark-a11))]',\n        // inset ring: the list is a scroll container, so an outside ring would\n        // be clipped at the list edge — inset keeps it fully visible (Radix idiom)\n        'focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        // underline (Figma 20-419): bold 16/24 label, 48px min height; hover fill\n        // + rounding live on the INNER label box (Radix anatomy), so the trigger\n        // itself carries only layout. The active bar lives on the list (it slides).\n        'group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]',\n        // each tab owns its bottom rail (neutral, 2px) — no continuous track. The\n        // sliding accent bar (4px) rides on top of the active tab's rail.\n        'group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5',\n        // pill: compact segmented thumb — neutral card raised off the track; the\n        // thumb IS the full trigger, so its hover fill stays full-size (unlike\n        // underline, where the hover is an inset label box per the Radix ref).\n        // Radius is concentric with the track: rounded-md (track) − p-1 ≈ rounded-sm.\n        'group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium',\n        'group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3',\n        'group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6',\n        className,\n      )}\n      {...props}\n    >\n      {/* the Radix two-box anatomy: the hover paints this compact label box (with\n          clearance above the bar/track), not the full 48px hit target */}\n      <span\n        data-slot=\"tabs-trigger-inner\"\n        className={cn(\n          'inline-flex items-center gap-1',\n          'group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors',\n          'group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3',\n        )}\n      >\n        {children}\n      </span>\n    </TabsPrimitive.Tab>\n  )\n}\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerUnderline = TabsTrigger\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerPill = TabsTrigger\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel>\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\n        'focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  TabsTriggerPill,\n  TabsTriggerUnderline,\n}\nexport type { TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["React","TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\n// useLayoutEffect warns during SSR; the isomorphic swap is the standard Radix idiom.\nconst useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\n// Merge our internal scroller ref with a consumer-forwarded ref. Written locally\n// and React 19-correct: it propagates cleanup-returning callback refs and nulls\n// plain refs on unmount.\ntype PossibleRef<T> = React.Ref<T> | undefined\n\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) ref.current = value\n  return undefined\n}\n\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n  return (node: T) => {\n    let hasCleanup = false\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node)\n      if (typeof cleanup === 'function') hasCleanup = true\n      return cleanup\n    })\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < refs.length; i++) {\n          const cleanup = cleanups[i]\n          if (typeof cleanup === 'function') cleanup()\n          else setRef(refs[i], null)\n        }\n      }\n    }\n    return undefined\n  }\n}\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\nfunction Tabs(props: TabsProps) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" {...props} />\n}\n\ntype TabsListVariant = 'underline'\n\n/**\n * @deprecated Not part of Spark's tab design — use `'underline'`. `'pill'` (a\n * segmented control) and the old text-only `'default'` still render for\n * back-compat but are undocumented and may be removed.\n */\ntype TabsListVariantLegacy = 'default' | 'pill'\n\ntype TabsListProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.List>,\n  'style'\n> & {\n  /** `underline` — the Spark tab: bold label + a sliding accent bar. */\n  variant?: TabsListVariant | TabsListVariantLegacy\n  // style lands on the plain wrapper div, so no Base UI state-callback form\n  style?: React.CSSProperties\n}\n\n// how much of a neighboring tab a scroll-into-view reveals (matches scroll-mx-10)\nconst REVEAL_PEEK = 40\n// worm indicator: the accent bar stretches across old+new, then contracts to the\n// new tab. WORM_MS must be >= the bar's CSS transition (200ms) so the stretch fully\n// settles before the contract begins — then contract sets left+width from rest in\n// one synced transition, pinning the leading edge so the motion never jiggles (a\n// contract that starts mid-stretch desyncs the two edges → wobble on big jumps).\nconst WORM_MS = 210\n\nfunction TabsList({\n  className,\n  style,\n  variant = 'underline',\n  ref,\n  ...props\n}: TabsListProps) {\n  // 'underline' is the only real variant. Deprecated 'pill' still renders (a\n  // segmented control, kept for back-compat); anything else (incl. the old\n  // text-only 'default') folds into underline.\n  const resolved = variant === 'pill' ? 'pill' : 'underline'\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null)\n  const scrollerRef = React.useRef<HTMLDivElement | null>(null)\n  // stable identity (keyed on the forwarded ref) so React doesn't detach/re-attach\n  // the scroller ref on every render — TabsList re-renders on each selection.\n  const scrollerCallbackRef = React.useMemo(\n    () => composeRefs<HTMLDivElement>(scrollerRef, ref),\n    [ref],\n  )\n\n  // Sliding underline + overflow state + travel-into-view. The bar lives on the\n  // SCROLLER (::after scrolls with the content) and follows the active trigger via\n  // two measured vars; useLayoutEffect measures before paint (no flash); the\n  // MutationObserver tracks selection + children + text changes; the ResizeObserver\n  // re-measures on container/scroller reflow. Together they cover everything that\n  // moves a tab: selection, add/remove, a counter Badge growing, and resize.\n  useIsomorphicLayoutEffect(() => {\n    const wrapper = wrapperRef.current\n    const scroller = scrollerRef.current\n    if (!wrapper || !scroller) return\n    // the edge chevrons show per side while more content hides in that direction\n    const syncOverflow = () => {\n      // 2px epsilon absorbs sub-pixel rounding at fractional browser zoom\n      // (scrollWidth/clientWidth round to int, scrollLeft is fractional). Assumes\n      // LTR (scrollLeft >= 0) — Spark's tab strips are LTR.\n      const max = scroller.scrollWidth - scroller.clientWidth\n      wrapper.toggleAttribute('data-overflow-start', scroller.scrollLeft > 2)\n      wrapper.toggleAttribute(\n        'data-overflow-end',\n        scroller.scrollLeft < max - 2,\n      )\n    }\n    // scroller-local reveal — deliberately NOT scrollIntoView, which also scrolls\n    // ancestors and would yank the page when the list is half off-screen. The peek\n    // keeps the neighboring tab partially visible (\"there's more here\").\n    const reveal = (el: HTMLElement) => {\n      // jsdom (unit tests) doesn't implement Element.scrollTo\n      if (typeof scroller.scrollTo !== 'function') return\n      const start = el.offsetLeft - REVEAL_PEEK\n      const end = el.offsetLeft + el.offsetWidth + REVEAL_PEEK\n      if (start < scroller.scrollLeft) {\n        scroller.scrollTo({ left: Math.max(0, start) })\n      } else if (end > scroller.scrollLeft + scroller.clientWidth) {\n        scroller.scrollTo({ left: end - scroller.clientWidth })\n      }\n    }\n    // matchMedia guarded for jsdom (unit tests); read .matches live so toggling the\n    // OS reduce-motion setting mid-session takes effect on the next selection.\n    const motionQuery =\n      typeof window.matchMedia === 'function'\n        ? window.matchMedia('(prefers-reduced-motion: reduce)')\n        : null\n    const setBar = (x: number, w: number) => {\n      scroller.style.setProperty('--tabs-indicator-x', `${x}px`)\n      scroller.style.setProperty('--tabs-indicator-w', `${w}px`)\n    }\n    let lastActive: HTMLElement | null = null\n    let mounted = false\n    let wormTimer: ReturnType<typeof setTimeout> | undefined\n    const measure = () => {\n      const active = scroller.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-active]',\n      )\n      const changed = active !== lastActive\n      if (resolved === 'underline') {\n        if (!active) {\n          // no selection → collapse the bar (width 0), forget the previous tab, and\n          // cancel any pending contract, so a later selection never worms from a\n          // stale/removed node\n          clearTimeout(wormTimer)\n          lastActive = null\n          scroller.style.setProperty('--tabs-indicator-w', '0px')\n        } else if (\n          changed &&\n          lastActive?.isConnected &&\n          mounted &&\n          !motionQuery?.matches\n        ) {\n          // worm: stretch across old + new (one edge holds, the other reaches),\n          // then contract to the new tab (the trailing edge catches up). The union\n          // makes it direction-agnostic. isConnected guards dynamic tab removal — a\n          // detached old node reports offsets of 0 and would sweep the bar from x=0.\n          const from = Math.min(lastActive.offsetLeft, active.offsetLeft)\n          const to = Math.max(\n            lastActive.offsetLeft + lastActive.offsetWidth,\n            active.offsetLeft + active.offsetWidth,\n          )\n          setBar(from, to - from)\n          clearTimeout(wormTimer)\n          const el = active\n          wormTimer = setTimeout(\n            () => setBar(el.offsetLeft, el.offsetWidth),\n            WORM_MS,\n          )\n        } else {\n          // first paint, reduced motion, detached previous, or a resize (same tab)\n          // → settle on the active tab, no worm\n          clearTimeout(wormTimer)\n          setBar(active.offsetLeft, active.offsetWidth)\n        }\n      }\n      syncOverflow()\n      // travel the active tab into view on selection change — and on mount, so a\n      // defaulted off-screen tab is visible. reveal() is scroller-local, so it never\n      // scrolls the page/ancestors.\n      if (active && changed) {\n        reveal(active)\n        lastActive = active\n      }\n      mounted = true\n    }\n    measure()\n    scroller.addEventListener('scroll', syncOverflow, { passive: true })\n    const mo = new MutationObserver(measure)\n    mo.observe(scroller, {\n      subtree: true,\n      childList: true,\n      // characterData catches a trigger's text growing (e.g. a counter Badge 9→120):\n      // in overflow the scroller's border-box is pinned, so that only changes\n      // scrollWidth (never reported by the ResizeObserver) yet shifts every tab.\n      characterData: true,\n      attributeFilter: ['data-active'],\n    })\n    const ro = new ResizeObserver(measure)\n    ro.observe(scroller)\n    return () => {\n      scroller.removeEventListener('scroll', syncOverflow)\n      clearTimeout(wormTimer)\n      mo.disconnect()\n      ro.disconnect()\n    }\n  }, [resolved])\n\n  const scrollByPage = (dir: 1 | -1) => () => {\n    const scroller = scrollerRef.current\n    if (typeof scroller?.scrollBy !== 'function') return\n    // behavior omitted → follows the scroller's CSS scroll-behavior (smooth,\n    // motion-reduce → auto)\n    scroller.scrollBy({ left: dir * scroller.clientWidth * 0.6 })\n  }\n  const chevron = (dir: 1 | -1) => (\n    <button\n      aria-hidden=\"true\"\n      data-slot={dir === 1 ? 'tabs-scroll-next' : 'tabs-scroll-prev'}\n      onClick={scrollByPage(dir)}\n      tabIndex={-1}\n      type=\"button\"\n      className={cn(\n        'absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-gray-1/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12',\n        dir === 1\n          ? 'right-0 group-data-overflow-end/tabs:flex'\n          : 'left-0 group-data-overflow-start/tabs:flex',\n      )}\n    >\n      <MaterialSymbol name={dir === 1 ? 'chevron_right' : 'chevron_left'} />\n    </button>\n  )\n\n  return (\n    // the wrapper is the public box (data-slot tabs-list, consumer className +\n    // style) — group/tabs + data-variant here drive the trigger's group-data-[…]/tabs\n    // styling, and data-overflow-start/end (set above) show/hide the chevrons.\n    // className + style both land here so a consumer's layout (margin/width) moves\n    // the whole control, not just the inner scroller (which would offset the chevrons).\n    <div\n      className={cn('group/tabs relative inline-block max-w-full', className)}\n      data-slot=\"tabs-list\"\n      data-variant={resolved}\n      ref={wrapperRef}\n      style={style}\n    >\n      {chevron(-1)}\n      <TabsPrimitive.List\n        data-slot=\"tabs-scroller\"\n        ref={scrollerCallbackRef}\n        className={cn(\n          'relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto',\n          resolved === 'underline' && 'gap-2',\n          resolved === 'underline' &&\n            \"after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none\",\n          resolved === 'pill' && 'gap-0 rounded-md bg-gray-a3 p-1',\n        )}\n        {...props}\n      />\n      {chevron(1)}\n    </div>\n  )\n}\n\ntype TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction TabsTrigger({ className, children, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'group/trigger inline-flex min-w-(--tabs-trigger-minw,0px) shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors',\n        'data-active:text-(--spark-tabs-ink,var(--spark-a11))',\n        'focus-visible:outline-hidden',\n        'group-data-[variant=pill]/tabs:focus-visible:ring-2 group-data-[variant=pill]/tabs:focus-visible:ring-offset-1',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        'group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]',\n        'group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5',\n        'group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium',\n        'group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3',\n        'group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6',\n        className,\n      )}\n      {...props}\n    >\n      {/* the Radix two-box anatomy: the hover paints this compact label box (with\n          clearance above the bar/track), not the full 48px hit target */}\n      <span\n        data-slot=\"tabs-trigger-inner\"\n        className={cn(\n          'inline-flex items-center gap-1',\n          'group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors',\n          'group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3',\n          'group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-2 group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-offset-1',\n        )}\n      >\n        {children}\n      </span>\n    </TabsPrimitive.Tab>\n  )\n}\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerUnderline = TabsTrigger\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerPill = TabsTrigger\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel>\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\n        'focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  TabsTriggerPill,\n  TabsTriggerUnderline,\n}\nexport type { TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],"mappings":"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"}

package/dist/components/theme.cjs

@@ -1,6 +1,6 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("../theme-CfFWrMEF.cjs");
+const require_theme = require("../theme-ClRJhexF.cjs");
 exports.Theme = require_theme.Theme;
 exports.useTheme = require_theme.useTheme;

package/dist/components/theme.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkRadius, d as SparkStyle, i as SparkInputColor, l as SparkScaling, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkSpacing } from "../theme-types-r20EJfEC.cjs";
+import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 

package/dist/components/theme.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkRadius, d as SparkStyle, i as SparkInputColor, l as SparkScaling, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkSpacing } from "../theme-types-DoROIXpi.js";
+import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 

package/dist/components/theme.js

@@ -1,4 +1,4 @@
 "use client";
 "use client";
-import { n as useTheme, t as Theme } from "../theme-C19BbKfO.js";
+import { n as useTheme, t as Theme } from "../theme-8PDO9E0S.js";
 export { Theme, useTheme };

package/dist/components/time-picker.cjs

@@ -16,7 +16,7 @@ const TimePicker = react.forwardRef(({ "aria-label": ariaLabel, className, disab
 		disabled,
 		onChange: (event) => onValueChange(event.target.value),
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
+		className: (0, cnfast.cn)("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
 	});
 });
 TimePicker.displayName = "TimePicker";

package/dist/components/time-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;;;;AAeA,MAAM,aAAaA,MAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,4OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,0BAA0B,UAAU;YAAvD,CACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}
+{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;;;;AAeA,MAAM,aAAaA,MAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,8OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,0BAA0B,UAAU;YAAvD,CACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,iBAAA,GAAA,kBAAA,MAAC,SAAD;GAAO,WAAU;aAAjB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}

package/dist/components/time-picker.js

@@ -13,7 +13,7 @@ const TimePicker = React$1.forwardRef(({ "aria-label": ariaLabel, className, dis
 		disabled,
 		onChange: (event) => onValueChange(event.target.value),
 		"aria-label": ariaLabel,
-		className: cn("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
+		className: cn("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
 	});
 });
 TimePicker.displayName = "TimePicker";

package/dist/components/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;AAeA,MAAM,aAAaA,QAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,oBAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,WAAW,GACT,4OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;YAAvD,CACE,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}
+{"version":3,"file":"time-picker.js","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":";;;;;AAeA,MAAM,aAAaA,QAAM,YAErB,EACE,cAAc,WACd,WACA,UACA,IACA,eACA,OAAO,IACP,SAEF,QACG;AACH,QACE,oBAAC,SAAD;EACO;EACD;EACJ,MAAK;EACE;EACD;EACI;EACV,WAAW,UAAU,cAAc,MAAM,OAAO,MAAM;EACtD,cAAY;EACZ,WAAW,GACT,8OACA,UACD;EACD,CAAA;EAGP;AAED,WAAW,cAAc;AAazB,SAAS,gBAAgB,EACvB,WACA,UACA,KACA,WAAW,OACX,aACA,eACA,OACA,aAAa,WACU;AACvB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;YAAvD,CACE,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EACP,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;MACR,qBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,oBAAC,QAAD;IAAM,WAAU;cAAuC;IAAgB,CAAA,EACvE,oBAAC,YAAD;IACE,OAAO;IACP,eAAe;IACL;IACV,cAAY;IACZ,CAAA,CACI;KACJ"}

package/dist/hooks/use-reduced-motion.cjs

@@ -0,0 +1,22 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+//#region src/hooks/use-reduced-motion.ts
+const QUERY = "(prefers-reduced-motion: reduce)";
+function getQuery() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
+}
+function subscribe(onChange) {
+	const query = getQuery();
+	if (!query) return () => {};
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function useReducedMotion() {
+	return (0, react.useSyncExternalStore)(subscribe, () => getQuery()?.matches ?? false, () => false);
+}
+//#endregion
+exports.useReducedMotion = useReducedMotion;
+
+//# sourceMappingURL=use-reduced-motion.cjs.map

package/dist/hooks/use-reduced-motion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.cjs","names":[],"sources":["../../src/hooks/use-reduced-motion.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\nconst QUERY = '(prefers-reduced-motion: reduce)'\n\nfunction getQuery() {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n    ? window.matchMedia(QUERY)\n    : null\n}\n\nfunction subscribe(onChange: () => void) {\n  const query = getQuery()\n  if (!query) return () => {}\n  query.addEventListener('change', onChange)\n  return () => query.removeEventListener('change', onChange)\n}\n\nfunction useReducedMotion() {\n  return useSyncExternalStore(\n    subscribe,\n    () => getQuery()?.matches ?? false,\n    () => false,\n  )\n}\n\nexport { useReducedMotion }\n"],"mappings":";;;;;AAEA,MAAM,QAAQ;AAEd,SAAS,WAAW;AAClB,QAAO,OAAO,WAAW,eACvB,OAAO,OAAO,eAAe,aAC3B,OAAO,WAAW,MAAM,GACxB;;AAGN,SAAS,UAAU,UAAsB;CACvC,MAAM,QAAQ,UAAU;AACxB,KAAI,CAAC,MAAO,cAAa;AACzB,OAAM,iBAAiB,UAAU,SAAS;AAC1C,cAAa,MAAM,oBAAoB,UAAU,SAAS;;AAG5D,SAAS,mBAAmB;AAC1B,SAAA,GAAA,MAAA,sBACE,iBACM,UAAU,EAAE,WAAW,aACvB,MACP"}

package/dist/hooks/use-reduced-motion.d.cts

@@ -0,0 +1,7 @@
+"use client";
+
+//#region src/hooks/use-reduced-motion.d.ts
+declare function useReducedMotion(): boolean;
+//#endregion
+export { useReducedMotion };
+//# sourceMappingURL=use-reduced-motion.d.cts.map

package/dist/hooks/use-reduced-motion.d.ts

@@ -0,0 +1,7 @@
+"use client";
+
+//#region src/hooks/use-reduced-motion.d.ts
+declare function useReducedMotion(): boolean;
+//#endregion
+export { useReducedMotion };
+//# sourceMappingURL=use-reduced-motion.d.ts.map

package/dist/hooks/use-reduced-motion.js

@@ -0,0 +1,20 @@
+"use client";
+import { useSyncExternalStore } from "react";
+//#region src/hooks/use-reduced-motion.ts
+const QUERY = "(prefers-reduced-motion: reduce)";
+function getQuery() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
+}
+function subscribe(onChange) {
+	const query = getQuery();
+	if (!query) return () => {};
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function useReducedMotion() {
+	return useSyncExternalStore(subscribe, () => getQuery()?.matches ?? false, () => false);
+}
+//#endregion
+export { useReducedMotion };
+
+//# sourceMappingURL=use-reduced-motion.js.map

package/dist/hooks/use-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.js","names":[],"sources":["../../src/hooks/use-reduced-motion.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\nconst QUERY = '(prefers-reduced-motion: reduce)'\n\nfunction getQuery() {\n  return typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function'\n    ? window.matchMedia(QUERY)\n    : null\n}\n\nfunction subscribe(onChange: () => void) {\n  const query = getQuery()\n  if (!query) return () => {}\n  query.addEventListener('change', onChange)\n  return () => query.removeEventListener('change', onChange)\n}\n\nfunction useReducedMotion() {\n  return useSyncExternalStore(\n    subscribe,\n    () => getQuery()?.matches ?? false,\n    () => false,\n  )\n}\n\nexport { useReducedMotion }\n"],"mappings":";;;AAEA,MAAM,QAAQ;AAEd,SAAS,WAAW;AAClB,QAAO,OAAO,WAAW,eACvB,OAAO,OAAO,eAAe,aAC3B,OAAO,WAAW,MAAM,GACxB;;AAGN,SAAS,UAAU,UAAsB;CACvC,MAAM,QAAQ,UAAU;AACxB,KAAI,CAAC,MAAO,cAAa;AACzB,OAAM,iBAAiB,UAAU,SAAS;AAC1C,cAAa,MAAM,oBAAoB,UAAU,SAAS;;AAG5D,SAAS,mBAAmB;AAC1B,QAAO,qBACL,iBACM,UAAU,EAAE,WAAW,aACvB,MACP"}

package/dist/{input-box-variants-Dr1K7uYE.js → input-box-variants-DcajYXvo.js}

@@ -25,4 +25,4 @@ const boxChrome = {
 //#endregion
 export { boxChrome as n, GHOST_UNDERLINE as t };
 
-//# sourceMappingURL=input-box-variants-Dr1K7uYE.js.map
+//# sourceMappingURL=input-box-variants-DcajYXvo.js.map

package/dist/{input-box-variants-Dr1K7uYE.js.map → input-box-variants-DcajYXvo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants-Dr1K7uYE.js","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,uFACD;EACD,MAAM,GACJ,WACA,6EACD;EACF;CACD,SAAS;EACP,OAAO,GACL,UACA,oGACD;EACD,MAAM,GACJ,UACA,iGACD;EACF;CACD,UAAU;EACR,OAAO,GACL,UACA,6EACD;EACD,MAAM,GACJ,UACA,4EACD;EACF;CACD,OAAO;EACL,OAAO,GAAG,iBAAiB,iBAAiB;EAC5C,MAAM,GAAG,iBAAiB,sBAAsB;EACjD;CACF"}
+{"version":3,"file":"input-box-variants-DcajYXvo.js","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,uFACD;EACD,MAAM,GACJ,WACA,6EACD;EACF;CACD,SAAS;EACP,OAAO,GACL,UACA,oGACD;EACD,MAAM,GACJ,UACA,iGACD;EACF;CACD,UAAU;EACR,OAAO,GACL,UACA,6EACD;EACD,MAAM,GACJ,UACA,4EACD;EACF;CACD,OAAO;EACL,OAAO,GAAG,iBAAiB,iBAAiB;EAC5C,MAAM,GAAG,iBAAiB,sBAAsB;EACjD;CACF"}

package/dist/{input-box-variants-BMDdwvqg.cjs → input-box-variants-ZCtgs-1S.cjs}

@@ -37,4 +37,4 @@ Object.defineProperty(exports, "boxChrome", {
 	}
 });
 
-//# sourceMappingURL=input-box-variants-BMDdwvqg.cjs.map
+//# sourceMappingURL=input-box-variants-ZCtgs-1S.cjs.map

package/dist/{input-box-variants-BMDdwvqg.cjs.map → input-box-variants-ZCtgs-1S.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants-BMDdwvqg.cjs","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,OAAA,IACE,WACA,uFACD;EACD,OAAA,GAAA,OAAA,IACE,WACA,6EACD;EACF;CACD,SAAS;EACP,QAAA,GAAA,OAAA,IACE,UACA,oGACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,iGACD;EACF;CACD,UAAU;EACR,QAAA,GAAA,OAAA,IACE,UACA,6EACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,4EACD;EACF;CACD,OAAO;EACL,QAAA,GAAA,OAAA,IAAU,iBAAiB,iBAAiB;EAC5C,OAAA,GAAA,OAAA,IAAS,iBAAiB,sBAAsB;EACjD;CACF"}
+{"version":3,"file":"input-box-variants-ZCtgs-1S.cjs","names":[],"sources":["../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,OAAA,IACE,WACA,uFACD;EACD,OAAA,GAAA,OAAA,IACE,WACA,6EACD;EACF;CACD,SAAS;EACP,QAAA,GAAA,OAAA,IACE,UACA,oGACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,iGACD;EACF;CACD,UAAU;EACR,QAAA,GAAA,OAAA,IACE,UACA,6EACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,4EACD;EACF;CACD,OAAO;EACL,QAAA,GAAA,OAAA,IAAU,iBAAiB,iBAAiB;EAC5C,OAAA,GAAA,OAAA,IAAS,iBAAiB,sBAAsB;EACjD;CACF"}

package/dist/{number-flow-DSbucQ_K.d.ts → number-flow-D9zsxH0-.d.ts}

@@ -12,4 +12,4 @@ declare function NumberFlow({
 }: NumberFlowProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
-//# sourceMappingURL=number-flow-DSbucQ_K.d.ts.map
+//# sourceMappingURL=number-flow-D9zsxH0-.d.ts.map

package/dist/styles/index.css

@@ -94,7 +94,9 @@
  * base rules (a layer's direct rules act as its implicit final sub-layer).
  */
 @layer base {
-  :root,
+  /* :where(:not(...)) keeps a dark root on the Radix dark value: a bare :root
+     here would beat the earlier .dark import at equal specificity */
+  :root:where(:not(.dark, .dark-theme)),
   .light,
   .light-theme {
     --green-a11: #06784c;
@@ -102,7 +104,7 @@
 
   @supports (color: color(display-p3 1 1 1)) {
     @media (color-gamut: p3) {
-      :root,
+      :root:where(:not(.dark, .dark-theme)),
       .light,
       .light-theme {
         --green-a11: color(display-p3 0.21 0.46 0.31);

package/dist/styles/spark-default.css

@@ -51,6 +51,12 @@
     --red-contrast: #fff;
     --red-on-solid: #fff;
     --red-surface: var(--red-2);
+    --green-contrast: #fff;
+    --green-on-solid: #fff;
+    --green-surface: var(--green-2);
+    --orange-contrast: #fff;
+    --orange-on-solid: #fff;
+    --orange-surface: var(--orange-2);
     --neutral-contrast: var(--neutral-12);
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
@@ -140,6 +146,12 @@
     --red-contrast: #fff;
     --red-on-solid: #fff;
     --red-surface: var(--red-2);
+    --green-contrast: #fff;
+    --green-on-solid: #fff;
+    --green-surface: var(--green-2);
+    --orange-contrast: #fff;
+    --orange-on-solid: #fff;
+    --orange-surface: var(--orange-2);
     --neutral-contrast: var(--neutral-12);
     --neutral-on-solid: #fff;
     --neutral-surface: var(--neutral-2);
@@ -609,6 +621,72 @@
     --spark-track: var(--red-9);
   }
 
+  [data-accent-color='green'],
+  :where([data-accent-color='green'] .spark-theme) {
+    --spark-1: var(--green-1);
+    --spark-2: var(--green-2);
+    --spark-3: var(--green-3);
+    --spark-4: var(--green-4);
+    --spark-5: var(--green-5);
+    --spark-6: var(--green-6);
+    --spark-7: var(--green-7);
+    --spark-8: var(--green-8);
+    --spark-9: var(--green-9);
+    --spark-10: var(--green-10);
+    --spark-11: var(--green-11);
+    --spark-12: var(--green-12);
+    --spark-a1: var(--green-a1);
+    --spark-a2: var(--green-a2);
+    --spark-a3: var(--green-a3);
+    --spark-a4: var(--green-a4);
+    --spark-a5: var(--green-a5);
+    --spark-a6: var(--green-a6);
+    --spark-a7: var(--green-a7);
+    --spark-a8: var(--green-a8);
+    --spark-a9: var(--green-a9);
+    --spark-a10: var(--green-a10);
+    --spark-a11: var(--green-a11);
+    --spark-a12: var(--green-a12);
+    --spark-contrast: var(--green-contrast);
+    --spark-on-solid: var(--green-on-solid);
+    --spark-surface: var(--green-surface);
+    --spark-indicator: var(--green-9);
+    --spark-track: var(--green-9);
+  }
+
+  [data-accent-color='orange'],
+  :where([data-accent-color='orange'] .spark-theme) {
+    --spark-1: var(--orange-1);
+    --spark-2: var(--orange-2);
+    --spark-3: var(--orange-3);
+    --spark-4: var(--orange-4);
+    --spark-5: var(--orange-5);
+    --spark-6: var(--orange-6);
+    --spark-7: var(--orange-7);
+    --spark-8: var(--orange-8);
+    --spark-9: var(--orange-9);
+    --spark-10: var(--orange-10);
+    --spark-11: var(--orange-11);
+    --spark-12: var(--orange-12);
+    --spark-a1: var(--orange-a1);
+    --spark-a2: var(--orange-a2);
+    --spark-a3: var(--orange-a3);
+    --spark-a4: var(--orange-a4);
+    --spark-a5: var(--orange-a5);
+    --spark-a6: var(--orange-a6);
+    --spark-a7: var(--orange-a7);
+    --spark-a8: var(--orange-a8);
+    --spark-a9: var(--orange-a9);
+    --spark-a10: var(--orange-a10);
+    --spark-a11: var(--orange-a11);
+    --spark-a12: var(--orange-a12);
+    --spark-contrast: var(--orange-contrast);
+    --spark-on-solid: var(--orange-on-solid);
+    --spark-surface: var(--orange-surface);
+    --spark-indicator: var(--orange-9);
+    --spark-track: var(--orange-9);
+  }
+
   /*
    * Card container chrome — a CONTAINER-only knob (contract §11). Everything here
    * writes only --spark-card-* / --spark-card-c-*, tokens read EXCLUSIVELY by <Card>;

package/dist/{theme-C19BbKfO.js → theme-8PDO9E0S.js}

@@ -571,4 +571,4 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, neutralColor, rad
 //#endregion
 export { useTheme as n, Theme as t };
 
-//# sourceMappingURL=theme-C19BbKfO.js.map
+//# sourceMappingURL=theme-8PDO9E0S.js.map