@epilot/spark-ui 0.26.0 → 0.27.0

package/dist/components/tabs.d.ts

@@ -6,15 +6,15 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/components/tabs.d.ts
 type TabsProps = React$1.ComponentProps<typeof Tabs$1.Root>;
 declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
-type TabsListVariant = 'underline';
+type TabsListVariant = 'underline' | 'portal';
 /**
- * @deprecated Not part of Spark's tab design — use `'underline'`. `'pill'` (a
- * segmented control) and the old text-only `'default'` still render for
- * back-compat but are undocumented and may be removed.
+ * @deprecated Not part of Spark's tab design — use `'underline'` or `'portal'`.
+ * `'pill'` (a segmented control) and the old text-only `'default'` still render
+ * for back-compat but are undocumented and may be removed.
  */
 type TabsListVariantLegacy = 'default' | 'pill';
 type TabsListProps = Omit<React$1.ComponentProps<typeof Tabs$1.List>, 'style'> & {
-  /** `underline` — the Spark tab: bold label + a sliding accent bar. */variant?: TabsListVariant | TabsListVariantLegacy;
+  /** `underline` — bold label and a sliding accent bar. `portal` — the end-customer portal tab: bold label, accent bar under the active tab only, no motion. */variant?: TabsListVariant | TabsListVariantLegacy;
   /**
    * Stretch the strip to its container's full width and divide it evenly
    * among the triggers, instead of shrinking to fit their labels. Each

package/dist/components/tabs.js

@@ -33,10 +33,11 @@ function Tabs(props) {
 		...props
 	});
 }
+const TabsVariantContext = React$1.createContext("underline");
 const REVEAL_PEEK = 40;
 const WORM_MS = 210;
 const TabsList = React$1.forwardRef(function TabsList({ className, style, variant = "underline", fill, ...props }, ref) {
-	const resolved = variant === "pill" ? "pill" : "underline";
+	const resolved = variant === "pill" ? "pill" : variant === "portal" ? "portal" : "underline";
 	const wrapperRef = React$1.useRef(null);
 	const scrollerRef = React$1.useRef(null);
 	const scrollerCallbackRef = React$1.useMemo(() => composeRefs(scrollerRef, ref), [ref]);
@@ -83,7 +84,7 @@ const TabsList = React$1.forwardRef(function TabsList({ className, style, varian
 			}
 			syncOverflow();
 			if (active && changed) {
-				reveal(active);
+				if (resolved !== "portal") reveal(active);
 				lastActive = active;
 			}
 			mounted = true;
@@ -123,35 +124,43 @@ const TabsList = React$1.forwardRef(function TabsList({ className, style, varian
 		className: cn("touch-target 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: dir === 1 ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronLeft, {})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group/tabs relative max-w-full", fill ? "block w-full" : "inline-block", className),
-		"data-fill": fill ? true : void 0,
-		"data-slot": "tabs-list",
-		"data-variant": resolved,
-		ref: wrapperRef,
-		style,
-		children: [
-			chevron(-1),
-			/* @__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-(--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-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] motion-reduce:after:transition-none!", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
-				...props
-			}),
-			chevron(1)
-		]
+	return /* @__PURE__ */ jsx(TabsVariantContext.Provider, {
+		value: resolved,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("group/tabs relative max-w-full", fill ? "block w-full" : "inline-block", className),
+			"data-fill": fill ? true : void 0,
+			"data-slot": "tabs-list",
+			"data-variant": resolved,
+			ref: wrapperRef,
+			style,
+			children: [
+				resolved === "portal" ? null : chevron(-1),
+				/* @__PURE__ */ jsx(Tabs$1.List, {
+					"data-slot": "tabs-scroller",
+					ref: scrollerCallbackRef,
+					className: cn("relative flex", resolved === "portal" ? "h-10 items-center gap-4 overflow-visible text-gray" : "no-scrollbar w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "portal" && (fill ? "w-full" : "w-fit"), 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-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] motion-reduce:after:transition-none!", resolved === "underline" && "has-[[data-slot=tabs-trigger][data-active][aria-invalid=true]]:after:bg-input-invalid", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
+					...props
+				}),
+				resolved === "portal" ? null : chevron(1)
+			]
+		})
 	});
 });
 function TabsTrigger({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+	const variant = React$1.useContext(TabsVariantContext);
+	return /* @__PURE__ */ jsxs(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
-		className: cn("group/trigger touch-target 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 motion-reduce:transition-none", "group-data-fill/tabs:shrink group-data-fill/tabs:grow group-data-fill/tabs:basis-0", "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),
+		className: cn("group/trigger touch-target inline-flex shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap", variant === "portal" ? "min-w-20 flex-col rounded-sm text-base font-bold text-gray transition-none first:ml-0.5 last:mr-6 focus-visible:ring-2 focus-visible:ring-offset-0 data-disabled:opacity-50" : "min-w-(--tabs-trigger-minw,0px) text-gray-12 transition-colors motion-reduce:transition-none", "group-data-fill/tabs:shrink group-data-fill/tabs:grow group-data-fill/tabs:basis-0", variant === "portal" ? null : "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", variant === "portal" ? null : "data-disabled:text-gray-a8", "aria-invalid:text-error-soft-foreground group-data-[variant=underline]/tabs:aria-invalid:border-input-invalid data-active:aria-invalid:text-error-soft-foreground", "[&_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", {
+		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", "group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-2 group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-offset-1"),
 			children
-		})
+		}), variant === "portal" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "tabs-indicator",
+			className: "mt-1.5 flex h-1 w-full px-4 group-data-active/trigger:bg-base-accent-solid"
+		}) : null]
 	});
 }
 /** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */

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 { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\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  // oxlint-disable-next-line typescript/no-deprecated -- public back-compat union, kept until removal\n  variant?: TabsListVariant | TabsListVariantLegacy\n  /**\n   * Stretch the strip to its container's full width and divide it evenly\n   * among the triggers, instead of shrinking to fit their labels. Each\n   * trigger's `--tabs-trigger-minw` floor still applies — once there's no\n   * longer room to keep every trigger at least that wide, the strip hands\n   * over to the scroller exactly like the non-`fill` case.\n   */\n  fill?: boolean\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\nconst TabsList = React.forwardRef<HTMLDivElement, Omit<TabsListProps, 'ref'>>(\n  function TabsList(\n    { className, style, variant = 'underline', fill, ...props },\n    ref,\n  ) {\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      const readyFrame = requestAnimationFrame(() =>\n        scroller.setAttribute('data-indicator-ready', ''),\n      )\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        cancelAnimationFrame(readyFrame)\n        scroller.removeAttribute('data-indicator-ready')\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          'touch-target 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        {dir === 1 ? <ChevronRight /> : <ChevronLeft />}\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(\n          'group/tabs relative max-w-full',\n          fill ? 'block w-full' : 'inline-block',\n          className,\n        )}\n        data-fill={fill ? true : undefined}\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              // transition only once data-indicator-ready is set (a frame after the\n              // first measure) so the bar appears in place instead of sweeping in\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-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] 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)\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        // touch-target on the base, not per-variant: pill is 32px and underline\n        // 48px only at scaling=100% (min-h-12 tracks the knob), so both want the\n        // coarse-pointer floor. The overlay never shrinks an already-large box.\n        'group/trigger touch-target 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 motion-reduce:transition-none',\n        // fill: divide the strip evenly instead of sizing to each label — the\n        // min-w floor above still applies, so a strip too narrow to keep every\n        // trigger at least that wide still hands over to the scroller.\n        'group-data-fill/tabs:shrink group-data-fill/tabs:grow group-data-fill/tabs:basis-0',\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. */\nexport const TabsTriggerUnderline = TabsTrigger\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nexport const 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 { Tabs, TabsContent, TabsList, TabsTrigger }\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 { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\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' | 'portal'\n\n/**\n * @deprecated Not part of Spark's tab design — use `'underline'` or `'portal'`.\n * `'pill'` (a segmented control) and the old text-only `'default'` still render\n * for back-compat but are undocumented and may be removed.\n */\ntype TabsListVariantLegacy = 'default' | 'pill'\n\ntype ResolvedTabsVariant = 'underline' | 'pill' | 'portal'\n\nconst TabsVariantContext = React.createContext<ResolvedTabsVariant>('underline')\n\ntype TabsListProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.List>,\n  'style'\n> & {\n  /** `underline` — bold label and a sliding accent bar. `portal` — the end-customer portal tab: bold label, accent bar under the active tab only, no motion. */\n  // oxlint-disable-next-line typescript/no-deprecated -- public back-compat union, kept until removal\n  variant?: TabsListVariant | TabsListVariantLegacy\n  /**\n   * Stretch the strip to its container's full width and divide it evenly\n   * among the triggers, instead of shrinking to fit their labels. Each\n   * trigger's `--tabs-trigger-minw` floor still applies — once there's no\n   * longer room to keep every trigger at least that wide, the strip hands\n   * over to the scroller exactly like the non-`fill` case.\n   */\n  fill?: boolean\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\nconst TabsList = React.forwardRef<HTMLDivElement, Omit<TabsListProps, 'ref'>>(\n  function TabsList(\n    { className, style, variant = 'underline', fill, ...props },\n    ref,\n  ) {\n    const resolved: ResolvedTabsVariant =\n      variant === 'pill'\n        ? 'pill'\n        : variant === 'portal'\n          ? 'portal'\n          : '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          if (resolved !== 'portal') reveal(active)\n          lastActive = active\n        }\n        mounted = true\n      }\n      measure()\n      const readyFrame = requestAnimationFrame(() =>\n        scroller.setAttribute('data-indicator-ready', ''),\n      )\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        cancelAnimationFrame(readyFrame)\n        scroller.removeAttribute('data-indicator-ready')\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          'touch-target 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        {dir === 1 ? <ChevronRight /> : <ChevronLeft />}\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      <TabsVariantContext.Provider value={resolved}>\n        <div\n          className={cn(\n            'group/tabs relative max-w-full',\n            fill ? 'block w-full' : 'inline-block',\n            className,\n          )}\n          data-fill={fill ? true : undefined}\n          data-slot=\"tabs-list\"\n          data-variant={resolved}\n          ref={wrapperRef}\n          style={style}\n        >\n          {resolved === 'portal' ? null : chevron(-1)}\n          <TabsPrimitive.List\n            data-slot=\"tabs-scroller\"\n            ref={scrollerCallbackRef}\n            className={cn(\n              'relative flex',\n              resolved === 'portal'\n                ? 'h-10 items-center gap-4 overflow-visible text-gray'\n                : 'no-scrollbar w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto',\n              resolved === 'portal' && (fill ? 'w-full' : 'w-fit'),\n              resolved === 'underline' && 'gap-2',\n              resolved === 'underline' &&\n                // transition only once data-indicator-ready is set (a frame after the\n                // first measure) so the bar appears in place instead of sweeping in\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-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] motion-reduce:after:transition-none!\",\n              resolved === 'underline' &&\n                'has-[[data-slot=tabs-trigger][data-active][aria-invalid=true]]:after:bg-input-invalid',\n              resolved === 'pill' && 'gap-0 rounded-md bg-gray-a3 p-1',\n            )}\n            {...props}\n          />\n          {resolved === 'portal' ? null : chevron(1)}\n        </div>\n      </TabsVariantContext.Provider>\n    )\n  },\n)\n\ntype TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction TabsTrigger({ className, children, ...props }: TabsTriggerProps) {\n  const variant = React.useContext(TabsVariantContext)\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        // touch-target on the base, not per-variant: pill is 32px and underline\n        // 48px only at scaling=100% (min-h-12 tracks the knob), so both want the\n        // coarse-pointer floor. The overlay never shrinks an already-large box.\n        'group/trigger touch-target inline-flex shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap',\n        variant === 'portal'\n          ? 'min-w-20 flex-col rounded-sm text-base font-bold text-gray transition-none first:ml-0.5 last:mr-6 focus-visible:ring-2 focus-visible:ring-offset-0 data-disabled:opacity-50'\n          : 'min-w-(--tabs-trigger-minw,0px) text-gray-12 transition-colors motion-reduce:transition-none',\n        // fill: divide the strip evenly instead of sizing to each label — the\n        // min-w floor above still applies, so a strip too narrow to keep every\n        // trigger at least that wide still hands over to the scroller.\n        'group-data-fill/tabs:shrink group-data-fill/tabs:grow group-data-fill/tabs:basis-0',\n        variant === 'portal'\n          ? null\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',\n        variant === 'portal' ? null : 'data-disabled:text-gray-a8',\n        'aria-invalid:text-error-soft-foreground group-data-[variant=underline]/tabs:aria-invalid:border-input-invalid data-active:aria-invalid:text-error-soft-foreground',\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      {variant === 'portal' ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"tabs-indicator\"\n          className=\"mt-1.5 flex h-1 w-full px-4 group-data-active/trigger:bg-base-accent-solid\"\n        />\n      ) : null}\n    </TabsPrimitive.Tab>\n  )\n}\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nexport const TabsTriggerUnderline = TabsTrigger\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nexport const 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 { Tabs, TabsContent, TabsList, TabsTrigger }\nexport type { TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],"mappings":"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"}

package/dist/components/textarea.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle } from "../theme-types-Bn5E15-P.cjs";
+import { l as SparkInputStyle } from "../theme-types-CKZzOmSa.cjs";
 import * as React$1 from "react";
 
 //#region src/components/textarea.d.ts

package/dist/components/textarea.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle } from "../theme-types-Bn5E15-P.js";
+import { l as SparkInputStyle } from "../theme-types-CKZzOmSa.js";
 import * as React$1 from "react";
 
 //#region src/components/textarea.d.ts

package/dist/components/theme.cjs

@@ -14,14 +14,51 @@ let cn = require("cn");
 /** The epilot brand accent — the scale `spark-default.css` ships statically. */
 const DEFAULT_ACCENT = "#005EB4";
 const ThemeContext = react.createContext({});
+function roleOf(style, color) {
+	if (style === void 0 && color === void 0) return void 0;
+	return {
+		...style !== void 0 && { style },
+		...color !== void 0 && { color }
+	};
+}
+function useButtonRoles(buttons) {
+	const isSet = buttons !== void 0;
+	const { primary, secondary, tertiary } = buttons ?? {};
+	const primaryStyle = primary?.style;
+	const primaryColor = primary?.color;
+	const secondaryStyle = secondary?.style;
+	const secondaryColor = secondary?.color;
+	const tertiaryStyle = tertiary?.style;
+	const tertiaryColor = tertiary?.color;
+	return react.useMemo(() => {
+		if (!isSet) return void 0;
+		const roles = {};
+		const primaryRole = roleOf(primaryStyle, primaryColor);
+		const secondaryRole = roleOf(secondaryStyle, secondaryColor);
+		const tertiaryRole = roleOf(tertiaryStyle, tertiaryColor);
+		if (primaryRole) roles.primary = primaryRole;
+		if (secondaryRole) roles.secondary = secondaryRole;
+		if (tertiaryRole) roles.tertiary = tertiaryRole;
+		return roles;
+	}, [
+		isSet,
+		primaryStyle,
+		primaryColor,
+		secondaryStyle,
+		secondaryColor,
+		tertiaryStyle,
+		tertiaryColor
+	]);
+}
 const ThemeOutputContext = react.createContext(null);
 /** Merged theme values from enclosing `<Theme>` providers. */
 function useTheme() {
 	return react.useContext(ThemeContext);
 }
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
-const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
+const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, buttons: buttonsProp, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
 	const parent = useTheme();
+	const buttons = useButtonRoles(buttonsProp);
 	const parentOutput = react.useContext(ThemeOutputContext);
 	const value = react.useMemo(() => ({
 		accentColor: accentColor ?? parent.accentColor,
@@ -38,6 +75,10 @@ const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, ne
 		inputColor: inputColor ?? parent.inputColor,
 		cardVariant: cardVariant ?? parent.cardVariant,
 		cardColor: cardColor ?? parent.cardColor,
+		buttons: buttons ? {
+			...parent.buttons,
+			...buttons
+		} : parent.buttons,
 		appearance: appearance ?? parent.appearance,
 		fontHeading: fontHeading ?? parent.fontHeading,
 		fontBody: fontBody ?? parent.fontBody
@@ -56,6 +97,7 @@ const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, ne
 		inputColor,
 		cardVariant,
 		cardColor,
+		buttons,
 		appearance,
 		fontHeading,
 		fontBody,
@@ -157,7 +199,7 @@ const Theme = react.forwardRef(function Theme({ accentColor, backgroundColor, ne
 		"data-input-style": inputStyle,
 		"data-input-color": inputColor,
 		"data-card-variant": cardVariant,
-		"data-card-color": cardColor === "accent" ? "accent" : void 0
+		"data-card-color": cardColor
 	}), [
 		neutralColorAttr,
 		radius,

package/dist/components/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.cjs","names":["React","resolveAutoNeutral","isSparkNeutralFamily","isParsableColor","getMatchingNeutral","CURATED_ACCENTS","appearanceForBackground","accentSparkVars","neutralSparkVars","generateAccentScale","invertAccentScale","neutralFamilyVars"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  appearanceForBackground,\n  generateAccentScale,\n  getMatchingNeutral,\n  invertAccentScale,\n  isParsableColor,\n  neutralFamilyVars,\n  neutralSparkVars,\n  resolveAutoNeutral,\n  type Appearance,\n  type SparkAccentScale,\n} from '../lib/accent-theme'\nimport {\n  isSparkNeutralFamily,\n  type SparkCardColor,\n  type SparkCardVariant,\n  type SparkInputColor,\n  type SparkInputStyle,\n  type SparkLabelPosition,\n  type SparkNeutral,\n  type SparkRadius,\n  type SparkScaling,\n  type SparkSpacing,\n  type SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkNeutralFamily,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\n/** The epilot brand accent — the scale `spark-default.css` ships statically. */\nconst DEFAULT_ACCENT = '#005EB4'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /**\n   * Page canvas as a custom hex. Regenerates BOTH the accent and neutral scales against\n   * it (each alpha step is composited against the canvas, so a saturated colour needs\n   * the neutral ramp regenerated too, not just the accent). Unset → the fixed\n   * `#ffffff` / `#000000` default, and neutrals stay on the static Radix families.\n   */\n  backgroundColor?: string\n  /**\n   * A curated family name, an arbitrary color to seed the neutral scale, or `'auto'` to\n   * resolve one — preferring `backgroundColor`'s own hue when it's perceptibly tinted,\n   * else pairing with the accent (Radix's `grayColor=\"auto\"`). A custom seed (from `auto`\n   * or set directly) only regenerates the scale alongside a `backgroundColor`; without\n   * one, `data-neutral-color` falls back to the accent-matched family and that's what\n   * actually paints.\n   */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  /**\n   * Orthogonal to `styleVariant`: re-casts the accent scale for use ON its own solid fill,\n   * for controls sitting on a solid accent surface (a `<Card variant=\"solid\" color=\"accent\">`),\n   * where a solid control would otherwise paint the same `--spark-9` as the card and vanish.\n   * Swaps step 9 with its contrast ink, so the fill/ink pair stays WCAG-safe for any accent.\n   */\n  inverted?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n  /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */\n  fontHeading?: string\n  /** Font stack for everything else. Any valid CSS `font-family` value. */\n  fontBody?: string\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** What a Theme actually wrote to the DOM, merged over its ancestors (nearest wins). */\ninterface ThemeOutput {\n  attrs: Record<string, string>\n  vars: Record<string, string>\n  scopes: string[]\n}\n\nconst ThemeOutputContext = React.createContext<ThemeOutput | null>(null)\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      backgroundColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      inverted,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      fontHeading,\n      fontBody,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n    const parentOutput = React.useContext(ThemeOutputContext)\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        backgroundColor: backgroundColor ?? parent.backgroundColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        inverted: inverted ?? parent.inverted,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n        fontHeading: fontHeading ?? parent.fontHeading,\n        fontBody: fontBody ?? parent.fontBody,\n      }),\n      [\n        accentColor,\n        backgroundColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        inverted,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        fontHeading,\n        fontBody,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    // 'auto' pairs a neutral with the canvas's own tint when it has one, else the\n    // effective accent (Radix's grayColor=\"auto\") — see resolveAutoNeutral. Reads the\n    // OWN backgroundColor, not the merged value.backgroundColor: optsFor (below) only\n    // ever regenerates against a scope's own canvas too, so preferring an inherited one\n    // here would resolve a seed that then gets silently discarded.\n    const rawNeutralColor =\n      neutralColor === 'auto'\n        ? resolveAutoNeutral(\n            value.accentColor ?? DEFAULT_ACCENT,\n            backgroundColor,\n          )\n        : neutralColor\n\n    // A custom neutral that isn't a recognized family must be a real, parseable color —\n    // reject invalid input here (e.g. a typo'd family name like \"slat\") so it can't throw\n    // deep inside the shared generator, where the catch below would otherwise blame\n    // accentColor/backgroundColor without ever naming neutralColor as the actual cause.\n    const neutralColorIsValid =\n      rawNeutralColor === undefined ||\n      isSparkNeutralFamily(rawNeutralColor) ||\n      isParsableColor(rawNeutralColor)\n    if (!neutralColorIsValid) {\n      console.warn(\n        `[Theme] Ignoring invalid neutralColor \"${rawNeutralColor}\" — falling back to the accent-matched family.`,\n      )\n    }\n    const resolvedNeutralColor = neutralColorIsValid\n      ? rawNeutralColor\n      : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    // The DOM attribute stays one of the 6 static families `[data-neutral-color]` has CSS\n    // for — a raw color (from the canvas-tinted auto path, or an arbitrary neutralColor\n    // prop) falls back to its accent-matched family here instead, so the attribute is\n    // always CSS-selectable/debuggable rather than a sentinel nothing matches.\n    // generateAccentScale still gets the real resolvedNeutralColor for generation, below —\n    // this substitution is display-only, and doesn't by itself guarantee the *other*\n    // appearance's neutrals in ambient (no explicit `appearance`) mode: that's a\n    // pre-existing cross-appearance leak in the same family as review-findings.md #5, not\n    // something this attribute fallback fixes or regresses.\n    const neutralColorAttr =\n      resolvedNeutralColor === undefined\n        ? undefined\n        : isSparkNeutralFamily(resolvedNeutralColor)\n          ? resolvedNeutralColor\n          : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        portalVars: {} as React.CSSProperties,\n        portalScope: undefined as string | undefined,\n        css: '',\n        scoped: false,\n      }\n      // A custom canvas generates even with no accent of its own: the neutral ramp is\n      // composited against it, and --spark-background has to carry it.\n      if (!accentColor && !backgroundColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const source = value.accentColor ?? DEFAULT_ACCENT\n        const hex = CURATED_ACCENTS[source] ?? source\n\n        // A canvas has a polarity, unlike an accent hue: a yellow page is a *light*\n        // page, and reusing it for the dark scale yields light ink on a light canvas\n        // (measured 1.16:1). So the custom canvas applies to the appearance it actually\n        // belongs to, and the other keeps its default. One knob still covers the common\n        // case — a tenant wanting both sets an explicit appearance per scope.\n        const bgAppearance = backgroundColor\n          ? appearanceForBackground(backgroundColor)\n          : undefined\n\n        // Honouring a mismatched canvas would paint light ink on a light page, so it's\n        // dropped — but say so, or the prop looks broken.\n        if (\n          backgroundColor &&\n          value.appearance &&\n          bgAppearance !== value.appearance\n        ) {\n          console.warn(\n            `[Theme] Ignoring backgroundColor \"${backgroundColor}\": it reads as a ${bgAppearance} canvas on an appearance=\"${value.appearance}\" scope. Pass a ${value.appearance} colour, or set it on a scope whose appearance matches.`,\n          )\n        }\n\n        // Default to slate so a regenerated neutral stays in the family the static\n        // `:root` default already points at, rather than the generator's ECP gray seed.\n        const optsFor = (appearance: Appearance) =>\n          backgroundColor && bgAppearance === appearance\n            ? {\n                background: backgroundColor,\n                neutral: resolvedNeutralColor ?? ('slate' as const),\n              }\n            : undefined\n\n        // Neutrals are only worth regenerating against a custom canvas — see\n        // neutralSparkVars. Without one the static Radix families are already correct.\n        const emit = (scale: SparkAccentScale, custom: boolean) =>\n          custom\n            ? [...accentSparkVars(scale), ...neutralSparkVars(scale)]\n            : accentSparkVars(scale)\n\n        const build = (appearance: Appearance) => {\n          const opts = optsFor(appearance)\n          const scale = generateAccentScale(hex, appearance, opts)\n          // `inverted` re-casts the accent for a solid-accent surface; the neutral ramp is\n          // unrelated to that swap, so it passes through untouched.\n          const rendered = emit(\n            inverted ? invertAccentScale(scale) : scale,\n            opts != null,\n          )\n          // Popups sit on their own surface, so they get the scale before the inverted re-cast.\n          const plain = inverted ? emit(scale, opts != null) : rendered\n          return { rendered, plain }\n        }\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          const { rendered, plain } = build(value.appearance)\n          const inlineVars = toVars(rendered)\n          return {\n            inlineVars,\n            portalVars: inverted ? toVars(plain) : inlineVars,\n            portalScope: undefined,\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        //\n        // Both blocks must declare the SAME tokens. A custom canvas only regenerates\n        // neutrals for its own appearance (see optsFor), and a custom property the other\n        // block leaves undeclared keeps its sibling's value rather than falling back — so\n        // the off-canvas appearance would paint this one's canvas-tinted neutrals, and\n        // being unlayered they'd beat `[data-neutral-color]`'s @layer base mapping too.\n        // Point it at the static family instead: the same seed the canvas side was given,\n        // so the two appearances agree on family and differ only in canvas.\n        const offCanvasNeutrals = backgroundColor\n          ? neutralFamilyVars(resolvedNeutralColor ?? 'slate')\n          : []\n        const scaleFor = (appearance: Appearance) => {\n          const { rendered, plain } = build(appearance)\n          const extra = bgAppearance === appearance ? [] : offCanvasNeutrals\n          return {\n            rendered: [...rendered, ...extra],\n            plain: [...plain, ...extra],\n          }\n        }\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const rule = (\n          id: string,\n          lightDecls: string[],\n          darkDecls: string[],\n        ) => {\n          const sel = `[data-spark-scope~=\"${id}\"]`\n          return `${sel}{${lightDecls.join('')}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join('')}}`\n        }\n        const portalScope = inverted ? `${scopeId}p` : scopeId\n        const css =\n          rule(scopeId, light.rendered, dark.rendered) +\n          (inverted ? rule(portalScope, light.plain, dark.plain) : '')\n        return {\n          inlineVars: {} as React.CSSProperties,\n          portalVars: {} as React.CSSProperties,\n          portalScope,\n          css,\n          scoped: true,\n        }\n      } catch (error) {\n        // A bad accentColor/backgroundColor must not throw through render — fall back\n        // to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\" / backgroundColor \"${backgroundColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [\n      accentColor,\n      backgroundColor,\n      inverted,\n      resolvedNeutralColor,\n      value.accentColor,\n      value.appearance,\n      scopeId,\n    ])\n\n    const attrs = React.useMemo(\n      () => ({\n        'data-neutral-color': neutralColorAttr,\n        'data-radius': radius,\n        'data-scaling': scaling,\n        'data-spacing': spacing,\n        'data-style': styleVariant,\n        'data-high-contrast': highContrast ? '' : undefined,\n        'data-label-position': labelPosition,\n        'data-input-style': inputStyle,\n        'data-input-color': inputColor,\n        'data-card-variant': cardVariant,\n        'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n      }),\n      [\n        neutralColorAttr,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n      ],\n    )\n    const fontVars = React.useMemo(\n      () => ({\n        ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n        ...(fontBody ? { '--spark-font-body': fontBody } : null),\n      }),\n      [fontHeading, fontBody],\n    )\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          ...attrs,\n          'data-inverted': inverted ? '' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: {\n            ...accent.inlineVars,\n            // Paint the canvas we were handed, else the prop emits a token and visibly\n            // does nothing. Reads the var (not the raw prop) so the scoped <style>'s\n            // per-appearance value still wins under ambient appearance.\n            ...(backgroundColor\n              ? { backgroundColor: 'var(--spark-background)' }\n              : null),\n            ...fontVars,\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    const output = React.useMemo<ThemeOutput>(() => {\n      // An unset own knob must not blank out the ancestor's value it inherits.\n      const own = Object.fromEntries(\n        Object.entries(attrs).filter(\n          (entry): entry is [string, string] => entry[1] !== undefined,\n        ),\n      )\n      const parentScopes = parentOutput?.scopes ?? []\n      return {\n        attrs: { ...parentOutput?.attrs, ...own },\n        vars: {\n          ...parentOutput?.vars,\n          ...(accent.portalVars as Record<string, string>),\n          ...fontVars,\n        },\n        scopes: accent.portalScope\n          ? [...parentScopes, accent.portalScope]\n          : parentScopes,\n      }\n    }, [parentOutput, attrs, accent, fontVars])\n\n    return (\n      <ThemeContext.Provider value={value}>\n        <ThemeOutputContext.Provider value={output}>\n          {accent.css ? <style>{accent.css}</style> : null}\n          {element}\n        </ThemeOutputContext.Provider>\n      </ThemeContext.Provider>\n    )\n  },\n)\n\n/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */\nexport function PortalTheme({ children }: { children: React.ReactNode }) {\n  const output = React.useContext(ThemeOutputContext)\n  const theme = useTheme()\n  // A popup sits on its own surface, never on the solid accent `inverted` is for.\n  const value = React.useMemo(() => ({ ...theme, inverted: false }), [theme])\n  if (!output) return <>{children}</>\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        data-slot=\"portal-theme\"\n        className={cn('spark-theme', theme.appearance)}\n        {...output.attrs}\n        data-spark-scope={\n          output.scopes.length ? output.scopes.join(' ') : undefined\n        }\n        style={{ display: 'contents', ...output.vars }}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.cjs","names":["React","resolveAutoNeutral","isSparkNeutralFamily","isParsableColor","getMatchingNeutral","CURATED_ACCENTS","appearanceForBackground","accentSparkVars","neutralSparkVars","generateAccentScale","invertAccentScale","neutralFamilyVars"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  appearanceForBackground,\n  generateAccentScale,\n  getMatchingNeutral,\n  invertAccentScale,\n  isParsableColor,\n  neutralFamilyVars,\n  neutralSparkVars,\n  resolveAutoNeutral,\n  type Appearance,\n  type SparkAccentScale,\n} from '../lib/accent-theme'\nimport {\n  isSparkNeutralFamily,\n  type SparkButtonColor,\n  type SparkButtonRoles,\n  type SparkCardColor,\n  type SparkCardVariant,\n  type SparkInputColor,\n  type SparkInputStyle,\n  type SparkLabelPosition,\n  type SparkNeutral,\n  type SparkRadius,\n  type SparkScaling,\n  type SparkSpacing,\n  type SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkButtonColor,\n  SparkButtonEmphasis,\n  SparkButtonRole,\n  SparkButtonRoles,\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkNeutralFamily,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\n/** The epilot brand accent — the scale `spark-default.css` ships statically. */\nconst DEFAULT_ACCENT = '#005EB4'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /**\n   * Page canvas as a custom hex. Regenerates BOTH the accent and neutral scales against\n   * it (each alpha step is composited against the canvas, so a saturated colour needs\n   * the neutral ramp regenerated too, not just the accent). Unset → the fixed\n   * `#ffffff` / `#000000` default, and neutrals stay on the static Radix families.\n   */\n  backgroundColor?: string\n  /**\n   * A curated family name, an arbitrary color to seed the neutral scale, or `'auto'` to\n   * resolve one — preferring `backgroundColor`'s own hue when it's perceptibly tinted,\n   * else pairing with the accent (Radix's `grayColor=\"auto\"`). A custom seed (from `auto`\n   * or set directly) only regenerates the scale alongside a `backgroundColor`; without\n   * one, `data-neutral-color` falls back to the accent-matched family and that's what\n   * actually paints.\n   */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  /**\n   * Orthogonal to `styleVariant`: re-casts the accent scale for use ON its own solid fill,\n   * for controls sitting on a solid accent surface (a `<Card variant=\"solid\" color=\"accent\">`),\n   * where a solid control would otherwise paint the same `--spark-9` as the card and vanish.\n   * Swaps step 9 with its contrast ink, so the fill/ink pair stays WCAG-safe for any accent.\n   */\n  inverted?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  /** `<Button emphasis>` looks; an explicit `styleVariant` / `color` on the button wins. */\n  buttons?: SparkButtonRoles\n  appearance?: Appearance\n  /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */\n  fontHeading?: string\n  /** Font stack for everything else. Any valid CSS `font-family` value. */\n  fontBody?: string\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** What a Theme actually wrote to the DOM, merged over its ancestors (nearest wins). */\ninterface ThemeOutput {\n  attrs: Record<string, string>\n  vars: Record<string, string>\n  scopes: string[]\n}\n\nfunction roleOf(\n  style: SparkStyle | undefined,\n  color: SparkButtonColor | undefined,\n) {\n  if (style === undefined && color === undefined) return undefined\n  return {\n    ...(style !== undefined && { style }),\n    ...(color !== undefined && { color }),\n  }\n}\n\nfunction useButtonRoles(buttons: SparkButtonRoles | undefined) {\n  const isSet = buttons !== undefined\n  const { primary, secondary, tertiary } = buttons ?? {}\n  const primaryStyle = primary?.style\n  const primaryColor = primary?.color\n  const secondaryStyle = secondary?.style\n  const secondaryColor = secondary?.color\n  const tertiaryStyle = tertiary?.style\n  const tertiaryColor = tertiary?.color\n  return React.useMemo<SparkButtonRoles | undefined>(() => {\n    if (!isSet) return undefined\n    const roles: SparkButtonRoles = {}\n    const primaryRole = roleOf(primaryStyle, primaryColor)\n    const secondaryRole = roleOf(secondaryStyle, secondaryColor)\n    const tertiaryRole = roleOf(tertiaryStyle, tertiaryColor)\n    if (primaryRole) roles.primary = primaryRole\n    if (secondaryRole) roles.secondary = secondaryRole\n    if (tertiaryRole) roles.tertiary = tertiaryRole\n    return roles\n  }, [\n    isSet,\n    primaryStyle,\n    primaryColor,\n    secondaryStyle,\n    secondaryColor,\n    tertiaryStyle,\n    tertiaryColor,\n  ])\n}\n\nconst ThemeOutputContext = React.createContext<ThemeOutput | null>(null)\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      backgroundColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      inverted,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      buttons: buttonsProp,\n      appearance,\n      fontHeading,\n      fontBody,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n    const buttons = useButtonRoles(buttonsProp)\n    const parentOutput = React.useContext(ThemeOutputContext)\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        backgroundColor: backgroundColor ?? parent.backgroundColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        inverted: inverted ?? parent.inverted,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        buttons: buttons ? { ...parent.buttons, ...buttons } : parent.buttons,\n        appearance: appearance ?? parent.appearance,\n        fontHeading: fontHeading ?? parent.fontHeading,\n        fontBody: fontBody ?? parent.fontBody,\n      }),\n      [\n        accentColor,\n        backgroundColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        inverted,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        buttons,\n        appearance,\n        fontHeading,\n        fontBody,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    // 'auto' pairs a neutral with the canvas's own tint when it has one, else the\n    // effective accent (Radix's grayColor=\"auto\") — see resolveAutoNeutral. Reads the\n    // OWN backgroundColor, not the merged value.backgroundColor: optsFor (below) only\n    // ever regenerates against a scope's own canvas too, so preferring an inherited one\n    // here would resolve a seed that then gets silently discarded.\n    const rawNeutralColor =\n      neutralColor === 'auto'\n        ? resolveAutoNeutral(\n            value.accentColor ?? DEFAULT_ACCENT,\n            backgroundColor,\n          )\n        : neutralColor\n\n    // A custom neutral that isn't a recognized family must be a real, parseable color —\n    // reject invalid input here (e.g. a typo'd family name like \"slat\") so it can't throw\n    // deep inside the shared generator, where the catch below would otherwise blame\n    // accentColor/backgroundColor without ever naming neutralColor as the actual cause.\n    const neutralColorIsValid =\n      rawNeutralColor === undefined ||\n      isSparkNeutralFamily(rawNeutralColor) ||\n      isParsableColor(rawNeutralColor)\n    if (!neutralColorIsValid) {\n      console.warn(\n        `[Theme] Ignoring invalid neutralColor \"${rawNeutralColor}\" — falling back to the accent-matched family.`,\n      )\n    }\n    const resolvedNeutralColor = neutralColorIsValid\n      ? rawNeutralColor\n      : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    // The DOM attribute stays one of the 6 static families `[data-neutral-color]` has CSS\n    // for — a raw color (from the canvas-tinted auto path, or an arbitrary neutralColor\n    // prop) falls back to its accent-matched family here instead, so the attribute is\n    // always CSS-selectable/debuggable rather than a sentinel nothing matches.\n    // generateAccentScale still gets the real resolvedNeutralColor for generation, below —\n    // this substitution is display-only, and doesn't by itself guarantee the *other*\n    // appearance's neutrals in ambient (no explicit `appearance`) mode: that's a\n    // pre-existing cross-appearance leak in the same family as review-findings.md #5, not\n    // something this attribute fallback fixes or regresses.\n    const neutralColorAttr =\n      resolvedNeutralColor === undefined\n        ? undefined\n        : isSparkNeutralFamily(resolvedNeutralColor)\n          ? resolvedNeutralColor\n          : getMatchingNeutral(value.accentColor ?? DEFAULT_ACCENT)\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        portalVars: {} as React.CSSProperties,\n        portalScope: undefined as string | undefined,\n        css: '',\n        scoped: false,\n      }\n      // A custom canvas generates even with no accent of its own: the neutral ramp is\n      // composited against it, and --spark-background has to carry it.\n      if (!accentColor && !backgroundColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const source = value.accentColor ?? DEFAULT_ACCENT\n        const hex = CURATED_ACCENTS[source] ?? source\n\n        // A canvas has a polarity, unlike an accent hue: a yellow page is a *light*\n        // page, and reusing it for the dark scale yields light ink on a light canvas\n        // (measured 1.16:1). So the custom canvas applies to the appearance it actually\n        // belongs to, and the other keeps its default. One knob still covers the common\n        // case — a tenant wanting both sets an explicit appearance per scope.\n        const bgAppearance = backgroundColor\n          ? appearanceForBackground(backgroundColor)\n          : undefined\n\n        // Honouring a mismatched canvas would paint light ink on a light page, so it's\n        // dropped — but say so, or the prop looks broken.\n        if (\n          backgroundColor &&\n          value.appearance &&\n          bgAppearance !== value.appearance\n        ) {\n          console.warn(\n            `[Theme] Ignoring backgroundColor \"${backgroundColor}\": it reads as a ${bgAppearance} canvas on an appearance=\"${value.appearance}\" scope. Pass a ${value.appearance} colour, or set it on a scope whose appearance matches.`,\n          )\n        }\n\n        // Default to slate so a regenerated neutral stays in the family the static\n        // `:root` default already points at, rather than the generator's ECP gray seed.\n        const optsFor = (appearance: Appearance) =>\n          backgroundColor && bgAppearance === appearance\n            ? {\n                background: backgroundColor,\n                neutral: resolvedNeutralColor ?? ('slate' as const),\n              }\n            : undefined\n\n        // Neutrals are only worth regenerating against a custom canvas — see\n        // neutralSparkVars. Without one the static Radix families are already correct.\n        const emit = (scale: SparkAccentScale, custom: boolean) =>\n          custom\n            ? [...accentSparkVars(scale), ...neutralSparkVars(scale)]\n            : accentSparkVars(scale)\n\n        const build = (appearance: Appearance) => {\n          const opts = optsFor(appearance)\n          const scale = generateAccentScale(hex, appearance, opts)\n          // `inverted` re-casts the accent for a solid-accent surface; the neutral ramp is\n          // unrelated to that swap, so it passes through untouched.\n          const rendered = emit(\n            inverted ? invertAccentScale(scale) : scale,\n            opts != null,\n          )\n          // Popups sit on their own surface, so they get the scale before the inverted re-cast.\n          const plain = inverted ? emit(scale, opts != null) : rendered\n          return { rendered, plain }\n        }\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          const { rendered, plain } = build(value.appearance)\n          const inlineVars = toVars(rendered)\n          return {\n            inlineVars,\n            portalVars: inverted ? toVars(plain) : inlineVars,\n            portalScope: undefined,\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        //\n        // Both blocks must declare the SAME tokens. A custom canvas only regenerates\n        // neutrals for its own appearance (see optsFor), and a custom property the other\n        // block leaves undeclared keeps its sibling's value rather than falling back — so\n        // the off-canvas appearance would paint this one's canvas-tinted neutrals, and\n        // being unlayered they'd beat `[data-neutral-color]`'s @layer base mapping too.\n        // Point it at the static family instead: the same seed the canvas side was given,\n        // so the two appearances agree on family and differ only in canvas.\n        const offCanvasNeutrals = backgroundColor\n          ? neutralFamilyVars(resolvedNeutralColor ?? 'slate')\n          : []\n        const scaleFor = (appearance: Appearance) => {\n          const { rendered, plain } = build(appearance)\n          const extra = bgAppearance === appearance ? [] : offCanvasNeutrals\n          return {\n            rendered: [...rendered, ...extra],\n            plain: [...plain, ...extra],\n          }\n        }\n        const light = scaleFor('light')\n        const dark = scaleFor('dark')\n        const rule = (\n          id: string,\n          lightDecls: string[],\n          darkDecls: string[],\n        ) => {\n          const sel = `[data-spark-scope~=\"${id}\"]`\n          return `${sel}{${lightDecls.join('')}}:is(.dark,.dark-theme) ${sel}{${darkDecls.join('')}}`\n        }\n        const portalScope = inverted ? `${scopeId}p` : scopeId\n        const css =\n          rule(scopeId, light.rendered, dark.rendered) +\n          (inverted ? rule(portalScope, light.plain, dark.plain) : '')\n        return {\n          inlineVars: {} as React.CSSProperties,\n          portalVars: {} as React.CSSProperties,\n          portalScope,\n          css,\n          scoped: true,\n        }\n      } catch (error) {\n        // A bad accentColor/backgroundColor must not throw through render — fall back\n        // to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\" / backgroundColor \"${backgroundColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [\n      accentColor,\n      backgroundColor,\n      inverted,\n      resolvedNeutralColor,\n      value.accentColor,\n      value.appearance,\n      scopeId,\n    ])\n\n    const attrs = React.useMemo(\n      () => ({\n        'data-neutral-color': neutralColorAttr,\n        'data-radius': radius,\n        'data-scaling': scaling,\n        'data-spacing': spacing,\n        'data-style': styleVariant,\n        'data-high-contrast': highContrast ? '' : undefined,\n        'data-label-position': labelPosition,\n        'data-input-style': inputStyle,\n        'data-input-color': inputColor,\n        'data-card-variant': cardVariant,\n        'data-card-color': cardColor,\n      }),\n      [\n        neutralColorAttr,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n      ],\n    )\n    const fontVars = React.useMemo(\n      () => ({\n        ...(fontHeading ? { '--spark-font-heading': fontHeading } : null),\n        ...(fontBody ? { '--spark-font-body': fontBody } : null),\n      }),\n      [fontHeading, fontBody],\n    )\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          ...attrs,\n          'data-inverted': inverted ? '' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: {\n            ...accent.inlineVars,\n            // Paint the canvas we were handed, else the prop emits a token and visibly\n            // does nothing. Reads the var (not the raw prop) so the scoped <style>'s\n            // per-appearance value still wins under ambient appearance.\n            ...(backgroundColor\n              ? { backgroundColor: 'var(--spark-background)' }\n              : null),\n            ...fontVars,\n            ...style,\n          } as React.CSSProperties,\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    const output = React.useMemo<ThemeOutput>(() => {\n      // An unset own knob must not blank out the ancestor's value it inherits.\n      const own = Object.fromEntries(\n        Object.entries(attrs).filter(\n          (entry): entry is [string, string] => entry[1] !== undefined,\n        ),\n      )\n      const parentScopes = parentOutput?.scopes ?? []\n      return {\n        attrs: { ...parentOutput?.attrs, ...own },\n        vars: {\n          ...parentOutput?.vars,\n          ...(accent.portalVars as Record<string, string>),\n          ...fontVars,\n        },\n        scopes: accent.portalScope\n          ? [...parentScopes, accent.portalScope]\n          : parentScopes,\n      }\n    }, [parentOutput, attrs, accent, fontVars])\n\n    return (\n      <ThemeContext.Provider value={value}>\n        <ThemeOutputContext.Provider value={output}>\n          {accent.css ? <style>{accent.css}</style> : null}\n          {element}\n        </ThemeOutputContext.Provider>\n      </ThemeContext.Provider>\n    )\n  },\n)\n\n/** Re-emits what the enclosing Themes rendered inside a portal, where CSS inheritance from them stops. */\nexport function PortalTheme({ children }: { children: React.ReactNode }) {\n  const output = React.useContext(ThemeOutputContext)\n  const theme = useTheme()\n  // A popup sits on its own surface, never on the solid accent `inverted` is for.\n  const value = React.useMemo(() => ({ ...theme, inverted: false }), [theme])\n  if (!output) return <>{children}</>\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        data-slot=\"portal-theme\"\n        className={cn('spark-theme', theme.appearance)}\n        {...output.attrs}\n        data-spark-scope={\n          output.scopes.length ? output.scopes.join(' ') : undefined\n        }\n        style={{ display: 'contents', ...output.vars }}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/theme.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkScaling } from "../theme-types-Bn5E15-P.cjs";
+import { a as SparkButtonRoles, c as SparkInputColor, d as SparkNeutral, f as SparkNeutralFamily, g as SparkStyle, h as SparkSpacing, i as SparkButtonRole, l as SparkInputStyle, m as SparkScaling, n as SparkButtonColor, o as SparkCardColor, p as SparkRadius, r as SparkButtonEmphasis, s as SparkCardVariant, u as SparkLabelPosition } from "../theme-types-CKZzOmSa.cjs";
 import { Appearance } from "../lib/accent-theme.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
@@ -45,6 +45,8 @@ interface ThemeValue {
   cardVariant?: SparkCardVariant;
   /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */
   cardColor?: SparkCardColor;
+  /** `<Button emphasis>` looks; an explicit `styleVariant` / `color` on the button wins. */
+  buttons?: SparkButtonRoles;
   appearance?: Appearance;
   /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */
   fontHeading?: string;
@@ -63,5 +65,5 @@ declare function PortalTheme({
   children: React$1.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { PortalTheme, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+export { PortalTheme, type SparkButtonColor, type SparkButtonEmphasis, type SparkButtonRole, type SparkButtonRoles, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
 //# sourceMappingURL=theme.d.cts.map

package/dist/components/theme.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkScaling } from "../theme-types-Bn5E15-P.js";
+import { a as SparkButtonRoles, c as SparkInputColor, d as SparkNeutral, f as SparkNeutralFamily, g as SparkStyle, h as SparkSpacing, i as SparkButtonRole, l as SparkInputStyle, m as SparkScaling, n as SparkButtonColor, o as SparkCardColor, p as SparkRadius, r as SparkButtonEmphasis, s as SparkCardVariant, u as SparkLabelPosition } from "../theme-types-CKZzOmSa.js";
 import { Appearance } from "../lib/accent-theme.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
@@ -45,6 +45,8 @@ interface ThemeValue {
   cardVariant?: SparkCardVariant;
   /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */
   cardColor?: SparkCardColor;
+  /** `<Button emphasis>` looks; an explicit `styleVariant` / `color` on the button wins. */
+  buttons?: SparkButtonRoles;
   appearance?: Appearance;
   /** Font stack for `h1`–`h6`. Any valid CSS `font-family` value. */
   fontHeading?: string;
@@ -63,5 +65,5 @@ declare function PortalTheme({
   children: React$1.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { PortalTheme, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+export { PortalTheme, type SparkButtonColor, type SparkButtonEmphasis, type SparkButtonRole, type SparkButtonRoles, type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkNeutralFamily, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
 //# sourceMappingURL=theme.d.ts.map

package/dist/components/theme.js

@@ -11,14 +11,51 @@ import { useRender } from "@base-ui/react/use-render";
 /** The epilot brand accent — the scale `spark-default.css` ships statically. */
 const DEFAULT_ACCENT = "#005EB4";
 const ThemeContext = React$1.createContext({});
+function roleOf(style, color) {
+	if (style === void 0 && color === void 0) return void 0;
+	return {
+		...style !== void 0 && { style },
+		...color !== void 0 && { color }
+	};
+}
+function useButtonRoles(buttons) {
+	const isSet = buttons !== void 0;
+	const { primary, secondary, tertiary } = buttons ?? {};
+	const primaryStyle = primary?.style;
+	const primaryColor = primary?.color;
+	const secondaryStyle = secondary?.style;
+	const secondaryColor = secondary?.color;
+	const tertiaryStyle = tertiary?.style;
+	const tertiaryColor = tertiary?.color;
+	return React$1.useMemo(() => {
+		if (!isSet) return void 0;
+		const roles = {};
+		const primaryRole = roleOf(primaryStyle, primaryColor);
+		const secondaryRole = roleOf(secondaryStyle, secondaryColor);
+		const tertiaryRole = roleOf(tertiaryStyle, tertiaryColor);
+		if (primaryRole) roles.primary = primaryRole;
+		if (secondaryRole) roles.secondary = secondaryRole;
+		if (tertiaryRole) roles.tertiary = tertiaryRole;
+		return roles;
+	}, [
+		isSet,
+		primaryStyle,
+		primaryColor,
+		secondaryStyle,
+		secondaryColor,
+		tertiaryStyle,
+		tertiaryColor
+	]);
+}
 const ThemeOutputContext = React$1.createContext(null);
 /** Merged theme values from enclosing `<Theme>` providers. */
 function useTheme() {
 	return React$1.useContext(ThemeContext);
 }
 /** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
-const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
+const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, inverted, labelPosition, inputStyle, inputColor, cardVariant, cardColor, buttons: buttonsProp, appearance, fontHeading, fontBody, render, className, style, children, ...rest }, ref) {
 	const parent = useTheme();
+	const buttons = useButtonRoles(buttonsProp);
 	const parentOutput = React$1.useContext(ThemeOutputContext);
 	const value = React$1.useMemo(() => ({
 		accentColor: accentColor ?? parent.accentColor,
@@ -35,6 +72,10 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		inputColor: inputColor ?? parent.inputColor,
 		cardVariant: cardVariant ?? parent.cardVariant,
 		cardColor: cardColor ?? parent.cardColor,
+		buttons: buttons ? {
+			...parent.buttons,
+			...buttons
+		} : parent.buttons,
 		appearance: appearance ?? parent.appearance,
 		fontHeading: fontHeading ?? parent.fontHeading,
 		fontBody: fontBody ?? parent.fontBody
@@ -53,6 +94,7 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		inputColor,
 		cardVariant,
 		cardColor,
+		buttons,
 		appearance,
 		fontHeading,
 		fontBody,
@@ -154,7 +196,7 @@ const Theme = React$1.forwardRef(function Theme({ accentColor, backgroundColor,
 		"data-input-style": inputStyle,
 		"data-input-color": inputColor,
 		"data-card-variant": cardVariant,
-		"data-card-color": cardColor === "accent" ? "accent" : void 0
+		"data-card-color": cardColor
 	}), [
 		neutralColorAttr,
 		radius,