@epilot/spark-ui 0.10.0

package/dist/components/chart.d.cts

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/chart.d.ts
+type ChartConfig = Record<string, {
+  label?: React$1.ReactNode;
+  color?: string;
+}>;
+interface ChartTooltipRow {
+  key: string;
+  label: React$1.ReactNode;
+  /** CSS color value for the legend swatch (e.g. `var(--orange-a9)`). */
+  color: string;
+  value: React$1.ReactNode;
+  /** Swatch shape: `dot` (default) for solid series, `dashed-line` for dashed ones. */
+  marker?: 'dot' | 'dashed-line';
+}
+interface ChartTooltipCardProps {
+  label?: React$1.ReactNode;
+  rows: ChartTooltipRow[];
+  className?: string;
+}
+interface ChartZoomResetButtonProps {
+  label: string;
+  onReset: () => void;
+}
+declare function ChartZoomResetButton({
+  label,
+  onReset
+}: ChartZoomResetButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Tracks an element's rendered size via ResizeObserver. The element must stay
+ * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+ * is attached when the observer is set up.
+ */
+declare function useMeasuredSize<T extends HTMLElement>(): readonly [React$1.RefObject<T | null>, {
+  width: number;
+  height: number;
+}];
+interface ClampTooltipArgs {
+  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */
+  anchorX: number;
+  anchorY: number;
+  /** Chart bounds (px). */
+  width: number;
+  height: number;
+  /** Measured tooltip size (px). */
+  tipWidth: number;
+  tipHeight: number;
+  /** Gap between the anchor and the tooltip. */
+  gap?: number;
+  /** Minimum distance kept from every chart edge. */
+  pad?: number;
+  /**
+   * `above` (default): centred above the anchor, flipped below if it would clip
+   * the top — good for bars. `beside`: offset to the side of the anchor so it
+   * never sits on top of the hovered point/line — good for line/area charts.
+   */
+  placement?: 'above' | 'beside';
+}
+/**
+ * Positions a tooltip relative to an anchor while keeping it fully inside the
+ * chart: clamped on every edge, flipped above/below or left/right as needed.
+ */
+declare function clampTooltipPosition({
+  anchorX,
+  anchorY,
+  width,
+  height,
+  tipWidth,
+  tipHeight,
+  gap,
+  pad,
+  placement
+}: ClampTooltipArgs): {
+  left: number;
+  top: number;
+};
+/**
+ * Card-style multi-series tooltip body: an optional header plus one
+ * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+ * components so every chart shares the same tooltip look.
+ */
+declare function ChartTooltipCard({
+  label,
+  rows,
+  className
+}: ChartTooltipCardProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { ChartConfig, ChartTooltipCard, ChartTooltipCardProps, ChartTooltipRow, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize };
+//# sourceMappingURL=chart.d.cts.map

package/dist/components/chart.d.ts

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/chart.d.ts
+type ChartConfig = Record<string, {
+  label?: React$1.ReactNode;
+  color?: string;
+}>;
+interface ChartTooltipRow {
+  key: string;
+  label: React$1.ReactNode;
+  /** CSS color value for the legend swatch (e.g. `var(--orange-a9)`). */
+  color: string;
+  value: React$1.ReactNode;
+  /** Swatch shape: `dot` (default) for solid series, `dashed-line` for dashed ones. */
+  marker?: 'dot' | 'dashed-line';
+}
+interface ChartTooltipCardProps {
+  label?: React$1.ReactNode;
+  rows: ChartTooltipRow[];
+  className?: string;
+}
+interface ChartZoomResetButtonProps {
+  label: string;
+  onReset: () => void;
+}
+declare function ChartZoomResetButton({
+  label,
+  onReset
+}: ChartZoomResetButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Tracks an element's rendered size via ResizeObserver. The element must stay
+ * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+ * is attached when the observer is set up.
+ */
+declare function useMeasuredSize<T extends HTMLElement>(): readonly [React$1.RefObject<T | null>, {
+  width: number;
+  height: number;
+}];
+interface ClampTooltipArgs {
+  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */
+  anchorX: number;
+  anchorY: number;
+  /** Chart bounds (px). */
+  width: number;
+  height: number;
+  /** Measured tooltip size (px). */
+  tipWidth: number;
+  tipHeight: number;
+  /** Gap between the anchor and the tooltip. */
+  gap?: number;
+  /** Minimum distance kept from every chart edge. */
+  pad?: number;
+  /**
+   * `above` (default): centred above the anchor, flipped below if it would clip
+   * the top — good for bars. `beside`: offset to the side of the anchor so it
+   * never sits on top of the hovered point/line — good for line/area charts.
+   */
+  placement?: 'above' | 'beside';
+}
+/**
+ * Positions a tooltip relative to an anchor while keeping it fully inside the
+ * chart: clamped on every edge, flipped above/below or left/right as needed.
+ */
+declare function clampTooltipPosition({
+  anchorX,
+  anchorY,
+  width,
+  height,
+  tipWidth,
+  tipHeight,
+  gap,
+  pad,
+  placement
+}: ClampTooltipArgs): {
+  left: number;
+  top: number;
+};
+/**
+ * Card-style multi-series tooltip body: an optional header plus one
+ * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+ * components so every chart shares the same tooltip look.
+ */
+declare function ChartTooltipCard({
+  label,
+  rows,
+  className
+}: ChartTooltipCardProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { ChartConfig, ChartTooltipCard, ChartTooltipCardProps, ChartTooltipRow, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/chart.js

@@ -0,0 +1,104 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Button } from "./button.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart.tsx
+function ChartZoomResetButton({ label, onReset }) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: "absolute top-2 right-2 z-20 h-11 bg-gray-1 text-gray hover:bg-gray-2",
+		color: "neutral",
+		onClick: onReset,
+		styleVariant: "surface",
+		type: "button",
+		children: label
+	});
+}
+/**
+* Tracks an element's rendered size via ResizeObserver. The element must stay
+* mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+* is attached when the observer is set up.
+*/
+function useMeasuredSize() {
+	const ref = useRef(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setSize({
+				width: entry.contentRect.width,
+				height: entry.contentRect.height
+			});
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	return [ref, size];
+}
+/**
+* Positions a tooltip relative to an anchor while keeping it fully inside the
+* chart: clamped on every edge, flipped above/below or left/right as needed.
+*/
+function clampTooltipPosition({ anchorX, anchorY, width, height, tipWidth, tipHeight, gap = 12, pad = 8, placement = "above" }) {
+	const maxLeft = Math.max(pad, width - tipWidth - pad);
+	const maxTop = Math.max(pad, height - tipHeight - pad);
+	if (placement === "beside") {
+		const right = anchorX + gap;
+		const left = right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth;
+		return {
+			left: Math.min(Math.max(left, pad), maxLeft),
+			top: Math.min(Math.max(anchorY, pad), maxTop)
+		};
+	}
+	const above = anchorY - gap - tipHeight;
+	const desiredTop = above >= pad ? above : anchorY + gap;
+	return {
+		left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),
+		top: Math.min(Math.max(desiredTop, pad), maxTop)
+	};
+}
+/**
+* Card-style multi-series tooltip body: an optional header plus one
+* coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+* components so every chart shares the same tooltip look.
+*/
+function ChartTooltipCard({ label, rows, className }) {
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-40 gap-1.5 rounded-lg border border-gray-a6 bg-gray-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3", className),
+		children: [label !== void 0 && label !== null && /* @__PURE__ */ jsx("div", {
+			className: "font-medium text-gray",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5 text-gray-light",
+					children: [row.marker === "dashed-line" ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "w-3 shrink-0 border-t-2 border-dashed",
+						style: { borderColor: row.color }
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-2 shrink-0 rounded-[2px]",
+						style: { backgroundColor: row.color }
+					}), row.label]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium whitespace-nowrap text-gray tabular-nums",
+					children: row.value
+				})]
+			}, row.key))
+		})]
+	});
+}
+//#endregion
+export { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize };
+
+//# sourceMappingURL=chart.js.map

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    color?: string\n  }\n>\n\nexport interface ChartTooltipRow {\n  key: string\n  label: React.ReactNode\n  /** CSS color value for the legend swatch (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n  /** Swatch shape: `dot` (default) for solid series, `dashed-line` for dashed ones. */\n  marker?: 'dot' | 'dashed-line'\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\n}\n\ninterface ChartZoomResetButtonProps {\n  label: string\n  onReset: () => void\n}\n\nexport function ChartZoomResetButton({\n  label,\n  onReset,\n}: ChartZoomResetButtonProps) {\n  return (\n    <Button\n      className=\"absolute top-2 right-2 z-20 h-11 bg-gray-1 text-gray hover:bg-gray-2\"\n      color=\"neutral\"\n      onClick={onReset}\n      styleVariant=\"surface\"\n      type=\"button\"\n    >\n      {label}\n    </Button>\n  )\n}\n\n/**\n * Tracks an element's rendered size via ResizeObserver. The element must stay\n * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref\n * is attached when the observer is set up.\n */\nexport function useMeasuredSize<T extends HTMLElement>() {\n  const ref = useRef<T>(null)\n  const [size, setSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setSize({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return [ref, size] as const\n}\n\ninterface ClampTooltipArgs {\n  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */\n  anchorX: number\n  anchorY: number\n  /** Chart bounds (px). */\n  width: number\n  height: number\n  /** Measured tooltip size (px). */\n  tipWidth: number\n  tipHeight: number\n  /** Gap between the anchor and the tooltip. */\n  gap?: number\n  /** Minimum distance kept from every chart edge. */\n  pad?: number\n  /**\n   * `above` (default): centred above the anchor, flipped below if it would clip\n   * the top — good for bars. `beside`: offset to the side of the anchor so it\n   * never sits on top of the hovered point/line — good for line/area charts.\n   */\n  placement?: 'above' | 'beside'\n}\n\n/**\n * Positions a tooltip relative to an anchor while keeping it fully inside the\n * chart: clamped on every edge, flipped above/below or left/right as needed.\n */\nexport function clampTooltipPosition({\n  anchorX,\n  anchorY,\n  width,\n  height,\n  tipWidth,\n  tipHeight,\n  gap = 12,\n  pad = 8,\n  placement = 'above',\n}: ClampTooltipArgs): { left: number; top: number } {\n  const maxLeft = Math.max(pad, width - tipWidth - pad)\n  const maxTop = Math.max(pad, height - tipHeight - pad)\n\n  if (placement === 'beside') {\n    // Prefer the right of the anchor; flip to the left if it would overflow.\n    const right = anchorX + gap\n    const left =\n      right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth\n    return {\n      left: Math.min(Math.max(left, pad), maxLeft),\n      top: Math.min(Math.max(anchorY, pad), maxTop),\n    }\n  }\n\n  const above = anchorY - gap - tipHeight\n  const desiredTop = above >= pad ? above : anchorY + gap\n  return {\n    left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),\n    top: Math.min(Math.max(desiredTop, pad), maxTop),\n  }\n}\n\n/**\n * Card-style multi-series tooltip body: an optional header plus one\n * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart\n * components so every chart shares the same tooltip look.\n */\nexport function ChartTooltipCard({\n  label,\n  rows,\n  className,\n}: ChartTooltipCardProps) {\n  if (rows.length === 0) return null\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-40 gap-1.5 rounded-lg border border-gray-a6 bg-gray-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3',\n        className,\n      )}\n    >\n      {label !== undefined && label !== null && (\n        <div className=\"font-medium text-gray\">{label}</div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {rows.map((row) => (\n          <div\n            key={row.key}\n            className=\"flex items-center justify-between gap-4\"\n          >\n            <span className=\"flex items-center gap-1.5 text-gray-light\">\n              {row.marker === 'dashed-line' ? (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                  style={{ borderColor: row.color }}\n                />\n              ) : (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: row.color }}\n                />\n              )}\n              {row.label}\n            </span>\n            <span className=\"font-medium whitespace-nowrap text-gray tabular-nums\">\n              {row.value}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAkCA,SAAgB,qBAAqB,EACnC,OACA,WAC4B;CAC5B,OACE,oBAAC,QAAD;EACE,WAAU;EACV,OAAM;EACN,SAAS;EACT,cAAa;EACb,MAAK;YAEJ;CACK,CAAA;AAEZ;;;;;;AAOA,SAAgB,kBAAyC;CACvD,MAAM,MAAM,OAAU,IAAI;CAC1B,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CAExD,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,OAAO;GACZ,QAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;GAC5B,CAAC;EACH,CAAC;EAED,eAAe,QAAQ,OAAO;EAC9B,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,KAAK,IAAI;AACnB;;;;;AA4BA,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,GAAG;CACpD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,GAAG;CAErD,IAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;EAC5D,OAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG,OAAO;GAC3C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG,MAAM;EAC9C;CACF;CAEA,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;CACpD,OAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,GAAG,GAAG,OAAO;EAC7D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,GAAG,GAAG,MAAM;CACjD;AACF;;;;;;AAOA,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;CACxB,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,qBAAC,OAAD;EACE,WAAW,GACT,+GACA,SACF;YAJF,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,oBAAC,OAAD;GAAK,WAAU;aAAyB;EAAW,CAAA,GAErD,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,qBAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,IAAI,WAAW,gBACd,oBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,aAAa,IAAI,MAAM;KACjC,CAAA,IAED,oBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,MAAM;KACrC,CAAA,GAEF,IAAI,KACD;QACN,oBAAC,QAAD;KAAM,WAAU;eACb,IAAI;IACD,CAAA,CACH;MAtBE,IAAI,GAsBN,CACN;EACE,CAAA,CACF;;AAET"}

package/dist/components/checkbox.cjs

@@ -0,0 +1,44 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_lib_accent_colors = require("../lib/accent-colors.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
+let cnfast = require("cnfast");
+//#region src/components/checkbox.tsx
+const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, ...props }, ref) => {
+	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
+	const dataAccentColor = color ? require_lib_accent_colors.accentByColor[color] : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Root, {
+		"data-style": dataStyle,
+		"data-accent-color": dataAccentColor,
+		className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-sm),40%)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))", "data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_checkbox.Checkbox.Indicator, {
+			className: "group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				"aria-hidden": "true",
+				className: "hidden size-5 group-data-checked:block",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					className: "animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none",
+					d: "M5.5 12.5 L10 17 L18.5 7.5",
+					pathLength: 1,
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2.5
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none" })]
+		})
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+exports.Checkbox = Checkbox;
+
+//# sourceMappingURL=checkbox.cjs.map

package/dist/components/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","names":["React","accentByColor","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n  /**\n   * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n   * area). Accepted for back-compat but ignored.\n   */\n  size?: 'default' | 'large'\n  /**\n   * @deprecated The checkbox is always bordered now. Accepted for back-compat\n   * but ignored.\n   */\n  bordered?: boolean\n  styleVariant?: SparkStyle\n  color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size: _size,\n      bordered: _bordered,\n      styleVariant,\n      color,\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      <CheckboxPrimitive.Root\n        data-style={dataStyle}\n        data-accent-color={dataAccentColor}\n        className={cn(\n          'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) transition-colors',\n          \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n          'rounded-[min(var(--spark-rounded-sm),40%)]',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n          'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n          'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n          'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n          {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n          <svg\n            aria-hidden=\"true\"\n            className=\"hidden size-5 group-data-checked:block\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n              d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n              pathLength={1}\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.5}\n            />\n          </svg>\n          <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n  },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,WAAWA,MAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;CAEvD,OACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,yJACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,SACF;EACK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;IACd,CAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,oIAAqI,CAAA,CAC1H;;CACP,CAAA;AAE5B,CACF;AAEA,SAAS,cAAc"}

package/dist/components/checkbox.d.cts

@@ -0,0 +1,26 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.cjs";
+import * as React$1 from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+
+//#region src/components/checkbox.d.ts
+type SparkCheckboxColor = 'accent' | 'neutral' | 'danger';
+type CheckboxProps = Checkbox$1.Root.Props & {
+  /**
+   * @deprecated The checkbox now renders a single 24px size (with a 40px hit
+   * area). Accepted for back-compat but ignored.
+   */
+  size?: 'default' | 'large';
+  /**
+   * @deprecated The checkbox is always bordered now. Accepted for back-compat
+   * but ignored.
+   */
+  bordered?: boolean;
+  styleVariant?: SparkStyle;
+  color?: SparkCheckboxColor;
+};
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps, SparkCheckboxColor };
+//# sourceMappingURL=checkbox.d.cts.map

package/dist/components/checkbox.d.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { u as SparkStyle } from "../theme-types-8wjgiNA_.js";
+import * as React$1 from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+
+//#region src/components/checkbox.d.ts
+type SparkCheckboxColor = 'accent' | 'neutral' | 'danger';
+type CheckboxProps = Checkbox$1.Root.Props & {
+  /**
+   * @deprecated The checkbox now renders a single 24px size (with a 40px hit
+   * area). Accepted for back-compat but ignored.
+   */
+  size?: 'default' | 'large';
+  /**
+   * @deprecated The checkbox is always bordered now. Accepted for back-compat
+   * but ignored.
+   */
+  bordered?: boolean;
+  styleVariant?: SparkStyle;
+  color?: SparkCheckboxColor;
+};
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps, SparkCheckboxColor };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -0,0 +1,41 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { accentByColor } from "../lib/accent-colors.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/checkbox.tsx
+const Checkbox = React$1.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, ...props }, ref) => {
+	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
+	const dataAccentColor = color ? accentByColor[color] : void 0;
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-style": dataStyle,
+		"data-accent-color": dataAccentColor,
+		className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-sm),40%)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))", "data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
+			className: "group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))",
+			children: [/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				className: "hidden size-5 group-data-checked:block",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ jsx("path", {
+					className: "animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none",
+					d: "M5.5 12.5 L10 17 L18.5 7.5",
+					pathLength: 1,
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2.5
+				})
+			}), /* @__PURE__ */ jsx("span", { className: "hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none" })]
+		})
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n  /**\n   * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n   * area). Accepted for back-compat but ignored.\n   */\n  size?: 'default' | 'large'\n  /**\n   * @deprecated The checkbox is always bordered now. Accepted for back-compat\n   * but ignored.\n   */\n  bordered?: boolean\n  styleVariant?: SparkStyle\n  color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size: _size,\n      bordered: _bordered,\n      styleVariant,\n      color,\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      <CheckboxPrimitive.Root\n        data-style={dataStyle}\n        data-accent-color={dataAccentColor}\n        className={cn(\n          'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--spark-style-border-width,2px) transition-colors',\n          \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n          'rounded-[min(var(--spark-rounded-sm),40%)]',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n          'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n          'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n          'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-(--spark-style-fg,var(--spark-on-solid))\">\n          {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n          <svg\n            aria-hidden=\"true\"\n            className=\"hidden size-5 group-data-checked:block\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n              d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n              pathLength={1}\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.5}\n            />\n          </svg>\n          <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n  },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;AAuBA,MAAM,WAAWA,QAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;CAEvD,OACE,oBAACC,WAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EACnB,WAAW,GACT,yJACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,SACF;EACK;EACL,GAAI;YAEJ,qBAACA,WAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,oBAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;IACd,CAAA;GACE,CAAA,GACL,oBAAC,QAAD,EAAM,WAAU,oIAAqI,CAAA,CAC1H;;CACP,CAAA;AAE5B,CACF;AAEA,SAAS,cAAc"}

package/dist/components/circular-gauge.cjs

@@ -0,0 +1,74 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/circular-gauge.tsx
+const TRACK_TONE_CLASSES = {
+	success: "stroke-base-success-soft",
+	warning: "stroke-base-warning-soft",
+	error: "stroke-base-error-soft",
+	accent: "stroke-base-accent-soft",
+	neutral: "stroke-base-gray-soft"
+};
+const INDICATOR_TONE_CLASSES = {
+	success: "stroke-base-success-solid",
+	warning: "stroke-warning-active",
+	error: "stroke-error-active",
+	accent: "stroke-accent",
+	neutral: "stroke-gray"
+};
+const CircularGauge = ({ className, value, max = 100, tone = "accent", size = 44, strokeWidth = 4, children, ...rest }) => {
+	const clamped = Math.min(Math.max(value, 0), max);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const offset = circumference * (1 - clamped / max);
+	const percent = Math.round(clamped / max * 100);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("relative inline-flex shrink-0", className),
+		style: {
+			width: size,
+			height: size
+		},
+		role: "meter",
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": value,
+		"aria-valuetext": `${percent}%`,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			className: "size-full -rotate-90",
+			width: size,
+			height: size,
+			viewBox: `0 0 ${size} ${size}`,
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				className: TRACK_TONE_CLASSES[tone]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				strokeLinecap: "round",
+				strokeDasharray: circumference,
+				strokeDashoffset: offset,
+				className: (0, cnfast.cn)("transition-[stroke-dashoffset] duration-300", INDICATOR_TONE_CLASSES[tone])
+			})]
+		}), children !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "absolute inset-0 flex items-center justify-center text-[11px] leading-none font-semibold tabular-nums",
+			children
+		})]
+	});
+};
+//#endregion
+exports.CircularGauge = CircularGauge;
+
+//# sourceMappingURL=circular-gauge.cjs.map

package/dist/components/circular-gauge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-gauge.cjs","names":[],"sources":["../../src/components/circular-gauge.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst TRACK_TONE_CLASSES: Record<Tone, string> = {\n  success: 'stroke-base-success-soft',\n  warning: 'stroke-base-warning-soft',\n  error: 'stroke-base-error-soft',\n  accent: 'stroke-base-accent-soft',\n  neutral: 'stroke-base-gray-soft',\n}\n\nconst INDICATOR_TONE_CLASSES: Record<Tone, string> = {\n  // solid ramp, not `-active`: keeps the ring in step with DeviceCardState's dot\n  success: 'stroke-base-success-solid',\n  warning: 'stroke-warning-active',\n  error: 'stroke-error-active',\n  accent: 'stroke-accent',\n  neutral: 'stroke-gray',\n}\n\n/**\n * Consumers should pass an `aria-label` to name the metric the gauge represents\n * (e.g. \"Battery\"); `aria-valuetext` defaults to the value as a percentage.\n */\nexport interface CircularGaugeProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /** Current value (0–max). */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Tone color for the indicator/track pair. Default: \"accent\" */\n  tone?: Tone\n  /** Diameter in pixels. Default: 44 */\n  size?: number\n  /** Stroke thickness in pixels. Default: 4 */\n  strokeWidth?: number\n  /** Optional content rendered centered inside the gauge (e.g. percentage, icon). */\n  children?: React.ReactNode\n}\n\nconst CircularGauge = ({\n  className,\n  value,\n  max = 100,\n  tone = 'accent',\n  size = 44,\n  strokeWidth = 4,\n  children,\n  ...rest\n}: CircularGaugeProps) => {\n  const clamped = Math.min(Math.max(value, 0), max)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference * (1 - clamped / max)\n  const percent = Math.round((clamped / max) * 100)\n\n  return (\n    <div\n      className={cn('relative inline-flex shrink-0', className)}\n      style={{ width: size, height: size }}\n      role=\"meter\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-valuetext={`${percent}%`}\n      {...rest}\n    >\n      <svg\n        className=\"size-full -rotate-90\"\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          className={TRACK_TONE_CLASSES[tone]}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={cn(\n            'transition-[stroke-dashoffset] duration-300',\n            INDICATOR_TONE_CLASSES[tone],\n          )}\n        />\n      </svg>\n      {children !== undefined && (\n        <span className=\"absolute inset-0 flex items-center justify-center text-[11px] leading-none font-semibold tabular-nums\">\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { CircularGauge }\n"],"mappings":";;;;;;;;AAIA,MAAM,qBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,yBAA+C;CAEnD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAwBA,MAAM,iBAAiB,EACrB,WACA,OACA,MAAM,KACN,OAAO,UACP,OAAO,IACP,cAAc,GACd,UACA,GAAG,WACqB;CACxB,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG;CAChD,MAAM,UAAU,OAAO,eAAe;CACtC,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;CAC9C,MAAM,UAAU,KAAK,MAAO,UAAU,MAAO,GAAG;CAEhD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;EACxD,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EACnC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,QAAQ;EAC3B,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,KAAK,GAAG;GACxB,eAAY;aALd,CAOE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACQ;IACb,WAAW,mBAAmB;GAC/B,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACQ;IACb,eAAc;IACd,iBAAiB;IACjB,kBAAkB;IAClB,YAAA,GAAA,OAAA,IACE,+CACA,uBAAuB,KACzB;GACD,CAAA,CACE;MACJ,aAAa,KAAA,KACZ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GACb;EACG,CAAA,CAEL;;AAET"}

package/dist/components/circular-gauge.d.cts

@@ -0,0 +1,37 @@
+"use client";
+
+import { Tone } from "../lib/tones.cjs";
+import * as React$1 from "react";
+
+//#region src/components/circular-gauge.d.ts
+/**
+ * Consumers should pass an `aria-label` to name the metric the gauge represents
+ * (e.g. "Battery"); `aria-valuetext` defaults to the value as a percentage.
+ */
+interface CircularGaugeProps extends Omit<React$1.ComponentProps<'div'>, 'children'> {
+  /** Current value (0–max). */
+  value: number;
+  /** Maximum value. Default: 100 */
+  max?: number;
+  /** Tone color for the indicator/track pair. Default: "accent" */
+  tone?: Tone;
+  /** Diameter in pixels. Default: 44 */
+  size?: number;
+  /** Stroke thickness in pixels. Default: 4 */
+  strokeWidth?: number;
+  /** Optional content rendered centered inside the gauge (e.g. percentage, icon). */
+  children?: React$1.ReactNode;
+}
+declare const CircularGauge: ({
+  className,
+  value,
+  max,
+  tone,
+  size,
+  strokeWidth,
+  children,
+  ...rest
+}: CircularGaugeProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CircularGauge, CircularGaugeProps };
+//# sourceMappingURL=circular-gauge.d.cts.map

package/dist/components/circular-gauge.d.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { Tone } from "../lib/tones.js";
+import * as React$1 from "react";
+
+//#region src/components/circular-gauge.d.ts
+/**
+ * Consumers should pass an `aria-label` to name the metric the gauge represents
+ * (e.g. "Battery"); `aria-valuetext` defaults to the value as a percentage.
+ */
+interface CircularGaugeProps extends Omit<React$1.ComponentProps<'div'>, 'children'> {
+  /** Current value (0–max). */
+  value: number;
+  /** Maximum value. Default: 100 */
+  max?: number;
+  /** Tone color for the indicator/track pair. Default: "accent" */
+  tone?: Tone;
+  /** Diameter in pixels. Default: 44 */
+  size?: number;
+  /** Stroke thickness in pixels. Default: 4 */
+  strokeWidth?: number;
+  /** Optional content rendered centered inside the gauge (e.g. percentage, icon). */
+  children?: React$1.ReactNode;
+}
+declare const CircularGauge: ({
+  className,
+  value,
+  max,
+  tone,
+  size,
+  strokeWidth,
+  children,
+  ...rest
+}: CircularGaugeProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CircularGauge, CircularGaugeProps };
+//# sourceMappingURL=circular-gauge.d.ts.map