@epilot/spark-ui 0.15.2 → 0.16.0

package/dist/components/select.cjs

@@ -25,7 +25,7 @@ function SelectValue({ ...props }) {
 		...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_BASE = "relative flex items-center justify-between gap-1.5 rounded-md 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: "my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']"
@@ -84,7 +84,7 @@ function SelectLabel({ 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),
+		className: (0, cnfast.cn)("relative flex w-full cursor-default items-center gap-1.5 rounded-sm 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",

package/dist/components/select.cjs.map

@@ -1 +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, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\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  Pick<SelectPrimitive.Portal.Props, 'container'>\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  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\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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"}
+{"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-md 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, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\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  Pick<SelectPrimitive.Portal.Props, 'container'>\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  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\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-sm 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.js

@@ -22,7 +22,7 @@ function SelectValue({ ...props }) {
 		...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_BASE = "relative flex items-center justify-between gap-1.5 rounded-md 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: "my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']"
@@ -81,7 +81,7 @@ function SelectLabel({ 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),
+		className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-sm 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",

package/dist/components/select.js.map

@@ -1 +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, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\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  Pick<SelectPrimitive.Portal.Props, 'container'>\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  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\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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"}
+{"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-md 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, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 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, ariaInvalid, 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      aria-invalid={ariaInvalid}\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  Pick<SelectPrimitive.Portal.Props, 'container'>\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  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\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-sm 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/series-legend.cjs

@@ -22,7 +22,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 					style: { borderColor: item.color }
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-hidden": "true",
-					className: "size-2.5 shrink-0 rounded-circle",
+					className: "size-2.5 shrink-0 rounded-full",
 					style: { backgroundColor: item.color }
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: (0, cnfast.cn)(hidden && "line-through"),

package/dist/components/series-legend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"series-legend.cjs","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n  id: string\n  label: string\n  /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n  color: string\n  /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n  marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n  items: SeriesLegendItem[]\n  hiddenIds: ReadonlySet<string>\n  onToggle: (id: string) => void\n  className?: string\n  /** Accessible label announced for the legend group. */\n  ariaLabel?: string\n}\n\nexport function SeriesLegend({\n  ariaLabel = 'Filter data series',\n  className,\n  hiddenIds,\n  items,\n  onToggle,\n}: SeriesLegendProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex flex-wrap gap-x-4 gap-y-1.5', className)}\n    >\n      {items.map((item) => {\n        const hidden = hiddenIds.has(item.id)\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onToggle(item.id)}\n            aria-pressed={!hidden}\n            aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n            className={cn(\n              'flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              hidden && 'opacity-40',\n            )}\n          >\n            {item.marker === 'dashed-line' ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                style={{ borderColor: item.color }}\n              />\n            ) : (\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2.5 shrink-0 rounded-circle\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            <span className={cn(hidden && 'line-through')}>{item.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;YAE1D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,OAAA,IACE,gMACA,UAAU,YACZ;cATF,CAWG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,OAAA,IAAc,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAxBD,KAAK,EAwBJ;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"series-legend.cjs","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n  id: string\n  label: string\n  /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n  color: string\n  /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n  marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n  items: SeriesLegendItem[]\n  hiddenIds: ReadonlySet<string>\n  onToggle: (id: string) => void\n  className?: string\n  /** Accessible label announced for the legend group. */\n  ariaLabel?: string\n}\n\nexport function SeriesLegend({\n  ariaLabel = 'Filter data series',\n  className,\n  hiddenIds,\n  items,\n  onToggle,\n}: SeriesLegendProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex flex-wrap gap-x-4 gap-y-1.5', className)}\n    >\n      {items.map((item) => {\n        const hidden = hiddenIds.has(item.id)\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onToggle(item.id)}\n            aria-pressed={!hidden}\n            aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n            className={cn(\n              'flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              hidden && 'opacity-40',\n            )}\n          >\n            {item.marker === 'dashed-line' ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                style={{ borderColor: item.color }}\n              />\n            ) : (\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            <span className={cn(hidden && 'line-through')}>{item.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;YAE1D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,OAAA,IACE,gMACA,UAAU,YACZ;cATF,CAWG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,OAAA,IAAc,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAxBD,KAAK,EAwBJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/components/series-legend.js

@@ -21,7 +21,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 					style: { borderColor: item.color }
 				}) : /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: "size-2.5 shrink-0 rounded-circle",
+					className: "size-2.5 shrink-0 rounded-full",
 					style: { backgroundColor: item.color }
 				}), /* @__PURE__ */ jsx("span", {
 					className: cn(hidden && "line-through"),

package/dist/components/series-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"series-legend.js","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n  id: string\n  label: string\n  /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n  color: string\n  /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n  marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n  items: SeriesLegendItem[]\n  hiddenIds: ReadonlySet<string>\n  onToggle: (id: string) => void\n  className?: string\n  /** Accessible label announced for the legend group. */\n  ariaLabel?: string\n}\n\nexport function SeriesLegend({\n  ariaLabel = 'Filter data series',\n  className,\n  hiddenIds,\n  items,\n  onToggle,\n}: SeriesLegendProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex flex-wrap gap-x-4 gap-y-1.5', className)}\n    >\n      {items.map((item) => {\n        const hidden = hiddenIds.has(item.id)\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onToggle(item.id)}\n            aria-pressed={!hidden}\n            aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n            className={cn(\n              'flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              hidden && 'opacity-40',\n            )}\n          >\n            {item.marker === 'dashed-line' ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                style={{ borderColor: item.color }}\n              />\n            ) : (\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2.5 shrink-0 rounded-circle\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            <span className={cn(hidden && 'line-through')}>{item.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,oCAAoC,SAAS;YAE1D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,qBAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,WAAW,GACT,gMACA,UAAU,YACZ;cATF,CAWG,KAAK,WAAW,gBACf,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,oBAAC,QAAD;KAAM,WAAW,GAAG,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAxBD,KAAK,EAwBJ;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"series-legend.js","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n  id: string\n  label: string\n  /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n  color: string\n  /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n  marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n  items: SeriesLegendItem[]\n  hiddenIds: ReadonlySet<string>\n  onToggle: (id: string) => void\n  className?: string\n  /** Accessible label announced for the legend group. */\n  ariaLabel?: string\n}\n\nexport function SeriesLegend({\n  ariaLabel = 'Filter data series',\n  className,\n  hiddenIds,\n  items,\n  onToggle,\n}: SeriesLegendProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex flex-wrap gap-x-4 gap-y-1.5', className)}\n    >\n      {items.map((item) => {\n        const hidden = hiddenIds.has(item.id)\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            onClick={() => onToggle(item.id)}\n            aria-pressed={!hidden}\n            aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n            className={cn(\n              'flex cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              hidden && 'opacity-40',\n            )}\n          >\n            {item.marker === 'dashed-line' ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                style={{ borderColor: item.color }}\n              />\n            ) : (\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n            )}\n            <span className={cn(hidden && 'line-through')}>{item.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,oCAAoC,SAAS;YAE1D,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,qBAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,WAAW,GACT,gMACA,UAAU,YACZ;cATF,CAWG,KAAK,WAAW,gBACf,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,oBAAC,QAAD;KAAM,WAAW,GAAG,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAxBD,KAAK,EAwBJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/components/skeleton.cjs

@@ -11,7 +11,7 @@ function Skeleton({ className = "", ...props }) {
 }
 function CardSkeleton({ children, className = "", padding = "p-4", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("flex flex-col rounded-2xl border border-gray", padding, className),
+		className: (0, cnfast.cn)("flex flex-col rounded-lg border border-gray", padding, className),
 		...props,
 		children
 	});

package/dist/components/skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>\n\nexport function Skeleton({ className = '', ...props }: SkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode\n  padding?: 'p-3' | 'p-4'\n}\n\nexport function CardSkeleton({\n  children,\n  className = '',\n  padding = 'p-4',\n  ...props\n}: CardSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col rounded-2xl border border-gray',\n        padding,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,SAAS,EAAE,YAAY,IAAI,GAAG,SAAwB;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,aAAa,EAC3B,UACA,YAAY,IACZ,UAAU,OACV,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,gDACA,SACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}
+{"version":3,"file":"skeleton.cjs","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>\n\nexport function Skeleton({ className = '', ...props }: SkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode\n  padding?: 'p-3' | 'p-4'\n}\n\nexport function CardSkeleton({\n  children,\n  className = '',\n  padding = 'p-4',\n  ...props\n}: CardSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col rounded-lg border border-gray',\n        padding,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,SAAS,EAAE,YAAY,IAAI,GAAG,SAAwB;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,aAAa,EAC3B,UACA,YAAY,IACZ,UAAU,OACV,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,+CACA,SACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}

package/dist/components/skeleton.js

@@ -10,7 +10,7 @@ function Skeleton({ className = "", ...props }) {
 }
 function CardSkeleton({ children, className = "", padding = "p-4", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col rounded-2xl border border-gray", padding, className),
+		className: cn("flex flex-col rounded-lg border border-gray", padding, className),
 		...props,
 		children
 	});

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>\n\nexport function Skeleton({ className = '', ...props }: SkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode\n  padding?: 'p-3' | 'p-4'\n}\n\nexport function CardSkeleton({\n  children,\n  className = '',\n  padding = 'p-4',\n  ...props\n}: CardSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col rounded-2xl border border-gray',\n        padding,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,SAAS,EAAE,YAAY,IAAI,GAAG,SAAwB;CACpE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,aAAa,EAC3B,UACA,YAAY,IACZ,UAAU,OACV,GAAG,SACiB;CACpB,OACE,oBAAC,OAAD;EACE,WAAW,GACT,gDACA,SACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>\n\nexport function Skeleton({ className = '', ...props }: SkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode\n  padding?: 'p-3' | 'p-4'\n}\n\nexport function CardSkeleton({\n  children,\n  className = '',\n  padding = 'p-4',\n  ...props\n}: CardSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col rounded-lg border border-gray',\n        padding,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,SAAS,EAAE,YAAY,IAAI,GAAG,SAAwB;CACpE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,aAAa,EAC3B,UACA,YAAY,IACZ,UAAU,OACV,GAAG,SACiB;CACpB,OACE,oBAAC,OAAD;EACE,WAAW,GACT,+CACA,SACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}

package/dist/components/stat-card.cjs

@@ -41,7 +41,7 @@ const StatCardSecondaryValue = ({ className, ...rest }) => {
 };
 const StatCardIcon = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)(`flex size-10 shrink-0 items-center justify-center rounded-xl`, className),
+		className: (0, cnfast.cn)("flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", className),
 		...rest
 	});
 };

package/dist/components/stat-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.cjs","names":[],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst StatCardContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex w-full flex-col gap-3 p-4 text-left', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xs font-medium text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-end justify-between gap-px', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardValueContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-0.5', className)} {...rest} />\n}\n\nconst StatCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-lg font-bold text-gray tabular-nums', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardSecondaryValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-xs text-gray-light', className)} {...rest} />\n}\n\nconst StatCardIcon = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        `flex size-10 shrink-0 items-center justify-center rounded-xl`,\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  StatCardContainer,\n  StatCardLabel,\n  StatCardContent,\n  StatCardValueContainer,\n  StatCardValue,\n  StatCardSecondaryValue,\n  StatCardIcon,\n}\n"],"mappings":";;;;;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,gEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"stat-card.cjs","names":[],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst StatCardContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex w-full flex-col gap-3 p-4 text-left', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xs font-medium text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-end justify-between gap-px', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardValueContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-0.5', className)} {...rest} />\n}\n\nconst StatCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-lg font-bold text-gray tabular-nums', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardSecondaryValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-xs text-gray-light', className)} {...rest} />\n}\n\nconst StatCardIcon = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        // max() pill escape (matches Icon): a tile stays rounded-md at low Roundness but\n        // becomes a circle at large/full, same as it did pre-harmonization via clamping.\n        'flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  StatCardContainer,\n  StatCardLabel,\n  StatCardContent,\n  StatCardValueContainer,\n  StatCardValue,\n  StatCardSecondaryValue,\n  StatCardIcon,\n}\n"],"mappings":";;;;;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAGE,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/stat-card.js

@@ -40,7 +40,7 @@ const StatCardSecondaryValue = ({ className, ...rest }) => {
 };
 const StatCardIcon = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(`flex size-10 shrink-0 items-center justify-center rounded-xl`, className),
+		className: cn("flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", className),
 		...rest
 	});
 };

package/dist/components/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst StatCardContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex w-full flex-col gap-3 p-4 text-left', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xs font-medium text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-end justify-between gap-px', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardValueContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-0.5', className)} {...rest} />\n}\n\nconst StatCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-lg font-bold text-gray tabular-nums', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardSecondaryValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-xs text-gray-light', className)} {...rest} />\n}\n\nconst StatCardIcon = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        `flex size-10 shrink-0 items-center justify-center rounded-xl`,\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  StatCardContainer,\n  StatCardLabel,\n  StatCardContent,\n  StatCardValueContainer,\n  StatCardValue,\n  StatCardSecondaryValue,\n  StatCardIcon,\n}\n"],"mappings":";;;;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;CAClC,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,gEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst StatCardContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex w-full flex-col gap-3 p-4 text-left', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xs font-medium text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-end justify-between gap-px', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardValueContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-0.5', className)} {...rest} />\n}\n\nconst StatCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-lg font-bold text-gray tabular-nums', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardSecondaryValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-xs text-gray-light', className)} {...rest} />\n}\n\nconst StatCardIcon = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        // max() pill escape (matches Icon): a tile stays rounded-md at low Roundness but\n        // becomes a circle at large/full, same as it did pre-harmonization via clamping.\n        'flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  StatCardContainer,\n  StatCardLabel,\n  StatCardContent,\n  StatCardValueContainer,\n  StatCardValue,\n  StatCardSecondaryValue,\n  StatCardIcon,\n}\n"],"mappings":";;;;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;CAClC,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GAGT,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/stepper.cjs

@@ -40,14 +40,14 @@ const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0
 		ref,
 		role: "group",
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2", className),
+		className: (0, cnfast.cn)("inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				"aria-label": decreaseLabel,
 				onClick: decrement,
 				disabled: disabled || atMin,
-				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
 					className: "text-[16px]",
 					name: "chevron_left"
@@ -63,7 +63,7 @@ const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0
 				"aria-label": increaseLabel,
 				onClick: increment,
 				disabled: disabled || atMax,
-				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
 					className: "text-[16px]",
 					name: "chevron_right"

package/dist/components/stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;;;;AA6BA,MAAM,UAAUA,MAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,MAAM,OAC3B,IACF;CAEA,MAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,0FACA,SACF;YAPF;GASE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAgB,CAAA;GACvD,CAAA;GACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAiB,CAAA;GACxD,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"stepper.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;;;;AA6BA,MAAM,UAAUA,MAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,MAAM,OAC3B,IACF;CAEA,MAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,0FACA,SACF;YAPF;GASE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAgB,CAAA;GACvD,CAAA;GACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAiB,CAAA;GACxD,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/dist/components/stepper.js

@@ -37,14 +37,14 @@ const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min =
 		ref,
 		role: "group",
 		"aria-label": ariaLabel,
-		className: cn("inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2", className),
+		className: cn("inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2", className),
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": decreaseLabel,
 				onClick: decrement,
 				disabled: disabled || atMin,
-				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
 				children: /* @__PURE__ */ jsx(MaterialSymbol, {
 					className: "text-[16px]",
 					name: "chevron_left"
@@ -60,7 +60,7 @@ const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min =
 				"aria-label": increaseLabel,
 				onClick: increment,
 				disabled: disabled || atMax,
-				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
 				children: /* @__PURE__ */ jsx(MaterialSymbol, {
 					className: "text-[16px]",
 					name: "chevron_right"

package/dist/components/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":["React"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;AA6BA,MAAM,UAAUA,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,IACF;CAEA,QAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,SACF;YAPF;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAgB,CAAA;GACvD,CAAA;GACR,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAiB,CAAA;GACxD,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"stepper.js","names":["React"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;AA6BA,MAAM,UAAUA,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,IACF;CAEA,QAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,SACF;YAPF;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAgB,CAAA;GACvD,CAAA;GACR,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,gBAAD;KAAgB,WAAU;KAAc,MAAK;IAAiB,CAAA;GACxD,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/dist/components/textarea.cjs

@@ -14,7 +14,7 @@ const textareaVariants = (0, class_variance_authority.cva)("flex w-full min-w-0
 		chrome: {
 			none: "border-0 px-0",
 			inset: require_lib_input_box_variants.GHOST_UNDERLINE,
-			box: "min-h-11 rounded-lg px-3 py-2 text-base transition-all motion-reduce:transition-none"
+			box: "min-h-11 rounded-md px-3 py-2 text-base transition-all motion-reduce:transition-none"
 		},
 		inputStyle: {
 			soft: "",

package/dist/components/textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.cjs","names":["GHOST_UNDERLINE","boxChrome","React","useFieldControl"],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype TextareaVariant = SparkInputStyle | 'none'\n\nconst textareaVariants = cva(\n  'flex w-full min-w-0 bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        inset: GHOST_UNDERLINE,\n        box: 'min-h-11 rounded-lg px-3 py-2 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n      autoResize: {\n        true: 'field-sizing-content resize-none',\n        false: 'resize-y',\n      },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n      // GHOST_UNDERLINE and boxChrome.ghost.* hardcode h-10; un-clamp for\n      // textarea's min-height model — must come after those compounds above\n      { chrome: 'inset', class: 'h-auto min-h-10' },\n      { chrome: 'box', inputStyle: 'ghost', class: 'h-auto' },\n    ],\n  },\n)\n\ninterface TextareaProps extends React.ComponentProps<'textarea'> {\n  variant?: TextareaVariant\n  autoResize?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      variant,\n      autoResize = false,\n      rows = 3,\n      className,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      ...props\n    },\n    ref,\n  ) {\n    const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n      useFieldControl({\n        id: idProp,\n        ariaDescribedBy: ariaDescribedByProp,\n        variant: variant !== 'none' ? variant : undefined,\n      })\n    // an explicit variant prop keeps the box even inside an inset field\n    const chrome =\n      variant === 'none'\n        ? 'none'\n        : !variant && field?.labelPosition === 'inset'\n          ? 'inset'\n          : 'box'\n\n    return (\n      <textarea\n        data-slot=\"textarea\"\n        className={cn(\n          textareaVariants({ chrome, inputStyle, inputColor, autoResize }),\n          className,\n        )}\n        id={id}\n        rows={rows}\n        ref={ref}\n        aria-invalid={ariaInvalid}\n        {...props}\n        aria-describedby={ariaDescribedBy}\n      />\n    )\n  },\n)\n\nexport { Textarea }\nexport type { TextareaProps, TextareaVariant }\n"],"mappings":";;;;;;;;;;;AASA,MAAM,oBAAA,GAAA,yBAAA,KACJ,sQACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GACN,OAAOA,+BAAAA;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;EAClC,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;EAGpE;GAAE,QAAQ;GAAS,OAAO;EAAkB;EAC5C;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAS;CACxD;AACF,CACF;AAOA,MAAM,WAAWC,MAAM,WACrB,SAAS,SACP,EACE,SACA,aAAa,OACb,OAAO,GACP,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3DC,yBAAAA,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;CAC1C,CAAC;CASH,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,iBAAiB;GAAE,QAVvB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMyB;GAAY;GAAY;EAAW,CAAC,GAC/D,SACF;EACI;EACE;EACD;EACL,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CACF"}
+{"version":3,"file":"textarea.cjs","names":["GHOST_UNDERLINE","boxChrome","React","useFieldControl"],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype TextareaVariant = SparkInputStyle | 'none'\n\nconst textareaVariants = cva(\n  'flex w-full min-w-0 bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        inset: GHOST_UNDERLINE,\n        box: 'min-h-11 rounded-md px-3 py-2 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n      autoResize: {\n        true: 'field-sizing-content resize-none',\n        false: 'resize-y',\n      },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n      // GHOST_UNDERLINE and boxChrome.ghost.* hardcode h-10; un-clamp for\n      // textarea's min-height model — must come after those compounds above\n      { chrome: 'inset', class: 'h-auto min-h-10' },\n      { chrome: 'box', inputStyle: 'ghost', class: 'h-auto' },\n    ],\n  },\n)\n\ninterface TextareaProps extends React.ComponentProps<'textarea'> {\n  variant?: TextareaVariant\n  autoResize?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      variant,\n      autoResize = false,\n      rows = 3,\n      className,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      ...props\n    },\n    ref,\n  ) {\n    const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n      useFieldControl({\n        id: idProp,\n        ariaDescribedBy: ariaDescribedByProp,\n        variant: variant !== 'none' ? variant : undefined,\n      })\n    // an explicit variant prop keeps the box even inside an inset field\n    const chrome =\n      variant === 'none'\n        ? 'none'\n        : !variant && field?.labelPosition === 'inset'\n          ? 'inset'\n          : 'box'\n\n    return (\n      <textarea\n        data-slot=\"textarea\"\n        className={cn(\n          textareaVariants({ chrome, inputStyle, inputColor, autoResize }),\n          className,\n        )}\n        id={id}\n        rows={rows}\n        ref={ref}\n        aria-invalid={ariaInvalid}\n        {...props}\n        aria-describedby={ariaDescribedBy}\n      />\n    )\n  },\n)\n\nexport { Textarea }\nexport type { TextareaProps, TextareaVariant }\n"],"mappings":";;;;;;;;;;;AASA,MAAM,oBAAA,GAAA,yBAAA,KACJ,sQACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GACN,OAAOA,+BAAAA;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;EAClC,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;EAGpE;GAAE,QAAQ;GAAS,OAAO;EAAkB;EAC5C;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAS;CACxD;AACF,CACF;AAOA,MAAM,WAAWC,MAAM,WACrB,SAAS,SACP,EACE,SACA,aAAa,OACb,OAAO,GACP,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3DC,yBAAAA,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;CAC1C,CAAC;CASH,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,iBAAiB;GAAE,QAVvB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMyB;GAAY;GAAY;EAAW,CAAC,GAC/D,SACF;EACI;EACE;EACD;EACL,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CACF"}

package/dist/components/textarea.js

@@ -11,7 +11,7 @@ const textareaVariants = cva("flex w-full min-w-0 bg-transparent text-gray outli
 		chrome: {
 			none: "border-0 px-0",
 			inset: GHOST_UNDERLINE,
-			box: "min-h-11 rounded-lg px-3 py-2 text-base transition-all motion-reduce:transition-none"
+			box: "min-h-11 rounded-md px-3 py-2 text-base transition-all motion-reduce:transition-none"
 		},
 		inputStyle: {
 			soft: "",

package/dist/components/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["React"],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype TextareaVariant = SparkInputStyle | 'none'\n\nconst textareaVariants = cva(\n  'flex w-full min-w-0 bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        inset: GHOST_UNDERLINE,\n        box: 'min-h-11 rounded-lg px-3 py-2 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n      autoResize: {\n        true: 'field-sizing-content resize-none',\n        false: 'resize-y',\n      },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n      // GHOST_UNDERLINE and boxChrome.ghost.* hardcode h-10; un-clamp for\n      // textarea's min-height model — must come after those compounds above\n      { chrome: 'inset', class: 'h-auto min-h-10' },\n      { chrome: 'box', inputStyle: 'ghost', class: 'h-auto' },\n    ],\n  },\n)\n\ninterface TextareaProps extends React.ComponentProps<'textarea'> {\n  variant?: TextareaVariant\n  autoResize?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      variant,\n      autoResize = false,\n      rows = 3,\n      className,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      ...props\n    },\n    ref,\n  ) {\n    const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n      useFieldControl({\n        id: idProp,\n        ariaDescribedBy: ariaDescribedByProp,\n        variant: variant !== 'none' ? variant : undefined,\n      })\n    // an explicit variant prop keeps the box even inside an inset field\n    const chrome =\n      variant === 'none'\n        ? 'none'\n        : !variant && field?.labelPosition === 'inset'\n          ? 'inset'\n          : 'box'\n\n    return (\n      <textarea\n        data-slot=\"textarea\"\n        className={cn(\n          textareaVariants({ chrome, inputStyle, inputColor, autoResize }),\n          className,\n        )}\n        id={id}\n        rows={rows}\n        ref={ref}\n        aria-invalid={ariaInvalid}\n        {...props}\n        aria-describedby={ariaDescribedBy}\n      />\n    )\n  },\n)\n\nexport { Textarea }\nexport type { TextareaProps, TextareaVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB,IACvB,sQACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GACN,OAAO;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;EAClC,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;EAGpE;GAAE,QAAQ;GAAS,OAAO;EAAkB;EAC5C;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAS;CACxD;AACF,CACF;AAOA,MAAM,WAAWA,QAAM,WACrB,SAAS,SACP,EACE,SACA,aAAa,OACb,OAAO,GACP,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3D,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;CAC1C,CAAC;CASH,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GACT,iBAAiB;GAAE,QAVvB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMyB;GAAY;GAAY;EAAW,CAAC,GAC/D,SACF;EACI;EACE;EACD;EACL,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CACF"}
+{"version":3,"file":"textarea.js","names":["React"],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype TextareaVariant = SparkInputStyle | 'none'\n\nconst textareaVariants = cva(\n  'flex w-full min-w-0 bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        inset: GHOST_UNDERLINE,\n        box: 'min-h-11 rounded-md px-3 py-2 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n      autoResize: {\n        true: 'field-sizing-content resize-none',\n        false: 'resize-y',\n      },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n      // GHOST_UNDERLINE and boxChrome.ghost.* hardcode h-10; un-clamp for\n      // textarea's min-height model — must come after those compounds above\n      { chrome: 'inset', class: 'h-auto min-h-10' },\n      { chrome: 'box', inputStyle: 'ghost', class: 'h-auto' },\n    ],\n  },\n)\n\ninterface TextareaProps extends React.ComponentProps<'textarea'> {\n  variant?: TextareaVariant\n  autoResize?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      variant,\n      autoResize = false,\n      rows = 3,\n      className,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      ...props\n    },\n    ref,\n  ) {\n    const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n      useFieldControl({\n        id: idProp,\n        ariaDescribedBy: ariaDescribedByProp,\n        variant: variant !== 'none' ? variant : undefined,\n      })\n    // an explicit variant prop keeps the box even inside an inset field\n    const chrome =\n      variant === 'none'\n        ? 'none'\n        : !variant && field?.labelPosition === 'inset'\n          ? 'inset'\n          : 'box'\n\n    return (\n      <textarea\n        data-slot=\"textarea\"\n        className={cn(\n          textareaVariants({ chrome, inputStyle, inputColor, autoResize }),\n          className,\n        )}\n        id={id}\n        rows={rows}\n        ref={ref}\n        aria-invalid={ariaInvalid}\n        {...props}\n        aria-describedby={ariaDescribedBy}\n      />\n    )\n  },\n)\n\nexport { Textarea }\nexport type { TextareaProps, TextareaVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB,IACvB,sQACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GACN,OAAO;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;EAClC,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;EAGpE;GAAE,QAAQ;GAAS,OAAO;EAAkB;EAC5C;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;EAAS;CACxD;AACF,CACF;AAOA,MAAM,WAAWA,QAAM,WACrB,SAAS,SACP,EACE,SACA,aAAa,OACb,OAAO,GACP,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3D,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;CAC1C,CAAC;CASH,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GACT,iBAAiB;GAAE,QAVvB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMyB;GAAY;GAAY;EAAW,CAAC,GAC/D,SACF;EACI;EACE;EACD;EACL,gBAAc;EACd,GAAI;EACJ,oBAAkB;CACnB,CAAA;AAEL,CACF"}

package/dist/components/time-picker.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst MINUTES_PER_DAY = 24 * 60\n\n/**\n * Move `HH:mm` one grid step in `direction`, aligning to the `step` grid first.\n * A native `<input type=\"time\">` steps each focused segment by one unit and\n * ignores `step`, so callers that want arrow keys to move by a coarse step\n * (e.g. 5 minutes) route the arrow keys through this instead. Clamped to\n * `00:00`–`23:55` (no wrap); an off-grid start lands on the next grid point in\n * the pressed direction.\n */\nfunction stepGridValue(value: string, step: number, direction: 1 | -1): string {\n  const stepMinutes = Math.floor(step / 60)\n  if (stepMinutes <= 1) return value\n  const match = /^(\\d{1,2}):(\\d{2})/.exec(value)\n  const base = match ? Number(match[1]) * 60 + Number(match[2]) : 0\n  const next =\n    direction === 1\n      ? Math.floor(base / stepMinutes) * stepMinutes + stepMinutes\n      : Math.ceil(base / stepMinutes) * stepMinutes - stepMinutes\n  const lastOnGrid =\n    Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes\n  const clamped = Math.max(0, Math.min(next, lastOnGrid))\n  const hh = String(Math.floor(clamped / 60)).padStart(2, '0')\n  const mm = String(clamped % 60).padStart(2, '0')\n  return `${hh}:${mm}`\n}\n\n/**\n * Round `HH:mm` to the nearest multiple of `step` (used to autofix a typed\n * off-grid value on blur). Already-on-grid values pass through unchanged (so a\n * seconds suffix is preserved); anything that isn't `HH:mm(:ss)` passes through.\n */\nfunction snapToNearestStep(value: string, step: number): string {\n  const stepMinutes = Math.floor(step / 60)\n  if (stepMinutes <= 1) return value\n  const match = /^(\\d{1,2}):(\\d{2})/.exec(value)\n  if (!match) return value\n  const minutes = Number(match[2])\n  if (minutes % stepMinutes === 0) return value\n  const total = Number(match[1]) * 60 + minutes\n  const lastOnGrid =\n    Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes\n  const snapped = Math.min(\n    Math.round(total / stepMinutes) * stepMinutes,\n    lastOnGrid,\n  )\n  const hh = String(Math.floor(snapped / 60)).padStart(2, '0')\n  const mm = String(snapped % 60).padStart(2, '0')\n  return `${hh}:${mm}`\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    const stepMinutes = Math.floor(step / 60)\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        onKeyDown={(event) => {\n          // Native arrows step the focused segment by one unit and ignore step;\n          // for a coarse grid, drive up/down through the grid instead.\n          if (stepMinutes <= 1) return\n          if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return\n          event.preventDefault()\n          onValueChange(\n            stepGridValue(value, step, event.key === 'ArrowUp' ? 1 : -1),\n          )\n        }}\n        onBlur={(event) => {\n          // Autofix a typed off-grid value to the closest grid point on blur.\n          if (stepMinutes <= 1) return\n          const snapped = snapToNearestStep(event.currentTarget.value, step)\n          if (snapped !== event.currentTarget.value) onValueChange(snapped)\n        }}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  /** Step in seconds, forwarded to both inputs (defaults to 60). */\n  step?: number\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n  step,\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          step={step}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          step={step}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":"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"}
+{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst MINUTES_PER_DAY = 24 * 60\n\n/**\n * Move `HH:mm` one grid step in `direction`, aligning to the `step` grid first.\n * A native `<input type=\"time\">` steps each focused segment by one unit and\n * ignores `step`, so callers that want arrow keys to move by a coarse step\n * (e.g. 5 minutes) route the arrow keys through this instead. Clamped to\n * `00:00`–`23:55` (no wrap); an off-grid start lands on the next grid point in\n * the pressed direction.\n */\nfunction stepGridValue(value: string, step: number, direction: 1 | -1): string {\n  const stepMinutes = Math.floor(step / 60)\n  if (stepMinutes <= 1) return value\n  const match = /^(\\d{1,2}):(\\d{2})/.exec(value)\n  const base = match ? Number(match[1]) * 60 + Number(match[2]) : 0\n  const next =\n    direction === 1\n      ? Math.floor(base / stepMinutes) * stepMinutes + stepMinutes\n      : Math.ceil(base / stepMinutes) * stepMinutes - stepMinutes\n  const lastOnGrid =\n    Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes\n  const clamped = Math.max(0, Math.min(next, lastOnGrid))\n  const hh = String(Math.floor(clamped / 60)).padStart(2, '0')\n  const mm = String(clamped % 60).padStart(2, '0')\n  return `${hh}:${mm}`\n}\n\n/**\n * Round `HH:mm` to the nearest multiple of `step` (used to autofix a typed\n * off-grid value on blur). Already-on-grid values pass through unchanged (so a\n * seconds suffix is preserved); anything that isn't `HH:mm(:ss)` passes through.\n */\nfunction snapToNearestStep(value: string, step: number): string {\n  const stepMinutes = Math.floor(step / 60)\n  if (stepMinutes <= 1) return value\n  const match = /^(\\d{1,2}):(\\d{2})/.exec(value)\n  if (!match) return value\n  const minutes = Number(match[2])\n  if (minutes % stepMinutes === 0) return value\n  const total = Number(match[1]) * 60 + minutes\n  const lastOnGrid =\n    Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes\n  const snapped = Math.min(\n    Math.round(total / stepMinutes) * stepMinutes,\n    lastOnGrid,\n  )\n  const hh = String(Math.floor(snapped / 60)).padStart(2, '0')\n  const mm = String(snapped % 60).padStart(2, '0')\n  return `${hh}:${mm}`\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    const stepMinutes = Math.floor(step / 60)\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        onKeyDown={(event) => {\n          // Native arrows step the focused segment by one unit and ignore step;\n          // for a coarse grid, drive up/down through the grid instead.\n          if (stepMinutes <= 1) return\n          if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return\n          event.preventDefault()\n          onValueChange(\n            stepGridValue(value, step, event.key === 'ArrowUp' ? 1 : -1),\n          )\n        }}\n        onBlur={(event) => {\n          // Autofix a typed off-grid value to the closest grid point on blur.\n          if (stepMinutes <= 1) return\n          const snapped = snapToNearestStep(event.currentTarget.value, step)\n          if (snapped !== event.currentTarget.value) onValueChange(snapped)\n        }}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-md bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  /** Step in seconds, forwarded to both inputs (defaults to 60). */\n  step?: number\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n  step,\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          step={step}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          step={step}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":"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"}