@epilot/spark-ui 0.10.0

package/dist/components/progress.cjs.map

@@ -0,0 +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"}

package/dist/components/progress.d.cts

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/progress.d.ts
+interface ProgressProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /** Current value */
+  value: number;
+  /** Maximum value. Default: 100 */
+  max?: number;
+  /** Height variant */
+  size?: 'sm' | 'default' | 'lg';
+}
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Progress, ProgressProps };
+//# sourceMappingURL=progress.d.cts.map

package/dist/components/progress.d.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/progress.d.ts
+interface ProgressProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /** Current value */
+  value: number;
+  /** Maximum value. Default: 100 */
+  max?: number;
+  /** Height variant */
+  size?: 'sm' | 'default' | 'lg';
+}
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Progress, ProgressProps };
+//# sourceMappingURL=progress.d.ts.map

package/dist/components/progress.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/progress.tsx
+const sizeClasses = {
+	sm: "h-1",
+	default: "h-2",
+	lg: "h-3"
+};
+const Progress = React$1.forwardRef(({ className, value, max = 100, size = "default", ...props }, ref) => {
+	const percentage = Math.min(100, Math.max(0, value / max * 100));
+	return /* @__PURE__ */ jsx("div", {
+		"aria-valuemax": max,
+		"aria-valuemin": 0,
+		"aria-valuenow": value,
+		className: cn("w-full overflow-hidden rounded-full bg-gray-a4", sizeClasses[size], className),
+		ref,
+		role: "progressbar",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "h-full rounded-full bg-spark-9 transition-all duration-300",
+			style: { width: `${percentage}%` }
+		})
+	});
+});
+Progress.displayName = "Progress";
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=progress.js.map

package/dist/components/progress.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,94 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/radio-card-group.tsx
+const RadioCardGroupContext = react.createContext(void 0);
+const ARROW_STEP = {
+	ArrowDown: 1,
+	ArrowRight: 1,
+	ArrowUp: -1,
+	ArrowLeft: -1
+};
+const RadioCardGroup = react.forwardRef(({ value: valueProp, defaultValue, onValueChange, disabled, name, className, children, ...props }, ref) => {
+	const generatedName = react.useId();
+	const [internalValue, setInternalValue] = react.useState(defaultValue);
+	const isControlled = valueProp !== void 0;
+	const value = isControlled ? valueProp : internalValue;
+	const handleValueChange = react.useCallback((next) => {
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const ctx = react.useMemo(() => ({
+		value,
+		onValueChange: handleValueChange,
+		disabled,
+		name: name ?? generatedName
+	}), [
+		value,
+		handleValueChange,
+		disabled,
+		name,
+		generatedName
+	]);
+	const handleKeyDown = (event) => {
+		const step = ARROW_STEP[event.key];
+		if (step === void 0 && event.key !== "Home" && event.key !== "End") return;
+		const radios = [...event.currentTarget.querySelectorAll("[role=\"radio\"]:not(:disabled)")];
+		if (radios.length === 0) return;
+		event.preventDefault();
+		let next = 0;
+		if (event.key === "End") next = radios.length - 1;
+		else if (step !== void 0) {
+			const current = radios.indexOf(document.activeElement);
+			if (current !== -1) next = (current + step + radios.length) % radios.length;
+		}
+		const target = radios[next];
+		if (!target) return;
+		target.focus();
+		target.click();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioCardGroupContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			role: "radiogroup",
+			onKeyDown: handleKeyDown,
+			className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
+			...props,
+			children
+		})
+	});
+});
+RadioCardGroup.displayName = "RadioCardGroup";
+const RadioCardGroupItem = react.forwardRef(({ value, className, children, disabled, onClick, ...props }, ref) => {
+	const ctx = react.useContext(RadioCardGroupContext);
+	if (!ctx) throw new Error("RadioCardGroupItem must be used within a RadioCardGroup");
+	const checked = ctx.value === value;
+	const isDisabled = disabled ?? ctx.disabled;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		type: "button",
+		role: "radio",
+		"aria-checked": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		tabIndex: checked || ctx.value === void 0 ? 0 : -1,
+		disabled: isDisabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented && !isDisabled) ctx.onValueChange(value);
+		},
+		className: (0, cnfast.cn)("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", checked ? "border border-accent bg-base-accent-soft text-accent" : "border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3", className),
+		...props,
+		children
+	});
+});
+RadioCardGroupItem.displayName = "RadioCardGroupItem";
+//#endregion
+exports.RadioCardGroup = RadioCardGroup;
+exports.RadioCardGroupItem = RadioCardGroupItem;
+
+//# sourceMappingURL=radio-card-group.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/radio-card-group.d.ts
+interface RadioCardGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Optional name used for ARIA grouping. Defaults to a generated id. */
+  name?: string;
+}
+declare const RadioCardGroup: React$1.ForwardRefExoticComponent<RadioCardGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+interface RadioCardGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+  value: string;
+}
+declare const RadioCardGroupItem: React$1.ForwardRefExoticComponent<RadioCardGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { RadioCardGroup, RadioCardGroupItem, type RadioCardGroupItemProps, type RadioCardGroupProps };
+//# sourceMappingURL=radio-card-group.d.cts.map

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

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/radio-card-group.d.ts
+interface RadioCardGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Optional name used for ARIA grouping. Defaults to a generated id. */
+  name?: string;
+}
+declare const RadioCardGroup: React$1.ForwardRefExoticComponent<RadioCardGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+interface RadioCardGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+  value: string;
+}
+declare const RadioCardGroupItem: React$1.ForwardRefExoticComponent<RadioCardGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { RadioCardGroup, RadioCardGroupItem, type RadioCardGroupItemProps, type RadioCardGroupProps };
+//# sourceMappingURL=radio-card-group.d.ts.map

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

@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/radio-card-group.tsx
+const RadioCardGroupContext = React$1.createContext(void 0);
+const ARROW_STEP = {
+	ArrowDown: 1,
+	ArrowRight: 1,
+	ArrowUp: -1,
+	ArrowLeft: -1
+};
+const RadioCardGroup = React$1.forwardRef(({ value: valueProp, defaultValue, onValueChange, disabled, name, className, children, ...props }, ref) => {
+	const generatedName = React$1.useId();
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
+	const isControlled = valueProp !== void 0;
+	const value = isControlled ? valueProp : internalValue;
+	const handleValueChange = React$1.useCallback((next) => {
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const ctx = React$1.useMemo(() => ({
+		value,
+		onValueChange: handleValueChange,
+		disabled,
+		name: name ?? generatedName
+	}), [
+		value,
+		handleValueChange,
+		disabled,
+		name,
+		generatedName
+	]);
+	const handleKeyDown = (event) => {
+		const step = ARROW_STEP[event.key];
+		if (step === void 0 && event.key !== "Home" && event.key !== "End") return;
+		const radios = [...event.currentTarget.querySelectorAll("[role=\"radio\"]:not(:disabled)")];
+		if (radios.length === 0) return;
+		event.preventDefault();
+		let next = 0;
+		if (event.key === "End") next = radios.length - 1;
+		else if (step !== void 0) {
+			const current = radios.indexOf(document.activeElement);
+			if (current !== -1) next = (current + step + radios.length) % radios.length;
+		}
+		const target = radios[next];
+		if (!target) return;
+		target.focus();
+		target.click();
+	};
+	return /* @__PURE__ */ jsx(RadioCardGroupContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "radiogroup",
+			onKeyDown: handleKeyDown,
+			className: cn("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
+			...props,
+			children
+		})
+	});
+});
+RadioCardGroup.displayName = "RadioCardGroup";
+const RadioCardGroupItem = React$1.forwardRef(({ value, className, children, disabled, onClick, ...props }, ref) => {
+	const ctx = React$1.useContext(RadioCardGroupContext);
+	if (!ctx) throw new Error("RadioCardGroupItem must be used within a RadioCardGroup");
+	const checked = ctx.value === value;
+	const isDisabled = disabled ?? ctx.disabled;
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "radio",
+		"aria-checked": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		tabIndex: checked || ctx.value === void 0 ? 0 : -1,
+		disabled: isDisabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented && !isDisabled) ctx.onValueChange(value);
+		},
+		className: cn("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", checked ? "border border-accent bg-base-accent-soft text-accent" : "border border-transparent bg-base-gray-soft text-gray hover:bg-gray-a3", className),
+		...props,
+		children
+	});
+});
+RadioCardGroupItem.displayName = "RadioCardGroupItem";
+//#endregion
+export { RadioCardGroup, RadioCardGroupItem };
+
+//# sourceMappingURL=radio-card-group.js.map

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

@@ -0,0 +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"}

package/dist/components/radio.cjs

@@ -0,0 +1,41 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+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 }) {
+	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),
+		...props
+	});
+}
+function Radio({ className, styleVariant, color, ...props }) {
+	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
+	const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Root, {
+		"data-slot": "radio",
+		"data-style": dataStyle,
+		"data-accent-color": dataAccentColor,
+		className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 transition-colors", "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-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Indicator, {
+			"data-slot": "radio-indicator",
+			className: "flex items-center justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop" })
+		})
+	});
+}
+//#endregion
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+
+//# sourceMappingURL=radio.cjs.map

package/dist/components/radio.cjs.map

@@ -0,0 +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({ className, styleVariant, color, ...props }: 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      className={cn(\n        'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 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,EAAE,WAAW,cAAc,OAAO,GAAG,SAAqB;CAEvE,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;EACnB,YAAA,GAAA,OAAA,IACE,gIACA,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

@@ -0,0 +1,32 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.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> & {
+  styleVariant?: SparkStyle;
+  color?: SparkRadioColor;
+};
+declare function RadioGroup({
+  className,
+  styleVariant,
+  color,
+  ...props
+}: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+type RadioProps = React$1.ComponentProps<typeof Radio$1.Root> & {
+  styleVariant?: SparkStyle;
+  color?: SparkRadioColor;
+};
+declare function Radio({
+  className,
+  styleVariant,
+  color,
+  ...props
+}: RadioProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, SparkRadioColor };
+//# sourceMappingURL=radio.d.cts.map

package/dist/components/radio.d.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.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> & {
+  styleVariant?: SparkStyle;
+  color?: SparkRadioColor;
+};
+declare function RadioGroup({
+  className,
+  styleVariant,
+  color,
+  ...props
+}: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+type RadioProps = React$1.ComponentProps<typeof Radio$1.Root> & {
+  styleVariant?: SparkStyle;
+  color?: SparkRadioColor;
+};
+declare function Radio({
+  className,
+  styleVariant,
+  color,
+  ...props
+}: RadioProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, SparkRadioColor };
+//# sourceMappingURL=radio.d.ts.map

package/dist/components/radio.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
+import "react";
+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 }) {
+	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),
+		...props
+	});
+}
+function Radio({ className, styleVariant, color, ...props }) {
+	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
+	const dataAccentColor = color ? accentByColor[color] : void 0;
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		"data-slot": "radio",
+		"data-style": dataStyle,
+		"data-accent-color": dataAccentColor,
+		className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 transition-colors", "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-['']", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft data-unchecked:border-(length:--spark-style-border-width,2px)", "data-checked:border-(--spark-radio-ring,var(--spark-9))", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio$1.Indicator, {
+			"data-slot": "radio-indicator",
+			className: "flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("span", { className: "size-4 rounded-full bg-(--spark-radio-dot,var(--spark-9)) motion-safe:animate-dot-pop" })
+		})
+	});
+}
+//#endregion
+export { Radio, RadioGroup };
+
+//# sourceMappingURL=radio.js.map

package/dist/components/radio.js.map

@@ -0,0 +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({ className, styleVariant, color, ...props }: 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      className={cn(\n        'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 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,EAAE,WAAW,cAAc,OAAO,GAAG,SAAqB;CAEvE,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;EACnB,WAAW,GACT,gIACA,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/reparent.cjs

@@ -0,0 +1,55 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region src/components/reparent.tsx
+const supportsMoveBefore = typeof Element !== "undefined" && "moveBefore" in Element.prototype;
+function useReparent() {
+	const [host, setHost] = react.useState(null);
+	react.useEffect(() => {
+		const el = document.createElement("div");
+		el.style.display = "contents";
+		setHost(el);
+		return () => el.remove();
+	}, []);
+	const park = react.useCallback(() => {
+		if (supportsMoveBefore && host?.isConnected) {
+			host.style.display = "none";
+			document.body.moveBefore(host, null);
+		}
+	}, [host]);
+	return react.useMemo(() => ({
+		host,
+		park
+	}), [host, park]);
+}
+function ReparentContent({ handle, children }) {
+	if (!handle.host) return null;
+	return (0, react_dom.createPortal)(children, handle.host);
+}
+function ReparentSlot({ handle, ...props }) {
+	const ref = react.useRef(null);
+	const host = handle.host;
+	react.useLayoutEffect(() => {
+		const slot = ref.current;
+		if (!slot || !host) return;
+		host.style.display = "contents";
+		if (supportsMoveBefore && host.isConnected) slot.moveBefore(host, null);
+		else slot.appendChild(host);
+	}, [host]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "reparent-slot",
+		ref,
+		...props
+	});
+}
+//#endregion
+exports.ReparentContent = ReparentContent;
+exports.ReparentSlot = ReparentSlot;
+exports.supportsMoveBefore = supportsMoveBefore;
+exports.useReparent = useReparent;
+
+//# sourceMappingURL=reparent.cjs.map

package/dist/components/reparent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reparent.cjs","names":["React"],"sources":["../../src/components/reparent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\n// moveBefore ships in Chrome/Edge 133+, Firefox 144+; Safari has no state-preserving move\nconst supportsMoveBefore =\n  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype\n\ntype MovableElement = Element & {\n  moveBefore: (node: Node, child: Node | null) => void\n}\n\ninterface ReparentHandle {\n  host: HTMLElement | null\n  park: () => void\n}\n\n// host created after mount so server and client hydrate the same (empty) markup\nfunction useReparent(): ReparentHandle {\n  const [host, setHost] = React.useState<HTMLElement | null>(null)\n  React.useEffect(() => {\n    const el = document.createElement('div')\n    el.style.display = 'contents'\n    setHost(el)\n    return () => el.remove()\n  }, [])\n  const park = React.useCallback(() => {\n    if (supportsMoveBefore && host?.isConnected) {\n      host.style.display = 'none'\n      ;(document.body as unknown as MovableElement).moveBefore(host, null)\n    }\n  }, [host])\n  return React.useMemo(() => ({ host, park }), [host, park])\n}\n\nfunction ReparentContent({\n  handle,\n  children,\n}: {\n  handle: ReparentHandle\n  children: React.ReactNode\n}) {\n  if (!handle.host) return null\n  return createPortal(children, handle.host)\n}\n\ninterface ReparentSlotProps extends React.ComponentProps<'div'> {\n  handle: ReparentHandle\n}\n\nfunction ReparentSlot({ handle, ...props }: ReparentSlotProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const host = handle.host\n  React.useLayoutEffect(() => {\n    const slot = ref.current\n    if (!slot || !host) return\n    host.style.display = 'contents'\n    if (supportsMoveBefore && host.isConnected) {\n      ;(slot as unknown as MovableElement).moveBefore(host, null)\n    } else {\n      slot.appendChild(host)\n    }\n  }, [host])\n  return <div data-slot=\"reparent-slot\" ref={ref} {...props} />\n}\n\nexport { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent }\nexport type { ReparentHandle, ReparentSlotProps }\n"],"mappings":";;;;;;;;AAIA,MAAM,qBACJ,OAAO,YAAY,eAAe,gBAAgB,QAAQ;AAY5D,SAAS,cAA8B;CACrC,MAAM,CAAC,MAAM,WAAWA,MAAM,SAA6B,IAAI;CAC/D,MAAM,gBAAgB;EACpB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,MAAM,UAAU;EACnB,QAAQ,EAAE;EACV,aAAa,GAAG,OAAO;CACzB,GAAG,CAAC,CAAC;CACL,MAAM,OAAOA,MAAM,kBAAkB;EACnC,IAAI,sBAAsB,MAAM,aAAa;GAC3C,KAAK,MAAM,UAAU;GACpB,SAAU,KAAmC,WAAW,MAAM,IAAI;EACrE;CACF,GAAG,CAAC,IAAI,CAAC;CACT,OAAOA,MAAM,eAAe;EAAE;EAAM;CAAK,IAAI,CAAC,MAAM,IAAI,CAAC;AAC3D;AAEA,SAAS,gBAAgB,EACvB,QACA,YAIC;CACD,IAAI,CAAC,OAAO,MAAM,OAAO;CACzB,QAAA,GAAA,UAAA,cAAoB,UAAU,OAAO,IAAI;AAC3C;AAMA,SAAS,aAAa,EAAE,QAAQ,GAAG,SAA4B;CAC7D,MAAM,MAAMA,MAAM,OAAuB,IAAI;CAC7C,MAAM,OAAO,OAAO;CACpB,MAAM,sBAAsB;EAC1B,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,QAAQ,CAAC,MAAM;EACpB,KAAK,MAAM,UAAU;EACrB,IAAI,sBAAsB,KAAK,aAC5B,KAAoC,WAAW,MAAM,IAAI;OAE1D,KAAK,YAAY,IAAI;CAEzB,GAAG,CAAC,IAAI,CAAC;CACT,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAqB;EAAK,GAAI;CAAQ,CAAA;AAC9D"}

package/dist/components/reparent.d.cts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/reparent.d.ts
+declare const supportsMoveBefore: boolean;
+interface ReparentHandle {
+  host: HTMLElement | null;
+  park: () => void;
+}
+declare function useReparent(): ReparentHandle;
+declare function ReparentContent({
+  handle,
+  children
+}: {
+  handle: ReparentHandle;
+  children: React$1.ReactNode;
+}): React$1.ReactPortal | null;
+interface ReparentSlotProps extends React$1.ComponentProps<'div'> {
+  handle: ReparentHandle;
+}
+declare function ReparentSlot({
+  handle,
+  ...props
+}: ReparentSlotProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ReparentContent, type ReparentHandle, ReparentSlot, type ReparentSlotProps, supportsMoveBefore, useReparent };
+//# sourceMappingURL=reparent.d.cts.map

package/dist/components/reparent.d.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/reparent.d.ts
+declare const supportsMoveBefore: boolean;
+interface ReparentHandle {
+  host: HTMLElement | null;
+  park: () => void;
+}
+declare function useReparent(): ReparentHandle;
+declare function ReparentContent({
+  handle,
+  children
+}: {
+  handle: ReparentHandle;
+  children: React$1.ReactNode;
+}): React$1.ReactPortal | null;
+interface ReparentSlotProps extends React$1.ComponentProps<'div'> {
+  handle: ReparentHandle;
+}
+declare function ReparentSlot({
+  handle,
+  ...props
+}: ReparentSlotProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ReparentContent, type ReparentHandle, ReparentSlot, type ReparentSlotProps, supportsMoveBefore, useReparent };
+//# sourceMappingURL=reparent.d.ts.map