@epilot/spark-ui 0.25.1 → 0.26.0

package/dist/components/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","KeyboardArrowDown","Close","Check"],"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 dark:bg-gray-3 [[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 dark:bg-gray-3 [&_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 dark:bg-gray-3 [&_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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"}
+{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","KeyboardArrowDown","Close","PortalTheme","Check"],"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'\nimport { PortalTheme } from './theme'\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      <PortalTheme>\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 dark:bg-gray-3 [[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      </PortalTheme>\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 dark:bg-gray-3 [&_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 dark:bg-gray-3 [&_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/select.js

@@ -1,8 +1,9 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import { boxChrome } from "../lib/input-box-variants.js";
+import { PortalTheme } from "./theme.js";
 import { useFieldControl } from "./field.js";
+import { boxChrome } from "../lib/input-box-variants.js";
 import "react";
 import { Check, Close, KeyboardArrowDown } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -76,7 +77,7 @@ function SelectClear({ className, children, onClick, ...props }) {
 function SelectContent({ className, children, align = "start", alignOffset, side, sideOffset = 4, alignItemWithTrigger = false, container, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Portal, {
 		container,
-		children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		children: /* @__PURE__ */ jsx(PortalTheme, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 			align,
 			alignItemWithTrigger,
 			alignOffset,
@@ -93,7 +94,7 @@ function SelectContent({ className, children, align = "start", alignOffset, side
 					/* @__PURE__ */ jsx(SelectScrollDownButton, {})
 				]
 			})
-		})
+		}) })
 	});
 }
 function SelectLabel({ className, ...props }) {

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, 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 dark:bg-gray-3 [[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 dark:bg-gray-3 [&_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 dark:bg-gray-3 [&_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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"}
+{"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'\nimport { PortalTheme } from './theme'\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      <PortalTheme>\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 dark:bg-gray-3 [[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      </PortalTheme>\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 dark:bg-gray-3 [&_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 dark:bg-gray-3 [&_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/separator.cjs

@@ -6,26 +6,44 @@ react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let cn = require("cn");
 //#region src/components/separator.tsx
-const Separator = react.forwardRef(({ className, orientation = "horizontal", decorative, children, ...props }, ref) => {
+const dots = "bg-[radial-gradient(circle_closest-side,var(--neutral-a8)_98%,transparent)] bg-repeat-space forced-colors:bg-none forced-colors:border-dotted";
+const dottedHorizontal = `h-[2px] bg-size-[6px_2px] forced-colors:border-t ${dots}`;
+const dottedVertical = `w-[2px] bg-size-[2px_6px] forced-colors:border-l ${dots}`;
+const plainLine = {
+	solid: {
+		horizontal: "border-gray h-px w-full border-t",
+		vertical: "border-gray h-full w-px border-l"
+	},
+	dotted: {
+		horizontal: `w-full ${dottedHorizontal}`,
+		vertical: `h-full ${dottedVertical}`
+	}
+};
+const Separator = react.forwardRef(({ className, orientation = "horizontal", decorative, variant = "solid", children, ...props }, ref) => {
 	const isDecorative = decorative ?? !children;
-	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, cn.cn)("flex items-center gap-4", className),
-		"data-orientation": orientation,
-		ref,
-		role: isDecorative ? "none" : "separator",
-		...props,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-px flex-1 border-t border-gray" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "shrink-0 text-sm text-gray-light",
-				children
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-px flex-1 border-t border-gray" })
-		]
-	});
+	if (children) {
+		const labelLine = variant === "dotted" ? (0, cn.cn)("flex-1", dottedHorizontal) : "h-px flex-1 border-t border-gray";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, cn.cn)("flex items-center gap-4", className),
+			"data-orientation": orientation,
+			"data-variant": variant,
+			ref,
+			role: isDecorative ? "none" : "separator",
+			...props,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: labelLine }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0 text-sm text-gray-light",
+					children
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: labelLine })
+			]
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cn.cn)("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
+		className: (0, cn.cn)("shrink-0", plainLine[variant][orientation], className),
 		"data-orientation": orientation,
+		"data-variant": variant,
 		ref,
 		role: isDecorative ? "none" : "separator",
 		...props

package/dist/components/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-gray',\n          orientation === 'horizontal'\n            ? 'h-px w-full border-t'\n            : 'h-full w-px border-l',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GACnD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;GAAe,CAAA;GACnE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;EAChD;;CAIT,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,SACF;EACA,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n  variant?: 'solid' | 'dotted'\n}\n\n// A gradient, not border-dotted: its 1px dots touch and read as a solid line.\n// Forced colors drops background images, so fall back to a dotted border there.\n// a8, not border-gray's a6: sparse dots read lighter than a solid line.\nconst dots =\n  'bg-[radial-gradient(circle_closest-side,var(--neutral-a8)_98%,transparent)] bg-repeat-space forced-colors:bg-none forced-colors:border-dotted'\nconst dottedHorizontal = `h-[2px] bg-size-[6px_2px] forced-colors:border-t ${dots}`\nconst dottedVertical = `w-[2px] bg-size-[2px_6px] forced-colors:border-l ${dots}`\n\nconst plainLine = {\n  solid: {\n    horizontal: 'border-gray h-px w-full border-t',\n    vertical: 'border-gray h-full w-px border-l',\n  },\n  dotted: {\n    horizontal: `w-full ${dottedHorizontal}`,\n    vertical: `h-full ${dottedVertical}`,\n  },\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    {\n      className,\n      orientation = 'horizontal',\n      decorative,\n      variant = 'solid',\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      const labelLine =\n        variant === 'dotted'\n          ? cn('flex-1', dottedHorizontal)\n          : 'h-px flex-1 border-t border-gray'\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          data-variant={variant}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className={labelLine} />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className={labelLine} />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn('shrink-0', plainLine[variant][orientation], className)}\n        data-orientation={orientation}\n        data-variant={variant}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAYA,MAAM,OACJ;AACF,MAAM,mBAAmB,oDAAoD;AAC7E,MAAM,iBAAiB,oDAAoD;AAE3E,MAAM,YAAY;CAChB,OAAO;EACL,YAAY;EACZ,UAAU;CACZ;CACA,QAAQ;EACN,YAAY,UAAU;EACtB,UAAU,UAAU;CACtB;AACF;AAEA,MAAM,YAAYA,MAAM,YAEpB,EACE,WACA,cAAc,cACd,YACA,UAAU,SACV,UACA,GAAG,SAEL,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UAAU;EACZ,MAAM,YACJ,YAAY,YAAA,GAAA,GAAA,IACL,UAAU,gBAAgB,IAC7B;EACN,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;GAClD,oBAAkB;GAClB,gBAAc;GACT;GACL,MAAM,eAAe,SAAS;GAC9B,GAAI;aANN;IAQE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAW,UAAY,CAAA;IAC5B,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;KAAoC;IAAe,CAAA;IACnE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAW,UAAY,CAAA;GACzB;;CAET;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,YAAY,UAAU,SAAS,cAAc,SAAS;EACpE,oBAAkB;EAClB,gBAAc;EACT;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/components/separator.d.cts

@@ -6,6 +6,7 @@ import * as React$1 from "react";
 interface SeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
   orientation?: 'horizontal' | 'vertical';
   decorative?: boolean;
+  variant?: 'solid' | 'dotted';
 }
 declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/separator.d.ts

@@ -6,6 +6,7 @@ import * as React$1 from "react";
 interface SeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
   orientation?: 'horizontal' | 'vertical';
   decorative?: boolean;
+  variant?: 'solid' | 'dotted';
 }
 declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/separator.js

@@ -3,26 +3,44 @@ import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/separator.tsx
-const Separator = React$1.forwardRef(({ className, orientation = "horizontal", decorative, children, ...props }, ref) => {
+const dots = "bg-[radial-gradient(circle_closest-side,var(--neutral-a8)_98%,transparent)] bg-repeat-space forced-colors:bg-none forced-colors:border-dotted";
+const dottedHorizontal = `h-[2px] bg-size-[6px_2px] forced-colors:border-t ${dots}`;
+const dottedVertical = `w-[2px] bg-size-[2px_6px] forced-colors:border-l ${dots}`;
+const plainLine = {
+	solid: {
+		horizontal: "border-gray h-px w-full border-t",
+		vertical: "border-gray h-full w-px border-l"
+	},
+	dotted: {
+		horizontal: `w-full ${dottedHorizontal}`,
+		vertical: `h-full ${dottedVertical}`
+	}
+};
+const Separator = React$1.forwardRef(({ className, orientation = "horizontal", decorative, variant = "solid", children, ...props }, ref) => {
 	const isDecorative = decorative ?? !children;
-	if (children) return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-4", className),
-		"data-orientation": orientation,
-		ref,
-		role: isDecorative ? "none" : "separator",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 border-t border-gray" }),
-			/* @__PURE__ */ jsx("span", {
-				className: "shrink-0 text-sm text-gray-light",
-				children
-			}),
-			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 border-t border-gray" })
-		]
-	});
+	if (children) {
+		const labelLine = variant === "dotted" ? cn("flex-1", dottedHorizontal) : "h-px flex-1 border-t border-gray";
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-4", className),
+			"data-orientation": orientation,
+			"data-variant": variant,
+			ref,
+			role: isDecorative ? "none" : "separator",
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("div", { className: labelLine }),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-sm text-gray-light",
+					children
+				}),
+				/* @__PURE__ */ jsx("div", { className: labelLine })
+			]
+		});
+	}
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
+		className: cn("shrink-0", plainLine[variant][orientation], className),
 		"data-orientation": orientation,
+		"data-variant": variant,
 		ref,
 		role: isDecorative ? "none" : "separator",
 		...props

package/dist/components/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-gray',\n          orientation === 'horizontal'\n            ? 'h-px w-full border-t'\n            : 'h-full w-px border-l',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;AAQA,MAAM,YAAYA,QAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UACF,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,SAAS;EAClD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,oBAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GACnD,oBAAC,QAAD;IAAM,WAAU;IAAoC;GAAe,CAAA;GACnE,oBAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;EAChD;;CAIT,OACE,oBAAC,OAAD;EACE,WAAW,GACT,wBACA,gBAAgB,eACZ,yBACA,wBACJ,SACF;EACA,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"separator.js","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n  variant?: 'solid' | 'dotted'\n}\n\n// A gradient, not border-dotted: its 1px dots touch and read as a solid line.\n// Forced colors drops background images, so fall back to a dotted border there.\n// a8, not border-gray's a6: sparse dots read lighter than a solid line.\nconst dots =\n  'bg-[radial-gradient(circle_closest-side,var(--neutral-a8)_98%,transparent)] bg-repeat-space forced-colors:bg-none forced-colors:border-dotted'\nconst dottedHorizontal = `h-[2px] bg-size-[6px_2px] forced-colors:border-t ${dots}`\nconst dottedVertical = `w-[2px] bg-size-[2px_6px] forced-colors:border-l ${dots}`\n\nconst plainLine = {\n  solid: {\n    horizontal: 'border-gray h-px w-full border-t',\n    vertical: 'border-gray h-full w-px border-l',\n  },\n  dotted: {\n    horizontal: `w-full ${dottedHorizontal}`,\n    vertical: `h-full ${dottedVertical}`,\n  },\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    {\n      className,\n      orientation = 'horizontal',\n      decorative,\n      variant = 'solid',\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      const labelLine =\n        variant === 'dotted'\n          ? cn('flex-1', dottedHorizontal)\n          : 'h-px flex-1 border-t border-gray'\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          data-variant={variant}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className={labelLine} />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className={labelLine} />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn('shrink-0', plainLine[variant][orientation], className)}\n        data-orientation={orientation}\n        data-variant={variant}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;AAYA,MAAM,OACJ;AACF,MAAM,mBAAmB,oDAAoD;AAC7E,MAAM,iBAAiB,oDAAoD;AAE3E,MAAM,YAAY;CAChB,OAAO;EACL,YAAY;EACZ,UAAU;CACZ;CACA,QAAQ;EACN,YAAY,UAAU;EACtB,UAAU,UAAU;CACtB;AACF;AAEA,MAAM,YAAYA,QAAM,YAEpB,EACE,WACA,cAAc,cACd,YACA,UAAU,SACV,UACA,GAAG,SAEL,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UAAU;EACZ,MAAM,YACJ,YAAY,WACR,GAAG,UAAU,gBAAgB,IAC7B;EACN,OACE,qBAAC,OAAD;GACE,WAAW,GAAG,2BAA2B,SAAS;GAClD,oBAAkB;GAClB,gBAAc;GACT;GACL,MAAM,eAAe,SAAS;GAC9B,GAAI;aANN;IAQE,oBAAC,OAAD,EAAK,WAAW,UAAY,CAAA;IAC5B,oBAAC,QAAD;KAAM,WAAU;KAAoC;IAAe,CAAA;IACnE,oBAAC,OAAD,EAAK,WAAW,UAAY,CAAA;GACzB;;CAET;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,YAAY,UAAU,SAAS,cAAc,SAAS;EACpE,oBAAkB;EAClB,gBAAc;EACT;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/components/sheet.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
+const require_components_theme = require("./theme.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _epilot_spark_icons = require("@epilot/spark-icons");
@@ -35,10 +36,11 @@ function SheetClose({ className, children, ...props }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Close, { className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]" })
 	});
 }
-function SheetPortal(props) {
+function SheetPortal({ children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Portal, {
 		"data-slot": "sheet-portal",
-		...props
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_theme.PortalTheme, { children })
 	});
 }
 function SheetOverlay({ className, ...props }) {

package/dist/components/sheet.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n  props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <SheetPrimitive.Close\n        data-slot=\"sheet-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Close>\n    )\n  }\n\n  return (\n    <SheetPrimitive.Close\n      data-slot=\"sheet-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </SheetPrimitive.Close>\n  )\n}\n\nfunction SheetPortal(\n  props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n  typeof SheetPrimitive.Popup\n> {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n  side = 'right',\n  className,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPrimitive.Popup\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(\n        'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n        'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n        'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n        'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n        'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-lg font-semibold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,GAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close","PortalTheme"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { PortalTheme } from './theme'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n  props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <SheetPrimitive.Close\n        data-slot=\"sheet-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Close>\n    )\n  }\n\n  return (\n    <SheetPrimitive.Close\n      data-slot=\"sheet-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </SheetPrimitive.Close>\n  )\n}\n\nfunction SheetPortal({\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return (\n    <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props}>\n      <PortalTheme>{children}</PortalTheme>\n    </SheetPrimitive.Portal>\n  )\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n  typeof SheetPrimitive.Popup\n> {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n  side = 'right',\n  className,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPrimitive.Popup\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(\n        'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n        'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n        'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n        'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n        'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-lg font-semibold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;;AAOA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YAAY,EACnB,UACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;YAClD,iBAAA,GAAA,kBAAA,KAACG,yBAAAA,aAAD,EAAc,SAAsB,CAAA;CACf,CAAA;AAE3B;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACH,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,GAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/sheet.d.cts

@@ -11,7 +11,10 @@ declare function SheetClose({
   children,
   ...props
 }: React$1.ComponentProps<typeof Dialog.Close>): import("react/jsx-runtime").JSX.Element;
-declare function SheetPortal(props: React$1.ComponentProps<typeof Dialog.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function SheetPortal({
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Dialog.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function SheetOverlay({
   className,
   ...props

package/dist/components/sheet.d.ts

@@ -11,7 +11,10 @@ declare function SheetClose({
   children,
   ...props
 }: React$1.ComponentProps<typeof Dialog.Close>): import("react/jsx-runtime").JSX.Element;
-declare function SheetPortal(props: React$1.ComponentProps<typeof Dialog.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function SheetPortal({
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Dialog.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function SheetOverlay({
   className,
   ...props

package/dist/components/sheet.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
+import { PortalTheme } from "./theme.js";
 import "react";
 import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
@@ -32,10 +33,11 @@ function SheetClose({ className, children, ...props }) {
 		children: /* @__PURE__ */ jsx(Close, { className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]" })
 	});
 }
-function SheetPortal(props) {
+function SheetPortal({ children, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Portal, {
 		"data-slot": "sheet-portal",
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx(PortalTheme, { children })
 	});
 }
 function SheetOverlay({ className, ...props }) {

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n  props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <SheetPrimitive.Close\n        data-slot=\"sheet-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Close>\n    )\n  }\n\n  return (\n    <SheetPrimitive.Close\n      data-slot=\"sheet-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </SheetPrimitive.Close>\n  )\n}\n\nfunction SheetPortal(\n  props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n  typeof SheetPrimitive.Popup\n> {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n  side = 'right',\n  className,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPrimitive.Popup\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(\n        'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n        'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n        'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n        'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n        'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-lg font-semibold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { PortalTheme } from './theme'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n  props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <SheetPrimitive.Close\n        data-slot=\"sheet-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Close>\n    )\n  }\n\n  return (\n    <SheetPrimitive.Close\n      data-slot=\"sheet-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </SheetPrimitive.Close>\n  )\n}\n\nfunction SheetPortal({\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return (\n    <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props}>\n      <PortalTheme>{children}</PortalTheme>\n    </SheetPrimitive.Portal>\n  )\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n  typeof SheetPrimitive.Popup\n> {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n  side = 'right',\n  className,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPrimitive.Popup\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(\n        'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n        'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n        'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n        'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n        'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-lg font-semibold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;AAOA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YAAY,EACnB,UACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;YAClD,oBAAC,aAAD,EAAc,SAAsB,CAAA;CACf,CAAA;AAE3B;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/switch.js

@@ -1,6 +1,6 @@
 "use client";
-import { accentByColor } from "../lib/accent-colors.js";
 import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.tsx

package/dist/components/textarea.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";