@epilot/spark-ui 0.18.2 → 0.20.0

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 [[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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"}
+{"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, Close, 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-placeholder disabled:cursor-not-allowed disabled:text-gray-disabled disabled:data-placeholder: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        className=\"pointer-events-none flex text-gray-light\"\n        data-slot=\"select-chevron\"\n      >\n        <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\n// px floor: axe target-size flags it below 24px at small scalings because it overlays\n// the trigger; autocomplete.tsx ICON_BUTTON sits in flow and does not need one\nconst CLEAR_BUTTON =\n  \"relative inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\n// wraps SelectTrigger since Base UI ships no Select.Clear and the trigger is a\n// native <button> — the clear sits beside it, not nested inside it\nfunction SelectTriggerGroup({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"select-trigger-group\"\n      className={cn(\n        'relative inline-flex w-fit items-center [&_[data-slot=select-chevron]]:absolute [&_[data-slot=select-chevron]]:right-3 has-[[data-slot=select-trigger][data-disabled]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-placeholder]]:[&_[data-slot=select-clear]]:hidden has-[[data-slot=select-trigger][data-readonly]]:[&_[data-slot=select-clear]]:hidden [&_[data-slot=select-trigger]]:pr-[calc(--spacing(8)+max(--spacing(6),24px))]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectClear({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<'button'>) {\n  return (\n    <button\n      data-slot=\"select-clear\"\n      type=\"button\"\n      className={cn(CLEAR_BUTTON, 'absolute right-8', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        // clearing hides this button (data-placeholder returns), so keyboard\n        // focus would otherwise drop to <body> — return it to the trigger\n        event.currentTarget\n          .closest('[data-slot=\"select-trigger-group\"]')\n          ?.querySelector<HTMLElement>('[data-slot=\"select-trigger\"]')\n          ?.focus()\n      }}\n      {...props}\n    >\n      {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n    </button>\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  SelectClear,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectTriggerGroup,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/components/stepper.cjs

@@ -7,7 +7,7 @@ react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/stepper.tsx
-const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel = "Decrease", increaseLabel = "Increase" }, ref) => {
+const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel, increaseLabel }, ref) => {
 	const commitTimerRef = react.useRef(null);
 	react.useEffect(() => () => {
 		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);

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=\"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"}
+{"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. */\n  decreaseLabel: string\n  /** Accessible label for the increment button. */\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,\n      increaseLabel,\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,eACA,iBAEF,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"}

package/dist/components/stepper.d.cts

@@ -22,10 +22,10 @@ interface StepperProps {
   commitDelayMs?: number;
   /** Accessible label, e.g. "Sunshare percentage". */
   'aria-label'?: string;
-  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
-  decreaseLabel?: string;
-  /** Accessible label for the increment button. Defaults to `"Increase"`. */
-  increaseLabel?: string;
+  /** Accessible label for the decrement button. */
+  decreaseLabel: string;
+  /** Accessible label for the increment button. */
+  increaseLabel: string;
 }
 declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/stepper.d.ts

@@ -22,10 +22,10 @@ interface StepperProps {
   commitDelayMs?: number;
   /** Accessible label, e.g. "Sunshare percentage". */
   'aria-label'?: string;
-  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
-  decreaseLabel?: string;
-  /** Accessible label for the increment button. Defaults to `"Increase"`. */
-  increaseLabel?: string;
+  /** Accessible label for the decrement button. */
+  decreaseLabel: string;
+  /** Accessible label for the increment button. */
+  increaseLabel: string;
 }
 declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/stepper.js

@@ -4,7 +4,7 @@ import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
-const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel = "Decrease", increaseLabel = "Increase" }, ref) => {
+const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel, increaseLabel }, ref) => {
 	const commitTimerRef = React$1.useRef(null);
 	React$1.useEffect(() => () => {
 		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);

package/dist/components/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":["React"],"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,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,IACF;CAEA,QAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,SACF;YAPF;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,CAAA;GACR,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"stepper.js","names":["React"],"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. */\n  decreaseLabel: string\n  /** Accessible label for the increment button. */\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,\n      increaseLabel,\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,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,eACA,iBAEF,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,IACF;CAEA,QAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,SACF;YAPF;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,CAAA;GACR,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/dist/components/table.cjs

@@ -0,0 +1,147 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_skeleton = require("./skeleton.cjs");
+let _epilot_spark_icons = require("@epilot/spark-icons");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/table.tsx
+const TableContext = react.createContext({
+	sort: null,
+	stickyHeader: false
+});
+const TableRowContext = react.createContext({ skeleton: false });
+const rowHeight = "h-[calc(var(--spark-layout-gap)*10)]";
+function nextSort(current, key) {
+	if (current?.key !== key) return {
+		key,
+		direction: "asc"
+	};
+	if (current.direction === "asc") return {
+		key,
+		direction: "desc"
+	};
+	return null;
+}
+function Table({ children, className, containerProps, onSortChange, sort = null, stickyHeader = false, ...props }) {
+	const { className: containerClassName, ...container } = containerProps ?? {};
+	const scrollRegion = container["aria-label"] != null;
+	const context = react.useMemo(() => ({
+		sort,
+		onSortChange,
+		stickyHeader
+	}), [
+		sort,
+		onSortChange,
+		stickyHeader
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "table-container",
+		role: scrollRegion ? "region" : void 0,
+		tabIndex: scrollRegion ? 0 : void 0,
+		className: (0, cnfast.cn)("relative w-full overflow-x-auto", scrollRegion && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", containerClassName),
+		...container,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			"data-slot": "table",
+			className: (0, cnfast.cn)("w-full border-separate border-spacing-0 text-sm text-gray-12", className),
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContext.Provider, {
+				value: context,
+				children
+			})
+		})
+	});
+}
+function TableHeader(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+		"data-slot": "table-header",
+		...props
+	});
+}
+function TableBody(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+		"data-slot": "table-body",
+		...props
+	});
+}
+function TableRow({ className, onClick, onKeyDown, selected, skeleton, ...props }) {
+	const interactive = !skeleton && onClick != null;
+	const rowContext = react.useMemo(() => ({ skeleton: skeleton ?? false }), [skeleton]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.target !== event.currentTarget) return;
+		if (!interactive || event.defaultPrevented) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		if (event.key === " ") event.preventDefault();
+		event.currentTarget.click();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRowContext.Provider, {
+		value: rowContext,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			"data-slot": "table-row",
+			"data-selected": selected ? "" : void 0,
+			"aria-hidden": skeleton ? true : void 0,
+			tabIndex: interactive ? 0 : void 0,
+			onClick: interactive ? onClick : void 0,
+			onKeyDown: handleKeyDown,
+			className: (0, cnfast.cn)("[&:last-child>td]:border-b-0", selected && !skeleton && "bg-spark-a3", interactive && [
+				"cursor-pointer transition-colors duration-150 touch-target-table-row motion-reduce:transition-none",
+				"hover:bg-spark-a3 focus-visible:bg-spark-a3",
+				"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus"
+			], className),
+			...props
+		})
+	});
+}
+function TableHead({ align = "start", children, className, sortKey, ...props }) {
+	const { onSortChange, sort, stickyHeader } = react.useContext(TableContext);
+	const direction = sortKey != null && sort?.key === sortKey ? sort.direction : void 0;
+	const Indicator = !direction ? _epilot_spark_icons.SwapVert : direction === "asc" ? _epilot_spark_icons.ArrowUpward : _epilot_spark_icons.ArrowDownward;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+		"data-slot": "table-head",
+		"aria-sort": sortKey == null ? void 0 : direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+		className: (0, cnfast.cn)("border-b border-gray-a6 px-3 text-left align-middle text-xs font-medium text-gray-11", rowHeight, align === "end" && "text-right", stickyHeader && "sticky top-0 z-10 bg-gray-2", className),
+		...props,
+		children: sortKey == null ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"data-slot": "table-head-sort",
+			onClick: () => onSortChange?.(nextSort(sort, sortKey)),
+			className: (0, cnfast.cn)("touch-target -mx-1 inline-flex min-h-[1.5rem] cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 text-left transition-colors [--spark-icon-size:1rem] hover:text-gray-12 motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", align === "end" && "flex-row-reverse"),
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Indicator, { className: (0, cnfast.cn)(!direction && "text-gray-a9") })]
+		})
+	});
+}
+function TableCell({ align = "start", children, className, ...props }) {
+	const { skeleton } = react.useContext(TableRowContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		"data-slot": "table-cell",
+		className: (0, cnfast.cn)("border-b border-gray-a6 px-3 align-middle", rowHeight, align === "end" && "text-right tabular-nums", className),
+		...props,
+		children: skeleton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-4 w-2/3" }) : children
+	});
+}
+function TableStatus({ children, className, colSpan, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+		"data-slot": "table-status",
+		className,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+			"data-slot": "table-status-cell",
+			colSpan,
+			className: "px-3 py-3 [&:not(:has(>*))]:py-6 [&:not(:has(>*))]:text-center",
+			children
+		})
+	});
+}
+//#endregion
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.TableStatus = TableStatus;
+
+//# sourceMappingURL=table.cjs.map

package/dist/components/table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.cjs","names":["React","SwapVert","ArrowUpward","ArrowDownward","Skeleton"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward, SwapVert } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype SortDirection = 'asc' | 'desc'\n\ninterface TableSort {\n  key: string\n  direction: SortDirection\n}\n\ninterface TableContextValue {\n  sort: TableSort | null\n  onSortChange?: (sort: TableSort | null) => void\n  stickyHeader: boolean\n}\n\nconst TableContext = React.createContext<TableContextValue>({\n  sort: null,\n  stickyHeader: false,\n})\n\nconst TableRowContext = React.createContext<{ skeleton: boolean }>({\n  skeleton: false,\n})\n\n// Reads --spark-layout-gap like the collection primitives, so a nested <Theme spacing>\n// re-resolves it against the nearest <Theme> scope (an [[data-spacing=…]_&] variant would\n// match any ancestor, not the nearest). height, not min-height, which is inert on table boxes.\nconst rowHeight = 'h-[calc(var(--spark-layout-gap)*10)]'\n\n// A column the table isn't sorted by starts at asc; the sorted one steps asc → desc → off.\nfunction nextSort(current: TableSort | null, key: string): TableSort | null {\n  if (current?.key !== key) return { key, direction: 'asc' }\n  if (current.direction === 'asc') return { key, direction: 'desc' }\n  return null\n}\n\ninterface TableProps extends React.ComponentProps<'table'> {\n  stickyHeader?: boolean\n  /** Controlled only — the table never reorders rows; sort app-side and pass the result back. */\n  sort?: TableSort | null\n  onSortChange?: (sort: TableSort | null) => void\n  /** Spread onto the scroll wrapper; an `aria-label` here also makes it a focusable region. */\n  containerProps?: React.ComponentProps<'div'>\n}\n\nfunction Table({\n  children,\n  className,\n  containerProps,\n  onSortChange,\n  sort = null,\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const { className: containerClassName, ...container } = containerProps ?? {}\n  // A scrolling box only reaches the keyboard once it is focusable, and a focusable box\n  // has to say what it holds (WCAG 2.1.1 / 4.1.2) — so the label is what turns it on.\n  const scrollRegion = container['aria-label'] != null\n\n  const context = React.useMemo(\n    () => ({ sort, onSortChange, stickyHeader }),\n    [sort, onSortChange, stickyHeader],\n  )\n\n  return (\n    <div\n      data-slot=\"table-container\"\n      role={scrollRegion ? 'region' : undefined}\n      tabIndex={scrollRegion ? 0 : undefined}\n      className={cn(\n        'relative w-full overflow-x-auto',\n        // inset outline, not a ring: ring-offset paints outside the box and this box clips.\n        scrollRegion &&\n          'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n        containerClassName,\n      )}\n      {...container}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\n          // border-separate, not collapse: under collapse Chromium drops the border of a\n          // sticky <th>, so every rule lives on the cells instead.\n          'w-full border-separate border-spacing-0 text-sm text-gray-12',\n          className,\n        )}\n        {...props}\n      >\n        <TableContext.Provider value={context}>\n          {children}\n        </TableContext.Provider>\n      </table>\n    </div>\n  )\n}\n\nfunction TableHeader(props: React.ComponentProps<'thead'>) {\n  return <thead data-slot=\"table-header\" {...props} />\n}\n\nfunction TableBody(props: React.ComponentProps<'tbody'>) {\n  return <tbody data-slot=\"table-body\" {...props} />\n}\n\ninterface TableRowProps extends React.ComponentProps<'tr'> {\n  selected?: boolean\n  skeleton?: boolean\n}\n\nfunction TableRow({\n  className,\n  onClick,\n  onKeyDown,\n  selected,\n  skeleton,\n  ...props\n}: TableRowProps) {\n  // A skeleton row is a decorative placeholder: never focusable, never clickable, even if\n  // the caller passes a handler while the data loads (ListItem precedent).\n  const interactive = !skeleton && onClick != null\n\n  const rowContext = React.useMemo(\n    () => ({ skeleton: skeleton ?? false }),\n    [skeleton],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    onKeyDown?.(event)\n    // a key pressed inside a nested button, link or input belongs to that control\n    if (event.target !== event.currentTarget) return\n    if (!interactive || event.defaultPrevented) return\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    // Space would scroll the page.\n    if (event.key === ' ') event.preventDefault()\n    event.currentTarget.click()\n  }\n\n  return (\n    <TableRowContext.Provider value={rowContext}>\n      <tr\n        data-slot=\"table-row\"\n        data-selected={selected ? '' : undefined}\n        aria-hidden={skeleton ? true : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          '[&:last-child>td]:border-b-0',\n          selected && !skeleton && 'bg-spark-a3',\n          interactive && [\n            'cursor-pointer transition-colors duration-150 touch-target-table-row motion-reduce:transition-none',\n            'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n            // the inset recipe: a ring-offset would be clipped by the scroll container.\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n          ],\n          className,\n        )}\n        {...props}\n      />\n    </TableRowContext.Provider>\n  )\n}\n\n// `align` shadows the deprecated presentational HTML attribute of the same name, which\n// is why the native one is omitted rather than widened.\ninterface TableHeadProps extends Omit<React.ComponentProps<'th'>, 'align'> {\n  /** Pair with the matching `TableCell align` so the column lines up. */\n  align?: 'start' | 'end'\n  /** Presence turns the header into a sort button with an indicator and `aria-sort`. */\n  sortKey?: string\n}\n\nfunction TableHead({\n  align = 'start',\n  children,\n  className,\n  sortKey,\n  ...props\n}: TableHeadProps) {\n  const { onSortChange, sort, stickyHeader } = React.useContext(TableContext)\n  const active = sortKey != null && sort?.key === sortKey\n  const direction = active ? sort.direction : undefined\n  const Indicator = !direction\n    ? SwapVert\n    : direction === 'asc'\n      ? ArrowUpward\n      : ArrowDownward\n\n  return (\n    <th\n      data-slot=\"table-head\"\n      aria-sort={\n        sortKey == null\n          ? undefined\n          : direction === 'asc'\n            ? 'ascending'\n            : direction === 'desc'\n              ? 'descending'\n              : 'none'\n      }\n      className={cn(\n        'border-b border-gray-a6 px-3 text-left align-middle text-xs font-medium text-gray-11',\n        rowHeight,\n        align === 'end' && 'text-right',\n        // opaque fill, so rows scrolling under a sticky header stay hidden; override via\n        // className when the table sits on a non-default surface.\n        stickyHeader && 'sticky top-0 z-10 bg-gray-2',\n        className,\n      )}\n      {...props}\n    >\n      {sortKey == null ? (\n        children\n      ) : (\n        // min-h is a HARD 24px floor (WCAG 2.5.8): unlike h-*, it must not shrink\n        // with the scaling knob.\n        <button\n          type=\"button\"\n          data-slot=\"table-head-sort\"\n          onClick={() => onSortChange?.(nextSort(sort, sortKey))}\n          className={cn(\n            'touch-target -mx-1 inline-flex min-h-[1.5rem] cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 text-left transition-colors [--spark-icon-size:1rem] hover:text-gray-12 motion-reduce:transition-none',\n            // the inset recipe again: the first and the sticky header sit on the edge\n            // the scroll container clips.\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n            // indicator inboard, so the digits keep a clean alignment edge\n            align === 'end' && 'flex-row-reverse',\n          )}\n        >\n          {children}\n          <Indicator className={cn(!direction && 'text-gray-a9')} />\n        </button>\n      )}\n    </th>\n  )\n}\n\n// `align` shadows the deprecated presentational HTML attribute of the same name, which\n// is why the native one is omitted rather than widened.\ninterface TableCellProps extends Omit<React.ComponentProps<'td'>, 'align'> {\n  align?: 'start' | 'end'\n}\n\nfunction TableCell({\n  align = 'start',\n  children,\n  className,\n  ...props\n}: TableCellProps) {\n  const { skeleton } = React.useContext(TableRowContext)\n\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        'border-b border-gray-a6 px-3 align-middle',\n        rowHeight,\n        align === 'end' && 'text-right tabular-nums',\n        className,\n      )}\n      {...props}\n    >\n      {skeleton ? <Skeleton className=\"h-4 w-2/3\" /> : children}\n    </td>\n  )\n}\n\ninterface TableStatusProps extends React.ComponentProps<'tr'> {\n  colSpan: number\n}\n\nfunction TableStatus({\n  children,\n  className,\n  colSpan,\n  ...props\n}: TableStatusProps) {\n  return (\n    <tr data-slot=\"table-status\" className={className} {...props}>\n      <td\n        data-slot=\"table-status-cell\"\n        colSpan={colSpan}\n        // an element child (EmptyState, Callout) owns its own alignment and most of its\n        // vertical rhythm; the cell only keeps it off the header rule. Bare text takes both.\n        className=\"px-3 py-3 [&:not(:has(>*))]:py-6 [&:not(:has(>*))]:text-center\"\n      >\n        {children}\n      </td>\n    </tr>\n  )\n}\n\nexport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableStatus,\n}\nexport type {\n  SortDirection,\n  TableCellProps,\n  TableHeadProps,\n  TableProps,\n  TableRowProps,\n  TableSort,\n  TableStatusProps,\n}\n"],"mappings":"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"}

package/dist/components/table.d.cts

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/table.d.ts
+type SortDirection = 'asc' | 'desc';
+interface TableSort {
+  key: string;
+  direction: SortDirection;
+}
+interface TableProps extends React$1.ComponentProps<'table'> {
+  stickyHeader?: boolean;
+  /** Controlled only — the table never reorders rows; sort app-side and pass the result back. */
+  sort?: TableSort | null;
+  onSortChange?: (sort: TableSort | null) => void;
+  /** Spread onto the scroll wrapper; an `aria-label` here also makes it a focusable region. */
+  containerProps?: React$1.ComponentProps<'div'>;
+}
+declare function Table({
+  children,
+  className,
+  containerProps,
+  onSortChange,
+  sort,
+  stickyHeader,
+  ...props
+}: TableProps): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader(props: React$1.ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody(props: React$1.ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
+interface TableRowProps extends React$1.ComponentProps<'tr'> {
+  selected?: boolean;
+  skeleton?: boolean;
+}
+declare function TableRow({
+  className,
+  onClick,
+  onKeyDown,
+  selected,
+  skeleton,
+  ...props
+}: TableRowProps): import("react/jsx-runtime").JSX.Element;
+interface TableHeadProps extends Omit<React$1.ComponentProps<'th'>, 'align'> {
+  /** Pair with the matching `TableCell align` so the column lines up. */
+  align?: 'start' | 'end';
+  /** Presence turns the header into a sort button with an indicator and `aria-sort`. */
+  sortKey?: string;
+}
+declare function TableHead({
+  align,
+  children,
+  className,
+  sortKey,
+  ...props
+}: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+interface TableCellProps extends Omit<React$1.ComponentProps<'td'>, 'align'> {
+  align?: 'start' | 'end';
+}
+declare function TableCell({
+  align,
+  children,
+  className,
+  ...props
+}: TableCellProps): import("react/jsx-runtime").JSX.Element;
+interface TableStatusProps extends React$1.ComponentProps<'tr'> {
+  colSpan: number;
+}
+declare function TableStatus({
+  children,
+  className,
+  colSpan,
+  ...props
+}: TableStatusProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type SortDirection, Table, TableBody, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSort, TableStatus, type TableStatusProps };
+//# sourceMappingURL=table.d.cts.map

package/dist/components/table.d.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/table.d.ts
+type SortDirection = 'asc' | 'desc';
+interface TableSort {
+  key: string;
+  direction: SortDirection;
+}
+interface TableProps extends React$1.ComponentProps<'table'> {
+  stickyHeader?: boolean;
+  /** Controlled only — the table never reorders rows; sort app-side and pass the result back. */
+  sort?: TableSort | null;
+  onSortChange?: (sort: TableSort | null) => void;
+  /** Spread onto the scroll wrapper; an `aria-label` here also makes it a focusable region. */
+  containerProps?: React$1.ComponentProps<'div'>;
+}
+declare function Table({
+  children,
+  className,
+  containerProps,
+  onSortChange,
+  sort,
+  stickyHeader,
+  ...props
+}: TableProps): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader(props: React$1.ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody(props: React$1.ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
+interface TableRowProps extends React$1.ComponentProps<'tr'> {
+  selected?: boolean;
+  skeleton?: boolean;
+}
+declare function TableRow({
+  className,
+  onClick,
+  onKeyDown,
+  selected,
+  skeleton,
+  ...props
+}: TableRowProps): import("react/jsx-runtime").JSX.Element;
+interface TableHeadProps extends Omit<React$1.ComponentProps<'th'>, 'align'> {
+  /** Pair with the matching `TableCell align` so the column lines up. */
+  align?: 'start' | 'end';
+  /** Presence turns the header into a sort button with an indicator and `aria-sort`. */
+  sortKey?: string;
+}
+declare function TableHead({
+  align,
+  children,
+  className,
+  sortKey,
+  ...props
+}: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+interface TableCellProps extends Omit<React$1.ComponentProps<'td'>, 'align'> {
+  align?: 'start' | 'end';
+}
+declare function TableCell({
+  align,
+  children,
+  className,
+  ...props
+}: TableCellProps): import("react/jsx-runtime").JSX.Element;
+interface TableStatusProps extends React$1.ComponentProps<'tr'> {
+  colSpan: number;
+}
+declare function TableStatus({
+  children,
+  className,
+  colSpan,
+  ...props
+}: TableStatusProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { type SortDirection, Table, TableBody, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSort, TableStatus, type TableStatusProps };
+//# sourceMappingURL=table.d.ts.map