@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/components/stat-card.d.cts

@@ -0,0 +1,36 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/stat-card.d.ts
+declare const StatCardContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardContent: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValueContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardSecondaryValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardIcon: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StatCardContainer, StatCardContent, StatCardIcon, StatCardLabel, StatCardSecondaryValue, StatCardValue, StatCardValueContainer };
+//# sourceMappingURL=stat-card.d.cts.map

package/dist/components/stat-card.d.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/stat-card.d.ts
+declare const StatCardContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardContent: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValueContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardSecondaryValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardIcon: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StatCardContainer, StatCardContent, StatCardIcon, StatCardLabel, StatCardSecondaryValue, StatCardValue, StatCardValueContainer };
+//# sourceMappingURL=stat-card.d.ts.map

package/dist/components/stat-card.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stat-card.tsx
+const StatCardContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-3 p-4 text-left", className),
+		...rest
+	});
+};
+const StatCardLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-xs font-medium text-gray-light", className),
+		...rest
+	});
+};
+const StatCardContent = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-end justify-between gap-px", className),
+		...rest
+	});
+};
+const StatCardValueContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-0.5", className),
+		...rest
+	});
+};
+const StatCardValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-lg font-bold text-gray tabular-nums", className),
+		...rest
+	});
+};
+const StatCardSecondaryValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-xs text-gray-light", className),
+		...rest
+	});
+};
+const StatCardIcon = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(`flex size-10 shrink-0 items-center justify-center rounded-xl`, className),
+		...rest
+	});
+};
+//#endregion
+export { StatCardContainer, StatCardContent, StatCardIcon, StatCardLabel, StatCardSecondaryValue, StatCardValue, StatCardValueContainer };
+
+//# sourceMappingURL=stat-card.js.map

package/dist/components/stat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/components/stat-card.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nconst StatCardContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex w-full flex-col gap-3 p-4 text-left', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-xs font-medium text-gray-light', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-end justify-between gap-px', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardValueContainer = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return <div className={cn('flex flex-col gap-0.5', className)} {...rest} />\n}\n\nconst StatCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('text-lg font-bold text-gray tabular-nums', className)}\n      {...rest}\n    />\n  )\n}\n\nconst StatCardSecondaryValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-xs text-gray-light', className)} {...rest} />\n}\n\nconst StatCardIcon = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        `flex size-10 shrink-0 items-center justify-center rounded-xl`,\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  StatCardContainer,\n  StatCardLabel,\n  StatCardContent,\n  StatCardValueContainer,\n  StatCardValue,\n  StatCardSecondaryValue,\n  StatCardIcon,\n}\n"],"mappings":";;;;AAEA,MAAM,qBAAqB,EACzB,WACA,GAAG,WAC8B;AACjC,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EACpE,GAAI;EACJ,CAAA;;AAIN,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;AACjC,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;AACjC,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAG7E,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EACpE,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;AAClC,QAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,2BAA2B,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAGhF,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;AAC5E,QACE,oBAAC,OAAD;EACE,WAAW,GACT,gEACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/components/stepper.cjs

@@ -0,0 +1,79 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/stepper.tsx
+const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel = "Decrease", increaseLabel = "Increase" }, ref) => {
+	const commitTimerRef = react.useRef(null);
+	react.useEffect(() => () => {
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+	}, []);
+	const scheduleCommit = (next) => {
+		if (!onValueCommit) return;
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+		commitTimerRef.current = setTimeout(() => {
+			commitTimerRef.current = null;
+			onValueCommit(next);
+		}, commitDelayMs);
+	};
+	const decrement = () => {
+		const next = Math.max(min, value - step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const increment = () => {
+		const next = Math.min(max, value + step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const atMin = value <= min;
+	const atMax = value >= max;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		role: "group",
+		"aria-label": ariaLabel,
+		className: (0, cnfast.cn)("inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": decreaseLabel,
+				onClick: decrement,
+				disabled: disabled || atMin,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_left"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-base font-semibold text-gray tabular-nums select-none",
+				"aria-live": "polite",
+				children: formatValue(value)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": increaseLabel,
+				onClick: increment,
+				disabled: disabled || atMax,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_right"
+				})
+			})
+		]
+	});
+});
+Stepper.displayName = "Stepper";
+//#endregion
+exports.Stepper = Stepper;
+
+//# sourceMappingURL=stepper.cjs.map

package/dist/components/stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;;;;AA6BA,MAAM,UAAUA,MAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,EAAE,EAC9B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,MAAM,OAC3B,KACD;AAED,OAAM,sBACQ;AACV,MAAI,eAAe,QAAS,cAAa,eAAe,QAAQ;IAElE,EAAE,CACH;CAED,MAAM,kBAAkB,SAAiB;AACvC,MAAI,CAAC,cAAe;AACpB,MAAI,eAAe,QAAS,cAAa,eAAe,QAAQ;AAChE,iBAAe,UAAU,iBAAiB;AACxC,kBAAe,UAAU;AACzB,iBAAc,KAAK;KAClB,cAAc;;CAGnB,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK;AACxC,MAAI,SAAS,OAAO;AAClB,iBAAc,KAAK;AACnB,kBAAe,KAAK;;;CAGxB,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK;AACxC,MAAI,SAAS,OAAO;AAClB,iBAAc,KAAK;AACnB,kBAAe,KAAK;;;CAIxB,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;AAEvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,0FACA,UACD;YAPH;GASE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;KAAiB,CAAA;IACvD,CAAA;GACT,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,MAAM;IACd,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;KAAkB,CAAA;IACxD,CAAA;GACL;;EAGX;AAED,QAAQ,cAAc"}

package/dist/components/stepper.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/stepper.d.ts
+interface StepperProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  /**
+   * Fires once after the user stops interacting (default: 400ms after the last
+   * click). Use this for side effects like persisting the value, so rapid
+   * clicks don't fan out into a request per click.
+   */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  className?: string;
+  /** Delay (ms) after the last click before `onValueCommit` fires. */
+  commitDelayMs?: number;
+  /** Accessible label, e.g. "Sunshare percentage". */
+  'aria-label'?: string;
+  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
+  decreaseLabel?: string;
+  /** Accessible label for the increment button. Defaults to `"Increase"`. */
+  increaseLabel?: string;
+}
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Stepper, type StepperProps };
+//# sourceMappingURL=stepper.d.cts.map

package/dist/components/stepper.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/stepper.d.ts
+interface StepperProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  /**
+   * Fires once after the user stops interacting (default: 400ms after the last
+   * click). Use this for side effects like persisting the value, so rapid
+   * clicks don't fan out into a request per click.
+   */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  className?: string;
+  /** Delay (ms) after the last click before `onValueCommit` fires. */
+  commitDelayMs?: number;
+  /** Accessible label, e.g. "Sunshare percentage". */
+  'aria-label'?: string;
+  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
+  decreaseLabel?: string;
+  /** Accessible label for the increment button. Defaults to `"Increase"`. */
+  increaseLabel?: string;
+}
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Stepper, type StepperProps };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stepper.tsx
+const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel = "Decrease", increaseLabel = "Increase" }, ref) => {
+	const commitTimerRef = React$1.useRef(null);
+	React$1.useEffect(() => () => {
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+	}, []);
+	const scheduleCommit = (next) => {
+		if (!onValueCommit) return;
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+		commitTimerRef.current = setTimeout(() => {
+			commitTimerRef.current = null;
+			onValueCommit(next);
+		}, commitDelayMs);
+	};
+	const decrement = () => {
+		const next = Math.max(min, value - step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const increment = () => {
+		const next = Math.min(max, value + step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const atMin = value <= min;
+	const atMax = value >= max;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2", className),
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": decreaseLabel,
+				onClick: decrement,
+				disabled: disabled || atMin,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ jsx(MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_left"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base font-semibold text-gray tabular-nums select-none",
+				"aria-live": "polite",
+				children: formatValue(value)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": increaseLabel,
+				onClick: increment,
+				disabled: disabled || atMax,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ jsx(MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_right"
+				})
+			})
+		]
+	});
+});
+Stepper.displayName = "Stepper";
+//#endregion
+export { Stepper };
+
+//# sourceMappingURL=stepper.js.map

package/dist/components/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":["React"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\n  increaseLabel?: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel = 'Decrease',\n      increaseLabel = 'Increase',\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;AA6BA,MAAM,UAAUA,QAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,EAAE,EAC9B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,QAAM,OAC3B,KACD;AAED,SAAM,sBACQ;AACV,MAAI,eAAe,QAAS,cAAa,eAAe,QAAQ;IAElE,EAAE,CACH;CAED,MAAM,kBAAkB,SAAiB;AACvC,MAAI,CAAC,cAAe;AACpB,MAAI,eAAe,QAAS,cAAa,eAAe,QAAQ;AAChE,iBAAe,UAAU,iBAAiB;AACxC,kBAAe,UAAU;AACzB,iBAAc,KAAK;KAClB,cAAc;;CAGnB,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK;AACxC,MAAI,SAAS,OAAO;AAClB,iBAAc,KAAK;AACnB,kBAAe,KAAK;;;CAGxB,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK;AACxC,MAAI,SAAS,OAAO;AAClB,iBAAc,KAAK;AACnB,kBAAe,KAAK;;;CAIxB,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;AAEvB,QACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GACT,0FACA,UACD;YAPH;GASE,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,gBAAD;KAAgB,WAAU;KAAc,MAAK;KAAiB,CAAA;IACvD,CAAA;GACT,oBAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,MAAM;IACd,CAAA;GACP,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,oBAAC,gBAAD;KAAgB,WAAU;KAAc,MAAK;KAAkB,CAAA;IACxD,CAAA;GACL;;EAGX;AAED,QAAQ,cAAc"}

package/dist/components/switch.cjs

@@ -0,0 +1,22 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_switch = require("@base-ui/react/switch");
+let cnfast = require("cnfast");
+//#region src/components/switch.tsx
+function Switch({ className, size: _size, variant: _variant, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Root, {
+		"data-slot": "switch",
+		className: (0, cnfast.cn)("peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-[var(--spark-rounded-xl)]", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-[var(--spark-switch-track,var(--spark-9))] data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: (0, cnfast.cn)("pointer-events-none block size-5 bg-[var(--spark-switch-thumb,var(--spark-on-solid,#fff))] shadow-xs transition-transform", "rounded-[var(--spark-rounded-lg)]", "data-checked:translate-x-4 data-unchecked:translate-x-0")
+		})
+	});
+}
+//#endregion
+exports.Switch = Switch;
+
+//# sourceMappingURL=switch.cjs.map

package/dist/components/switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.cjs","names":["SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { cn } from '../utils/cn'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use the accent color for a destructive/error switch (e.g. wrap\n   * in `<Theme accentColor=\"red\">` or remap `--spark-*`). Accepted for\n   * back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  size: _size,\n  variant: _variant,\n  ...props\n}: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        // 40x24 track with a 40px-tall hit area (::before overlay, WCAG 2.5.5).\n        // The 2px padding is the thumb's inset (was a transparent border) — it\n        // frees the border box for the surface ring below.\n        'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        // Radius follows the [data-radius] knob (pill at medium+, squared at none).\n        'rounded-[var(--spark-rounded-xl)]',\n        // Resting drop shadow + surface's bordered track as a crisp 1px inset ring\n        // (both in one box-shadow so neither clobbers the other; kept off\n        // --tw-ring-* so focus-visible:ring stays free). --spark-switch-ring flips\n        // per state below and is transparent for solid/soft.\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        // Base UI renders a <span>, so disabled state comes via data-disabled\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        // OFF: neutral track; surface shows a neutral idle ring, solid/soft stay\n        // ringless. ON: strong accent track (Radix-aligned) — soft lightens it via\n        // --spark-switch-track; surface adds an accent ring via --spark-style-border.\n        // Destructive/other tones come from the accent color.\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-[var(--spark-switch-track,var(--spark-9))] data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          // the knob defaults to --spark-on-solid (the 3:1 graphical contrast, same\n          // rule as the checkbox check): white on most accents, a dark tint only\n          // where white is too weak on the on-track (e.g. orange). NOT --spark-contrast\n          // (4.5:1 text), which over-darkens to a dark knob on red/neutral. In high\n          // contrast the track deepens to step-12, so --spark-switch-thumb overrides\n          // to step-1 (the opposite scale end) to keep the knob legible in both modes.\n          'pointer-events-none block size-5 bg-[var(--spark-switch-thumb,var(--spark-on-solid,#fff))] shadow-xs transition-transform',\n          // thumb radius tracks the knob too, so it stays round on a pill track and squares off at radius=none\n          'rounded-[var(--spark-rounded-lg)]',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAiBA,SAAS,OAAO,EACd,WACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;AACd,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAIE,qGACA,2GAEA,qCAKA,6FACA,+EAEA,8DAKA,8GACA,uIACA,UACD;EACD,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAOE,6HAEA,qCACA,0DACD;GACD,CAAA;EACmB,CAAA"}

package/dist/components/switch.d.cts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+
+//#region src/components/switch.d.ts
+type SwitchProps = Switch$1.Root.Props & {
+  /**
+   * @deprecated The switch now renders a single size. Accepted for back-compat
+   * but ignored.
+   */
+  size?: 'sm' | 'base' | 'lg';
+  /**
+   * @deprecated Use the accent color for a destructive/error switch (e.g. wrap
+   * in `<Theme accentColor="red">` or remap `--spark-*`). Accepted for
+   * back-compat but ignored.
+   */
+  variant?: 'primary' | 'destructive';
+};
+declare function Switch({
+  className,
+  size: _size,
+  variant: _variant,
+  ...props
+}: SwitchProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=switch.d.cts.map

package/dist/components/switch.d.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+
+//#region src/components/switch.d.ts
+type SwitchProps = Switch$1.Root.Props & {
+  /**
+   * @deprecated The switch now renders a single size. Accepted for back-compat
+   * but ignored.
+   */
+  size?: 'sm' | 'base' | 'lg';
+  /**
+   * @deprecated Use the accent color for a destructive/error switch (e.g. wrap
+   * in `<Theme accentColor="red">` or remap `--spark-*`). Accepted for
+   * back-compat but ignored.
+   */
+  variant?: 'primary' | 'destructive';
+};
+declare function Switch({
+  className,
+  size: _size,
+  variant: _variant,
+  ...props
+}: SwitchProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch.js

@@ -0,0 +1,20 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch.tsx
+function Switch({ className, size: _size, variant: _variant, ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		className: cn("peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-[var(--spark-rounded-xl)]", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-[var(--spark-switch-track,var(--spark-9))] data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-slot": "switch-thumb",
+			className: cn("pointer-events-none block size-5 bg-[var(--spark-switch-thumb,var(--spark-on-solid,#fff))] shadow-xs transition-transform", "rounded-[var(--spark-rounded-lg)]", "data-checked:translate-x-4 data-unchecked:translate-x-0")
+		})
+	});
+}
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { cn } from '../utils/cn'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use the accent color for a destructive/error switch (e.g. wrap\n   * in `<Theme accentColor=\"red\">` or remap `--spark-*`). Accepted for\n   * back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  size: _size,\n  variant: _variant,\n  ...props\n}: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        // 40x24 track with a 40px-tall hit area (::before overlay, WCAG 2.5.5).\n        // The 2px padding is the thumb's inset (was a transparent border) — it\n        // frees the border box for the surface ring below.\n        'peer relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors',\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        // Radius follows the [data-radius] knob (pill at medium+, squared at none).\n        'rounded-[var(--spark-rounded-xl)]',\n        // Resting drop shadow + surface's bordered track as a crisp 1px inset ring\n        // (both in one box-shadow so neither clobbers the other; kept off\n        // --tw-ring-* so focus-visible:ring stays free). --spark-switch-ring flips\n        // per state below and is transparent for solid/soft.\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        // Base UI renders a <span>, so disabled state comes via data-disabled\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        // OFF: neutral track; surface shows a neutral idle ring, solid/soft stay\n        // ringless. ON: strong accent track (Radix-aligned) — soft lightens it via\n        // --spark-switch-track; surface adds an accent ring via --spark-style-border.\n        // Destructive/other tones come from the accent color.\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-[var(--spark-switch-track,var(--spark-9))] data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          // the knob defaults to --spark-on-solid (the 3:1 graphical contrast, same\n          // rule as the checkbox check): white on most accents, a dark tint only\n          // where white is too weak on the on-track (e.g. orange). NOT --spark-contrast\n          // (4.5:1 text), which over-darkens to a dark knob on red/neutral. In high\n          // contrast the track deepens to step-12, so --spark-switch-thumb overrides\n          // to step-1 (the opposite scale end) to keep the knob legible in both modes.\n          'pointer-events-none block size-5 bg-[var(--spark-switch-thumb,var(--spark-on-solid,#fff))] shadow-xs transition-transform',\n          // thumb radius tracks the knob too, so it stays round on a pill track and squares off at radius=none\n          'rounded-[var(--spark-rounded-lg)]',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;AAiBA,SAAS,OAAO,EACd,WACA,MAAM,OACN,SAAS,UACT,GAAG,SACW;AACd,QACE,oBAACA,SAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GAIT,qGACA,2GAEA,qCAKA,6FACA,+EAEA,8DAKA,8GACA,uIACA,UACD;EACD,GAAI;YAEJ,oBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAOT,6HAEA,qCACA,0DACD;GACD,CAAA;EACmB,CAAA"}