@epilot/spark-ui 0.18.0 → 0.18.2

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 { Check, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\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          <KeyboardArrowDown className=\"pointer-events-none text-gray-light [--spark-icon-size:14px]\" />\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          <Check className=\"[--spark-icon-size:11px]\" />\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      <KeyboardArrowDown className=\"rotate-180 [--spark-icon-size:14px]\" />\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      <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\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 { Check, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\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          <KeyboardArrowDown className=\"pointer-events-none text-gray-light [--spark-icon-size:14px]\" />\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 [[data-high-contrast]_&]:border-gray-a11',\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(\n        'px-1.5 py-1 text-xs text-gray-light [[data-high-contrast]_&]:text-gray-a12',\n        className,\n      )}\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 touch-target-row 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          <Check className=\"[--spark-icon-size:11px]\" />\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 [[data-high-contrast]_&]:bg-gray-a6',\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      <KeyboardArrowDown className=\"rotate-180 [--spark-icon-size:14px]\" />\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      <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\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

@@ -7,7 +7,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "group",
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("flex flex-wrap gap-x-4 gap-y-1.5", className),
+		className: (0, cnfast.cn)("flex flex-wrap gap-x-4", className),
 		children: items.map((item) => {
 			const hidden = hiddenIds.has(item.id);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -15,7 +15,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 				onClick: () => onToggle(item.id),
 				"aria-pressed": !hidden,
 				"aria-label": `${item.label}, ${hidden ? "hidden" : "shown"}`,
-				className: (0, cnfast.cn)("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", hidden && "opacity-40"),
+				className: (0, cnfast.cn)("flex min-h-[1.5rem] min-w-[1.5rem] 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 motion-reduce:transition-none", hidden && "opacity-40"),
 				children: [item.marker === "dashed-line" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-hidden": "true",
 					className: "w-3 shrink-0 border-t-2 border-dashed",

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-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"}
+{"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', 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              // fixed rem, not min-h-6/min-w-6: the 24px floor must not shrink with [data-scaling]\n              'flex min-h-[1.5rem] min-w-[1.5rem] 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 motion-reduce:transition-none',\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,0BAA0B,SAAS;YAEhD,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,IAEE,4PACA,UAAU,YACZ;cAVF,CAYG,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;MAzBD,KAAK,EAyBJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/components/series-legend.js

@@ -6,7 +6,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"aria-label": ariaLabel,
-		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", className),
+		className: cn("flex flex-wrap gap-x-4", className),
 		children: items.map((item) => {
 			const hidden = hiddenIds.has(item.id);
 			return /* @__PURE__ */ jsxs("button", {
@@ -14,7 +14,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
 				onClick: () => onToggle(item.id),
 				"aria-pressed": !hidden,
 				"aria-label": `${item.label}, ${hidden ? "hidden" : "shown"}`,
-				className: cn("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", hidden && "opacity-40"),
+				className: cn("flex min-h-[1.5rem] min-w-[1.5rem] 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 motion-reduce:transition-none", hidden && "opacity-40"),
 				children: [item.marker === "dashed-line" ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: "w-3 shrink-0 border-t-2 border-dashed",

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-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"}
+{"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', 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              // fixed rem, not min-h-6/min-w-6: the 24px floor must not shrink with [data-scaling]\n              'flex min-h-[1.5rem] min-w-[1.5rem] 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 motion-reduce:transition-none',\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,0BAA0B,SAAS;YAEhD,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,GAET,4PACA,UAAU,YACZ;cAVF,CAYG,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;MAzBD,KAAK,EAyBJ;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/components/sheet.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
 let cnfast = require("cnfast");

package/dist/components/sheet.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
-import "react";
 import { Close } from "@epilot/spark-icons";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/sheet.tsx

package/dist/components/slider.cjs

@@ -108,7 +108,7 @@ Slider.displayName = "Slider";
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Control, {
 		"data-slot": "slider-control",
-		className: (0, cnfast.cn)("group/slider relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
+		className: (0, cnfast.cn)("group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
 		...props
 	});
 }

package/dist/components/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}
+{"version":3,"file":"slider.cjs","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}

package/dist/components/slider.js

@@ -105,7 +105,7 @@ Slider.displayName = "Slider";
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Control, {
 		"data-slot": "slider-control",
-		className: cn("group/slider relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
+		className: cn("group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
 		...props
 	});
 }

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}

package/dist/components/smart-toggle-button.cjs

@@ -11,7 +11,7 @@ function SmartToggleButton({ active, disabled, onClick }) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		"aria-pressed": active,
-		className: (0, cnfast.cn)("inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed", active ? "bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80" : "border-gray text-gray-light border hover:bg-base-gray-soft"),
+		className: (0, cnfast.cn)("touch-target inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed", active ? "bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80" : "border-gray text-gray-light border hover:bg-base-gray-soft"),
 		disabled,
 		onClick: handleClick,
 		type: "button",

package/dist/components/smart-toggle-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"smart-toggle-button.cjs","names":["WandStars"],"sources":["../../src/components/smart-toggle-button.tsx"],"sourcesContent":["import { WandStars } from '@epilot/spark-icons'\nimport type { MouseEvent } from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SmartToggleButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n}\n\nexport function SmartToggleButton({\n  active,\n  disabled,\n  onClick,\n}: SmartToggleButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const base =\n    'inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed'\n  const tone = active\n    ? 'bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80'\n    : 'border-gray text-gray-light border hover:bg-base-gray-soft'\n\n  return (\n    <button\n      aria-pressed={active}\n      className={cn(base, tone)}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <WandStars className=\"block leading-none [--spark-icon-size:16px]\" />\n      Smart\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAUA,SAAgB,kBAAkB,EAChC,QACA,UACA,WACyB;CACzB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAQA,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;EACE,gBAAc;EACd,YAAA,GAAA,OAAA,IAAc,qTAPL,SACT,2FACA,4DAKwB;EACd;EACV,SAAS;EACT,MAAK;YALP,CAOE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,WAAD,EAAW,WAAU,8CAA+C,CAAA,GAAC,OAE/D;;AAEZ"}
+{"version":3,"file":"smart-toggle-button.cjs","names":["WandStars"],"sources":["../../src/components/smart-toggle-button.tsx"],"sourcesContent":["import { WandStars } from '@epilot/spark-icons'\nimport type { MouseEvent } from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SmartToggleButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n}\n\nexport function SmartToggleButton({\n  active,\n  disabled,\n  onClick,\n}: SmartToggleButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const base =\n    'touch-target inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed'\n  const tone = active\n    ? 'bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80'\n    : 'border-gray text-gray-light border hover:bg-base-gray-soft'\n\n  return (\n    <button\n      aria-pressed={active}\n      className={cn(base, tone)}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <WandStars className=\"block leading-none [--spark-icon-size:16px]\" />\n      Smart\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAUA,SAAgB,kBAAkB,EAChC,QACA,UACA,WACyB;CACzB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAQA,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;EACE,gBAAc;EACd,YAAA,GAAA,OAAA,IAAc,kUAPL,SACT,2FACA,4DAKwB;EACd;EACV,SAAS;EACT,MAAK;YALP,CAOE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,WAAD,EAAW,WAAU,8CAA+C,CAAA,GAAC,OAE/D;;AAEZ"}

package/dist/components/smart-toggle-button.js

@@ -10,7 +10,7 @@ function SmartToggleButton({ active, disabled, onClick }) {
 	};
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-pressed": active,
-		className: cn("inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed", active ? "bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80" : "border-gray text-gray-light border hover:bg-base-gray-soft"),
+		className: cn("touch-target inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed", active ? "bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80" : "border-gray text-gray-light border hover:bg-base-gray-soft"),
 		disabled,
 		onClick: handleClick,
 		type: "button",

package/dist/components/smart-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-toggle-button.js","names":[],"sources":["../../src/components/smart-toggle-button.tsx"],"sourcesContent":["import { WandStars } from '@epilot/spark-icons'\nimport type { MouseEvent } from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SmartToggleButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n}\n\nexport function SmartToggleButton({\n  active,\n  disabled,\n  onClick,\n}: SmartToggleButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const base =\n    'inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed'\n  const tone = active\n    ? 'bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80'\n    : 'border-gray text-gray-light border hover:bg-base-gray-soft'\n\n  return (\n    <button\n      aria-pressed={active}\n      className={cn(base, tone)}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <WandStars className=\"block leading-none [--spark-icon-size:16px]\" />\n      Smart\n    </button>\n  )\n}\n"],"mappings":";;;;;AAUA,SAAgB,kBAAkB,EAChC,QACA,UACA,WACyB;CACzB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAQA,OACE,qBAAC,UAAD;EACE,gBAAc;EACd,WAAW,GAAG,qTAPL,SACT,2FACA,4DAKwB;EACd;EACV,SAAS;EACT,MAAK;YALP,CAOE,oBAAC,WAAD,EAAW,WAAU,8CAA+C,CAAA,GAAC,OAE/D;;AAEZ"}
+{"version":3,"file":"smart-toggle-button.js","names":[],"sources":["../../src/components/smart-toggle-button.tsx"],"sourcesContent":["import { WandStars } from '@epilot/spark-icons'\nimport type { MouseEvent } from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SmartToggleButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n}\n\nexport function SmartToggleButton({\n  active,\n  disabled,\n  onClick,\n}: SmartToggleButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const base =\n    'touch-target inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed'\n  const tone = active\n    ? 'bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80'\n    : 'border-gray text-gray-light border hover:bg-base-gray-soft'\n\n  return (\n    <button\n      aria-pressed={active}\n      className={cn(base, tone)}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <WandStars className=\"block leading-none [--spark-icon-size:16px]\" />\n      Smart\n    </button>\n  )\n}\n"],"mappings":";;;;;AAUA,SAAgB,kBAAkB,EAChC,QACA,UACA,WACyB;CACzB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAQA,OACE,qBAAC,UAAD;EACE,gBAAc;EACd,WAAW,GAAG,kUAPL,SACT,2FACA,4DAKwB;EACd;EACV,SAAS;EACT,MAAK;YALP,CAOE,oBAAC,WAAD,EAAW,WAAU,8CAA+C,CAAA,GAAC,OAE/D;;AAEZ"}

package/dist/components/solar-forecast-chart.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import { LineChartCurve, LineChartDatum } from "./line-chart.js";
-import { JSX, ReactNode } from "react";
 import { SparkIcon } from "@epilot/spark-icons";
+import { JSX, ReactNode } from "react";
 
 //#region src/components/solar-forecast-chart.d.ts
 interface SolarForecastWeatherPoint {

package/dist/components/solar-forecast-chart.js

@@ -1,7 +1,7 @@
 "use client";
+import { cn } from "../utils/cn.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
-import { cn } from "../utils/cn.js";
 import { LineChart } from "./line-chart.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/stepper.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/stepper.tsx
@@ -47,7 +47,7 @@ const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0
 				"aria-label": decreaseLabel,
 				onClick: decrement,
 				disabled: disabled || atMin,
-				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",
+				className: "touch-target 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 motion-reduce:transition-none",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ChevronLeft, { className: "[--spark-icon-size:16px]" })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -60,7 +60,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-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "touch-target 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 motion-reduce:transition-none",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ChevronRight, { className: "[--spark-icon-size:16px]" })
 			})
 		]

package/dist/components/stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.cjs","names":["React","ChevronLeft","ChevronRight"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\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          <ChevronLeft className=\"[--spark-icon-size:16px]\" />\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          <ChevronRight className=\"[--spark-icon-size:16px]\" />\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,oBAAAA,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,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,KAACC,oBAAAA,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"stepper.cjs","names":["React","ChevronLeft","ChevronRight"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\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=\"touch-target 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 motion-reduce:transition-none\"\n        >\n          <ChevronLeft className=\"[--spark-icon-size:16px]\" />\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=\"touch-target 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 motion-reduce:transition-none\"\n        >\n          <ChevronRight className=\"[--spark-icon-size:16px]\" />\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,oBAAAA,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,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,KAACC,oBAAAA,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}