@epilot/spark-ui 0.10.0 → 0.11.0

package/dist/components/icon.d.cts

@@ -1,20 +1,24 @@
 "use client";
 
+import { SparkAccentColor } from "../lib/accent-colors.cjs";
 import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
 import * as React$1 from "react";
 
 //#region src/components/icon.d.ts
 interface IconProps extends React$1.HTMLAttributes<HTMLSpanElement> {
   name?: MaterialSymbolIconName;
-  /** Fill treatment. Neutral (gray) by default; colour is opt-in via className. */
+  /** Fill treatment. */
   variant?: 'soft' | 'surface' | 'solid' | 'ghost' | 'outline';
-  size?: 'small' | 'default' | 'medium';
+  /** Colour axis, matching Button/Pill/Avatar. Neutral (gray) by default. */
+  color?: SparkAccentColor;
+  size?: 'small' | 'medium' | 'large' | 'xl';
 }
 declare function Icon({
   className,
   name,
   children,
   variant,
+  color,
   size,
   ...props
 }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon.d.ts

@@ -1,20 +1,24 @@
 "use client";
 
+import { SparkAccentColor } from "../lib/accent-colors.js";
 import { MaterialSymbolIconName } from "../icons/material-symbol.js";
 import * as React$1 from "react";
 
 //#region src/components/icon.d.ts
 interface IconProps extends React$1.HTMLAttributes<HTMLSpanElement> {
   name?: MaterialSymbolIconName;
-  /** Fill treatment. Neutral (gray) by default; colour is opt-in via className. */
+  /** Fill treatment. */
   variant?: 'soft' | 'surface' | 'solid' | 'ghost' | 'outline';
-  size?: 'small' | 'default' | 'medium';
+  /** Colour axis, matching Button/Pill/Avatar. Neutral (gray) by default. */
+  color?: SparkAccentColor;
+  size?: 'small' | 'medium' | 'large' | 'xl';
 }
 declare function Icon({
   className,
   name,
   children,
   variant,
+  color,
   size,
   ...props
 }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon.js

@@ -1,26 +1,29 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { accentByColor } from "../lib/accent-colors.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx
 const variantClasses = {
-	soft: "bg-[var(--color-gray-a3)] [[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)]",
-	surface: "border border-[color:var(--icon-bd,var(--color-gray-a6))] bg-[var(--color-gray-a2)] [[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--color-gray-a11)]",
-	solid: "bg-[var(--color-gray-12)] text-[color:var(--color-gray-1)]",
-	ghost: "[[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)]",
-	outline: "border border-[color:var(--icon-bd,var(--color-gray-a8))] [[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--color-gray-a11)]"
+	soft: "bg-(--icon-bg,var(--spark-a3)) [[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)]",
+	surface: "border border-[color:var(--icon-bd,var(--spark-a6))] bg-(--icon-bg,var(--spark-a2)) [[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--spark-a11)]",
+	solid: "bg-(--icon-bg,var(--spark-12)) text-(--icon-ink,var(--spark-1))",
+	ghost: "[[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)]",
+	outline: "border border-[color:var(--icon-bd,var(--spark-a8))] [[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--spark-a11)]"
 };
 const sizeClasses = {
 	small: "size-6 [--spark-icon-size:calc(var(--spacing)*4)]",
-	default: "size-8 [--spark-icon-size:calc(var(--spacing)*5)]",
-	medium: "size-10 [--spark-icon-size:calc(var(--spacing)*6)]"
+	medium: "size-8 [--spark-icon-size:calc(var(--spacing)*5)]",
+	large: "size-10 [--spark-icon-size:calc(var(--spacing)*6)]",
+	xl: "size-12 [--spark-icon-size:calc(var(--spacing)*7)]"
 };
-function Icon({ className, name, children, variant = "soft", size = "default", ...props }) {
+function Icon({ className, name, children, variant = "soft", color = "neutral", size = "medium", ...props }) {
 	return /* @__PURE__ */ jsx("span", {
+		"data-accent-color": accentByColor[color],
 		"data-slot": "icon",
 		role: "aria-label" in props ? "img" : void 0,
-		className: cn("box-border inline-flex shrink-0 items-center justify-center", "rounded-[max(var(--spark-rounded-lg),var(--spark-rounded-full))]", "text-[color:var(--icon-ink,var(--color-gray-a11))]", variantClasses[variant], sizeClasses[size], className),
+		className: cn("box-border inline-flex shrink-0 items-center justify-center", "rounded-[max(var(--spark-rounded-lg),var(--spark-rounded-full))]", "text-[color:var(--icon-ink,var(--spark-a11))]", variantClasses[variant], sizeClasses[size], className),
 		...props,
 		children: children ?? (name ? /* @__PURE__ */ jsx(MaterialSymbol, { name }) : null)
 	});

package/dist/components/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../src/components/icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface IconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name?: MaterialSymbolIconName\n  /** Fill treatment. Neutral (gray) by default; colour is opt-in via className. */\n  variant?: 'soft' | 'surface' | 'solid' | 'ghost' | 'outline'\n  size?: 'small' | 'default' | 'medium'\n}\n\n// Icon is a display element, so it is colour-INDEPENDENT: every variant paints with the\n// neutral gray scale (tracks the neutral knob, not the accent). Colour is a per-instance\n// className override (e.g. bg-base-error-soft text-error), which wins over the base via\n// tailwind-merge. Ink flows through --icon-ink so that override still wins under high\n// contrast, which only re-points the var: data-high-contrast (on the icon or an ancestor)\n// darkens the glyph a11→a12 and strengthens the surface/outline border →a11. solid is\n// already max-contrast, so HC leaves it unchanged. border-box keeps the frame size\n// constant when surface/outline add their 1px edge.\nconst variantClasses = {\n  soft: 'bg-[var(--color-gray-a3)] [[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)]',\n  surface:\n    'border border-[color:var(--icon-bd,var(--color-gray-a6))] bg-[var(--color-gray-a2)] [[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--color-gray-a11)]',\n  solid: 'bg-[var(--color-gray-12)] text-[color:var(--color-gray-1)]',\n  ghost: '[[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)]',\n  outline:\n    'border border-[color:var(--icon-bd,var(--color-gray-a8))] [[data-high-contrast]_&]:[--icon-ink:var(--color-gray-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--color-gray-a11)]',\n}\n\n// Frame + glyph sizes are spacing-derived so both track the scaling/spacing knobs.\nconst sizeClasses = {\n  small: 'size-6 [--spark-icon-size:calc(var(--spacing)*4)]',\n  default: 'size-8 [--spark-icon-size:calc(var(--spacing)*5)]',\n  medium: 'size-10 [--spark-icon-size:calc(var(--spacing)*6)]',\n}\n\nfunction Icon({\n  className,\n  name,\n  children,\n  variant = 'soft',\n  size = 'default',\n  ...props\n}: IconProps) {\n  return (\n    <span\n      data-slot=\"icon\"\n      // labeled = meaningful image; otherwise decorative (the glyph is aria-hidden)\n      role={'aria-label' in props ? 'img' : undefined}\n      className={cn(\n        'box-border inline-flex shrink-0 items-center justify-center',\n        // Button's pill idiom: radius=full → circle, other radii → rounded square\n        'rounded-[max(var(--spark-rounded-lg),var(--spark-rounded-full))]',\n        'text-[color:var(--icon-ink,var(--color-gray-a11))]',\n        variantClasses[variant],\n        sizeClasses[size],\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (name ? <MaterialSymbol name={name} /> : null)}\n    </span>\n  )\n}\n\nIcon.displayName = 'Icon'\n\nexport { Icon }\nexport type { IconProps }\n"],"mappings":";;;;;;AAsBA,MAAM,iBAAiB;CACrB,MAAM;CACN,SACE;CACF,OAAO;CACP,OAAO;CACP,SACE;AACJ;AAGA,MAAM,cAAc;CAClB,OAAO;CACP,SAAS;CACT,QAAQ;AACV;AAEA,SAAS,KAAK,EACZ,WACA,MACA,UACA,UAAU,QACV,OAAO,WACP,GAAG,SACS;CACZ,OACE,oBAAC,QAAD;EACE,aAAU;EAEV,MAAM,gBAAgB,QAAQ,QAAQ,KAAA;EACtC,WAAW,GACT,+DAEA,oEACA,sDACA,eAAe,UACf,YAAY,OACZ,SACF;EACA,GAAI;YAEH,aAAa,OAAO,oBAAC,gBAAD,EAAsB,KAAO,CAAA,IAAI;CAClD,CAAA;AAEV;AAEA,KAAK,cAAc"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../src/components/icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { accentByColor, type SparkAccentColor } from '../lib/accent-colors'\nimport { cn } from '../utils/cn'\n\ninterface IconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name?: MaterialSymbolIconName\n  /** Fill treatment. */\n  variant?: 'soft' | 'surface' | 'solid' | 'ghost' | 'outline'\n  /** Colour axis, matching Button/Pill/Avatar. Neutral (gray) by default. */\n  color?: SparkAccentColor\n  size?: 'small' | 'medium' | 'large' | 'xl'\n}\n\n// Every variant reads its fill/ink/border off the accent scale (--spark-*), the same\n// indirection Button/Pill/Avatar use for their `color` prop — data-accent-color re-points\n// --spark-* to gray/red/green/orange, so `color` recolours all five variants without any\n// icon-specific colour plumbing. --icon-bg/--icon-ink/--icon-bd stay the outer override\n// (a consumer className still wins via tailwind-merge over either). data-high-contrast\n// (on the icon or an ancestor) darkens the glyph a11→a12 and strengthens the\n// surface/outline border →a11; solid is already max-contrast, so HC leaves it unchanged.\n// border-box keeps the frame size constant when surface/outline add their 1px edge.\nconst variantClasses = {\n  soft: 'bg-(--icon-bg,var(--spark-a3)) [[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)]',\n  surface:\n    'border border-[color:var(--icon-bd,var(--spark-a6))] bg-(--icon-bg,var(--spark-a2)) [[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--spark-a11)]',\n  solid: 'bg-(--icon-bg,var(--spark-12)) text-(--icon-ink,var(--spark-1))',\n  ghost: '[[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)]',\n  outline:\n    'border border-[color:var(--icon-bd,var(--spark-a8))] [[data-high-contrast]_&]:[--icon-ink:var(--spark-a12)] [[data-high-contrast]_&]:[--icon-bd:var(--spark-a11)]',\n}\n\n// Frame + glyph sizes are spacing-derived so both track the scaling/spacing knobs.\nconst sizeClasses = {\n  small: 'size-6 [--spark-icon-size:calc(var(--spacing)*4)]',\n  medium: 'size-8 [--spark-icon-size:calc(var(--spacing)*5)]',\n  large: 'size-10 [--spark-icon-size:calc(var(--spacing)*6)]',\n  xl: 'size-12 [--spark-icon-size:calc(var(--spacing)*7)]',\n}\n\nfunction Icon({\n  className,\n  name,\n  children,\n  variant = 'soft',\n  color = 'neutral',\n  size = 'medium',\n  ...props\n}: IconProps) {\n  return (\n    <span\n      data-accent-color={accentByColor[color]}\n      data-slot=\"icon\"\n      // labeled = meaningful image; otherwise decorative (the glyph is aria-hidden)\n      role={'aria-label' in props ? 'img' : undefined}\n      className={cn(\n        'box-border inline-flex shrink-0 items-center justify-center',\n        // Button's pill idiom: radius=full → circle, other radii → rounded square\n        'rounded-[max(var(--spark-rounded-lg),var(--spark-rounded-full))]',\n        'text-[color:var(--icon-ink,var(--spark-a11))]',\n        variantClasses[variant],\n        sizeClasses[size],\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (name ? <MaterialSymbol name={name} /> : null)}\n    </span>\n  )\n}\n\nIcon.displayName = 'Icon'\n\nexport { Icon }\nexport type { IconProps }\n"],"mappings":";;;;;;;AAyBA,MAAM,iBAAiB;CACrB,MAAM;CACN,SACE;CACF,OAAO;CACP,OAAO;CACP,SACE;AACJ;AAGA,MAAM,cAAc;CAClB,OAAO;CACP,QAAQ;CACR,OAAO;CACP,IAAI;AACN;AAEA,SAAS,KAAK,EACZ,WACA,MACA,UACA,UAAU,QACV,QAAQ,WACR,OAAO,UACP,GAAG,SACS;CACZ,OACE,oBAAC,QAAD;EACE,qBAAmB,cAAc;EACjC,aAAU;EAEV,MAAM,gBAAgB,QAAQ,QAAQ,KAAA;EACtC,WAAW,GACT,+DAEA,oEACA,iDACA,eAAe,UACf,YAAY,OACZ,SACF;EACA,GAAI;YAEH,aAAa,OAAO,oBAAC,gBAAD,EAAsB,KAAO,CAAA,IAAI;CAClD,CAAA;AAEV;AAEA,KAAK,cAAc"}

package/dist/components/input.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 
 //#region src/components/input.d.ts

package/dist/components/input.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 
 //#region src/components/input.d.ts

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/metering-row.cjs

@@ -1,24 +1,41 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_components_icon = require("./icon.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/metering-row.tsx
+const MeteringRowContext = (0, react.createContext)(null);
+function useMeteringRowTone() {
+	const tone = (0, react.useContext)(MeteringRowContext);
+	if (!tone) throw new Error("MeteringRow.* must be rendered inside <MeteringRow>");
+	return tone;
+}
 const MeteringRow = ({ className, tone, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("group flex items-center gap-3", className),
-		"data-tone": tone,
-		...rest
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MeteringRowContext.Provider, {
+		value: tone,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, cnfast.cn)("group flex items-center gap-3", className),
+			"data-tone": tone,
+			...rest
+		})
 	});
 };
+const toneToIconColor = {
+	accent: "accent",
+	neutral: "neutral",
+	success: "success",
+	warning: "warning",
+	error: "danger"
+};
 const MeteringRowIcon = ({ className, icon, ...rest }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, cnfast.cn)("flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning", className),
+	const tone = useMeteringRowTone();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "text-[18px]",
-			name: icon
-		})
+		className,
+		color: toneToIconColor[tone],
+		name: icon,
+		size: "large"
 	});
 };
 const MeteringRowLabel = ({ className, ...rest }) => {

package/dist/components/metering-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"metering-row.cjs","names":["MaterialSymbol"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <div\n      className={cn('group flex items-center gap-3', className)}\n      data-tone={tone}\n      {...rest}\n    />\n  )\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  return (\n    <span\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[18px]\" name={icon} />\n    </span>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;AAOA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,aAAW;EACX,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,4dACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GAAgB,WAAU;GAAc,MAAM;EAAO,CAAA;CACjD,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"metering-row.cjs","names":["Icon"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      name={icon}\n      size=\"large\"\n    />\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;;AAOA,MAAM,sBAAA,GAAA,MAAA,eAAgD,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,QAAA,GAAA,MAAA,YAAkB,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAM;EACN,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/metering-row.js

@@ -1,23 +1,40 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Icon } from "./icon.js";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/metering-row.tsx
+const MeteringRowContext = createContext(null);
+function useMeteringRowTone() {
+	const tone = useContext(MeteringRowContext);
+	if (!tone) throw new Error("MeteringRow.* must be rendered inside <MeteringRow>");
+	return tone;
+}
 const MeteringRow = ({ className, tone, ...rest }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("group flex items-center gap-3", className),
-		"data-tone": tone,
-		...rest
+	return /* @__PURE__ */ jsx(MeteringRowContext.Provider, {
+		value: tone,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("group flex items-center gap-3", className),
+			"data-tone": tone,
+			...rest
+		})
 	});
 };
+const toneToIconColor = {
+	accent: "accent",
+	neutral: "neutral",
+	success: "success",
+	warning: "warning",
+	error: "danger"
+};
 const MeteringRowIcon = ({ className, icon, ...rest }) => {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning", className),
+	const tone = useMeteringRowTone();
+	return /* @__PURE__ */ jsx(Icon, {
 		...rest,
-		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "text-[18px]",
-			name: icon
-		})
+		className,
+		color: toneToIconColor[tone],
+		name: icon,
+		size: "large"
 	});
 };
 const MeteringRowLabel = ({ className, ...rest }) => {

package/dist/components/metering-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <div\n      className={cn('group flex items-center gap-3', className)}\n      data-tone={tone}\n      {...rest}\n    />\n  )\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  return (\n    <span\n      className={cn(\n        'flex size-10 shrink-0 items-center justify-center rounded-xl group-data-[tone=accent]:bg-base-accent-soft group-data-[tone=accent]:text-accent group-data-[tone=error]:bg-base-error-soft group-data-[tone=error]:text-error group-data-[tone=neutral]:bg-base-gray-soft group-data-[tone=neutral]:text-gray group-data-[tone=success]:bg-base-success-soft group-data-[tone=success]:text-success group-data-[tone=warning]:bg-base-warning-soft group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    >\n      <MaterialSymbol className=\"text-[18px]\" name={icon} />\n    </span>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;AAOA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,SAAS;EACxD,aAAW;EACX,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,QAAD;EACE,WAAW,GACT,4dACA,SACF;EACA,GAAI;YAEJ,oBAAC,gBAAD;GAAgB,WAAU;GAAc,MAAM;EAAO,CAAA;CACjD,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      name={icon}\n      size=\"large\"\n    />\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;AAOA,MAAM,qBAAqB,cAA2B,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,OAAO,WAAW,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,OAAD;GACE,WAAW,GAAG,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAM;EACN,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/pill.cjs

@@ -35,7 +35,7 @@ const Pill = react.forwardRef(function Pill({ className, children, styleVariant,
 		ref,
 		role: clickable ? "button" : void 0,
 		tabIndex: focusable ? 0 : void 0,
-		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		className: (0, cnfast.cn)("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",

package/dist/components/pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pill.cjs","names":["React","accentByColor","MaterialSymbol"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,YAAA,GAAA,OAAA,IACE,0FACA,4FACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.cjs","names":["React","accentByColor","MaterialSymbol"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,OAAOA,MAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,YAAA,GAAA,OAAA,IACE,0FACA,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/pill.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.cjs";
 import { SparkAccentColor } from "../lib/accent-colors.cjs";
 import * as React$1 from "react";
 

package/dist/components/pill.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 import { SparkAccentColor } from "../lib/accent-colors.js";
 import * as React$1 from "react";
 

package/dist/components/pill.js

@@ -32,7 +32,7 @@ const Pill = React$1.forwardRef(function Pill({ className, children, styleVarian
 		ref,
 		role: clickable ? "button" : void 0,
 		tabIndex: focusable ? 0 : void 0,
-		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
+		className: cn("inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))", focusable && "transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", clickable && "cursor-pointer hover:bg-(--spark-style-bg-hover)", disabled && "pointer-events-none opacity-50", className),
 		...props,
 		children: [children, removable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",

package/dist/components/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--color-gray-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,WAAW,GACT,0FACA,4FACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"pill.js","names":["React"],"sources":["../../src/components/pill.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype PillRemoveProps =\n  | { onRemove?: undefined; removeLabel?: string }\n  | {\n      /** Fires on a pointer click of the (decorative) glyph, or Delete/Backspace while the pill has focus. */\n      onRemove: (event: React.SyntheticEvent) => void\n      /** Visually-hidden text folded into the pill's accessible name -- the glyph itself is `aria-hidden`. */\n      removeLabel: string\n    }\n\ntype PillProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> &\n  PillRemoveProps & {\n    styleVariant?: SparkStyle\n    color?: SparkAccentColor\n    disabled?: boolean\n    onClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => void\n  }\n\n/**\n * Like Badge, but interactive: `onClick` makes the whole pill a button\n * (Enter/Space), `onRemove` adds a Delete/Backspace-and-click affordance.\n * Both are optional -- with neither, it's a static label.\n */\nconst Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    children,\n    styleVariant,\n    color,\n    disabled = false,\n    onClick,\n    onRemove,\n    removeLabel,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const clickable = !disabled && onClick !== undefined\n  const removable = !disabled && onRemove !== undefined\n  const focusable = clickable || removable\n  const hasLook = styleVariant !== undefined || color !== undefined\n\n  return (\n    <span\n      aria-disabled={disabled || undefined}\n      aria-keyshortcuts={removable ? 'Delete' : undefined}\n      data-slot=\"pill\"\n      data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n      data-accent-color={color ? accentByColor[color] : undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n          if (event.key === ' ') event.preventDefault()\n          onClick?.(event)\n        }\n        if (\n          removable &&\n          (event.key === 'Delete' || event.key === 'Backspace')\n        ) {\n          onRemove?.(event)\n        }\n      }}\n      ref={ref}\n      role={clickable ? 'button' : undefined}\n      tabIndex={focusable ? 0 : undefined}\n      className={cn(\n        'inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-xs font-medium select-none',\n        'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--neutral-a11))',\n        focusable &&\n          'transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n        clickable && 'cursor-pointer hover:bg-(--spark-style-bg-hover)',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {removable ? (\n        <>\n          {/* aria-hidden hides the glyph itself; this carries removeLabel into the pill's own accessible name */}\n          <span className=\"sr-only\">{removeLabel}</span>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"pill-remove\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onRemove?.(event)\n            }}\n            className=\"-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--spark-style-bg-hover) motion-reduce:transition-none\"\n          >\n            <MaterialSymbol className=\"[--spark-icon-size:14px]\" name=\"close\" />\n          </span>\n        </>\n      ) : null}\n    </span>\n  )\n})\n\nPill.displayName = 'Pill'\n\nexport { Pill }\nexport type { PillProps }\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,OAAOA,QAAM,WAAuC,SAAS,KACjE,EACE,WACA,UACA,cACA,OACA,WAAW,OACX,SACA,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,YAAY,CAAC,YAAY,YAAY,KAAA;CAC3C,MAAM,YAAY,CAAC,YAAY,aAAa,KAAA;CAC5C,MAAM,YAAY,aAAa;CAG/B,OACE,qBAAC,QAAD;EACE,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,YAAY,WAAW,KAAA;EAC1C,aAAU;EACV,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAO7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,SAAS,YAAY,UAAU,KAAA;EAC/B,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IAC7D,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;IAC5C,UAAU,KAAK;GACjB;GACA,IACE,cACC,MAAM,QAAQ,YAAY,MAAM,QAAQ,cAEzC,WAAW,KAAK;EAEpB;EACK;EACL,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,WAAW,GACT,0FACA,sFACA,aACE,iIACF,aAAa,oDACb,YAAY,kCACZ,SACF;EACA,GAAI;YAhCN,CAkCG,UACA,YACC,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,QAAD;GAAM,WAAU;aAAW;EAAkB,CAAA,GAC7C,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,WAAU;aAEV,oBAAC,gBAAD;IAAgB,WAAU;IAA2B,MAAK;GAAS,CAAA;EAC/D,CAAA,CACN,EAAA,CAAA,IACA,IACA;;AAEV,CAAC;AAED,KAAK,cAAc"}

package/dist/components/radio.cjs

@@ -18,14 +18,16 @@ function RadioGroup({ className, styleVariant, color, ...props }) {
 		...props
 	});
 }
-function Radio({ className, styleVariant, color, ...props }) {
+function Radio({ className, styleVariant, color, render, nativeButton, ...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),
+		nativeButton: nativeButton ?? render === void 0,
+		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
+		className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 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",

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({ 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"}
+{"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"}

package/dist/components/radio.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.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";
@@ -25,6 +25,8 @@ declare function Radio({
   className,
   styleVariant,
   color,
+  render,
+  nativeButton,
   ...props
 }: RadioProps): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/radio.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.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";
@@ -25,6 +25,8 @@ declare function Radio({
   className,
   styleVariant,
   color,
+  render,
+  nativeButton,
   ...props
 }: RadioProps): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/radio.js

@@ -15,14 +15,16 @@ function RadioGroup({ className, styleVariant, color, ...props }) {
 		...props
 	});
 }
-function Radio({ className, styleVariant, color, ...props }) {
+function Radio({ className, styleVariant, color, render, nativeButton, ...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),
+		nativeButton: nativeButton ?? render === void 0,
+		render: render ?? /* @__PURE__ */ jsx("button", {}),
+		className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 p-0 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",

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({ 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"}
+{"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"}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.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-8wjgiNA_.js";
+import { u as SparkStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 

package/dist/components/select.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.cjs";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.cjs";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 

package/dist/components/select.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { i as SparkInputStyle } from "../theme-types-8wjgiNA_.js";
+import { i as SparkInputStyle } from "../theme-types-1yB0d8mp.js";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 

package/dist/components/switch.cjs

@@ -5,13 +5,15 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_switch = require("@base-ui/react/switch");
 let cnfast = require("cnfast");
 //#region src/components/switch.tsx
-function Switch({ className, styleVariant, color, size: _size, variant: _variant, ...props }) {
+function Switch({ className, styleVariant, color, size: _size, variant: _variant, render, nativeButton, ...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_switch.Switch.Root, {
 		"data-slot": "switch",
 		"data-style": dataStyle,
 		"data-accent-color": dataAccentColor,
+		nativeButton: nativeButton ?? render === void 0,
+		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
 		className: (0, cnfast.cn)("peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-(--spark-rounded-xl)", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Thumb, {