@epilot/spark-ui 0.10.0

package/dist/components/scroll-area.d.cts

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React$1 from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+
+//#region src/components/scroll-area.d.ts
+declare function ScrollArea({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({
+  className,
+  orientation,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Scrollbar>): import("react/jsx-runtime").JSX.Element;
+declare const ScrollAreaRoot: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaThumb: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaThumbProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaCorner: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaCornerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScrollArea, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollBar };
+//# sourceMappingURL=scroll-area.d.cts.map

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React$1 from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+
+//#region src/components/scroll-area.d.ts
+declare function ScrollArea({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({
+  className,
+  orientation,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Scrollbar>): import("react/jsx-runtime").JSX.Element;
+declare const ScrollAreaRoot: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaThumb: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaThumbProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaCorner: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaCornerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScrollArea, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area.tsx
+function ScrollArea({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		"data-slot": "scroll-area",
+		className: cn("relative", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-spark-a7 focus-visible:outline-1 motion-reduce:transition-none",
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, {}),
+			/* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": orientation,
+		orientation,
+		className: cn("flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", "opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "relative flex-1 rounded-full bg-gray-a8"
+		})
+	});
+}
+const ScrollAreaRoot = ScrollArea$1.Root;
+const ScrollAreaViewport = ScrollArea$1.Viewport;
+const ScrollAreaScrollbar = ScrollArea$1.Scrollbar;
+const ScrollAreaThumb = ScrollArea$1.Thumb;
+const ScrollAreaCorner = ScrollArea$1.Corner;
+//#endregion
+export { ScrollArea, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollBar };
+
+//# sourceMappingURL=scroll-area.js.map

package/dist/components/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-spark-a7 focus-visible:outline-1 motion-reduce:transition-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = ScrollAreaPrimitive.Viewport\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,qBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,oBAACA,aAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAACA,aAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,oBAACA,aAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAW,GACT,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,oBAACA,aAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,aAAoB;AAC3C,MAAM,qBAAqBA,aAAoB;AAC/C,MAAM,sBAAsBA,aAAoB;AAChD,MAAM,kBAAkBA,aAAoB;AAC5C,MAAM,mBAAmBA,aAAoB"}

package/dist/components/segmented-control.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.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/segmented-control.tsx
+function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
+		"data-slot": "segmented-control",
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tabs.Tabs.List, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"data-size": size,
+			"data-slot": "segmented-control-track",
+			"data-style": styleVariant,
+			className: (0, cnfast.cn)("group/segmented relative isolate flex w-full items-stretch p-1", "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", "data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3", "data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)", "data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)", size === "small" && "h-9 text-sm", size === "default" && "h-10 text-base", size === "medium" && "h-11 text-base", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Indicator, {
+				"data-slot": "segmented-control-indicator",
+				renderBeforeHydration: true,
+				className: (0, cnfast.cn)("pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "bg-gray-1 dark:bg-gray-a4", "group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))", "shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none", "data-starting-style:transition-none")
+			}), children]
+		})
+	});
+}
+function SegmentedControlItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
+		"data-slot": "segmented-control-item",
+		ref,
+		className: (0, cnfast.cn)("relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "text-gray-a11 transition-colors motion-reduce:transition-none", "not-data-active:hover:text-gray-12", "data-active:text-(--spark-style-fg,var(--spark-contrast))", "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4", "group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5", "group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6", className),
+		...props,
+		children
+	});
+}
+//#endregion
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlItem = SegmentedControlItem;
+
+//# sourceMappingURL=segmented-control.cjs.map

package/dist/components/segmented-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.cjs","names":["TabsPrimitive"],"sources":["../../src/components/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype SegmentedControlSize = 'small' | 'default' | 'medium'\n\ntype SegmentedControlProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'orientation'\n> & {\n  /** Visual weight of the selected segment, following the Spark style axis. */\n  styleVariant?: Exclude<SparkStyle, 'ghost'>\n  /** Control height, padding, and typography. Matches the Button size scale. */\n  size?: SegmentedControlSize\n}\n\nfunction SegmentedControl({\n  className,\n  styleVariant = 'solid',\n  size = 'default',\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SegmentedControlProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            'data-starting-style:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--spark-contrast))',\n        // ring-offset-1 floats the ring off the segment (a flush ring vanishes\n        // on the solid indicator; a full inset box reads heavy)\n        'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,iBAAA,GAAA,kBAAA,MAACA,oBAAAA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,YAAA,GAAA,OAAA,IAEE,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,SACF;aAtBF,CAyBE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,YAAA,GAAA,OAAA,IACE,mIACA,oEACA,6BACA,2EACA,8HACA,0FAEA,qCACF;GACD,CAAA,GACA,QACiB;;CACF,CAAA;AAExB;AAIA,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,KAAf;EACE,aAAU;EACL;EACL,YAAA,GAAA,OAAA,IACE,gJACA,oEACA,iEACA,sCACA,6DAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,SACF;EACA,GAAI;EAEH;CACgB,CAAA;AAEvB"}

package/dist/components/segmented-control.d.cts

@@ -0,0 +1,32 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import * as React$1 from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/segmented-control.d.ts
+type SegmentedControlSize = 'small' | 'default' | 'medium';
+type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'orientation'> & {
+  /** Visual weight of the selected segment, following the Spark style axis. */styleVariant?: Exclude<SparkStyle, 'ghost'>; /** Control height, padding, and typography. Matches the Button size scale. */
+  size?: SegmentedControlSize;
+};
+declare function SegmentedControl({
+  className,
+  styleVariant,
+  size,
+  children,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...props
+}: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
+declare function SegmentedControlItem({
+  className,
+  children,
+  ref,
+  ...props
+}: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
+//# sourceMappingURL=segmented-control.d.cts.map

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import * as React$1 from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/segmented-control.d.ts
+type SegmentedControlSize = 'small' | 'default' | 'medium';
+type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'orientation'> & {
+  /** Visual weight of the selected segment, following the Spark style axis. */styleVariant?: Exclude<SparkStyle, 'ghost'>; /** Control height, padding, and typography. Matches the Button size scale. */
+  size?: SegmentedControlSize;
+};
+declare function SegmentedControl({
+  className,
+  styleVariant,
+  size,
+  children,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...props
+}: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
+declare function SegmentedControlItem({
+  className,
+  children,
+  ref,
+  ...props
+}: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.js

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/segmented-control.tsx
+function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "segmented-control",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Tabs.List, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"data-size": size,
+			"data-slot": "segmented-control-track",
+			"data-style": styleVariant,
+			className: cn("group/segmented relative isolate flex w-full items-stretch p-1", "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", "data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3", "data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)", "data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)", size === "small" && "h-9 text-sm", size === "default" && "h-10 text-base", size === "medium" && "h-11 text-base", className),
+			children: [/* @__PURE__ */ jsx(Tabs.Indicator, {
+				"data-slot": "segmented-control-indicator",
+				renderBeforeHydration: true,
+				className: cn("pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "bg-gray-1 dark:bg-gray-a4", "group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))", "shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none", "data-starting-style:transition-none")
+			}), children]
+		})
+	});
+}
+function SegmentedControlItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "segmented-control-item",
+		ref,
+		className: cn("relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "text-gray-a11 transition-colors motion-reduce:transition-none", "not-data-active:hover:text-gray-12", "data-active:text-(--spark-style-fg,var(--spark-contrast))", "focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4", "group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5", "group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { SegmentedControl, SegmentedControlItem };
+
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":["TabsPrimitive"],"sources":["../../src/components/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype SegmentedControlSize = 'small' | 'default' | 'medium'\n\ntype SegmentedControlProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'orientation'\n> & {\n  /** Visual weight of the selected segment, following the Spark style axis. */\n  styleVariant?: Exclude<SparkStyle, 'ghost'>\n  /** Control height, padding, and typography. Matches the Button size scale. */\n  size?: SegmentedControlSize\n}\n\nfunction SegmentedControl({\n  className,\n  styleVariant = 'solid',\n  size = 'default',\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SegmentedControlProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width)',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            'data-starting-style:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--spark-contrast))',\n        // ring-offset-1 floats the ring off the segment (a flush ring vanishes\n        // on the solid indicator; a full inset box reads heavy)\n        'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;CACxB,OACE,oBAACA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,qBAACA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,WAAW,GAET,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,SACF;aAtBF,CAyBE,oBAACA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,WAAW,GACT,mIACA,oEACA,6BACA,2EACA,8HACA,0FAEA,qCACF;GACD,CAAA,GACA,QACiB;;CACF,CAAA;AAExB;AAIA,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;CAC5B,OACE,oBAACA,KAAc,KAAf;EACE,aAAU;EACL;EACL,WAAW,GACT,gJACA,oEACA,iEACA,sCACA,6DAGA,iFACA,gEACA,gDAGA,0KACA,mLACA,+KACA,SACF;EACA,GAAI;EAEH;CACgB,CAAA;AAEvB"}

package/dist/components/select.cjs

@@ -0,0 +1,136 @@
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_select = require("@base-ui/react/select");
+let cnfast = require("cnfast");
+//#region src/components/select.tsx
+const Select = _base_ui_react_select.Select.Root;
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Group, {
+		"data-slot": "select-group",
+		className: (0, cnfast.cn)("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+const TRIGGER_BASE = "relative flex items-center justify-between gap-1.5 rounded-lg px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4";
+const TRIGGER_SIZE = {
+	default: "h-11 min-h-[2.75rem]",
+	sm: "h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']"
+};
+function SelectTrigger({ className, size = "default", variant, id: idProp, children, "aria-describedby": ariaDescribedByProp, ...props }) {
+	const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({
+		id: idProp,
+		ariaDescribedBy: ariaDescribedByProp,
+		variant
+	});
+	const isGhost = inputStyle === "ghost" || !variant && field?.labelPosition === "inset";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_select.Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		id,
+		className: (0, cnfast.cn)(TRIGGER_BASE, field ? "w-full" : "w-fit", !isGhost && TRIGGER_SIZE[size], require_lib_input_box_variants.boxChrome[isGhost ? "ghost" : inputStyle][inputColor], className),
+		...props,
+		"aria-describedby": ariaDescribedBy,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Icon, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "pointer-events-none text-[14px] text-gray-light",
+			name: "expand_more"
+		}) })]
+	});
+}
+function SelectContent({ className, children, align = "start", alignOffset, side, sideOffset = 4, alignItemWithTrigger = false, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
+		align,
+		alignItemWithTrigger,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_select.Select.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: (0, cnfast.cn)("relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg", "transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-[align-trigger=true]:transition-none", className),
+			...props,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollUpButton, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.List, { children }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.GroupLabel, {
+		"data-slot": "select-label",
+		className: (0, cnfast.cn)("px-1.5 py-1 text-xs text-gray-light", className),
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_select.Select.Item, {
+		"data-slot": "select-item",
+		className: (0, cnfast.cn)("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+				className: "text-[11px]",
+				name: "check"
+			}) })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		"data-slot": "select-separator",
+		className: (0, cnfast.cn)("pointer-events-none -mx-1 my-1 h-px bg-gray-a3", className),
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: (0, cnfast.cn)("top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "rotate-180 text-[14px]",
+			name: "expand_more"
+		})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: (0, cnfast.cn)("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			className: "text-[14px]",
+			name: "expand_more"
+		})
+	});
+}
+//#endregion
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectScrollDownButton = SelectScrollDownButton;
+exports.SelectScrollUpButton = SelectScrollUpButton;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
+
+//# sourceMappingURL=select.cjs.map

package/dist/components/select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","MaterialSymbol"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-lg px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <MaterialSymbol\n            className=\"pointer-events-none text-[14px] text-gray-light\"\n            name=\"expand_more\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  >\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <MaterialSymbol className=\"text-[11px]\" name=\"check\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/components/select.d.cts

@@ -0,0 +1,62 @@
+"use client";
+
+import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import * as React$1 from "react";
+import { Select as Select$1 } from "@base-ui/react/select";
+
+//#region src/components/select.d.ts
+declare const Select: typeof Select$1.Root;
+declare function SelectGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({
+  className,
+  size,
+  variant,
+  id: idProp,
+  children,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Trigger> & {
+  size?: 'sm' | 'default';
+  variant?: SparkInputStyle;
+}): import("react/jsx-runtime").JSX.Element;
+type SelectContentProps = React$1.ComponentProps<typeof Select$1.Popup> & Pick<Select$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>;
+declare function SelectContent({
+  className,
+  children,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  alignItemWithTrigger,
+  ...props
+}: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=select.d.cts.map

package/dist/components/select.d.ts

@@ -0,0 +1,62 @@
+"use client";
+
+import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import * as React$1 from "react";
+import { Select as Select$1 } from "@base-ui/react/select";
+
+//#region src/components/select.d.ts
+declare const Select: typeof Select$1.Root;
+declare function SelectGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({
+  className,
+  size,
+  variant,
+  id: idProp,
+  children,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Trigger> & {
+  size?: 'sm' | 'default';
+  variant?: SparkInputStyle;
+}): import("react/jsx-runtime").JSX.Element;
+type SelectContentProps = React$1.ComponentProps<typeof Select$1.Popup> & Pick<Select$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>;
+declare function SelectContent({
+  className,
+  children,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  alignItemWithTrigger,
+  ...props
+}: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=select.d.ts.map