@epilot/spark-ui 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/components/segmented-control.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
+import { u as SparkStyle } from "../theme-types-BKlzRiyw.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";

package/dist/components/select.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_field = require("./field.cjs");
-const require_input_box_variants = require("../input-box-variants-ZCtgs-1S.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");
@@ -41,7 +41,7 @@ function SelectTrigger({ className, size = "default", variant, id: idProp, child
 		"data-slot": "select-trigger",
 		"data-size": size,
 		id,
-		className: (0, cnfast.cn)(TRIGGER_BASE, field ? "w-full" : "w-fit", !isGhost && TRIGGER_SIZE[size], require_input_box_variants.boxChrome[isGhost ? "ghost" : inputStyle][inputColor], className),
+		className: (0, cnfast.cn)(TRIGGER_BASE, field ? "w-full" : "w-fit", !isGhost && TRIGGER_SIZE[size], require_lib_input_box_variants.boxChrome[isGhost ? "ghost" : inputStyle][inputColor], className),
 		...props,
 		"aria-describedby": ariaDescribedBy,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Icon, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {

package/dist/components/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","MaterialSymbol"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-lg px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <MaterialSymbol\n            className=\"pointer-events-none text-[14px] text-gray-light\"\n            name=\"expand_more\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  >\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <MaterialSymbol className=\"text-[11px]\" name=\"check\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","MaterialSymbol"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-lg px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <MaterialSymbol\n            className=\"pointer-events-none text-[14px] text-gray-light\"\n            name=\"expand_more\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  >\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <MaterialSymbol className=\"text-[11px]\" name=\"check\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/components/select.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-BDdoRxXa.js";
+import { i as SparkInputStyle } from "../theme-types-BKlzRiyw.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/select.js

@@ -3,7 +3,7 @@
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import { useFieldControl } from "./field.js";
-import { n as boxChrome } from "../input-box-variants-DcajYXvo.js";
+import { boxChrome } from "../lib/input-box-variants.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/switch.cjs

@@ -1,14 +1,14 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-aJGBMT86.cjs");
-const require_accent_colors = require("../accent-colors-CjHCf8fH.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_switch = require("@base-ui/react/switch");
 let cnfast = require("cnfast");
 //#region src/components/switch.tsx
 function Switch({ className, styleVariant, color, size: _size, variant: _variant, ...props }) {
 	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
-	const dataAccentColor = color ? require_accent_colors.accentByColor[color] : void 0;
+	const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Root, {
 		"data-slot": "switch",
 		"data-style": dataStyle,

package/dist/components/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,sBAAAA,cAAc,SAAS,KAAA;AACvD,QACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,qGACA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,wHACA,gCACA,0DACD;GACD,CAAA;EACmB,CAAA"}
+{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;AACvD,QACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,qGACA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,wHACA,gCACA,0DACD;GACD,CAAA;EACmB,CAAA"}

package/dist/components/switch.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
+import { u as SparkStyle } from "../theme-types-BKlzRiyw.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 

package/dist/components/switch.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { t as accentByColor } from "../accent-colors-Ch2J0EEY.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/theme.cjs

@@ -1,6 +1,122 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("../theme-ClRJhexF.cjs");
-exports.Theme = require_theme.Theme;
-exports.useTheme = require_theme.useTheme;
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_lib_accent_theme = require("../lib/accent-theme.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let cnfast = require("cnfast");
+//#region src/components/theme.tsx
+const ThemeContext = react.createContext({});
+/** Merged theme values from enclosing `<Theme>` providers. */
+function useTheme() {
+	return react.useContext(ThemeContext);
+}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+const Theme = react.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
+	const parent = useTheme();
+	const value = react.useMemo(() => ({
+		accentColor: accentColor ?? parent.accentColor,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		radius: radius ?? parent.radius,
+		scaling: scaling ?? parent.scaling,
+		spacing: spacing ?? parent.spacing,
+		styleVariant: styleVariant ?? parent.styleVariant,
+		highContrast: highContrast ?? parent.highContrast,
+		labelPosition: labelPosition ?? parent.labelPosition,
+		inputStyle: inputStyle ?? parent.inputStyle,
+		inputColor: inputColor ?? parent.inputColor,
+		cardVariant: cardVariant ?? parent.cardVariant,
+		cardColor: cardColor ?? parent.cardColor,
+		appearance: appearance ?? parent.appearance
+	}), [
+		accentColor,
+		neutralColor,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor,
+		appearance,
+		parent
+	]);
+	const scopeId = react.useId();
+	const accent = react.useMemo(() => {
+		const empty = {
+			inlineVars: {},
+			css: "",
+			scoped: false
+		};
+		if (!accentColor) return empty;
+		const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
+			const i = decl.indexOf(":");
+			return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
+		}));
+		try {
+			const hex = require_lib_accent_theme.CURATED_ACCENTS[accentColor] ?? accentColor;
+			if (value.appearance) return {
+				inlineVars: toVars(require_lib_accent_theme.accentSparkVars(require_lib_accent_theme.generateAccentScale(hex, value.appearance))),
+				css: "",
+				scoped: false
+			};
+			const light = require_lib_accent_theme.accentSparkVars(require_lib_accent_theme.generateAccentScale(hex, "light"));
+			const dark = require_lib_accent_theme.accentSparkVars(require_lib_accent_theme.generateAccentScale(hex, "dark"));
+			const sel = `[data-spark-scope="${scopeId}"]`;
+			return {
+				inlineVars: {},
+				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				scoped: true
+			};
+		} catch (error) {
+			console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
+			return empty;
+		}
+	}, [
+		accentColor,
+		value.appearance,
+		scopeId
+	]);
+	const resolvedNeutralColor = neutralColor === "auto" ? require_lib_accent_theme.getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
+	const element = (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: (0, _base_ui_react_merge_props.mergeProps)({
+			className: (0, cnfast.cn)("spark-theme", appearance, className),
+			"data-neutral-color": resolvedNeutralColor,
+			"data-radius": radius,
+			"data-scaling": scaling,
+			"data-spacing": spacing,
+			"data-style": styleVariant,
+			"data-high-contrast": highContrast ? "" : void 0,
+			"data-label-position": labelPosition,
+			"data-input-style": inputStyle,
+			"data-input-color": inputColor,
+			"data-card-variant": cardVariant,
+			"data-card-color": cardColor === "accent" ? "accent" : void 0,
+			"data-spark-scope": accent.scoped ? scopeId : void 0,
+			style: {
+				...accent.inlineVars,
+				...style
+			},
+			children
+		}, rest)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ThemeContext.Provider, {
+		value,
+		children: [accent.css ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: accent.css }) : null, element]
+	});
+});
+//#endregion
+exports.Theme = Theme;
+exports.useTheme = useTheme;
+
+//# sourceMappingURL=theme.cjs.map

package/dist/components/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","names":["React","CURATED_ACCENTS","accentSparkVars","generateAccentScale","getMatchingNeutral"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  generateAccentScale,\n  getMatchingNeutral,\n  type Appearance,\n} from '../lib/accent-theme'\nimport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor=\"auto\"`). */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n      }),\n      [\n        accentColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        css: '',\n        scoped: false,\n      }\n      if (!accentColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const hex = CURATED_ACCENTS[accentColor] ?? accentColor\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          return {\n            inlineVars: toVars(\n              accentSparkVars(generateAccentScale(hex, value.appearance)),\n            ),\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        const light = accentSparkVars(generateAccentScale(hex, 'light'))\n        const dark = accentSparkVars(generateAccentScale(hex, 'dark'))\n        const sel = `[data-spark-scope=\"${scopeId}\"]`\n        const css = `${sel}{${light.join('')}}:is(.dark,.dark-theme) ${sel}{${dark.join('')}}`\n        return { inlineVars: {} as React.CSSProperties, css, scoped: true }\n      } catch (error) {\n        // A bad accentColor must not throw through render — fall back to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [accentColor, value.appearance, scopeId])\n\n    // 'auto' pairs a neutral with the effective accent (Radix's grayColor=\"auto\").\n    const resolvedNeutralColor =\n      neutralColor === 'auto'\n        ? getMatchingNeutral(value.accentColor ?? '#005EB4')\n        : neutralColor\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          'data-neutral-color': resolvedNeutralColor,\n          'data-radius': radius,\n          'data-scaling': scaling,\n          'data-spacing': spacing,\n          'data-style': styleVariant,\n          'data-high-contrast': highContrast ? '' : undefined,\n          'data-label-position': labelPosition,\n          'data-input-style': inputStyle,\n          'data-input-color': inputColor,\n          'data-card-variant': cardVariant,\n          'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: { ...accent.inlineVars, ...style },\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    return (\n      <ThemeContext.Provider value={value}>\n        {accent.css ? <style>{accent.css}</style> : null}\n        {element}\n      </ThemeContext.Provider>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,eAAeA,MAAM,cAA0B,EAAE,CAAC;;AAGxD,SAAgB,WAAuB;AACrC,QAAOA,MAAM,WAAW,aAAa;;;AAOvC,MAAa,QAAQA,MAAM,WACzB,SAAS,MACP,EACE,aACA,cACA,QACA,SACA,SACA,cACA,cACA,eACA,YACA,YACA,aACA,WACA,YACA,QACA,WACA,OACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,SAAS,UAAU;CAEzB,MAAM,QAAQA,MAAM,eACX;EACL,aAAa,eAAe,OAAO;EACnC,cAAc,gBAAgB,OAAO;EACrC,QAAQ,UAAU,OAAO;EACzB,SAAS,WAAW,OAAO;EAC3B,SAAS,WAAW,OAAO;EAC3B,cAAc,gBAAgB,OAAO;EACrC,cAAc,gBAAgB,OAAO;EACrC,eAAe,iBAAiB,OAAO;EACvC,YAAY,cAAc,OAAO;EACjC,YAAY,cAAc,OAAO;EACjC,aAAa,eAAe,OAAO;EACnC,WAAW,aAAa,OAAO;EAC/B,YAAY,cAAc,OAAO;EAClC,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,UAAUA,MAAM,OAAO;CAE7B,MAAM,SAASA,MAAM,cAAc;EACjC,MAAM,QAAQ;GACZ,YAAY,EAAE;GACd,KAAK;GACL,QAAQ;GACT;AACD,MAAI,CAAC,YAAa,QAAO;EAEzB,MAAM,UAAU,UACd,OAAO,YACL,MACG,QAAQ,SAAS,KAAK,SAAS,IAAI,CAAC,CACpC,KAAK,SAAS;GACb,MAAM,IAAI,KAAK,QAAQ,IAAI;AAC3B,UAAO,CACL,KAAK,MAAM,GAAG,EAAE,CAAC,MAAM,EACvB,KACG,MAAM,IAAI,EAAE,CACZ,QAAQ,MAAM,GAAG,CACjB,MAAM,CACV;IACD,CACL;AAEH,MAAI;GACF,MAAM,MAAMC,yBAAAA,gBAAgB,gBAAgB;AAI5C,OAAI,MAAM,WACR,QAAO;IACL,YAAY,OACVC,yBAAAA,gBAAgBC,yBAAAA,oBAAoB,KAAK,MAAM,WAAW,CAAC,CAC5D;IACD,KAAK;IACL,QAAQ;IACT;GAMH,MAAM,QAAQD,yBAAAA,gBAAgBC,yBAAAA,oBAAoB,KAAK,QAAQ,CAAC;GAChE,MAAM,OAAOD,yBAAAA,gBAAgBC,yBAAAA,oBAAoB,KAAK,OAAO,CAAC;GAC9D,MAAM,MAAM,sBAAsB,QAAQ;AAE1C,UAAO;IAAE,YAAY,EAAE;IAAyB,KAAA,GADjC,IAAI,GAAG,MAAM,KAAK,GAAG,CAAC,0BAA0B,IAAI,GAAG,KAAK,KAAK,GAAG,CAAC;IAC/B,QAAQ;IAAM;WAC5D,OAAO;AAEd,WAAQ,KACN,yCAAyC,YAAY,KACrD,MACD;AACD,UAAO;;IAER;EAAC;EAAa,MAAM;EAAY;EAAQ,CAAC;CAG5C,MAAM,uBACJ,iBAAiB,SACbC,yBAAAA,mBAAmB,MAAM,eAAe,UAAU,GAClD;CAEN,MAAM,WAAA,GAAA,0BAAA,WAAoB;EACxB,gBAAgB;EAChB;EACA;EACA,QAAA,GAAA,2BAAA,YACE;GACE,YAAA,GAAA,OAAA,IAAc,eAAe,YAAY,UAAU;GACnD,sBAAsB;GACtB,eAAe;GACf,gBAAgB;GAChB,gBAAgB;GAChB,cAAc;GACd,sBAAsB,eAAe,KAAK,KAAA;GAC1C,uBAAuB;GACvB,oBAAoB;GACpB,oBAAoB;GACpB,qBAAqB;GACrB,mBAAmB,cAAc,WAAW,WAAW,KAAA;GACvD,oBAAoB,OAAO,SAAS,UAAU,KAAA;GAC9C,OAAO;IAAE,GAAG,OAAO;IAAY,GAAG;IAAO;GACzC;GACD,EACD,KACD;EACF,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,aAAa,UAAd;EAA8B;YAA9B,CACG,OAAO,MAAM,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAA,UAAQ,OAAO,KAAY,CAAA,GAAG,MAC3C,QACqB;;EAG7B"}

package/dist/components/theme.d.cts

@@ -1,12 +1,10 @@
 "use client";
 
 import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
+import { Appearance } from "../lib/accent-theme.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 
-//#region src/lib/accent-theme.d.ts
-type Appearance = 'light' | 'dark';
-//#endregion
 //#region src/components/theme.d.ts
 interface ThemeValue {
   /** Curated accent name or a custom hex. */

package/dist/components/theme.d.ts

@@ -1,12 +1,10 @@
 "use client";
 
-import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BDdoRxXa.js";
+import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BKlzRiyw.js";
+import { Appearance } from "../lib/accent-theme.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 
-//#region src/lib/accent-theme.d.ts
-type Appearance = 'light' | 'dark';
-//#endregion
 //#region src/components/theme.d.ts
 interface ThemeValue {
   /** Curated accent name or a custom hex. */

package/dist/components/theme.js

@@ -1,4 +1,118 @@
 "use client";
 "use client";
-import { n as useTheme, t as Theme } from "../theme-8PDO9E0S.js";
+import { cn } from "../utils/cn.js";
+import { CURATED_ACCENTS, accentSparkVars, generateAccentScale, getMatchingNeutral } from "../lib/accent-theme.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/theme.tsx
+const ThemeContext = React$1.createContext({});
+/** Merged theme values from enclosing `<Theme>` providers. */
+function useTheme() {
+	return React$1.useContext(ThemeContext);
+}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+const Theme = React$1.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
+	const parent = useTheme();
+	const value = React$1.useMemo(() => ({
+		accentColor: accentColor ?? parent.accentColor,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		radius: radius ?? parent.radius,
+		scaling: scaling ?? parent.scaling,
+		spacing: spacing ?? parent.spacing,
+		styleVariant: styleVariant ?? parent.styleVariant,
+		highContrast: highContrast ?? parent.highContrast,
+		labelPosition: labelPosition ?? parent.labelPosition,
+		inputStyle: inputStyle ?? parent.inputStyle,
+		inputColor: inputColor ?? parent.inputColor,
+		cardVariant: cardVariant ?? parent.cardVariant,
+		cardColor: cardColor ?? parent.cardColor,
+		appearance: appearance ?? parent.appearance
+	}), [
+		accentColor,
+		neutralColor,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor,
+		appearance,
+		parent
+	]);
+	const scopeId = React$1.useId();
+	const accent = React$1.useMemo(() => {
+		const empty = {
+			inlineVars: {},
+			css: "",
+			scoped: false
+		};
+		if (!accentColor) return empty;
+		const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
+			const i = decl.indexOf(":");
+			return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
+		}));
+		try {
+			const hex = CURATED_ACCENTS[accentColor] ?? accentColor;
+			if (value.appearance) return {
+				inlineVars: toVars(accentSparkVars(generateAccentScale(hex, value.appearance))),
+				css: "",
+				scoped: false
+			};
+			const light = accentSparkVars(generateAccentScale(hex, "light"));
+			const dark = accentSparkVars(generateAccentScale(hex, "dark"));
+			const sel = `[data-spark-scope="${scopeId}"]`;
+			return {
+				inlineVars: {},
+				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				scoped: true
+			};
+		} catch (error) {
+			console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
+			return empty;
+		}
+	}, [
+		accentColor,
+		value.appearance,
+		scopeId
+	]);
+	const resolvedNeutralColor = neutralColor === "auto" ? getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: cn("spark-theme", appearance, className),
+			"data-neutral-color": resolvedNeutralColor,
+			"data-radius": radius,
+			"data-scaling": scaling,
+			"data-spacing": spacing,
+			"data-style": styleVariant,
+			"data-high-contrast": highContrast ? "" : void 0,
+			"data-label-position": labelPosition,
+			"data-input-style": inputStyle,
+			"data-input-color": inputColor,
+			"data-card-variant": cardVariant,
+			"data-card-color": cardColor === "accent" ? "accent" : void 0,
+			"data-spark-scope": accent.scoped ? scopeId : void 0,
+			style: {
+				...accent.inlineVars,
+				...style
+			},
+			children
+		}, rest)
+	});
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value,
+		children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+	});
+});
+//#endregion
 export { Theme, useTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/components/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["React"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  generateAccentScale,\n  getMatchingNeutral,\n  type Appearance,\n} from '../lib/accent-theme'\nimport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor=\"auto\"`). */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n      }),\n      [\n        accentColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        css: '',\n        scoped: false,\n      }\n      if (!accentColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const hex = CURATED_ACCENTS[accentColor] ?? accentColor\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          return {\n            inlineVars: toVars(\n              accentSparkVars(generateAccentScale(hex, value.appearance)),\n            ),\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        const light = accentSparkVars(generateAccentScale(hex, 'light'))\n        const dark = accentSparkVars(generateAccentScale(hex, 'dark'))\n        const sel = `[data-spark-scope=\"${scopeId}\"]`\n        const css = `${sel}{${light.join('')}}:is(.dark,.dark-theme) ${sel}{${dark.join('')}}`\n        return { inlineVars: {} as React.CSSProperties, css, scoped: true }\n      } catch (error) {\n        // A bad accentColor must not throw through render — fall back to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [accentColor, value.appearance, scopeId])\n\n    // 'auto' pairs a neutral with the effective accent (Radix's grayColor=\"auto\").\n    const resolvedNeutralColor =\n      neutralColor === 'auto'\n        ? getMatchingNeutral(value.accentColor ?? '#005EB4')\n        : neutralColor\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          'data-neutral-color': resolvedNeutralColor,\n          'data-radius': radius,\n          'data-scaling': scaling,\n          'data-spacing': spacing,\n          'data-style': styleVariant,\n          'data-high-contrast': highContrast ? '' : undefined,\n          'data-label-position': labelPosition,\n          'data-input-style': inputStyle,\n          'data-input-color': inputColor,\n          'data-card-variant': cardVariant,\n          'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: { ...accent.inlineVars, ...style },\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    return (\n      <ThemeContext.Provider value={value}>\n        {accent.css ? <style>{accent.css}</style> : null}\n        {element}\n      </ThemeContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}