@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/components/tabs.cjs

@@ -0,0 +1,175 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_tabs = require("@base-ui/react/tabs");
+let cnfast = require("cnfast");
+//#region src/components/tabs.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (typeof cleanup === "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < refs.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+function Tabs(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
+		"data-slot": "tabs",
+		...props
+	});
+}
+const REVEAL_PEEK = 40;
+const WORM_MS = 210;
+function TabsList({ className, style, variant = "underline", ref, ...props }) {
+	const resolved = variant === "pill" ? "pill" : "underline";
+	const wrapperRef = react.useRef(null);
+	const scrollerRef = react.useRef(null);
+	const scrollerCallbackRef = react.useMemo(() => composeRefs(scrollerRef, ref), [ref]);
+	useIsomorphicLayoutEffect(() => {
+		const wrapper = wrapperRef.current;
+		const scroller = scrollerRef.current;
+		if (!wrapper || !scroller) return;
+		const syncOverflow = () => {
+			const max = scroller.scrollWidth - scroller.clientWidth;
+			wrapper.toggleAttribute("data-overflow-start", scroller.scrollLeft > 2);
+			wrapper.toggleAttribute("data-overflow-end", scroller.scrollLeft < max - 2);
+		};
+		const reveal = (el) => {
+			if (typeof scroller.scrollTo !== "function") return;
+			const start = el.offsetLeft - REVEAL_PEEK;
+			const end = el.offsetLeft + el.offsetWidth + REVEAL_PEEK;
+			if (start < scroller.scrollLeft) scroller.scrollTo({ left: Math.max(0, start) });
+			else if (end > scroller.scrollLeft + scroller.clientWidth) scroller.scrollTo({ left: end - scroller.clientWidth });
+		};
+		const motionQuery = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
+		const setBar = (x, w) => {
+			scroller.style.setProperty("--tabs-indicator-x", `${x}px`);
+			scroller.style.setProperty("--tabs-indicator-w", `${w}px`);
+		};
+		let lastActive = null;
+		let mounted = false;
+		let wormTimer;
+		const measure = () => {
+			const active = scroller.querySelector("[data-slot=\"tabs-trigger\"][data-active]");
+			const changed = active !== lastActive;
+			if (resolved === "underline") if (!active) {
+				clearTimeout(wormTimer);
+				lastActive = null;
+				scroller.style.setProperty("--tabs-indicator-w", "0px");
+			} else if (changed && lastActive?.isConnected && mounted && !motionQuery?.matches) {
+				const from = Math.min(lastActive.offsetLeft, active.offsetLeft);
+				setBar(from, Math.max(lastActive.offsetLeft + lastActive.offsetWidth, active.offsetLeft + active.offsetWidth) - from);
+				clearTimeout(wormTimer);
+				const el = active;
+				wormTimer = setTimeout(() => setBar(el.offsetLeft, el.offsetWidth), WORM_MS);
+			} else {
+				clearTimeout(wormTimer);
+				setBar(active.offsetLeft, active.offsetWidth);
+			}
+			syncOverflow();
+			if (active && changed) {
+				reveal(active);
+				lastActive = active;
+			}
+			mounted = true;
+		};
+		measure();
+		scroller.addEventListener("scroll", syncOverflow, { passive: true });
+		const mo = new MutationObserver(measure);
+		mo.observe(scroller, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributeFilter: ["data-active"]
+		});
+		const ro = new ResizeObserver(measure);
+		ro.observe(scroller);
+		return () => {
+			scroller.removeEventListener("scroll", syncOverflow);
+			clearTimeout(wormTimer);
+			mo.disconnect();
+			ro.disconnect();
+		};
+	}, [resolved]);
+	const scrollByPage = (dir) => () => {
+		const scroller = scrollerRef.current;
+		if (typeof scroller?.scrollBy !== "function") return;
+		scroller.scrollBy({ left: dir * scroller.clientWidth * .6 });
+	};
+	const chevron = (dir) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-hidden": "true",
+		"data-slot": dir === 1 ? "tabs-scroll-next" : "tabs-scroll-prev",
+		onClick: scrollByPage(dir),
+		tabIndex: -1,
+		type: "button",
+		className: (0, cnfast.cn)("absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-[var(--color-gray-1)]/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12", dir === 1 ? "right-0 group-data-[overflow-end]/tabs:flex" : "left-0 group-data-[overflow-start]/tabs:flex"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, { name: dir === 1 ? "chevron_right" : "chevron_left" })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("group/tabs relative inline-block max-w-full", className),
+		"data-slot": "tabs-list",
+		"data-variant": resolved,
+		ref: wrapperRef,
+		style,
+		children: [
+			chevron(-1),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.List, {
+				"data-slot": "tabs-scroller",
+				ref: scrollerCallbackRef,
+				className: (0, cnfast.cn)("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-[var(--tabs-indicator-x,0px)] after:h-1 after:w-[var(--tabs-indicator-w,0px)] after:rounded-full after:bg-[var(--spark-tabs-indicator,var(--spark-indicator))] after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
+				...props
+			}),
+			chevron(1)
+		]
+	});
+}
+function TabsTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: (0, cnfast.cn)("group/trigger inline-flex min-w-[var(--tabs-trigger-minw,0px)] shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors", "data-active:text-[color:var(--spark-tabs-ink,var(--spark-a11))]", "focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", "group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]", "group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5", "group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium", "group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3", "group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-slot": "tabs-trigger-inner",
+			className: (0, cnfast.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"),
+			children
+		})
+	});
+}
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+const TabsTriggerUnderline = TabsTrigger;
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+const TabsTriggerPill = TabsTrigger;
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: (0, cnfast.cn)("focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden", className),
+		...props
+	});
+}
+//#endregion
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.TabsTriggerPill = TabsTriggerPill;
+exports.TabsTriggerUnderline = TabsTriggerUnderline;
+
+//# sourceMappingURL=tabs.cjs.map

package/dist/components/tabs.cjs.map

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

package/dist/components/tabs.d.cts

@@ -0,0 +1,45 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+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): _$react_jsx_runtime0.JSX.Element;
+type TabsListVariant = 'underline';
+/**
+ * @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.
+ */
+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;
+  style?: React$1.CSSProperties;
+};
+declare function TabsList({
+  className,
+  style,
+  variant,
+  ref,
+  ...props
+}: TabsListProps): _$react_jsx_runtime0.JSX.Element;
+type TabsTriggerProps = React$1.ComponentProps<typeof Tabs$1.Tab>;
+declare function TabsTrigger({
+  className,
+  children,
+  ...props
+}: TabsTriggerProps): _$react_jsx_runtime0.JSX.Element;
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+declare const TabsTriggerUnderline: typeof TabsTrigger;
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+declare const TabsTriggerPill: typeof TabsTrigger;
+type TabsContentProps = React$1.ComponentProps<typeof Tabs$1.Panel>;
+declare function TabsContent({
+  className,
+  ...props
+}: TabsContentProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tabs, TabsContent, TabsList, type TabsListProps, type TabsListVariant, type TabsProps, TabsTrigger, TabsTriggerPill, type TabsTriggerProps, TabsTriggerUnderline };
+//# sourceMappingURL=tabs.d.cts.map

package/dist/components/tabs.d.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+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): _$react_jsx_runtime0.JSX.Element;
+type TabsListVariant = 'underline';
+/**
+ * @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.
+ */
+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;
+  style?: React$1.CSSProperties;
+};
+declare function TabsList({
+  className,
+  style,
+  variant,
+  ref,
+  ...props
+}: TabsListProps): _$react_jsx_runtime0.JSX.Element;
+type TabsTriggerProps = React$1.ComponentProps<typeof Tabs$1.Tab>;
+declare function TabsTrigger({
+  className,
+  children,
+  ...props
+}: TabsTriggerProps): _$react_jsx_runtime0.JSX.Element;
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+declare const TabsTriggerUnderline: typeof TabsTrigger;
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+declare const TabsTriggerPill: typeof TabsTrigger;
+type TabsContentProps = React$1.ComponentProps<typeof Tabs$1.Panel>;
+declare function TabsContent({
+  className,
+  ...props
+}: TabsContentProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tabs, TabsContent, TabsList, type TabsListProps, type TabsListVariant, type TabsProps, TabsTrigger, TabsTriggerPill, type TabsTriggerProps, TabsTriggerUnderline };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.js

@@ -0,0 +1,167 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/components/tabs.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React$1.useEffect : React$1.useLayoutEffect;
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (typeof cleanup === "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < refs.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+function Tabs(props) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		"data-slot": "tabs",
+		...props
+	});
+}
+const REVEAL_PEEK = 40;
+const WORM_MS = 210;
+function TabsList({ className, style, variant = "underline", ref, ...props }) {
+	const resolved = variant === "pill" ? "pill" : "underline";
+	const wrapperRef = React$1.useRef(null);
+	const scrollerRef = React$1.useRef(null);
+	const scrollerCallbackRef = React$1.useMemo(() => composeRefs(scrollerRef, ref), [ref]);
+	useIsomorphicLayoutEffect(() => {
+		const wrapper = wrapperRef.current;
+		const scroller = scrollerRef.current;
+		if (!wrapper || !scroller) return;
+		const syncOverflow = () => {
+			const max = scroller.scrollWidth - scroller.clientWidth;
+			wrapper.toggleAttribute("data-overflow-start", scroller.scrollLeft > 2);
+			wrapper.toggleAttribute("data-overflow-end", scroller.scrollLeft < max - 2);
+		};
+		const reveal = (el) => {
+			if (typeof scroller.scrollTo !== "function") return;
+			const start = el.offsetLeft - REVEAL_PEEK;
+			const end = el.offsetLeft + el.offsetWidth + REVEAL_PEEK;
+			if (start < scroller.scrollLeft) scroller.scrollTo({ left: Math.max(0, start) });
+			else if (end > scroller.scrollLeft + scroller.clientWidth) scroller.scrollTo({ left: end - scroller.clientWidth });
+		};
+		const motionQuery = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
+		const setBar = (x, w) => {
+			scroller.style.setProperty("--tabs-indicator-x", `${x}px`);
+			scroller.style.setProperty("--tabs-indicator-w", `${w}px`);
+		};
+		let lastActive = null;
+		let mounted = false;
+		let wormTimer;
+		const measure = () => {
+			const active = scroller.querySelector("[data-slot=\"tabs-trigger\"][data-active]");
+			const changed = active !== lastActive;
+			if (resolved === "underline") if (!active) {
+				clearTimeout(wormTimer);
+				lastActive = null;
+				scroller.style.setProperty("--tabs-indicator-w", "0px");
+			} else if (changed && lastActive?.isConnected && mounted && !motionQuery?.matches) {
+				const from = Math.min(lastActive.offsetLeft, active.offsetLeft);
+				setBar(from, Math.max(lastActive.offsetLeft + lastActive.offsetWidth, active.offsetLeft + active.offsetWidth) - from);
+				clearTimeout(wormTimer);
+				const el = active;
+				wormTimer = setTimeout(() => setBar(el.offsetLeft, el.offsetWidth), WORM_MS);
+			} else {
+				clearTimeout(wormTimer);
+				setBar(active.offsetLeft, active.offsetWidth);
+			}
+			syncOverflow();
+			if (active && changed) {
+				reveal(active);
+				lastActive = active;
+			}
+			mounted = true;
+		};
+		measure();
+		scroller.addEventListener("scroll", syncOverflow, { passive: true });
+		const mo = new MutationObserver(measure);
+		mo.observe(scroller, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributeFilter: ["data-active"]
+		});
+		const ro = new ResizeObserver(measure);
+		ro.observe(scroller);
+		return () => {
+			scroller.removeEventListener("scroll", syncOverflow);
+			clearTimeout(wormTimer);
+			mo.disconnect();
+			ro.disconnect();
+		};
+	}, [resolved]);
+	const scrollByPage = (dir) => () => {
+		const scroller = scrollerRef.current;
+		if (typeof scroller?.scrollBy !== "function") return;
+		scroller.scrollBy({ left: dir * scroller.clientWidth * .6 });
+	};
+	const chevron = (dir) => /* @__PURE__ */ jsx("button", {
+		"aria-hidden": "true",
+		"data-slot": dir === 1 ? "tabs-scroll-next" : "tabs-scroll-prev",
+		onClick: scrollByPage(dir),
+		tabIndex: -1,
+		type: "button",
+		className: cn("absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-[var(--color-gray-1)]/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12", dir === 1 ? "right-0 group-data-[overflow-end]/tabs:flex" : "left-0 group-data-[overflow-start]/tabs:flex"),
+		children: /* @__PURE__ */ jsx(MaterialSymbol, { name: dir === 1 ? "chevron_right" : "chevron_left" })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/tabs relative inline-block max-w-full", className),
+		"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-[var(--tabs-indicator-x,0px)] after:h-1 after:w-[var(--tabs-indicator-w,0px)] after:rounded-full after:bg-[var(--spark-tabs-indicator,var(--spark-indicator))] after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
+				...props
+			}),
+			chevron(1)
+		]
+	});
+}
+function TabsTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("group/trigger inline-flex min-w-[var(--tabs-trigger-minw,0px)] shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors", "data-active:text-[color:var(--spark-tabs-ink,var(--spark-a11))]", "focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", "group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]", "group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5", "group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium", "group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3", "group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6", className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "tabs-trigger-inner",
+			className: cn("inline-flex items-center gap-1", "group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors", "group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3"),
+			children
+		})
+	});
+}
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+const TabsTriggerUnderline = TabsTrigger;
+/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */
+const TabsTriggerPill = TabsTrigger;
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerPill, TabsTriggerUnderline };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

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

package/dist/components/theme.cjs

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

package/dist/components/theme.d.cts

@@ -0,0 +1,38 @@
+"use client";
+
+import { a as SparkInputStyle, c as SparkRadius, d as SparkStyle, i as SparkInputColor, l as SparkScaling, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkSpacing } from "../theme-types-r20EJfEC.cjs";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/lib/accent-theme.d.ts
+type Appearance = 'light' | 'dark';
+//#endregion
+//#region src/components/theme.d.ts
+interface ThemeValue {
+  /** Curated accent name or a custom hex. */
+  accentColor?: string;
+  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor="auto"`). */
+  neutralColor?: SparkNeutral;
+  radius?: SparkRadius;
+  scaling?: SparkScaling;
+  spacing?: SparkSpacing;
+  styleVariant?: SparkStyle;
+  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */
+  highContrast?: boolean;
+  labelPosition?: SparkLabelPosition;
+  inputStyle?: SparkInputStyle;
+  inputColor?: SparkInputColor;
+  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */
+  cardVariant?: SparkCardVariant;
+  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */
+  cardColor?: SparkCardColor;
+  appearance?: Appearance;
+}
+/** Merged theme values from enclosing `<Theme>` providers. */
+declare function useTheme(): ThemeValue;
+interface ThemeProps extends useRender.ComponentProps<'div'>, ThemeValue {}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+declare const Theme: React$1.ForwardRefExoticComponent<Omit<ThemeProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+//# sourceMappingURL=theme.d.cts.map

package/dist/components/theme.d.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { a as SparkInputStyle, c as SparkRadius, d as SparkStyle, i as SparkInputColor, l as SparkScaling, n as SparkCardColor, o as SparkLabelPosition, r as SparkCardVariant, s as SparkNeutral, u as SparkSpacing } from "../theme-types-DoROIXpi.js";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/lib/accent-theme.d.ts
+type Appearance = 'light' | 'dark';
+//#endregion
+//#region src/components/theme.d.ts
+interface ThemeValue {
+  /** Curated accent name or a custom hex. */
+  accentColor?: string;
+  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor="auto"`). */
+  neutralColor?: SparkNeutral;
+  radius?: SparkRadius;
+  scaling?: SparkScaling;
+  spacing?: SparkSpacing;
+  styleVariant?: SparkStyle;
+  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */
+  highContrast?: boolean;
+  labelPosition?: SparkLabelPosition;
+  inputStyle?: SparkInputStyle;
+  inputColor?: SparkInputColor;
+  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */
+  cardVariant?: SparkCardVariant;
+  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */
+  cardColor?: SparkCardColor;
+  appearance?: Appearance;
+}
+/** Merged theme values from enclosing `<Theme>` providers. */
+declare function useTheme(): ThemeValue;
+interface ThemeProps extends useRender.ComponentProps<'div'>, ThemeValue {}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+declare const Theme: React$1.ForwardRefExoticComponent<Omit<ThemeProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { type SparkCardColor, type SparkCardVariant, type SparkInputColor, type SparkInputStyle, type SparkLabelPosition, type SparkNeutral, type SparkRadius, type SparkScaling, type SparkSpacing, type SparkStyle, Theme, ThemeProps, ThemeValue, useTheme };
+//# sourceMappingURL=theme.d.ts.map

package/dist/components/theme.js

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