@epilot/spark-ui 0.16.0 → 0.17.0

package/dist/components/autocomplete.d.ts

@@ -0,0 +1,76 @@
+"use client";
+
+import { InputVariant } from "./input.js";
+import * as React$1 from "react";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+
+//#region src/components/autocomplete.d.ts
+declare const Autocomplete: typeof Autocomplete$1.Root;
+declare const AutocompleteCollection: typeof Autocomplete$1.Collection;
+declare const useAutocompleteFilter: typeof import("@base-ui/react/internals/filter").getFilter;
+declare const useAutocompleteFilteredItems: typeof Autocomplete$1.useFilteredItems;
+declare function AutocompleteInput({
+  variant,
+  id: idProp,
+  className,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Input> & {
+  variant?: InputVariant;
+}): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteInputGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.InputGroup>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteClear({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Clear>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteTrigger({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+type AutocompleteContentProps = React$1.ComponentProps<typeof Autocomplete$1.Popup> & Pick<Autocomplete$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & Pick<Autocomplete$1.Portal.Props, 'container'>;
+declare function AutocompleteContent({
+  className,
+  children,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  container,
+  ...props
+}: AutocompleteContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteList({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.List>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteItem({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteEmpty({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteStatus({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Status>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.Group>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteGroupLabel({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Autocomplete$1.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, useAutocompleteFilter, useAutocompleteFilteredItems };
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/autocomplete.js

@@ -0,0 +1,143 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { useFieldControl } from "./field.js";
+import { Input } from "./input.js";
+import { InputGroup } from "./input-group.js";
+import * as React$1 from "react";
+import { Close, KeyboardArrowDown } from "@epilot/spark-icons";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+//#region src/components/autocomplete.tsx
+const Autocomplete = Autocomplete$1.Root;
+const AutocompleteCollection = Autocomplete$1.Collection;
+const useAutocompleteFilter = Autocomplete$1.useFilter;
+const useAutocompleteFilteredItems = Autocomplete$1.useFilteredItems;
+const AutocompleteInputGroupContext = React$1.createContext(false);
+const FOCUS_RING = "focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden";
+const FOCUS_WITHIN_RING = "focus-within:ring-2 focus-within:ring-(--color-focus-root)! focus-within:ring-offset-2";
+function AutocompleteInput({ variant, id: idProp, className, "aria-describedby": ariaDescribedByProp, ...props }) {
+	const inGroup = React$1.useContext(AutocompleteInputGroupContext);
+	const resolvedVariant = variant ?? (inGroup ? "none" : void 0);
+	const { id, ariaDescribedBy, ariaInvalid } = useFieldControl({
+		id: typeof idProp === "string" ? idProp : void 0,
+		ariaDescribedBy: typeof ariaDescribedByProp === "string" ? ariaDescribedByProp : void 0,
+		variant: resolvedVariant !== "none" ? resolvedVariant : void 0
+	});
+	return /* @__PURE__ */ jsx(Autocomplete$1.Input, {
+		render: /* @__PURE__ */ jsx(Input, {
+			id,
+			variant: resolvedVariant
+		}),
+		id,
+		"aria-invalid": ariaInvalid,
+		className: cn(!inGroup && FOCUS_RING, className),
+		...props,
+		"aria-describedby": ariaDescribedBy
+	});
+}
+function AutocompleteInputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteInputGroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx(Autocomplete$1.InputGroup, {
+			"data-slot": "autocomplete-input-group",
+			render: /* @__PURE__ */ jsx(InputGroup, {}),
+			className: cn(FOCUS_WITHIN_RING, className),
+			...props
+		})
+	});
+}
+const ICON_BUTTON = "relative inline-flex size-6 shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
+function AutocompleteClear({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Clear, {
+		"data-slot": "autocomplete-clear",
+		className: cn(ICON_BUTTON, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Close, {
+			"aria-hidden": true,
+			className: "[--spark-icon-size:14px]"
+		})
+	});
+}
+function AutocompleteTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Trigger, {
+		"data-slot": "autocomplete-trigger",
+		className: cn(ICON_BUTTON, "[&_svg]:transition-transform data-popup-open:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(KeyboardArrowDown, {
+			"aria-hidden": true,
+			className: "[--spark-icon-size:14px]"
+		})
+	});
+}
+function AutocompleteContent({ className, children, align = "start", alignOffset, side, sideOffset = 4, container, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			children: /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
+				"data-slot": "autocomplete-content",
+				className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg", "transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function AutocompleteList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.List, {
+		"data-slot": "autocomplete-list",
+		className: cn("outline-hidden data-empty:p-0", className),
+		...props
+	});
+}
+function AutocompleteItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
+		"data-slot": "autocomplete-item",
+		className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none", className),
+		...props
+	});
+}
+function AutocompleteEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Empty, {
+		"data-slot": "autocomplete-empty",
+		className: cn("px-1.5 py-1.5 text-sm text-gray-light empty:p-0", className),
+		...props
+	});
+}
+function AutocompleteStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Status, {
+		"data-slot": "autocomplete-status",
+		className: cn("px-1.5 py-1.5 text-sm text-gray-light empty:p-0", className),
+		...props
+	});
+}
+function AutocompleteGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Group, {
+		"data-slot": "autocomplete-group",
+		className: cn("scroll-my-1", className),
+		...props
+	});
+}
+function AutocompleteGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.GroupLabel, {
+		"data-slot": "autocomplete-group-label",
+		className: cn("px-1.5 py-1 text-xs text-gray-light", className),
+		...props
+	});
+}
+function AutocompleteSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "autocomplete-separator",
+		className: cn("pointer-events-none -mx-1 my-1 h-px bg-gray-a3", className),
+		...props
+	});
+}
+//#endregion
+export { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, useAutocompleteFilter, useAutocompleteFilteredItems };
+
+//# sourceMappingURL=autocomplete.js.map

package/dist/components/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","names":["AutocompletePrimitive","React"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'\nimport { Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\nimport { Input, type InputVariant } from './input'\nimport { InputGroup } from './input-group'\n\nconst Autocomplete = AutocompletePrimitive.Root\nconst AutocompleteCollection = AutocompletePrimitive.Collection\nconst useAutocompleteFilter = AutocompletePrimitive.useFilter\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems\n\nconst AutocompleteInputGroupContext = React.createContext(false)\n\nconst FOCUS_RING =\n  'focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden'\n\nconst FOCUS_WITHIN_RING =\n  'focus-within:ring-2 focus-within:ring-(--color-focus-root)! focus-within:ring-offset-2'\n\nfunction AutocompleteInput({\n  variant,\n  id: idProp,\n  className,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input> & {\n  variant?: InputVariant\n}) {\n  const inGroup = React.useContext(AutocompleteInputGroupContext)\n  const resolvedVariant = variant ?? (inGroup ? 'none' : undefined)\n  const { id, ariaDescribedBy, ariaInvalid } = useFieldControl({\n    id: typeof idProp === 'string' ? idProp : undefined,\n    ariaDescribedBy:\n      typeof ariaDescribedByProp === 'string' ? ariaDescribedByProp : undefined,\n    variant: resolvedVariant !== 'none' ? resolvedVariant : undefined,\n  })\n  return (\n    <AutocompletePrimitive.Input\n      render={<Input id={id} variant={resolvedVariant} />}\n      id={id}\n      aria-invalid={ariaInvalid}\n      className={cn(!inGroup && FOCUS_RING, className)}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n}\n\nfunction AutocompleteInputGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>) {\n  return (\n    <AutocompleteInputGroupContext.Provider value={true}>\n      <AutocompletePrimitive.InputGroup\n        data-slot=\"autocomplete-input-group\"\n        render={<InputGroup />}\n        className={cn(FOCUS_WITHIN_RING, className)}\n        {...props}\n      />\n    </AutocompleteInputGroupContext.Provider>\n  )\n}\n\nconst ICON_BUTTON =\n  \"relative inline-flex size-6 shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\nfunction AutocompleteClear({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {\n  return (\n    <AutocompletePrimitive.Clear\n      data-slot=\"autocomplete-clear\"\n      className={cn(ICON_BUTTON, className)}\n      {...props}\n    >\n      {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n    </AutocompletePrimitive.Clear>\n  )\n}\n\nfunction AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n  return (\n    <AutocompletePrimitive.Trigger\n      data-slot=\"autocomplete-trigger\"\n      className={cn(\n        ICON_BUTTON,\n        '[&_svg]:transition-transform data-popup-open:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <KeyboardArrowDown aria-hidden className=\"[--spark-icon-size:14px]\" />\n      )}\n    </AutocompletePrimitive.Trigger>\n  )\n}\n\ntype AutocompleteContentProps = React.ComponentProps<\n  typeof AutocompletePrimitive.Popup\n> &\n  Pick<\n    AutocompletePrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > &\n  Pick<AutocompletePrimitive.Portal.Props, 'container'>\n\nfunction AutocompleteContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  container,\n  ...props\n}: AutocompleteContentProps) {\n  return (\n    <AutocompletePrimitive.Portal container={container}>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <AutocompletePrimitive.Popup\n          data-slot=\"autocomplete-content\"\n          className={cn(\n            'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </AutocompletePrimitive.Popup>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  )\n}\n\nfunction AutocompleteList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n  return (\n    <AutocompletePrimitive.List\n      data-slot=\"autocomplete-list\"\n      className={cn('outline-hidden data-empty:p-0', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"autocomplete-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n  return (\n    <AutocompletePrimitive.Empty\n      data-slot=\"autocomplete-empty\"\n      className={cn(\n        'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteStatus({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Status>) {\n  return (\n    <AutocompletePrimitive.Status\n      data-slot=\"autocomplete-status\"\n      className={cn(\n        'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n  return (\n    <AutocompletePrimitive.Group\n      data-slot=\"autocomplete-group\"\n      className={cn('scroll-my-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      data-slot=\"autocomplete-group-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteSeparator({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"autocomplete-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Autocomplete,\n  AutocompleteClear,\n  AutocompleteCollection,\n  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteInputGroup,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n  AutocompleteStatus,\n  AutocompleteTrigger,\n  useAutocompleteFilter,\n  useAutocompleteFilteredItems,\n}\n"],"mappings":"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"}

package/dist/components/avatar.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";

package/dist/components/badge.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge.tsx

package/dist/components/bar-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";

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.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { containerChrome, containerInteractiveClasses, containerPaddingAll, radiusClasses } from "../lib/container-chrome.js";
+import { cn } from "../utils/cn.js";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

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?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "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?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button-group.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";

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?: "accent" | "neutral" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "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'> {