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

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

@@ -0,0 +1,26 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import * as _$_base_ui_react0 from "@base-ui/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>): _$react_jsx_runtime0.JSX.Element;
+declare function ScrollBar({
+  className,
+  orientation,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Scrollbar>): _$react_jsx_runtime0.JSX.Element;
+declare const ScrollAreaRoot: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaThumb: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaThumbProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaCorner: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.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,26 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+import * as _$_base_ui_react0 from "@base-ui/react";
+
+//#region src/components/scroll-area.d.ts
+declare function ScrollArea({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function ScrollBar({
+  className,
+  orientation,
+  ...props
+}: React$1.ComponentProps<typeof ScrollArea$1.Scrollbar>): _$react_jsx_runtime0.JSX.Element;
+declare const ScrollAreaRoot: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaThumb: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.ScrollAreaThumbProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaCorner: React$1.ForwardRefExoticComponent<Omit<_$_base_ui_react0.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;AACxD,QACE,qBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,UAAU;EACpC,GAAI;YAHN;GAKE,oBAACA,aAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;IAC4B,CAAA;GAC/B,oBAAC,WAAD,EAAa,CAAA;GACb,oBAACA,aAAoB,QAArB,EAA8B,CAAA;GACL;;;AAI/B,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;AAC7D,QACE,oBAACA,aAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAW,GACT,sXAEA,oNACA,UACD;EACD,GAAI;YAEJ,oBAACA,aAAoB,OAArB;GACE,aAAU;GACV,WAAU;GACV,CAAA;EAC4B,CAAA;;AAMpC,MAAM,iBAAiBA,aAAoB;AAC3C,MAAM,qBAAqBA,aAAoB;AAC/C,MAAM,sBAAsBA,aAAoB;AAChD,MAAM,kBAAkBA,aAAoB;AAC5C,MAAM,mBAAmBA,aAAoB"}

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-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_field = require("./field.cjs");
+const require_input_box_variants = require("../input-box-variants-BMDdwvqg.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_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,63 @@
+"use client";
+
+import { a as SparkInputStyle } from "../theme-types-r20EJfEC.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+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>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectValue({
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Value>): _$react_jsx_runtime0.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;
+}): _$react_jsx_runtime0.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): _$react_jsx_runtime0.JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.GroupLabel>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Item>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): _$react_jsx_runtime0.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,63 @@
+"use client";
+
+import { a as SparkInputStyle } from "../theme-types-DoROIXpi.js";
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+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>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectValue({
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Value>): _$react_jsx_runtime0.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;
+}): _$react_jsx_runtime0.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): _$react_jsx_runtime0.JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.GroupLabel>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.Item>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select.js

@@ -0,0 +1,124 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { useFieldControl } from "./field.js";
+import { n as boxChrome } from "../input-box-variants-Dr1K7uYE.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/components/select.tsx
+const Select = Select$1.Root;
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Group, {
+		"data-slot": "select-group",
+		className: cn("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.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 } = useFieldControl({
+		id: idProp,
+		ariaDescribedBy: ariaDescribedByProp,
+		variant
+	});
+	const isGhost = inputStyle === "ghost" || !variant && field?.labelPosition === "inset";
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		id,
+		className: cn(TRIGGER_BASE, field ? "w-full" : "w-fit", !isGhost && TRIGGER_SIZE[size], boxChrome[isGhost ? "ghost" : inputStyle][inputColor], className),
+		...props,
+		"aria-describedby": ariaDescribedBy,
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(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__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		align,
+		alignItemWithTrigger,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: 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__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select$1.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		"data-slot": "select-label",
+		className: cn("px-1.5 py-1 text-xs text-gray-light", className),
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		"data-slot": "select-item",
+		className: 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__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(MaterialSymbol, {
+				className: "text-[11px]",
+				name: "check"
+			}) })
+		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "select-separator",
+		className: cn("pointer-events-none -mx-1 my-1 h-px bg-gray-a3", className),
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: 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__ */ jsx(MaterialSymbol, {
+			className: "rotate-180 text-[14px]",
+			name: "expand_more"
+		})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: 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__ */ jsx(MaterialSymbol, {
+			className: "text-[14px]",
+			name: "expand_more"
+		})
+	});
+}
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["SelectPrimitive"],"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":";;;;;;;;;;AAWA,MAAM,SAASA,SAAgB;AAE/B,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,mBAAmB,UAAU;EAC3C,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,MAAM,eACJ;AAOF,MAAM,eAAe;CACnB,SAAS;CACT,IAAI;CACL;AAED,SAAS,cAAc,EACrB,WACA,OAAO,WACP,SACA,IAAI,QACJ,UACA,oBAAoB,qBACpB,GAAG,SAKF;CACD,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB;EACD,CAAC;CAIJ,MAAM,UACJ,eAAe,WAAY,CAAC,WAAW,OAAO,kBAAkB;AAElE,QACE,qBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACP;EACJ,WAAW,GACT,cAEA,QAAQ,WAAW,SACnB,CAAC,WAAW,aAAa,OACzB,UAAU,UAAU,UAAU,YAAY,aAC1C,UACD;EACD,GAAI;EACJ,oBAAkB;YAbpB,CAeG,UACD,oBAACA,SAAgB,MAAjB,EACE,QACE,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;GACL,CAAA,EAEJ,CAAA,CACsB;;;AAU9B,SAAS,cAAc,EACrB,WACA,UACA,QAAQ,SACR,aACA,MACA,aAAa,GAKb,uBAAuB,OACvB,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,QAAjB,EAAA,UACE,oBAACA,SAAgB,YAAjB;EACS;EACe;EACT;EACP;EACM;YAEZ,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,sBAAoB;GACpB,WAAW,GAIT,2NACA,qMACA,mNACA,6CACA,UACD;GACD,GAAI;aAbN;IAeE,oBAAC,sBAAD,EAAwB,CAAA;IACxB,oBAACA,SAAgB,MAAjB,EAAuB,UAAgC,CAAA;IACvD,oBAAC,wBAAD,EAA0B,CAAA;IACJ;;EACG,CAAA,EACN,CAAA;;AAI7B,SAAS,YAAY,EACnB,WACA,GAAG,SACuD;AAC1D,QACE,oBAACA,SAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;AACpD,QACE,qBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,gaACA,UACD;EACD,GAAI;YANN,CAQE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAACA,SAAgB,eAAjB,EAAA,UACE,oBAAC,gBAAD;IAAgB,WAAU;IAAc,MAAK;IAAU,CAAA,EACzB,CAAA;GAC3B,CAAA,EACP,oBAACA,SAAgB,UAAjB,EAA2B,UAAoC,CAAA,CAC1C;;;AAO3B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,oBAAC,OAAD;EACE,eAAY;EACZ,aAAU;EACV,WAAW,GACT,kDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC0D;AAC7D,QACE,oBAACA,SAAgB,eAAjB;EACE,aAAU;EACV,WAAW,GACT,uHACA,UACD;EACD,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAyB,MAAK;GAAgB,CAAA;EAC1C,CAAA;;AAIpC,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC4D;AAC/D,QACE,oBAACA,SAAgB,iBAAjB;EACE,aAAU;EACV,WAAW,GACT,0HACA,UACD;EACD,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAK;GAAgB,CAAA;EAC7B,CAAA"}

package/dist/components/separator.cjs

@@ -0,0 +1,38 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/separator.tsx
+const Separator = react.forwardRef(({ className, orientation = "horizontal", decorative, children, ...props }, ref) => {
+	const isDecorative = decorative ?? !children;
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("flex items-center gap-4", className),
+		"data-orientation": orientation,
+		ref,
+		role: isDecorative ? "none" : "separator",
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-px flex-1 border-t border-gray" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "shrink-0 text-sm text-gray-light",
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-px flex-1 border-t border-gray" })
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("shrink-0 border-t border-gray", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		"data-orientation": orientation,
+		ref,
+		role: isDecorative ? "none" : "separator",
+		...props
+	});
+});
+Separator.displayName = "Separator";
+//#endregion
+exports.Separator = Separator;
+
+//# sourceMappingURL=separator.cjs.map

package/dist/components/separator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-t border-gray',\n          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iCACA,gBAAgB,eAAe,gBAAgB,eAC/C,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/separator.d.cts

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/separator.d.ts
+interface SeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Separator, type SeparatorProps };
+//# sourceMappingURL=separator.d.cts.map

package/dist/components/separator.d.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/separator.d.ts
+interface SeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Separator, type SeparatorProps };
+//# sourceMappingURL=separator.d.ts.map