@epilot/spark-ui 0.15.2 → 0.16.1

package/dist/components/battery-progress-row.cjs

@@ -4,6 +4,7 @@ const require_components_badge = require("./badge.cjs");
 const require_components_icon = require("./icon.cjs");
 const require_components_progress = require("./progress.cjs");
 let react = require("react");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/battery-progress-row.tsx
@@ -23,25 +24,27 @@ const BatteryProgressRow = ({ className, soc, children, ...rest }) => {
 		})
 	});
 };
-/**
-* Battery icon. Auto-selects its variant from the row's `soc`.
-*
-* @param className - Optional className to apply to the icon to further style it
-* @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
-* @param ...rest - Additional props to pass to the span
-* @returns A React component that renders a battery icon
-*/
+const BATTERY_BY_LEVEL = [
+	_epilot_spark_icons.Battery0Bar,
+	_epilot_spark_icons.Battery1Bar,
+	_epilot_spark_icons.Battery2Bar,
+	_epilot_spark_icons.Battery3Bar,
+	_epilot_spark_icons.Battery4Bar,
+	_epilot_spark_icons.Battery5Bar,
+	_epilot_spark_icons.Battery6Bar
+];
 const BatteryProgressRowIcon = ({ className, icon: overrideIcon, ...rest }) => {
 	const { soc } = useBatteryProgressRowContext();
 	const clampedSoc = Math.min(Math.max(soc, 0), 100);
 	const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6);
-	const iconName = clampedSoc === 100 ? "battery_full" : `battery_${batteryLevel}_bar`;
+	const fallback = clampedSoc === 100 ? _epilot_spark_icons.BatteryFull : BATTERY_BY_LEVEL[batteryLevel] ?? _epilot_spark_icons.Battery0Bar;
+	const Glyph = overrideIcon ?? fallback;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
 		...rest,
 		className,
 		color: "success",
-		name: overrideIcon ?? iconName,
-		size: "large"
+		size: "large",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {})
 	});
 };
 const BatteryProgressRowContent = ({ className, ...rest }) => {

package/dist/components/battery-progress-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"battery-progress-row.cjs","names":["Icon","Badge","Progress"],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\n/**\n * Battery icon. Auto-selects its variant from the row's `soc`.\n *\n * @param className - Optional className to apply to the icon to further style it\n * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)\n * @param ...rest - Additional props to pass to the span\n * @returns A React component that renders a battery icon\n */\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: MaterialSymbolIconName }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const iconName: MaterialSymbolIconName =\n    clampedSoc === 100\n      ? 'battery_full'\n      : (`battery_${batteryLevel}_bar` as MaterialSymbolIconName)\n\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color=\"success\"\n      name={overrideIcon ?? iconName}\n      size=\"large\"\n    />\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":"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"}
+{"version":3,"file":"battery-progress-row.cjs","names":["Battery0Bar","Battery1Bar","Battery2Bar","Battery3Bar","Battery4Bar","Battery5Bar","Battery6Bar","BatteryFull","Icon","Badge","Progress"],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import {\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n  BatteryFull,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport { createContext, useContext } from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\nconst BATTERY_BY_LEVEL = [\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n] as const\n\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: SparkIcon }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const fallback: SparkIcon =\n    clampedSoc === 100\n      ? BatteryFull\n      : (BATTERY_BY_LEVEL[batteryLevel] ?? Battery0Bar)\n  const Glyph = overrideIcon ?? fallback\n\n  return (\n    <Icon {...rest} className={className} color=\"success\" size=\"large\">\n      <Glyph />\n    </Icon>\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":"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"}

package/dist/components/battery-progress-row.d.cts

@@ -1,8 +1,8 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
 import { Tone } from "../lib/tones.cjs";
 import { Progress } from "./progress.cjs";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/battery-progress-row.d.ts
 declare const BatteryProgressRow: ({
@@ -13,20 +13,12 @@ declare const BatteryProgressRow: ({
 }: React.ComponentProps<"div"> & {
   soc: number;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * Battery icon. Auto-selects its variant from the row's `soc`.
- *
- * @param className - Optional className to apply to the icon to further style it
- * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
- * @param ...rest - Additional props to pass to the span
- * @returns A React component that renders a battery icon
- */
 declare const BatteryProgressRowIcon: ({
   className,
   icon: overrideIcon,
   ...rest
 }: React.ComponentProps<"span"> & {
-  icon?: MaterialSymbolIconName;
+  icon?: SparkIcon;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const BatteryProgressRowContent: ({
   className,

package/dist/components/battery-progress-row.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.js";
 import { Tone } from "../lib/tones.js";
 import { Progress } from "./progress.js";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/battery-progress-row.d.ts
 declare const BatteryProgressRow: ({
@@ -13,20 +13,12 @@ declare const BatteryProgressRow: ({
 }: React.ComponentProps<"div"> & {
   soc: number;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * Battery icon. Auto-selects its variant from the row's `soc`.
- *
- * @param className - Optional className to apply to the icon to further style it
- * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
- * @param ...rest - Additional props to pass to the span
- * @returns A React component that renders a battery icon
- */
 declare const BatteryProgressRowIcon: ({
   className,
   icon: overrideIcon,
   ...rest
 }: React.ComponentProps<"span"> & {
-  icon?: MaterialSymbolIconName;
+  icon?: SparkIcon;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const BatteryProgressRowContent: ({
   className,

package/dist/components/battery-progress-row.js

@@ -4,6 +4,7 @@ import { Badge } from "./badge.js";
 import { Icon } from "./icon.js";
 import { Progress } from "./progress.js";
 import { createContext, useContext } from "react";
+import { Battery0Bar, Battery1Bar, Battery2Bar, Battery3Bar, Battery4Bar, Battery5Bar, Battery6Bar, BatteryFull } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/battery-progress-row.tsx
 const BatteryProgressRowContext = createContext(null);
@@ -22,25 +23,27 @@ const BatteryProgressRow = ({ className, soc, children, ...rest }) => {
 		})
 	});
 };
-/**
-* Battery icon. Auto-selects its variant from the row's `soc`.
-*
-* @param className - Optional className to apply to the icon to further style it
-* @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
-* @param ...rest - Additional props to pass to the span
-* @returns A React component that renders a battery icon
-*/
+const BATTERY_BY_LEVEL = [
+	Battery0Bar,
+	Battery1Bar,
+	Battery2Bar,
+	Battery3Bar,
+	Battery4Bar,
+	Battery5Bar,
+	Battery6Bar
+];
 const BatteryProgressRowIcon = ({ className, icon: overrideIcon, ...rest }) => {
 	const { soc } = useBatteryProgressRowContext();
 	const clampedSoc = Math.min(Math.max(soc, 0), 100);
 	const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6);
-	const iconName = clampedSoc === 100 ? "battery_full" : `battery_${batteryLevel}_bar`;
+	const fallback = clampedSoc === 100 ? BatteryFull : BATTERY_BY_LEVEL[batteryLevel] ?? Battery0Bar;
+	const Glyph = overrideIcon ?? fallback;
 	return /* @__PURE__ */ jsx(Icon, {
 		...rest,
 		className,
 		color: "success",
-		name: overrideIcon ?? iconName,
-		size: "large"
+		size: "large",
+		children: /* @__PURE__ */ jsx(Glyph, {})
 	});
 };
 const BatteryProgressRowContent = ({ className, ...rest }) => {

package/dist/components/battery-progress-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"battery-progress-row.js","names":[],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\n/**\n * Battery icon. Auto-selects its variant from the row's `soc`.\n *\n * @param className - Optional className to apply to the icon to further style it\n * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)\n * @param ...rest - Additional props to pass to the span\n * @returns A React component that renders a battery icon\n */\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: MaterialSymbolIconName }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const iconName: MaterialSymbolIconName =\n    clampedSoc === 100\n      ? 'battery_full'\n      : (`battery_${batteryLevel}_bar` as MaterialSymbolIconName)\n\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color=\"success\"\n      name={overrideIcon ?? iconName}\n      size=\"large\"\n    />\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,4BACJ,cAAqD,IAAI;AAE3D,SAAS,+BAA+B;CACtC,MAAM,UAAU,WAAW,yBAAyB;CACpD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,mEACF;CAEF,OAAO;AACT;AAEA,MAAM,sBAAsB,EAC1B,WACA,KACA,UACA,GAAG,WACgD;CACnD,OACE,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO,EAAE,IAAI;YAC/C,oBAAC,OAAD;GAAK,WAAW,GAAG,2BAA2B,SAAS;GAAG,GAAI;GAC3D;EACE,CAAA;CAC6B,CAAA;AAExC;;;;;;;;;AAUA,MAAM,0BAA0B,EAC9B,WACA,MAAM,cACN,GAAG,WACmE;CACtE,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,MAAM,aAAa,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,GAAG;CACjD,MAAM,eAAe,KAAK,IAAI,KAAK,MAAM,cAAc,MAAM,EAAE,GAAG,CAAC;CACnE,MAAM,WACJ,eAAe,MACX,iBACC,WAAW,aAAa;CAE/B,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACX,OAAM;EACN,MAAM,gBAAgB;EACtB,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,6BAA6B,EACjC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAkD;CACtD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,gCAAgC,EACpC,WACA,UACA,OAAO,WACP,GAAG,WACgE;CACnE,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,OAAD;EACE,OAAO,iBAAiB;EACxB,WAAW,GAAG,SAAS,SAAS;EAChC,GAAI;EAEH;CACI,CAAA;AAEX;AAEA,MAAM,mCAAmC,EACvC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kEACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;AAKA,MAAM,iCAAiC,EACrC,WACA,GAAG,WAC+D;CAClE,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OAAO,oBAAC,UAAD;EAAqB;EAAW,KAAK;EAAK,OAAO;EAAK,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;EACjC;CACG,CAAA;AAEV;;;;AAKA,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC+B;CAClC,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;YACjC,GAAG,IAAI;CACJ,CAAA;AAEV"}
+{"version":3,"file":"battery-progress-row.js","names":[],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import {\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n  BatteryFull,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport { createContext, useContext } from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\nconst BATTERY_BY_LEVEL = [\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n] as const\n\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: SparkIcon }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const fallback: SparkIcon =\n    clampedSoc === 100\n      ? BatteryFull\n      : (BATTERY_BY_LEVEL[batteryLevel] ?? Battery0Bar)\n  const Glyph = overrideIcon ?? fallback\n\n  return (\n    <Icon {...rest} className={className} color=\"success\" size=\"large\">\n      <Glyph />\n    </Icon>\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":";;;;;;;;;AAsBA,MAAM,4BACJ,cAAqD,IAAI;AAE3D,SAAS,+BAA+B;CACtC,MAAM,UAAU,WAAW,yBAAyB;CACpD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,mEACF;CAEF,OAAO;AACT;AAEA,MAAM,sBAAsB,EAC1B,WACA,KACA,UACA,GAAG,WACgD;CACnD,OACE,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO,EAAE,IAAI;YAC/C,oBAAC,OAAD;GAAK,WAAW,GAAG,2BAA2B,SAAS;GAAG,GAAI;GAC3D;EACE,CAAA;CAC6B,CAAA;AAExC;AAEA,MAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,0BAA0B,EAC9B,WACA,MAAM,cACN,GAAG,WACsD;CACzD,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,MAAM,aAAa,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,GAAG;CACjD,MAAM,eAAe,KAAK,IAAI,KAAK,MAAM,cAAc,MAAM,EAAE,GAAG,CAAC;CACnE,MAAM,WACJ,eAAe,MACX,cACC,iBAAiB,iBAAiB;CACzC,MAAM,QAAQ,gBAAgB;CAE9B,OACE,oBAAC,MAAD;EAAM,GAAI;EAAiB;EAAW,OAAM;EAAU,MAAK;YACzD,oBAAC,OAAD,CAAQ,CAAA;CACJ,CAAA;AAEV;AAEA,MAAM,6BAA6B,EACjC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAkD;CACtD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,gCAAgC,EACpC,WACA,UACA,OAAO,WACP,GAAG,WACgE;CACnE,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,OAAD;EACE,OAAO,iBAAiB;EACxB,WAAW,GAAG,SAAS,SAAS;EAChC,GAAI;EAEH;CACI,CAAA;AAEX;AAEA,MAAM,mCAAmC,EACvC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kEACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;AAKA,MAAM,iCAAiC,EACrC,WACA,GAAG,WAC+D;CAClE,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OAAO,oBAAC,UAAD;EAAqB;EAAW,KAAK;EAAK,OAAO;EAAK,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;EACjC;CACG,CAAA;AAEV;;;;AAKA,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC+B;CAClC,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;YACjC,GAAG,IAAI;CACJ,CAAA;AAEV"}

package/dist/components/box.cjs

@@ -22,7 +22,7 @@ const fixedPaddingClasses = {
 	sm: "p-3",
 	lg: "p-6"
 };
-function Box({ className, variant, color, radius = "2xl", padding = "md", elevated, render, ...props }) {
+function Box({ className, variant, color, radius = "lg", padding = "md", elevated, render, ...props }) {
 	const interactive = render != null;
 	const resolved = variant ?? "ambient";
 	return (0, _base_ui_react_use_render.useRender)({

package/dist/components/box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"box.cjs","names":["containerChrome","containerPaddingAll","radiusClasses","containerInteractiveClasses"],"sources":["../../src/components/box.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport type * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingAll,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst boxVariants = cva('relative flex w-full flex-col', {\n  variants: {\n    variant: {\n      ambient: containerChrome.ambient,\n      soft: containerChrome.soft,\n      surface: containerChrome.surface,\n      outline: containerChrome.outline,\n      ghost: containerChrome.ghost,\n      solid: containerChrome.solid,\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ntype BoxPadding = 'none' | 'sm' | 'md' | 'lg'\n\nconst fixedPaddingClasses: Record<Exclude<BoxPadding, 'md'>, string> = {\n  none: '',\n  sm: 'p-3',\n  lg: 'p-6',\n}\n\ninterface BoxProps extends useRender.ComponentProps<'div'> {\n  /**\n   * Same chrome recipe as `Card`, with none of its header/title/description/\n   * footer slots — for wrapping arbitrary content instead. Unset → follows\n   * the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `2xl`. */\n  radius?: ContainerRadius\n  /** Padding on all sides. `md` (default) follows the variant's own inset (chromed variants pad, `ghost` sits flush); `none` strips it entirely for a clipped frame. */\n  padding?: BoxPadding\n  /**\n   * Lift the box off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n}\n\nfunction Box({\n  className,\n  variant,\n  color,\n  radius = '2xl',\n  padding = 'md',\n  elevated,\n  render,\n  ...props\n}: BoxProps) {\n  const interactive = render != null\n  const resolved = variant ?? 'ambient'\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'box',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          boxVariants({ variant }),\n          padding === 'md'\n            ? containerPaddingAll[resolved]\n            : fixedPaddingClasses[padding],\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nexport { Box }\nexport type { BoxProps, BoxPadding }\n"],"mappings":";;;;;;;;AAeA,MAAM,eAAA,GAAA,yBAAA,KAAkB,iCAAiC;CACvD,UAAU,EACR,SAAS;EACP,SAASA,6BAAAA,gBAAgB;EACzB,MAAMA,6BAAAA,gBAAgB;EACtB,SAASA,6BAAAA,gBAAgB;EACzB,SAASA,6BAAAA,gBAAgB;EACzB,OAAOA,6BAAAA,gBAAgB;EACvB,OAAOA,6BAAAA,gBAAgB;CACzB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAID,MAAM,sBAAiE;CACrE,MAAM;CACN,IAAI;CACJ,IAAI;AACN;AAuBA,SAAS,IAAI,EACX,WACA,SACA,OACA,SAAS,OACT,UAAU,MACV,UACA,QACA,GAAG,SACQ;CACX,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,YAAA,GAAA,OAAA,IACE,YAAY,EAAE,QAAQ,CAAC,GACvB,YAAY,OACRC,6BAAAA,oBAAoB,YACpB,oBAAoB,UACxBC,6BAAAA,cAAc,SACd,YAAA,kLACA,eAAeC,6BAAAA,4BAA4B,UAAU,QAAQ,GAC7D,SACF;EACF,GACA,KACF;CACF,CAAC;AACH"}
+{"version":3,"file":"box.cjs","names":["containerChrome","containerPaddingAll","radiusClasses","containerInteractiveClasses"],"sources":["../../src/components/box.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport type * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingAll,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst boxVariants = cva('relative flex w-full flex-col', {\n  variants: {\n    variant: {\n      ambient: containerChrome.ambient,\n      soft: containerChrome.soft,\n      surface: containerChrome.surface,\n      outline: containerChrome.outline,\n      ghost: containerChrome.ghost,\n      solid: containerChrome.solid,\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ntype BoxPadding = 'none' | 'sm' | 'md' | 'lg'\n\nconst fixedPaddingClasses: Record<Exclude<BoxPadding, 'md'>, string> = {\n  none: '',\n  sm: 'p-3',\n  lg: 'p-6',\n}\n\ninterface BoxProps extends useRender.ComponentProps<'div'> {\n  /**\n   * Same chrome recipe as `Card`, with none of its header/title/description/\n   * footer slots — for wrapping arbitrary content instead. Unset → follows\n   * the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`. */\n  radius?: ContainerRadius\n  /** Padding on all sides. `md` (default) follows the variant's own inset (chromed variants pad, `ghost` sits flush); `none` strips it entirely for a clipped frame. */\n  padding?: BoxPadding\n  /**\n   * Lift the box off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n}\n\nfunction Box({\n  className,\n  variant,\n  color,\n  radius = 'lg',\n  padding = 'md',\n  elevated,\n  render,\n  ...props\n}: BoxProps) {\n  const interactive = render != null\n  const resolved = variant ?? 'ambient'\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'box',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          boxVariants({ variant }),\n          padding === 'md'\n            ? containerPaddingAll[resolved]\n            : fixedPaddingClasses[padding],\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nexport { Box }\nexport type { BoxProps, BoxPadding }\n"],"mappings":";;;;;;;;AAeA,MAAM,eAAA,GAAA,yBAAA,KAAkB,iCAAiC;CACvD,UAAU,EACR,SAAS;EACP,SAASA,6BAAAA,gBAAgB;EACzB,MAAMA,6BAAAA,gBAAgB;EACtB,SAASA,6BAAAA,gBAAgB;EACzB,SAASA,6BAAAA,gBAAgB;EACzB,OAAOA,6BAAAA,gBAAgB;EACvB,OAAOA,6BAAAA,gBAAgB;CACzB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAID,MAAM,sBAAiE;CACrE,MAAM;CACN,IAAI;CACJ,IAAI;AACN;AAuBA,SAAS,IAAI,EACX,WACA,SACA,OACA,SAAS,MACT,UAAU,MACV,UACA,QACA,GAAG,SACQ;CACX,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,YAAA,GAAA,OAAA,IACE,YAAY,EAAE,QAAQ,CAAC,GACvB,YAAY,OACRC,6BAAAA,oBAAoB,YACpB,oBAAoB,UACxBC,6BAAAA,cAAc,SACd,YAAA,kLACA,eAAeC,6BAAAA,4BAA4B,UAAU,QAAQ,GAC7D,SACF;EACF,GACA,KACF;CACF,CAAC;AACH"}

package/dist/components/box.d.cts

@@ -16,7 +16,7 @@ interface BoxProps extends useRender.ComponentProps<'div'> {
   variant?: SparkCardVariant;
   /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */
   color?: SparkCardColor;
-  /** Corner radius, as a named step. Unset → `2xl`. */
+  /** Corner radius, as a named step. Unset → `lg`. */
   radius?: ContainerRadius;
   /** Padding on all sides. `md` (default) follows the variant's own inset (chromed variants pad, `ghost` sits flush); `none` strips it entirely for a clipped frame. */
   padding?: BoxPadding;

package/dist/components/box.d.ts

@@ -16,7 +16,7 @@ interface BoxProps extends useRender.ComponentProps<'div'> {
   variant?: SparkCardVariant;
   /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */
   color?: SparkCardColor;
-  /** Corner radius, as a named step. Unset → `2xl`. */
+  /** Corner radius, as a named step. Unset → `lg`. */
   radius?: ContainerRadius;
   /** Padding on all sides. `md` (default) follows the variant's own inset (chromed variants pad, `ghost` sits flush); `none` strips it entirely for a clipped frame. */
   padding?: BoxPadding;

package/dist/components/box.js

@@ -21,7 +21,7 @@ const fixedPaddingClasses = {
 	sm: "p-3",
 	lg: "p-6"
 };
-function Box({ className, variant, color, radius = "2xl", padding = "md", elevated, render, ...props }) {
+function Box({ className, variant, color, radius = "lg", padding = "md", elevated, render, ...props }) {
 	const interactive = render != null;
 	const resolved = variant ?? "ambient";
 	return useRender({

package/dist/components/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","names":[],"sources":["../../src/components/box.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport type * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingAll,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst boxVariants = cva('relative flex w-full flex-col', {\n  variants: {\n    variant: {\n      ambient: containerChrome.ambient,\n      soft: containerChrome.soft,\n      surface: containerChrome.surface,\n      outline: containerChrome.outline,\n      ghost: containerChrome.ghost,\n      solid: containerChrome.solid,\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ntype BoxPadding = 'none' | 'sm' | 'md' | 'lg'\n\nconst fixedPaddingClasses: Record<Exclude<BoxPadding, 'md'>, string> = {\n  none: '',\n  sm: 'p-3',\n  lg: 'p-6',\n}\n\ninterface BoxProps extends useRender.ComponentProps<'div'> {\n  /**\n   * Same chrome recipe as `Card`, with none of its header/title/description/\n   * footer slots — for wrapping arbitrary content instead. Unset → follows\n   * the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `2xl`. */\n  radius?: ContainerRadius\n  /** Padding on all sides. `md` (default) follows the variant's own inset (chromed variants pad, `ghost` sits flush); `none` strips it entirely for a clipped frame. */\n  padding?: BoxPadding\n  /**\n   * Lift the box off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n}\n\nfunction Box({\n  className,\n  variant,\n  color,\n  radius = '2xl',\n  padding = 'md',\n  elevated,\n  render,\n  ...props\n}: BoxProps) {\n  const interactive = render != null\n  const resolved = variant ?? 'ambient'\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'box',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          boxVariants({ variant }),\n          padding === 'md'\n            ? containerPaddingAll[resolved]\n            : fixedPaddingClasses[padding],\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nexport { Box }\nexport type { BoxProps, BoxPadding }\n"],"mappings":";;;;;;;AAeA,MAAM,cAAc,IAAI,iCAAiC;CACvD,UAAU,EACR,SAAS;EACP,SAAS,gBAAgB;EACzB,MAAM,gBAAgB;EACtB,SAAS,gBAAgB;EACzB,SAAS,gBAAgB;EACzB,OAAO,gBAAgB;EACvB,OAAO,gBAAgB;CACzB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAID,MAAM,sBAAiE;CACrE,MAAM;CACN,IAAI;CACJ,IAAI;AACN;AAuBA,SAAS,IAAI,EACX,WACA,SACA,OACA,SAAS,OACT,UAAU,MACV,UACA,QACA,GAAG,SACQ;CACX,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,WAAW,GACT,YAAY,EAAE,QAAQ,CAAC,GACvB,YAAY,OACR,oBAAoB,YACpB,oBAAoB,UACxB,cAAc,SACd,YAAA,kLACA,eAAe,4BAA4B,UAAU,QAAQ,GAC7D,SACF;EACF,GACA,KACF;CACF,CAAC;AACH"}
+{"version":3,"file":"box.js","names":[],"sources":["../../src/components/box.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport type * as React from 'react'\nimport {\n  containerChrome,\n  containerElevated,\n  containerInteractiveClasses,\n  containerPaddingAll,\n  radiusClasses,\n  type ContainerRadius,\n} from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst boxVariants = cva('relative flex w-full flex-col', {\n  variants: {\n    variant: {\n      ambient: containerChrome.ambient,\n      soft: containerChrome.soft,\n      surface: containerChrome.surface,\n      outline: containerChrome.outline,\n      ghost: containerChrome.ghost,\n      solid: containerChrome.solid,\n    },\n  },\n  defaultVariants: {\n    variant: 'ambient',\n  },\n})\n\ntype BoxPadding = 'none' | 'sm' | 'md' | 'lg'\n\nconst fixedPaddingClasses: Record<Exclude<BoxPadding, 'md'>, string> = {\n  none: '',\n  sm: 'p-3',\n  lg: 'p-6',\n}\n\ninterface BoxProps extends useRender.ComponentProps<'div'> {\n  /**\n   * Same chrome recipe as `Card`, with none of its header/title/description/\n   * footer slots — for wrapping arbitrary content instead. Unset → follows\n   * the app-level `[data-card-variant]` knob (default soft-neutral).\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`. */\n  radius?: ContainerRadius\n  /** Padding on all sides. `md` (default) follows the variant's own inset (chromed variants pad, `ghost` sits flush); `none` strips it entirely for a clipped frame. */\n  padding?: BoxPadding\n  /**\n   * Lift the box off an arbitrary backdrop (a photo, not the flat app canvas):\n   * an opaque `--spark-elevated` fill plus a shadow, so no `variant`/`color`\n   * combination — including a translucent one like `soft` — can bleed it through.\n   */\n  elevated?: boolean\n}\n\nfunction Box({\n  className,\n  variant,\n  color,\n  radius = 'lg',\n  padding = 'md',\n  elevated,\n  render,\n  ...props\n}: BoxProps) {\n  const interactive = render != null\n  const resolved = variant ?? 'ambient'\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'box',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        'data-elevated': elevated ? '' : undefined,\n        className: cn(\n          boxVariants({ variant }),\n          padding === 'md'\n            ? containerPaddingAll[resolved]\n            : fixedPaddingClasses[padding],\n          radiusClasses[radius],\n          elevated && containerElevated,\n          interactive && containerInteractiveClasses(resolved, elevated),\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nexport { Box }\nexport type { BoxProps, BoxPadding }\n"],"mappings":";;;;;;;AAeA,MAAM,cAAc,IAAI,iCAAiC;CACvD,UAAU,EACR,SAAS;EACP,SAAS,gBAAgB;EACzB,MAAM,gBAAgB;EACtB,SAAS,gBAAgB;EACzB,SAAS,gBAAgB;EACzB,OAAO,gBAAgB;EACvB,OAAO,gBAAgB;CACzB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAID,MAAM,sBAAiE;CACrE,MAAM;CACN,IAAI;CACJ,IAAI;AACN;AAuBA,SAAS,IAAI,EACX,WACA,SACA,OACA,SAAS,MACT,UAAU,MACV,UACA,QACA,GAAG,SACQ;CACX,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,iBAAiB,WAAW,KAAK,KAAA;GACjC,WAAW,GACT,YAAY,EAAE,QAAQ,CAAC,GACvB,YAAY,OACR,oBAAoB,YACpB,oBAAoB,UACxB,cAAc,SACd,YAAA,kLACA,eAAe,4BAA4B,UAAU,QAAQ,GAC7D,SACF;EACF,GACA,KACF;CACF,CAAC;AACH"}

package/dist/components/breadcrumbs.cjs

@@ -33,7 +33,7 @@ const BreadcrumbsLink = ({ className, render, ...rest }) => {
 	return (0, _base_ui_react_use_render.useRender)({
 		defaultTagName: "a",
 		render,
-		props: (0, _base_ui_react_merge_props.mergeProps)({ className: (0, cnfast.cn)("rounded-xs transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", className) }, rest)
+		props: (0, _base_ui_react_merge_props.mergeProps)({ className: (0, cnfast.cn)("rounded-sm transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", className) }, rest)
 	});
 };
 /** Current page marker — the trailing breadcrumb the user is on. */

package/dist/components/breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.cjs","names":[],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cn } from '../utils/cn'\n\nconst Breadcrumbs = ({\n  className,\n  'aria-label': ariaLabel = 'Breadcrumb',\n  ...rest\n}: React.ComponentProps<'nav'>) => {\n  return <nav aria-label={ariaLabel} className={cn(className)} {...rest} />\n}\n\nconst BreadcrumbsList = ({\n  className,\n  ...rest\n}: React.ComponentProps<'ol'>) => {\n  return (\n    <ol\n      className={cn(\n        'flex flex-wrap items-center gap-1.5 text-sm text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BreadcrumbsItem = ({\n  className,\n  ...rest\n}: React.ComponentProps<'li'>) => {\n  return <li className={cn('flex items-center gap-1.5', className)} {...rest} />\n}\n\n/**\n * Link inside a breadcrumb. Pass `render` to render any router-specific link\n * component (TanStack `Link`, Next `Link`, plain `<a>`, …) and inherit the\n * breadcrumb link styling. Without `render` it renders as a plain anchor.\n */\nconst BreadcrumbsLink = ({\n  className,\n  render,\n  ...rest\n}: useRender.ComponentProps<'a'>) => {\n  return useRender({\n    defaultTagName: 'a',\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          'rounded-xs transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          className,\n        ),\n      },\n      rest,\n    ),\n  })\n}\n\n/** Current page marker — the trailing breadcrumb the user is on. */\nconst BreadcrumbsPage = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn('font-medium text-gray', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Visual separator between breadcrumb items. Defaults to \"/\". */\nconst BreadcrumbsSeparator = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span aria-hidden=\"true\" className={cn(className)} {...rest}>\n      {children ?? '/'}\n    </span>\n  )\n}\n\nexport {\n  Breadcrumbs,\n  BreadcrumbsList,\n  BreadcrumbsItem,\n  BreadcrumbsLink,\n  BreadcrumbsPage,\n  BreadcrumbsSeparator,\n}\n"],"mappings":";;;;;;;AAIA,MAAM,eAAe,EACnB,WACA,cAAc,YAAY,cAC1B,GAAG,WAC8B;CACjC,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY;EAAW,YAAA,GAAA,OAAA,IAAc,SAAS;EAAG,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IACE,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,6BAA6B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;;;;;;AAOA,MAAM,mBAAmB,EACvB,WACA,QACA,GAAG,WACgC;CACnC,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE,EACE,YAAA,GAAA,OAAA,IACE,8HACA,SACF,EACF,GACA,IACF;CACF,CAAC;AACH;;AAGA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,gBAAa;EACb,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,wBAAwB,EAC5B,UACA,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,eAAY;EAAO,YAAA,GAAA,OAAA,IAAc,SAAS;EAAG,GAAI;YACpD,YAAY;CACT,CAAA;AAEV"}
+{"version":3,"file":"breadcrumbs.cjs","names":[],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cn } from '../utils/cn'\n\nconst Breadcrumbs = ({\n  className,\n  'aria-label': ariaLabel = 'Breadcrumb',\n  ...rest\n}: React.ComponentProps<'nav'>) => {\n  return <nav aria-label={ariaLabel} className={cn(className)} {...rest} />\n}\n\nconst BreadcrumbsList = ({\n  className,\n  ...rest\n}: React.ComponentProps<'ol'>) => {\n  return (\n    <ol\n      className={cn(\n        'flex flex-wrap items-center gap-1.5 text-sm text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BreadcrumbsItem = ({\n  className,\n  ...rest\n}: React.ComponentProps<'li'>) => {\n  return <li className={cn('flex items-center gap-1.5', className)} {...rest} />\n}\n\n/**\n * Link inside a breadcrumb. Pass `render` to render any router-specific link\n * component (TanStack `Link`, Next `Link`, plain `<a>`, …) and inherit the\n * breadcrumb link styling. Without `render` it renders as a plain anchor.\n */\nconst BreadcrumbsLink = ({\n  className,\n  render,\n  ...rest\n}: useRender.ComponentProps<'a'>) => {\n  return useRender({\n    defaultTagName: 'a',\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          'rounded-sm transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          className,\n        ),\n      },\n      rest,\n    ),\n  })\n}\n\n/** Current page marker — the trailing breadcrumb the user is on. */\nconst BreadcrumbsPage = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn('font-medium text-gray', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Visual separator between breadcrumb items. Defaults to \"/\". */\nconst BreadcrumbsSeparator = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span aria-hidden=\"true\" className={cn(className)} {...rest}>\n      {children ?? '/'}\n    </span>\n  )\n}\n\nexport {\n  Breadcrumbs,\n  BreadcrumbsList,\n  BreadcrumbsItem,\n  BreadcrumbsLink,\n  BreadcrumbsPage,\n  BreadcrumbsSeparator,\n}\n"],"mappings":";;;;;;;AAIA,MAAM,eAAe,EACnB,WACA,cAAc,YAAY,cAC1B,GAAG,WAC8B;CACjC,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY;EAAW,YAAA,GAAA,OAAA,IAAc,SAAS;EAAG,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,YAAA,GAAA,OAAA,IACE,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,YAAA,GAAA,OAAA,IAAc,6BAA6B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;;;;;;AAOA,MAAM,mBAAmB,EACvB,WACA,QACA,GAAG,WACgC;CACnC,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE,EACE,YAAA,GAAA,OAAA,IACE,8HACA,SACF,EACF,GACA,IACF;CACF,CAAC;AACH;;AAGA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,gBAAa;EACb,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,wBAAwB,EAC5B,UACA,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,eAAY;EAAO,YAAA,GAAA,OAAA,IAAc,SAAS;EAAG,GAAI;YACpD,YAAY;CACT,CAAA;AAEV"}

package/dist/components/breadcrumbs.js

@@ -32,7 +32,7 @@ const BreadcrumbsLink = ({ className, render, ...rest }) => {
 	return useRender({
 		defaultTagName: "a",
 		render,
-		props: mergeProps({ className: cn("rounded-xs transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", className) }, rest)
+		props: mergeProps({ className: cn("rounded-sm transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", className) }, rest)
 	});
 };
 /** Current page marker — the trailing breadcrumb the user is on. */

package/dist/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cn } from '../utils/cn'\n\nconst Breadcrumbs = ({\n  className,\n  'aria-label': ariaLabel = 'Breadcrumb',\n  ...rest\n}: React.ComponentProps<'nav'>) => {\n  return <nav aria-label={ariaLabel} className={cn(className)} {...rest} />\n}\n\nconst BreadcrumbsList = ({\n  className,\n  ...rest\n}: React.ComponentProps<'ol'>) => {\n  return (\n    <ol\n      className={cn(\n        'flex flex-wrap items-center gap-1.5 text-sm text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BreadcrumbsItem = ({\n  className,\n  ...rest\n}: React.ComponentProps<'li'>) => {\n  return <li className={cn('flex items-center gap-1.5', className)} {...rest} />\n}\n\n/**\n * Link inside a breadcrumb. Pass `render` to render any router-specific link\n * component (TanStack `Link`, Next `Link`, plain `<a>`, …) and inherit the\n * breadcrumb link styling. Without `render` it renders as a plain anchor.\n */\nconst BreadcrumbsLink = ({\n  className,\n  render,\n  ...rest\n}: useRender.ComponentProps<'a'>) => {\n  return useRender({\n    defaultTagName: 'a',\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          'rounded-xs transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          className,\n        ),\n      },\n      rest,\n    ),\n  })\n}\n\n/** Current page marker — the trailing breadcrumb the user is on. */\nconst BreadcrumbsPage = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn('font-medium text-gray', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Visual separator between breadcrumb items. Defaults to \"/\". */\nconst BreadcrumbsSeparator = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span aria-hidden=\"true\" className={cn(className)} {...rest}>\n      {children ?? '/'}\n    </span>\n  )\n}\n\nexport {\n  Breadcrumbs,\n  BreadcrumbsList,\n  BreadcrumbsItem,\n  BreadcrumbsLink,\n  BreadcrumbsPage,\n  BreadcrumbsSeparator,\n}\n"],"mappings":";;;;;;AAIA,MAAM,eAAe,EACnB,WACA,cAAc,YAAY,cAC1B,GAAG,WAC8B;CACjC,OAAO,oBAAC,OAAD;EAAK,cAAY;EAAW,WAAW,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OACE,oBAAC,MAAD;EACE,WAAW,GACT,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;;;;;;AAOA,MAAM,mBAAmB,EACvB,WACA,QACA,GAAG,WACgC;CACnC,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,EACE,WAAW,GACT,8HACA,SACF,EACF,GACA,IACF;CACF,CAAC;AACH;;AAGA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,gBAAa;EACb,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,wBAAwB,EAC5B,UACA,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW,GAAG,SAAS;EAAG,GAAI;YACpD,YAAY;CACT,CAAA;AAEV"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cn } from '../utils/cn'\n\nconst Breadcrumbs = ({\n  className,\n  'aria-label': ariaLabel = 'Breadcrumb',\n  ...rest\n}: React.ComponentProps<'nav'>) => {\n  return <nav aria-label={ariaLabel} className={cn(className)} {...rest} />\n}\n\nconst BreadcrumbsList = ({\n  className,\n  ...rest\n}: React.ComponentProps<'ol'>) => {\n  return (\n    <ol\n      className={cn(\n        'flex flex-wrap items-center gap-1.5 text-sm text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BreadcrumbsItem = ({\n  className,\n  ...rest\n}: React.ComponentProps<'li'>) => {\n  return <li className={cn('flex items-center gap-1.5', className)} {...rest} />\n}\n\n/**\n * Link inside a breadcrumb. Pass `render` to render any router-specific link\n * component (TanStack `Link`, Next `Link`, plain `<a>`, …) and inherit the\n * breadcrumb link styling. Without `render` it renders as a plain anchor.\n */\nconst BreadcrumbsLink = ({\n  className,\n  render,\n  ...rest\n}: useRender.ComponentProps<'a'>) => {\n  return useRender({\n    defaultTagName: 'a',\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          'rounded-sm transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          className,\n        ),\n      },\n      rest,\n    ),\n  })\n}\n\n/** Current page marker — the trailing breadcrumb the user is on. */\nconst BreadcrumbsPage = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn('font-medium text-gray', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Visual separator between breadcrumb items. Defaults to \"/\". */\nconst BreadcrumbsSeparator = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span aria-hidden=\"true\" className={cn(className)} {...rest}>\n      {children ?? '/'}\n    </span>\n  )\n}\n\nexport {\n  Breadcrumbs,\n  BreadcrumbsList,\n  BreadcrumbsItem,\n  BreadcrumbsLink,\n  BreadcrumbsPage,\n  BreadcrumbsSeparator,\n}\n"],"mappings":";;;;;;AAIA,MAAM,eAAe,EACnB,WACA,cAAc,YAAY,cAC1B,GAAG,WAC8B;CACjC,OAAO,oBAAC,OAAD;EAAK,cAAY;EAAW,WAAW,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OACE,oBAAC,MAAD;EACE,WAAW,GACT,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC6B;CAChC,OAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;;;;;;AAOA,MAAM,mBAAmB,EACvB,WACA,QACA,GAAG,WACgC;CACnC,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,EACE,WAAW,GACT,8HACA,SACF,EACF,GACA,IACF;CACF,CAAC;AACH;;AAGA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,gBAAa;EACb,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,wBAAwB,EAC5B,UACA,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW,GAAG,SAAS;EAAG,GAAI;YACpD,YAAY;CACT,CAAA;AAEV"}

package/dist/components/bubble.cjs

@@ -43,7 +43,7 @@ function BubbleContent({ className, render, ...props }) {
 		render,
 		props: (0, _base_ui_react_merge_props.mergeProps)({
 			"data-slot": "bubble-content",
-			className: (0, cnfast.cn)("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50", className)
+			className: (0, cnfast.cn)("w-fit max-w-full min-w-0 overflow-hidden rounded-lg border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50", className)
 		}, props)
 	});
 }

package/dist/components/bubble.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.cjs","names":[],"sources":["../../src/components/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\n// Each variant paints the nested [data-slot=bubble-content] surface (and its\n// interactive hover when the content is a button/anchor). Colours read spark\n// scales: accent (spark-9) for the sender's own bubbles, the neutral gray scale\n// for received/muted, and the red scale for destructive. `tinted` derives a\n// soft accent tint via oklch(from var(--spark-9) …) so it tracks the accent knob.\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-spark-9 *:data-[slot=bubble-content]:text-spark-contrast [&>[data-slot=bubble-content]:is(button,a):hover]:bg-spark-10',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-gray-2 *:data-[slot=bubble-content]:text-gray [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3',\n        muted:\n          '*:data-[slot=bubble-content]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-gray dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-gray *:data-[slot=bubble-content]:bg-gray-2 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a2',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-red-a3 *:data-[slot=bubble-content]:text-error dark:*:data-[slot=bubble-content]:bg-red-a4 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a4 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nfunction Bubble({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end'\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\n// `render` replaces radix `asChild`: pass an element (button, anchor, …) to make\n// the surface interactive; Base UI's useRender merges props onto it.\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'bubble-content',\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50',\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-gray-3 px-1.5 py-0.5 text-sm ring-3 ring-gray-2 has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n)\n\nfunction BubbleReactions({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end'\n  side?: 'top' | 'bottom'\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAOA,MAAM,kBAAA,GAAA,yBAAA,KACJ,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,OAAO,EACd,UAAU,WACV,QAAQ,SACR,WACA,GAAG,SAIA;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EACrB,WACA,QACA,GAAG,SAC+B;CAClC,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,YAAA,GAAA,OAAA,IACE,qWACA,SACF;EACF,GACA,KACF;CACF,CAAC;AACH;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,wJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,OAAO,UACP,QAAQ,OACR,WACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,YAAA,GAAA,OAAA,IAAc,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"bubble.cjs","names":[],"sources":["../../src/components/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\n// Each variant paints the nested [data-slot=bubble-content] surface (and its\n// interactive hover when the content is a button/anchor). Colours read spark\n// scales: accent (spark-9) for the sender's own bubbles, the neutral gray scale\n// for received/muted, and the red scale for destructive. `tinted` derives a\n// soft accent tint via oklch(from var(--spark-9) …) so it tracks the accent knob.\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-spark-9 *:data-[slot=bubble-content]:text-spark-contrast [&>[data-slot=bubble-content]:is(button,a):hover]:bg-spark-10',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-gray-2 *:data-[slot=bubble-content]:text-gray [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3',\n        muted:\n          '*:data-[slot=bubble-content]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-gray dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-gray *:data-[slot=bubble-content]:bg-gray-2 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a2',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-red-a3 *:data-[slot=bubble-content]:text-error dark:*:data-[slot=bubble-content]:bg-red-a4 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a4 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nfunction Bubble({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end'\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\n// `render` replaces radix `asChild`: pass an element (button, anchor, …) to make\n// the surface interactive; Base UI's useRender merges props onto it.\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'bubble-content',\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-lg border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50',\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-gray-3 px-1.5 py-0.5 text-sm ring-3 ring-gray-2 has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n)\n\nfunction BubbleReactions({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end'\n  side?: 'top' | 'bottom'\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAOA,MAAM,kBAAA,GAAA,yBAAA,KACJ,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,OAAO,EACd,UAAU,WACV,QAAQ,SACR,WACA,GAAG,SAIA;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EACrB,WACA,QACA,GAAG,SAC+B;CAClC,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,YAAA,GAAA,OAAA,IACE,qWACA,SACF;EACF,GACA,KACF;CACF,CAAC;AACH;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,wJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,OAAO,UACP,QAAQ,OACR,WACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,YAAA,GAAA,OAAA,IAAc,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.js

@@ -40,7 +40,7 @@ function BubbleContent({ className, render, ...props }) {
 		render,
 		props: mergeProps({
 			"data-slot": "bubble-content",
-			className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50", className)
+			className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-lg border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50", className)
 		}, props)
 	});
 }

package/dist/components/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","names":[],"sources":["../../src/components/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\n// Each variant paints the nested [data-slot=bubble-content] surface (and its\n// interactive hover when the content is a button/anchor). Colours read spark\n// scales: accent (spark-9) for the sender's own bubbles, the neutral gray scale\n// for received/muted, and the red scale for destructive. `tinted` derives a\n// soft accent tint via oklch(from var(--spark-9) …) so it tracks the accent knob.\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-spark-9 *:data-[slot=bubble-content]:text-spark-contrast [&>[data-slot=bubble-content]:is(button,a):hover]:bg-spark-10',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-gray-2 *:data-[slot=bubble-content]:text-gray [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3',\n        muted:\n          '*:data-[slot=bubble-content]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-gray dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-gray *:data-[slot=bubble-content]:bg-gray-2 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a2',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-red-a3 *:data-[slot=bubble-content]:text-error dark:*:data-[slot=bubble-content]:bg-red-a4 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a4 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nfunction Bubble({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end'\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\n// `render` replaces radix `asChild`: pass an element (button, anchor, …) to make\n// the surface interactive; Base UI's useRender merges props onto it.\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'bubble-content',\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50',\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-gray-3 px-1.5 py-0.5 text-sm ring-3 ring-gray-2 has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n)\n\nfunction BubbleReactions({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end'\n  side?: 'top' | 'bottom'\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions }\n"],"mappings":";;;;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAOA,MAAM,iBAAiB,IACrB,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,OAAO,EACd,UAAU,WACV,QAAQ,SACR,WACA,GAAG,SAIA;CACH,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY;EACZ,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EACrB,WACA,QACA,GAAG,SAC+B;CAClC,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,WAAW,GACT,qWACA,SACF;EACF,GACA,KACF;CACF,CAAC;AACH;AAEA,MAAM,0BAA0B,IAC9B,wJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,OAAO,UACP,QAAQ,OACR,WACA,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"bubble.js","names":[],"sources":["../../src/components/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn('flex min-w-0 flex-col gap-2', className)}\n      {...props}\n    />\n  )\n}\n\n// Each variant paints the nested [data-slot=bubble-content] surface (and its\n// interactive hover when the content is a button/anchor). Colours read spark\n// scales: accent (spark-9) for the sender's own bubbles, the neutral gray scale\n// for received/muted, and the red scale for destructive. `tinted` derives a\n// soft accent tint via oklch(from var(--spark-9) …) so it tracks the accent knob.\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-spark-9 *:data-[slot=bubble-content]:text-spark-contrast [&>[data-slot=bubble-content]:is(button,a):hover]:bg-spark-10',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-gray-2 *:data-[slot=bubble-content]:text-gray [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3',\n        muted:\n          '*:data-[slot=bubble-content]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-gray dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--spark-9)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--spark-9)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-gray *:data-[slot=bubble-content]:bg-gray-2 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a4',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a3 [&>[data-slot=bubble-content]:is(button,a):hover]:text-gray dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-gray-a2',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-red-a3 *:data-[slot=bubble-content]:text-error dark:*:data-[slot=bubble-content]:bg-red-a4 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a4 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-red-a5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nfunction Bubble({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end'\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\n// `render` replaces radix `asChild`: pass an element (button, anchor, …) to make\n// the surface interactive; Base UI's useRender merges props onto it.\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<'div'>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'bubble-content',\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-lg border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-spark-a7 [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-spark-a7/50',\n          className,\n        ),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-gray-3 px-1.5 py-0.5 text-sm ring-3 ring-gray-2 has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n)\n\nfunction BubbleReactions({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end'\n  side?: 'top' | 'bottom'\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions }\n"],"mappings":";;;;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAOA,MAAM,iBAAiB,IACrB,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,OAAO,EACd,UAAU,WACV,QAAQ,SACR,WACA,GAAG,SAIA;CACH,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY;EACZ,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EACrB,WACA,QACA,GAAG,SAC+B;CAClC,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,WAAW,GACT,qWACA,SACF;EACF,GACA,KACF;CACF,CAAC;AACH;AAEA,MAAM,0BAA0B,IAC9B,wJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,OAAO,UACP,QAAQ,OACR,WACA,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}

package/dist/components/button.cjs

@@ -25,12 +25,12 @@ const buttonVariants = (0, class_variance_authority.cva)("group/button touch-tar
 			danger: "focus-visible:ring-base-error-solid"
 		},
 		size: {
-			small: "h-9 px-3 text-sm [&_svg:not([class*=size-])]:size-4",
-			default: "h-10 px-3 [&_svg:not([class*=size-])]:size-5",
-			medium: "h-11 px-4 [&_svg:not([class*=size-])]:size-6",
-			"icon-small": "size-9 [&_svg:not([class*=size-])]:size-4",
-			icon: "size-10 [&_svg:not([class*=size-])]:size-5",
-			"icon-medium": "size-11 [&_svg:not([class*=size-])]:size-6"
+			small: "h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4",
+			default: "h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5",
+			medium: "h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6",
+			"icon-small": "size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4",
+			icon: "size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5",
+			"icon-medium": "size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6"
 		}
 	},
 	defaultVariants: { size: "default" }

package/dist/components/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":["React","ButtonPrimitive","accentByColor"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))',\n        secondary:\n          'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n        tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n        bare: 'rounded-none! text-gray-12 outline-hidden!',\n        destructive:\n          'bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid',\n      },\n      color: {\n        accent: '',\n        neutral: '',\n        danger: 'focus-visible:ring-base-error-solid',\n      },\n      size: {\n        small: 'h-9 px-3 text-sm [&_svg:not([class*=size-])]:size-4',\n        default: 'h-10 px-3 [&_svg:not([class*=size-])]:size-5',\n        medium: 'h-11 px-4 [&_svg:not([class*=size-])]:size-6',\n        'icon-small': 'size-9 [&_svg:not([class*=size-])]:size-4',\n        icon: 'size-10 [&_svg:not([class*=size-])]:size-5',\n        'icon-medium': 'size-11 [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nconst buttonRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport type SparkButtonColor = 'accent' | 'neutral' | 'danger'\n\nexport interface ButtonProps\n  extends\n    Omit<React.ComponentProps<typeof ButtonPrimitive>, 'ref'>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n  styleVariant?: SparkStyle\n  color?: SparkButtonColor\n  /**\n   * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n   * (`solid | soft | surface | ghost | outline`) and `color`\n   * (`accent | neutral | danger`) instead. The `variant` axis on\n   * `buttonVariants` exists only for class-string callers.\n   */\n  variant?: never\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    styleVariant,\n    color,\n    size,\n    render,\n    nativeButton,\n    variant: _variant,\n    ...props\n  },\n  ref,\n) {\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    <ButtonPrimitive\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(buttonVariants({ size, color }), buttonRecipe, className)}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,kBAAA,GAAA,yBAAA,KACJ,0dACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;EACJ;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,QAAQ;EACV;EACA,MAAM;GACJ,OAAO;GACP,SAAS;GACT,QAAQ;GACR,cAAc;GACd,MAAM;GACN,eAAe;EACjB;CACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,eACJ;AAoBF,MAAM,SAASA,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,cACA,OACA,MACA,QACA,cACA,SAAS,UACT,GAAG,SAEL,KACA;CAKA,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,QAAD;EACE,cANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAMpD,qBALoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAMnD,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,OAAA,IAAc,eAAe;GAAE;GAAM;EAAM,CAAC,GAAG,cAAc,SAAS;EACjE;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,OAAO,cAAc"}
+{"version":3,"file":"button.cjs","names":["React","ButtonPrimitive","accentByColor"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))',\n        secondary:\n          'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n        tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n        bare: 'rounded-none! text-gray-12 outline-hidden!',\n        destructive:\n          'bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid',\n      },\n      color: {\n        accent: '',\n        neutral: '',\n        danger: 'focus-visible:ring-base-error-solid',\n      },\n      size: {\n        small:\n          'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n        default:\n          'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n        medium:\n          'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n        'icon-small':\n          'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n        icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n        'icon-medium':\n          'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nconst buttonRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport type SparkButtonColor = 'accent' | 'neutral' | 'danger'\n\nexport interface ButtonProps\n  extends\n    Omit<React.ComponentProps<typeof ButtonPrimitive>, 'ref'>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n  styleVariant?: SparkStyle\n  color?: SparkButtonColor\n  /**\n   * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n   * (`solid | soft | surface | ghost | outline`) and `color`\n   * (`accent | neutral | danger`) instead. The `variant` axis on\n   * `buttonVariants` exists only for class-string callers.\n   */\n  variant?: never\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    styleVariant,\n    color,\n    size,\n    render,\n    nativeButton,\n    variant: _variant,\n    ...props\n  },\n  ref,\n) {\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    <ButtonPrimitive\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(buttonVariants({ size, color }), buttonRecipe, className)}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,kBAAA,GAAA,yBAAA,KACJ,0dACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;EACJ;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,QAAQ;EACV;EACA,MAAM;GACJ,OACE;GACF,SACE;GACF,QACE;GACF,cACE;GACF,MAAM;GACN,eACE;EACJ;CACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,eACJ;AAoBF,MAAM,SAASA,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,cACA,OACA,MACA,QACA,cACA,SAAS,UACT,GAAG,SAEL,KACA;CAKA,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,QAAD;EACE,cANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAMpD,qBALoB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAMnD,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,OAAA,IAAc,eAAe;GAAE;GAAM;EAAM,CAAC,GAAG,cAAc,SAAS;EACjE;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,OAAO,cAAc"}

package/dist/components/button.d.cts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
   color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "icon" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/button.d.ts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
   color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "icon" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {