@epilot/spark-ui 0.11.0 → 0.12.0

package/dist/components/popover.d.ts

@@ -13,7 +13,7 @@ declare function PopoverAnchor({
   render,
   ...props
 }: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'>;
+type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'> & Pick<Popover$1.Portal.Props, 'container'>;
 declare function PopoverContent({
   className,
   align,
@@ -21,6 +21,7 @@ declare function PopoverContent({
   side,
   alignOffset,
   anchor,
+  container,
   ...props
 }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/popover.js

@@ -34,21 +34,24 @@ function PopoverAnchor({ render, ...props }) {
 		props: mergeProps({ "data-slot": "popover-anchor" }, props)
 	});
 }
-function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, ...props }) {
+function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, container, ...props }) {
 	const context = React$1.useContext(PopoverAnchorContext);
-	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
-		align,
-		alignOffset,
-		anchor: anchor ?? context?.anchor ?? void 0,
-		className: "isolate z-50",
-		side,
-		sideOffset,
-		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
-			"data-slot": "popover-content",
-			className: cn("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "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", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
-			...props
+	return /* @__PURE__ */ jsx(Popover$1.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+			align,
+			alignOffset,
+			anchor: anchor ?? context?.anchor ?? void 0,
+			className: "isolate z-50",
+			side,
+			sideOffset,
+			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+				"data-slot": "popover-content",
+				className: cn("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "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", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+				...props
+			})
 		})
-	}) });
+	});
 }
 //#endregion
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  >\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\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            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAQA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,QAAQ,UAAU,SAAS,UAAU,KAAA;EACrC,WAAU;EACJ;EACM;YAEZ,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  > &\n  Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  container,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\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            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AASA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB;EAAoC;YAClC,oBAACA,UAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACJ;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

package/dist/components/progress.cjs

@@ -22,7 +22,7 @@ const Progress = react.forwardRef(({ className, value, max = 100, size = "defaul
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "h-full rounded-full bg-spark-9 transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-spark-9 transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,OAAA,IACE,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,OAAA,IACE,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/progress.js

@@ -19,7 +19,7 @@ const Progress = React$1.forwardRef(({ className, value, max = 100, size = "defa
 		role: "progressbar",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "h-full rounded-full bg-spark-9 transition-all duration-300",
+			className: "h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300",
 			style: { width: `${percentage}%` }
 		})
 	});

package/dist/components/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-spark-9 transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"progress.js","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-gray-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-(--spark-style-bg,var(--spark-9)) transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;AACN;AAEA,MAAM,WAAWA,QAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,WAAW,GACT,kDACA,YAAY,OACZ,SACF;EACK;EACL,MAAK;EACL,GAAI;YAEJ,oBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG;EAClC,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/components/radio-card-group.cjs

@@ -13,7 +13,7 @@ const ARROW_STEP = {
 	ArrowUp: -1,
 	ArrowLeft: -1
 };
-const RadioCardGroup = react.forwardRef(({ value: valueProp, defaultValue, onValueChange, disabled, name, className, children, ...props }, ref) => {
+const RadioCardGroup = react.forwardRef(({ value: valueProp, defaultValue, onValueChange, disabled, name, gap = 2, className, style, children, ...props }, ref) => {
 	const generatedName = react.useId();
 	const [internalValue, setInternalValue] = react.useState(defaultValue);
 	const isControlled = valueProp !== void 0;
@@ -57,7 +57,11 @@ const RadioCardGroup = react.forwardRef(({ value: valueProp, defaultValue, onVal
 			ref,
 			role: "radiogroup",
 			onKeyDown: handleKeyDown,
-			className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
+			className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]", className),
+			style: {
+				"--radio-card-group-gap-steps": gap,
+				...style
+			},
 			...props,
 			children
 		})

package/dist/components/radio-card-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card-group.cjs","names":["React"],"sources":["../../src/components/radio-card-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface RadioCardGroupContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  name: string\n}\n\nconst RadioCardGroupContext = React.createContext<\n  RadioCardGroupContextValue | undefined\n>(undefined)\n\nconst ARROW_STEP: Record<string, 1 | -1> = {\n  ArrowDown: 1,\n  ArrowRight: 1,\n  ArrowUp: -1,\n  ArrowLeft: -1,\n}\n\ninterface RadioCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Optional name used for ARIA grouping. Defaults to a generated id. */\n  name?: string\n}\n\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      disabled,\n      name,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedName = React.useId()\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const handleValueChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const ctx = React.useMemo<RadioCardGroupContextValue>(\n      () => ({\n        value,\n        onValueChange: handleValueChange,\n        disabled,\n        name: name ?? generatedName,\n      }),\n      [value, handleValueChange, disabled, name, generatedName],\n    )\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const step = ARROW_STEP[event.key]\n      if (step === undefined && event.key !== 'Home' && event.key !== 'End')\n        return\n      const radios = [\n        ...event.currentTarget.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not(:disabled)',\n        ),\n      ]\n      if (radios.length === 0) return\n      event.preventDefault()\n\n      let next = 0\n      if (event.key === 'End') {\n        next = radios.length - 1\n      } else if (step !== undefined) {\n        const current = radios.indexOf(\n          document.activeElement as HTMLButtonElement,\n        )\n        if (current !== -1) {\n          next = (current + step + radios.length) % radios.length\n        }\n      }\n      const target = radios[next]\n      if (!target) return\n      target.focus()\n      target.click()\n    }\n\n    return (\n      <RadioCardGroupContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioCardGroupContext.Provider>\n    )\n  },\n)\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\ninterface RadioCardGroupItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  value: string\n}\n\nconst RadioCardGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioCardGroupItemProps\n>(({ value, className, children, disabled, onClick, ...props }, ref) => {\n  const ctx = React.useContext(RadioCardGroupContext)\n  if (!ctx) {\n    throw new Error('RadioCardGroupItem must be used within a RadioCardGroup')\n  }\n\n  const checked = ctx.value === value\n  const isDisabled = disabled ?? ctx.disabled\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      data-state={checked ? 'checked' : 'unchecked'}\n      tabIndex={checked || ctx.value === undefined ? 0 : -1}\n      disabled={isDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && !isDisabled) {\n          ctx.onValueChange(value)\n        }\n      }}\n      className={cn(\n        'h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border border-accent bg-base-accent-soft text-accent'\n          : 'border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n\nRadioCardGroupItem.displayName = 'RadioCardGroupItem'\n\nexport { RadioCardGroup, RadioCardGroupItem }\nexport type { RadioCardGroupProps, RadioCardGroupItemProps }\n"],"mappings":";;;;;;;;AAUA,MAAM,wBAAwBA,MAAM,cAElC,KAAA,CAAS;AAEX,MAAM,aAAqC;CACzC,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAWA,MAAM,iBAAiBA,MAAM,YAEzB,EACE,OAAO,WACP,cACA,eACA,UACA,MACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,MAAM,MAAM;CAClC,MAAM,CAAC,eAAe,oBAAoBA,MAAM,SAE9C,YAAY;CACd,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,QAAQ,eAAe,YAAY;CAEzC,MAAM,oBAAoBA,MAAM,aAC7B,SAAiB;EAChB,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,MAAMA,MAAM,eACT;EACL;EACA,eAAe;EACf;EACA,MAAM,QAAQ;CAChB,IACA;EAAC;EAAO;EAAmB;EAAU;EAAM;CAAa,CAC1D;CAEA,MAAM,iBAAiB,UAA+C;EACpE,MAAM,OAAO,WAAW,MAAM;EAC9B,IAAI,SAAS,KAAA,KAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAC9D;EACF,MAAM,SAAS,CACb,GAAG,MAAM,cAAc,iBACrB,iCACF,CACF;EACA,IAAI,OAAO,WAAW,GAAG;EACzB,MAAM,eAAe;EAErB,IAAI,OAAO;EACX,IAAI,MAAM,QAAQ,OAChB,OAAO,OAAO,SAAS;OAClB,IAAI,SAAS,KAAA,GAAW;GAC7B,MAAM,UAAU,OAAO,QACrB,SAAS,aACX;GACA,IAAI,YAAY,IACd,QAAQ,UAAU,OAAO,OAAO,UAAU,OAAO;EAErD;EACA,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QAAQ;EACb,OAAO,MAAM;EACb,OAAO,MAAM;CACf;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,YAAA,GAAA,OAAA,IACE,uDACA,SACF;GACA,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC,CACF;AAEA,eAAe,cAAc;AAS7B,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,SAAS,QAAQ;CACtE,MAAM,MAAMA,MAAM,WAAW,qBAAqB;CAClD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,UAAU,IAAI,UAAU;CAC9B,MAAM,aAAa,YAAY,IAAI;CAEnC,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,UAAU,YAAY;EAClC,UAAU,WAAW,IAAI,UAAU,KAAA,IAAY,IAAI;EACnD,UAAU;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,IAAI,cAAc,KAAK;EAE3B;EACA,YAAA,GAAA,OAAA,IACE,qMACA,UACI,yDACA,0EACJ,SACF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"radio-card-group.cjs","names":["React"],"sources":["../../src/components/radio-card-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface RadioCardGroupContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  name: string\n}\n\nconst RadioCardGroupContext = React.createContext<\n  RadioCardGroupContextValue | undefined\n>(undefined)\n\nconst ARROW_STEP: Record<string, 1 | -1> = {\n  ArrowDown: 1,\n  ArrowRight: 1,\n  ArrowUp: -1,\n  ArrowLeft: -1,\n}\n\ninterface RadioCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Optional name used for ARIA grouping. Defaults to a generated id. */\n  name?: string\n  /** How many `--spark-layout-gap` units apart each card sits. */\n  gap?: number\n}\n\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      disabled,\n      name,\n      gap = 2,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedName = React.useId()\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const handleValueChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const ctx = React.useMemo<RadioCardGroupContextValue>(\n      () => ({\n        value,\n        onValueChange: handleValueChange,\n        disabled,\n        name: name ?? generatedName,\n      }),\n      [value, handleValueChange, disabled, name, generatedName],\n    )\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const step = ARROW_STEP[event.key]\n      if (step === undefined && event.key !== 'Home' && event.key !== 'End')\n        return\n      const radios = [\n        ...event.currentTarget.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not(:disabled)',\n        ),\n      ]\n      if (radios.length === 0) return\n      event.preventDefault()\n\n      let next = 0\n      if (event.key === 'End') {\n        next = radios.length - 1\n      } else if (step !== undefined) {\n        const current = radios.indexOf(\n          document.activeElement as HTMLButtonElement,\n        )\n        if (current !== -1) {\n          next = (current + step + radios.length) % radios.length\n        }\n      }\n      const target = radios[next]\n      if (!target) return\n      target.focus()\n      target.click()\n    }\n\n    return (\n      <RadioCardGroupContext.Provider value={ctx}>\n        {/* oxlint-disable-next-line jsx-a11y/interactive-supports-focus -- radiogroup is a composite: the tab stop belongs on the roving radios, not the container */}\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]',\n            className,\n          )}\n          style={\n            {\n              '--radio-card-group-gap-steps': gap,\n              ...style,\n            } as React.CSSProperties\n          }\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioCardGroupContext.Provider>\n    )\n  },\n)\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\ninterface RadioCardGroupItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  value: string\n}\n\nconst RadioCardGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioCardGroupItemProps\n>(({ value, className, children, disabled, onClick, ...props }, ref) => {\n  const ctx = React.useContext(RadioCardGroupContext)\n  if (!ctx) {\n    throw new Error('RadioCardGroupItem must be used within a RadioCardGroup')\n  }\n\n  const checked = ctx.value === value\n  const isDisabled = disabled ?? ctx.disabled\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      data-state={checked ? 'checked' : 'unchecked'}\n      tabIndex={checked || ctx.value === undefined ? 0 : -1}\n      disabled={isDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && !isDisabled) {\n          ctx.onValueChange(value)\n        }\n      }}\n      className={cn(\n        'h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border border-accent bg-base-accent-soft text-accent'\n          : 'border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n\nRadioCardGroupItem.displayName = 'RadioCardGroupItem'\n\nexport { RadioCardGroup, RadioCardGroupItem }\nexport type { RadioCardGroupProps, RadioCardGroupItemProps }\n"],"mappings":";;;;;;;;AAUA,MAAM,wBAAwBA,MAAM,cAElC,KAAA,CAAS;AAEX,MAAM,aAAqC;CACzC,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAaA,MAAM,iBAAiBA,MAAM,YAEzB,EACE,OAAO,WACP,cACA,eACA,UACA,MACA,MAAM,GACN,WACA,OACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,MAAM,MAAM;CAClC,MAAM,CAAC,eAAe,oBAAoBA,MAAM,SAE9C,YAAY;CACd,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,QAAQ,eAAe,YAAY;CAEzC,MAAM,oBAAoBA,MAAM,aAC7B,SAAiB;EAChB,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,MAAMA,MAAM,eACT;EACL;EACA,eAAe;EACf;EACA,MAAM,QAAQ;CAChB,IACA;EAAC;EAAO;EAAmB;EAAU;EAAM;CAAa,CAC1D;CAEA,MAAM,iBAAiB,UAA+C;EACpE,MAAM,OAAO,WAAW,MAAM;EAC9B,IAAI,SAAS,KAAA,KAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAC9D;EACF,MAAM,SAAS,CACb,GAAG,MAAM,cAAc,iBACrB,iCACF,CACF;EACA,IAAI,OAAO,WAAW,GAAG;EACzB,MAAM,eAAe;EAErB,IAAI,OAAO;EACX,IAAI,MAAM,QAAQ,OAChB,OAAO,OAAO,SAAS;OAClB,IAAI,SAAS,KAAA,GAAW;GAC7B,MAAM,UAAU,OAAO,QACrB,SAAS,aACX;GACA,IAAI,YAAY,IACd,QAAQ,UAAU,OAAO,OAAO,UAAU,OAAO;EAErD;EACA,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QAAQ;EACb,OAAO,MAAM;EACb,OAAO,MAAM;CACf;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO;YAErC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,YAAA,GAAA,OAAA,IACE,yFACA,SACF;GACA,OACE;IACE,gCAAgC;IAChC,GAAG;GACL;GAEF,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC,CACF;AAEA,eAAe,cAAc;AAS7B,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,SAAS,QAAQ;CACtE,MAAM,MAAMA,MAAM,WAAW,qBAAqB;CAClD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,UAAU,IAAI,UAAU;CAC9B,MAAM,aAAa,YAAY,IAAI;CAEnC,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,UAAU,YAAY;EAClC,UAAU,WAAW,IAAI,UAAU,KAAA,IAAY,IAAI;EACnD,UAAU;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,IAAI,cAAc,KAAK;EAE3B;EACA,YAAA,GAAA,OAAA,IACE,qMACA,UACI,yDACA,0EACJ,SACF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/radio-card-group.d.cts

@@ -10,6 +10,8 @@ interface RadioCardGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   /** Optional name used for ARIA grouping. Defaults to a generated id. */
   name?: string;
+  /** How many `--spark-layout-gap` units apart each card sits. */
+  gap?: number;
 }
 declare const RadioCardGroup: React$1.ForwardRefExoticComponent<RadioCardGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 interface RadioCardGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {

package/dist/components/radio-card-group.d.ts

@@ -10,6 +10,8 @@ interface RadioCardGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   /** Optional name used for ARIA grouping. Defaults to a generated id. */
   name?: string;
+  /** How many `--spark-layout-gap` units apart each card sits. */
+  gap?: number;
 }
 declare const RadioCardGroup: React$1.ForwardRefExoticComponent<RadioCardGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 interface RadioCardGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {

package/dist/components/radio-card-group.js

@@ -10,7 +10,7 @@ const ARROW_STEP = {
 	ArrowUp: -1,
 	ArrowLeft: -1
 };
-const RadioCardGroup = React$1.forwardRef(({ value: valueProp, defaultValue, onValueChange, disabled, name, className, children, ...props }, ref) => {
+const RadioCardGroup = React$1.forwardRef(({ value: valueProp, defaultValue, onValueChange, disabled, name, gap = 2, className, style, children, ...props }, ref) => {
 	const generatedName = React$1.useId();
 	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
 	const isControlled = valueProp !== void 0;
@@ -54,7 +54,11 @@ const RadioCardGroup = React$1.forwardRef(({ value: valueProp, defaultValue, onV
 			ref,
 			role: "radiogroup",
 			onKeyDown: handleKeyDown,
-			className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
+			className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]", className),
+			style: {
+				"--radio-card-group-gap-steps": gap,
+				...style
+			},
 			...props,
 			children
 		})

package/dist/components/radio-card-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card-group.js","names":["React"],"sources":["../../src/components/radio-card-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface RadioCardGroupContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  name: string\n}\n\nconst RadioCardGroupContext = React.createContext<\n  RadioCardGroupContextValue | undefined\n>(undefined)\n\nconst ARROW_STEP: Record<string, 1 | -1> = {\n  ArrowDown: 1,\n  ArrowRight: 1,\n  ArrowUp: -1,\n  ArrowLeft: -1,\n}\n\ninterface RadioCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Optional name used for ARIA grouping. Defaults to a generated id. */\n  name?: string\n}\n\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      disabled,\n      name,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedName = React.useId()\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const handleValueChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const ctx = React.useMemo<RadioCardGroupContextValue>(\n      () => ({\n        value,\n        onValueChange: handleValueChange,\n        disabled,\n        name: name ?? generatedName,\n      }),\n      [value, handleValueChange, disabled, name, generatedName],\n    )\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const step = ARROW_STEP[event.key]\n      if (step === undefined && event.key !== 'Home' && event.key !== 'End')\n        return\n      const radios = [\n        ...event.currentTarget.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not(:disabled)',\n        ),\n      ]\n      if (radios.length === 0) return\n      event.preventDefault()\n\n      let next = 0\n      if (event.key === 'End') {\n        next = radios.length - 1\n      } else if (step !== undefined) {\n        const current = radios.indexOf(\n          document.activeElement as HTMLButtonElement,\n        )\n        if (current !== -1) {\n          next = (current + step + radios.length) % radios.length\n        }\n      }\n      const target = radios[next]\n      if (!target) return\n      target.focus()\n      target.click()\n    }\n\n    return (\n      <RadioCardGroupContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioCardGroupContext.Provider>\n    )\n  },\n)\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\ninterface RadioCardGroupItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  value: string\n}\n\nconst RadioCardGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioCardGroupItemProps\n>(({ value, className, children, disabled, onClick, ...props }, ref) => {\n  const ctx = React.useContext(RadioCardGroupContext)\n  if (!ctx) {\n    throw new Error('RadioCardGroupItem must be used within a RadioCardGroup')\n  }\n\n  const checked = ctx.value === value\n  const isDisabled = disabled ?? ctx.disabled\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      data-state={checked ? 'checked' : 'unchecked'}\n      tabIndex={checked || ctx.value === undefined ? 0 : -1}\n      disabled={isDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && !isDisabled) {\n          ctx.onValueChange(value)\n        }\n      }}\n      className={cn(\n        'h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border border-accent bg-base-accent-soft text-accent'\n          : 'border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n\nRadioCardGroupItem.displayName = 'RadioCardGroupItem'\n\nexport { RadioCardGroup, RadioCardGroupItem }\nexport type { RadioCardGroupProps, RadioCardGroupItemProps }\n"],"mappings":";;;;;AAUA,MAAM,wBAAwBA,QAAM,cAElC,KAAA,CAAS;AAEX,MAAM,aAAqC;CACzC,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAWA,MAAM,iBAAiBA,QAAM,YAEzB,EACE,OAAO,WACP,cACA,eACA,UACA,MACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAE9C,YAAY;CACd,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,QAAQ,eAAe,YAAY;CAEzC,MAAM,oBAAoBA,QAAM,aAC7B,SAAiB;EAChB,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,MAAMA,QAAM,eACT;EACL;EACA,eAAe;EACf;EACA,MAAM,QAAQ;CAChB,IACA;EAAC;EAAO;EAAmB;EAAU;EAAM;CAAa,CAC1D;CAEA,MAAM,iBAAiB,UAA+C;EACpE,MAAM,OAAO,WAAW,MAAM;EAC9B,IAAI,SAAS,KAAA,KAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAC9D;EACF,MAAM,SAAS,CACb,GAAG,MAAM,cAAc,iBACrB,iCACF,CACF;EACA,IAAI,OAAO,WAAW,GAAG;EACzB,MAAM,eAAe;EAErB,IAAI,OAAO;EACX,IAAI,MAAM,QAAQ,OAChB,OAAO,OAAO,SAAS;OAClB,IAAI,SAAS,KAAA,GAAW;GAC7B,MAAM,UAAU,OAAO,QACrB,SAAS,aACX;GACA,IAAI,YAAY,IACd,QAAQ,UAAU,OAAO,OAAO,UAAU,OAAO;EAErD;EACA,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QAAQ;EACb,OAAO,MAAM;EACb,OAAO,MAAM;CACf;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,WAAW,GACT,uDACA,SACF;GACA,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC,CACF;AAEA,eAAe,cAAc;AAS7B,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,SAAS,QAAQ;CACtE,MAAM,MAAMA,QAAM,WAAW,qBAAqB;CAClD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,UAAU,IAAI,UAAU;CAC9B,MAAM,aAAa,YAAY,IAAI;CAEnC,OACE,oBAAC,UAAD;EACO;EACL,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,UAAU,YAAY;EAClC,UAAU,WAAW,IAAI,UAAU,KAAA,IAAY,IAAI;EACnD,UAAU;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,IAAI,cAAc,KAAK;EAE3B;EACA,WAAW,GACT,qMACA,UACI,yDACA,0EACJ,SACF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"radio-card-group.js","names":["React"],"sources":["../../src/components/radio-card-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface RadioCardGroupContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  name: string\n}\n\nconst RadioCardGroupContext = React.createContext<\n  RadioCardGroupContextValue | undefined\n>(undefined)\n\nconst ARROW_STEP: Record<string, 1 | -1> = {\n  ArrowDown: 1,\n  ArrowRight: 1,\n  ArrowUp: -1,\n  ArrowLeft: -1,\n}\n\ninterface RadioCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Optional name used for ARIA grouping. Defaults to a generated id. */\n  name?: string\n  /** How many `--spark-layout-gap` units apart each card sits. */\n  gap?: number\n}\n\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      disabled,\n      name,\n      gap = 2,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedName = React.useId()\n    const [internalValue, setInternalValue] = React.useState<\n      string | undefined\n    >(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const handleValueChange = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const ctx = React.useMemo<RadioCardGroupContextValue>(\n      () => ({\n        value,\n        onValueChange: handleValueChange,\n        disabled,\n        name: name ?? generatedName,\n      }),\n      [value, handleValueChange, disabled, name, generatedName],\n    )\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const step = ARROW_STEP[event.key]\n      if (step === undefined && event.key !== 'Home' && event.key !== 'End')\n        return\n      const radios = [\n        ...event.currentTarget.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not(:disabled)',\n        ),\n      ]\n      if (radios.length === 0) return\n      event.preventDefault()\n\n      let next = 0\n      if (event.key === 'End') {\n        next = radios.length - 1\n      } else if (step !== undefined) {\n        const current = radios.indexOf(\n          document.activeElement as HTMLButtonElement,\n        )\n        if (current !== -1) {\n          next = (current + step + radios.length) % radios.length\n        }\n      }\n      const target = radios[next]\n      if (!target) return\n      target.focus()\n      target.click()\n    }\n\n    return (\n      <RadioCardGroupContext.Provider value={ctx}>\n        {/* oxlint-disable-next-line jsx-a11y/interactive-supports-focus -- radiogroup is a composite: the tab stop belongs on the roving radios, not the container */}\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          onKeyDown={handleKeyDown}\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*var(--radio-card-group-gap-steps,2))]',\n            className,\n          )}\n          style={\n            {\n              '--radio-card-group-gap-steps': gap,\n              ...style,\n            } as React.CSSProperties\n          }\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioCardGroupContext.Provider>\n    )\n  },\n)\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\ninterface RadioCardGroupItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value'\n> {\n  value: string\n}\n\nconst RadioCardGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioCardGroupItemProps\n>(({ value, className, children, disabled, onClick, ...props }, ref) => {\n  const ctx = React.useContext(RadioCardGroupContext)\n  if (!ctx) {\n    throw new Error('RadioCardGroupItem must be used within a RadioCardGroup')\n  }\n\n  const checked = ctx.value === value\n  const isDisabled = disabled ?? ctx.disabled\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked}\n      data-state={checked ? 'checked' : 'unchecked'}\n      tabIndex={checked || ctx.value === undefined ? 0 : -1}\n      disabled={isDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && !isDisabled) {\n          ctx.onValueChange(value)\n        }\n      }}\n      className={cn(\n        'h-12 w-full rounded-lg px-4 text-base font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        checked\n          ? 'border border-accent bg-base-accent-soft text-accent'\n          : 'border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n\nRadioCardGroupItem.displayName = 'RadioCardGroupItem'\n\nexport { RadioCardGroup, RadioCardGroupItem }\nexport type { RadioCardGroupProps, RadioCardGroupItemProps }\n"],"mappings":";;;;;AAUA,MAAM,wBAAwBA,QAAM,cAElC,KAAA,CAAS;AAEX,MAAM,aAAqC;CACzC,WAAW;CACX,YAAY;CACZ,SAAS;CACT,WAAW;AACb;AAaA,MAAM,iBAAiBA,QAAM,YAEzB,EACE,OAAO,WACP,cACA,eACA,UACA,MACA,MAAM,GACN,WACA,OACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAE9C,YAAY;CACd,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,QAAQ,eAAe,YAAY;CAEzC,MAAM,oBAAoBA,QAAM,aAC7B,SAAiB;EAChB,IAAI,CAAC,cAAc,iBAAiB,IAAI;EACxC,gBAAgB,IAAI;CACtB,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,MAAM,MAAMA,QAAM,eACT;EACL;EACA,eAAe;EACf;EACA,MAAM,QAAQ;CAChB,IACA;EAAC;EAAO;EAAmB;EAAU;EAAM;CAAa,CAC1D;CAEA,MAAM,iBAAiB,UAA+C;EACpE,MAAM,OAAO,WAAW,MAAM;EAC9B,IAAI,SAAS,KAAA,KAAa,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAC9D;EACF,MAAM,SAAS,CACb,GAAG,MAAM,cAAc,iBACrB,iCACF,CACF;EACA,IAAI,OAAO,WAAW,GAAG;EACzB,MAAM,eAAe;EAErB,IAAI,OAAO;EACX,IAAI,MAAM,QAAQ,OAChB,OAAO,OAAO,SAAS;OAClB,IAAI,SAAS,KAAA,GAAW;GAC7B,MAAM,UAAU,OAAO,QACrB,SAAS,aACX;GACA,IAAI,YAAY,IACd,QAAQ,UAAU,OAAO,OAAO,UAAU,OAAO;EAErD;EACA,MAAM,SAAS,OAAO;EACtB,IAAI,CAAC,QAAQ;EACb,OAAO,MAAM;EACb,OAAO,MAAM;CACf;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YAErC,oBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,WAAW,GACT,yFACA,SACF;GACA,OACE;IACE,gCAAgC;IAChC,GAAG;GACL;GAEF,GAAI;GAEH;EACE,CAAA;CACyB,CAAA;AAEpC,CACF;AAEA,eAAe,cAAc;AAS7B,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,SAAS,QAAQ;CACtE,MAAM,MAAMA,QAAM,WAAW,qBAAqB;CAClD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,MAAM,UAAU,IAAI,UAAU;CAC9B,MAAM,aAAa,YAAY,IAAI;CAEnC,OACE,oBAAC,UAAD;EACO;EACL,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,UAAU,YAAY;EAClC,UAAU,WAAW,IAAI,UAAU,KAAA,IAAY,IAAI;EACnD,UAAU;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,oBAAoB,CAAC,YAC9B,IAAI,cAAc,KAAK;EAE3B;EACA,WAAW,GACT,qMACA,UACI,yDACA,0EACJ,SACF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/radio.cjs

@@ -9,12 +9,16 @@ let _base_ui_react_radio = require("@base-ui/react/radio");
 let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
 let cnfast = require("cnfast");
 //#region src/components/radio.tsx
-function RadioGroup({ className, styleVariant, color, ...props }) {
+function RadioGroup({ className, styleVariant, color, gap = 3, style, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio_group.RadioGroup, {
 		"data-slot": "radio-group",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		className: (0, cnfast.cn)("grid gap-[calc(var(--spark-layout-gap)*3)]", className),
+		className: (0, cnfast.cn)("grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
+		style: {
+			"--radio-group-gap-steps": gap,
+			...style
+		},
 		...props
 	});
 }

package/dist/components/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn('grid gap-[calc(var(--spark-layout-gap)*3)]', className)}\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors',\n        \"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        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAcA,SAAS,WAAW,EAClB,WACA,cACA,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,OAAA,IAAc,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,oIACA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.cjs","names":["RadioGroupPrimitive","accentByColor","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors',\n        \"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        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,YAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAOnD,YAAA,GAAA,OAAA,IACE,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,MAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IAGE,oIACA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/radio.d.cts

@@ -1,20 +1,24 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
 import * as React$1 from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 
 //#region src/components/radio.d.ts
 type SparkRadioColor = 'accent' | 'neutral' | 'danger';
-type RadioGroupProps = React$1.ComponentProps<typeof RadioGroup$1> & {
+type RadioGroupProps = Omit<React$1.ComponentProps<typeof RadioGroup$1>, 'style'> & {
   styleVariant?: SparkStyle;
-  color?: SparkRadioColor;
+  color?: SparkRadioColor; /** How many `--spark-layout-gap` units apart each radio sits. */
+  gap?: number;
+  style?: React$1.CSSProperties;
 };
 declare function RadioGroup({
   className,
   styleVariant,
   color,
+  gap,
+  style,
   ...props
 }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 type RadioProps = React$1.ComponentProps<typeof Radio$1.Root> & {

package/dist/components/radio.d.ts

@@ -1,20 +1,24 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
 import * as React$1 from "react";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 
 //#region src/components/radio.d.ts
 type SparkRadioColor = 'accent' | 'neutral' | 'danger';
-type RadioGroupProps = React$1.ComponentProps<typeof RadioGroup$1> & {
+type RadioGroupProps = Omit<React$1.ComponentProps<typeof RadioGroup$1>, 'style'> & {
   styleVariant?: SparkStyle;
-  color?: SparkRadioColor;
+  color?: SparkRadioColor; /** How many `--spark-layout-gap` units apart each radio sits. */
+  gap?: number;
+  style?: React$1.CSSProperties;
 };
 declare function RadioGroup({
   className,
   styleVariant,
   color,
+  gap,
+  style,
   ...props
 }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 type RadioProps = React$1.ComponentProps<typeof Radio$1.Root> & {

package/dist/components/radio.js

@@ -6,12 +6,16 @@ import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 //#region src/components/radio.tsx
-function RadioGroup({ className, styleVariant, color, ...props }) {
+function RadioGroup({ className, styleVariant, color, gap = 3, style, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,
 		"data-accent-color": color ? accentByColor[color] : void 0,
-		className: cn("grid gap-[calc(var(--spark-layout-gap)*3)]", className),
+		className: cn("grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]", className),
+		style: {
+			"--radio-group-gap-steps": gap,
+			...style
+		},
 		...props
 	});
 }

package/dist/components/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn('grid gap-[calc(var(--spark-layout-gap)*3)]', className)}\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors',\n        \"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        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;AAcA,SAAS,WAAW,EAClB,WACA,cACA,OACA,GAAG,SACe;CAKlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQ,cAAc,SAAS,KAAA;EAOnD,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,oIACA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}
+{"version":3,"file":"radio.js","names":["RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/radio.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkRadioColor = 'accent' | 'neutral' | 'danger'\n\ntype RadioGroupProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive>,\n  'style'\n> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n  /** How many `--spark-layout-gap` units apart each radio sits. */\n  gap?: number\n  // Base UI's own `style` also accepts a state-callback form; the gap-steps var below\n  // needs a plain object to merge into, so narrow it to that here.\n  style?: React.CSSProperties\n}\n\nfunction RadioGroup({\n  className,\n  styleVariant,\n  color,\n  gap = 3,\n  style,\n  ...props\n}: RadioGroupProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(\n        'grid gap-[calc(var(--spark-layout-gap)*var(--radio-group-gap-steps,3))]',\n        className,\n      )}\n      style={\n        { '--radio-group-gap-steps': gap, ...style } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ntype RadioProps = React.ComponentProps<typeof RadioPrimitive.Root> & {\n  styleVariant?: SparkStyle\n  color?: SparkRadioColor\n}\n\nfunction Radio({\n  className,\n  styleVariant,\n  color,\n  render,\n  nativeButton,\n  ...props\n}: RadioProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        // p-0 defends the 24px box against the UA button padding when the\n        // consumer's CSS has no Tailwind preflight\n        'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 transition-colors',\n        \"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        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)',\n        'data-checked:border-(--spark-radio-ring,var(--spark-9))',\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <span className=\"size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { Radio, RadioGroup }\nexport type { RadioGroupProps, RadioProps }\n"],"mappings":";;;;;;;;AAsBA,SAAS,WAAW,EAClB,WACA,cACA,OACA,MAAM,GACN,OACA,GAAG,SACe;CAKlB,OACE,oBAACA,cAAD;EACE,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBANoB,QAAQ,cAAc,SAAS,KAAA;EAOnD,WAAW,GACT,2EACA,SACF;EACA,OACE;GAAE,2BAA2B;GAAK,GAAG;EAAM;EAE7C,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,MAAM,EACb,WACA,cACA,OACA,QACA,cACA,GAAG,SACU;CAEb,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,QAAe,MAAhB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,oBAAC,UAAD,CAAS,CAAA;EAC3B,WAAW,GAGT,oIACA,qIACA,iFACA,6DACA,wIACA,2DACA,SACF;EACA,GAAI;YAEJ,oBAACA,QAAe,WAAhB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,QAAD,EAAM,WAAU,wFAAyF,CAAA;EACjF,CAAA;CACP,CAAA;AAEzB"}

package/dist/components/schedule-list.cjs

@@ -34,13 +34,15 @@ const ScheduleEntry = react.forwardRef(({ children, className, disabled, onClick
 	const interactive = onClick !== void 0 && !disabled;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
-		role: interactive ? "button" : void 0,
-		tabIndex: interactive ? 0 : void 0,
-		onClick: interactive ? onClick : void 0,
-		onKeyDown: interactive ? (event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				onClick();
+		...interactive ? {
+			role: "button",
+			tabIndex: 0,
+			onClick,
+			onKeyDown: (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onClick();
+				}
 			}
 		} : void 0,
 		"aria-disabled": disabled || void 0,
@@ -72,6 +74,7 @@ ScheduleEntrySubtitle.displayName = "ScheduleEntrySubtitle";
 *  don't fire the parent `ScheduleEntry`'s `onClick`. */
 const ScheduleEntryActions = react.forwardRef(({ className, onClick, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	ref,
+	role: "presentation",
 	onClick: (event) => {
 		event.stopPropagation();
 		onClick?.(event);

package/dist/components/schedule-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-2xl border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    return (\n      <div\n        ref={ref}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;;;;AAIA,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,MAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,iBAAA,GAAA,kBAAA,MAAC,UAAD;CACO;CACC;CACN,YAAA,GAAA,OAAA,IACE,kWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAO,CAAA,GAC5D,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBD,MAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAC9C,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACO;EACL,MAAM,cAAc,WAAW,KAAA;EAC/B,UAAU,cAAc,IAAI,KAAA;EAC5B,SAAS,cAAc,UAAU,KAAA;EACjC,WACE,eACK,UAAU;GACT,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,QAAQ;GACV;EACF,IACA,KAAA;EAEN,iBAAe,YAAY,KAAA;EAC3B,YAAA,GAAA,OAAA,IACE,uFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IAAc,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,MAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IACE,oRACA,SACF;CACA,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAU,CAAA;AAC9D,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-list.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-2xl border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;;;;AAIA,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,MAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,iBAAA,GAAA,kBAAA,MAAC,UAAD;CACO;CACC;CACN,YAAA,GAAA,OAAA,IACE,kWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAO,CAAA,GAC5D,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBD,MAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAgB9C,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACO;EACL,GAhBgB,cAChB;GACE,MAAM;GACN,UAAU;GACV;GACA,YAAY,UAA+C;IACzD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,QAAQ;IACV;GACF;EACF,IACA,KAAA;EAKA,iBAAe,YAAY,KAAA;EAC3B,YAAA,GAAA,OAAA,IACE,uFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CAGL,MAAK;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IAAc,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,MAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IACE,oRACA,SACF;CACA,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAU,CAAA;AAC9D,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}

package/dist/components/schedule-list.js

@@ -31,13 +31,15 @@ const ScheduleEntry = React$1.forwardRef(({ children, className, disabled, onCli
 	const interactive = onClick !== void 0 && !disabled;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		role: interactive ? "button" : void 0,
-		tabIndex: interactive ? 0 : void 0,
-		onClick: interactive ? onClick : void 0,
-		onKeyDown: interactive ? (event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				onClick();
+		...interactive ? {
+			role: "button",
+			tabIndex: 0,
+			onClick,
+			onKeyDown: (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onClick();
+				}
 			}
 		} : void 0,
 		"aria-disabled": disabled || void 0,
@@ -69,6 +71,7 @@ ScheduleEntrySubtitle.displayName = "ScheduleEntrySubtitle";
 *  don't fire the parent `ScheduleEntry`'s `onClick`. */
 const ScheduleEntryActions = React$1.forwardRef(({ className, onClick, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
+	role: "presentation",
 	onClick: (event) => {
 		event.stopPropagation();
 		onClick?.(event);

package/dist/components/schedule-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.js","names":["React"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-2xl border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    return (\n      <div\n        ref={ref}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;AAIA,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,QAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACO;CACL,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,qBAAC,UAAD;CACO;CACC;CACN,WAAW,GACT,kWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAO,CAAA,GAC5D,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBA,QAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAC9C,OACE,oBAAC,OAAD;EACO;EACL,MAAM,cAAc,WAAW,KAAA;EAC/B,UAAU,cAAc,IAAI,KAAA;EAC5B,SAAS,cAAc,UAAU,KAAA;EACjC,WACE,eACK,UAAU;GACT,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,QAAQ;GACV;EACF,IACA,KAAA;EAEN,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,uFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,QAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACO;CACL,WAAW,GAAG,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACO;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GAAG,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,QAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,oBAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GACT,oRACA,SACF;CACA,GAAI;WAEH,YAAY,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAU,CAAA;AAC9D,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-list.js","names":["React"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-2xl border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-2xl bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-circle text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;AAIA,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,QAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACO;CACL,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,qBAAC,UAAD;CACO;CACC;CACN,WAAW,GACT,kWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAO,CAAA,GAC5D,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBA,QAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAgB9C,OACE,oBAAC,OAAD;EACO;EACL,GAhBgB,cAChB;GACE,MAAM;GACN,UAAU;GACV;GACA,YAAY,UAA+C;IACzD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,QAAQ;IACV;GACF;EACF,IACA,KAAA;EAKA,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,uFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,QAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACO;CACL,WAAW,GAAG,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACO;CAGL,MAAK;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GAAG,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,QAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,oBAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GACT,oRACA,SACF;CACA,GAAI;WAEH,YAAY,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAU,CAAA;AAC9D,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
+import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";