@epilot/spark-ui 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/components/chart.js.map

@@ -1 +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'\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 dot (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\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-slate-a6 bg-slate-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              <span\n                className=\"size-2 shrink-0 rounded-[2px]\"\n                style={{ backgroundColor: row.color }}\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":";;;;;;;;;;AA+BA,SAAgB,kBAAyC;CACvD,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;AAEzD,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;AACtB,OAAI,CAAC,MAAO;AACZ,WAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;IAC3B,CAAC;IACF;AAEF,iBAAe,QAAQ,QAAQ;AAC/B,eAAa,eAAe,YAAY;IACvC,EAAE,CAAC;AAEN,QAAO,CAAC,KAAK,KAAK;;;;;;AA6BpB,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,IAAI;CACrD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,IAAI;AAEtD,KAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;AAC5D,SAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,EAAE,QAAQ;GAC5C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,IAAI,EAAE,OAAO;GAC9C;;CAGH,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;AACpD,QAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,IAAI,EAAE,QAAQ;EAC9D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,IAAI,EAAE,OAAO;EACjD;;;;;;;AAQH,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;AACxB,KAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QACE,qBAAC,OAAD;EACE,WAAW,GACT,iHACA,UACD;YAJH,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,oBAAC,OAAD;GAAK,WAAU;aAAyB;GAAY,CAAA,EAEtD,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,qBAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,oBAAC,QAAD;MACE,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,OAAO;MACrC,CAAA,EACD,IAAI,MACA;QACP,oBAAC,QAAD;KAAM,WAAU;eACb,IAAI;KACA,CAAA,CACH;MAbC,IAAI,IAaL,CACN;GACE,CAAA,CACF"}
+{"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'\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 dot (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\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              <span\n                className=\"size-2 shrink-0 rounded-[2px]\"\n                style={{ backgroundColor: row.color }}\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":";;;;;;;;;;AA+BA,SAAgB,kBAAyC;CACvD,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;AAEzD,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;AACtB,OAAI,CAAC,MAAO;AACZ,WAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;IAC3B,CAAC;IACF;AAEF,iBAAe,QAAQ,QAAQ;AAC/B,eAAa,eAAe,YAAY;IACvC,EAAE,CAAC;AAEN,QAAO,CAAC,KAAK,KAAK;;;;;;AA6BpB,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,IAAI;CACrD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,IAAI;AAEtD,KAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;AAC5D,SAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,EAAE,QAAQ;GAC5C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,IAAI,EAAE,OAAO;GAC9C;;CAGH,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;AACpD,QAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,IAAI,EAAE,QAAQ;EAC9D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,IAAI,EAAE,OAAO;EACjD;;;;;;;AAQH,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;AACxB,KAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+GACA,UACD;YAJH,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,oBAAC,OAAD;GAAK,WAAU;aAAyB;GAAY,CAAA,EAEtD,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,qBAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,oBAAC,QAAD;MACE,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,OAAO;MACrC,CAAA,EACD,IAAI,MACA;QACP,oBAAC,QAAD;KAAM,WAAU;eACb,IAAI;KACA,CAAA,CACH;MAbC,IAAI,IAaL,CACN;GACE,CAAA,CACF"}

package/dist/components/checkbox.cjs

@@ -1,35 +1,42 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_accent_colors = require("../accent-colors-CjHCf8fH.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, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Root, {
-	className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--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 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft", "data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]", "data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--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-[color:var(--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" })]
-	})
-}));
+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_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;

package/dist/components/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\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}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n  // `size`/`bordered` are deprecated no-ops — pulled out of the rest so they\n  // don't leak onto the DOM element as unknown attributes.\n>(({ className, size: _size, bordered: _bordered, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      // 24px visible box with a 40px hit area (the ::before overlay, WCAG 2.5.5).\n      // Border width follows the style knob (surface thins to 1px; the rest stay 2px).\n      'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--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      // Capped radius: follows the [data-radius] factor, but the 40% ceiling (a\n      // circle needs 50%) keeps a checkbox from ever rounding into a circle at\n      // large/full or small sizes. A % radius tracks the box itself, so it holds\n      // across every spacing/scaling combo (Radix idiom: cap small-control radius).\n      'rounded-[min(var(--spark-rounded-sm),40%)]',\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:cursor-not-allowed data-disabled:opacity-50',\n      // Unchecked: subtle fill + a style-aware border (soft sets the idle-border\n      // to none). The a7 fallback keeps the default (no data-style) affordance.\n      'border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft',\n      // Checked / indeterminate: style-aware fill + border (--spark-style-*,\n      // solid by default). Mirrors the Button's style knob.\n      'data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]',\n      'data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--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-[color:var(--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\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAWA,MAAM,YAKpB,EAAE,WAAW,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS,QAC5D,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;CACE,YAAA,GAAA,OAAA,IAGE,8JACA,qIAKA,8CACA,+EAEA,6DAGA,qFAGA,+HACA,2IACA,UACD;CACI;CACL,GAAI;WAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;EAA6B,WAAU;YAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,MAAK;GACL,SAAQ;aAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,GAAE;IACF,YAAY;IACZ,QAAO;IACP,eAAc;IACd,gBAAe;IACf,aAAa;IACb,CAAA;GACE,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;CACP,CAAA,CACzB;AAEF,SAAS,cAAc"}
+{"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,sBAAAA,cAAc,SAAS,KAAA;AAEvD,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,yJACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,UACD;EACI;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;KACb,CAAA;IACE,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;EACP,CAAA;EAG9B;AAED,SAAS,cAAc"}

package/dist/components/checkbox.d.cts

@@ -1,9 +1,11 @@
 "use client";
 
+import { u as SparkStyle } from "../theme-types-BwSJKdsB.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
@@ -15,8 +17,10 @@ type CheckboxProps = Checkbox$1.Root.Props & {
    * 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 };
+export { Checkbox, type CheckboxProps, SparkCheckboxColor };
 //# sourceMappingURL=checkbox.d.cts.map

package/dist/components/checkbox.d.ts

@@ -1,9 +1,11 @@
 "use client";
 
+import { u as SparkStyle } from "../theme-types-BDdoRxXa.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
@@ -15,8 +17,10 @@ type CheckboxProps = Checkbox$1.Root.Props & {
    * 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 };
+export { Checkbox, type CheckboxProps, SparkCheckboxColor };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -1,32 +1,39 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import { t as accentByColor } from "../accent-colors-Ch2J0EEY.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, ...props }, ref) => /* @__PURE__ */ jsx(Checkbox$1.Root, {
-	className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--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 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft", "data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]", "data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--spark-style-bg,var(--spark-9))]", className),
-	ref,
-	...props,
-	children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
-		className: "group inline-flex items-center justify-center text-[color:var(--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" })]
-	})
-}));
+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 };

package/dist/components/checkbox.js.map

@@ -1 +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 { cn } from '../utils/cn'\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}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n  // `size`/`bordered` are deprecated no-ops — pulled out of the rest so they\n  // don't leak onto the DOM element as unknown attributes.\n>(({ className, size: _size, bordered: _bordered, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      // 24px visible box with a 40px hit area (the ::before overlay, WCAG 2.5.5).\n      // Border width follows the style knob (surface thins to 1px; the rest stay 2px).\n      'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--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      // Capped radius: follows the [data-radius] factor, but the 40% ceiling (a\n      // circle needs 50%) keeps a checkbox from ever rounding into a circle at\n      // large/full or small sizes. A % radius tracks the box itself, so it holds\n      // across every spacing/scaling combo (Radix idiom: cap small-control radius).\n      'rounded-[min(var(--spark-rounded-sm),40%)]',\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:cursor-not-allowed data-disabled:opacity-50',\n      // Unchecked: subtle fill + a style-aware border (soft sets the idle-border\n      // to none). The a7 fallback keeps the default (no data-style) affordance.\n      'border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft',\n      // Checked / indeterminate: style-aware fill + border (--spark-style-*,\n      // solid by default). Mirrors the Button's style knob.\n      'data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]',\n      'data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--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-[color:var(--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\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;AAiBA,MAAM,WAAWA,QAAM,YAKpB,EAAE,WAAW,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS,QAC5D,oBAACC,WAAkB,MAAnB;CACE,WAAW,GAGT,8JACA,qIAKA,8CACA,+EAEA,6DAGA,qFAGA,+HACA,2IACA,UACD;CACI;CACL,GAAI;WAEJ,qBAACA,WAAkB,WAAnB;EAA6B,WAAU;YAAvC,CAEE,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,MAAK;GACL,SAAQ;aAER,oBAAC,QAAD;IACE,WAAU;IACV,GAAE;IACF,YAAY;IACZ,QAAO;IACP,eAAc;IACd,gBAAe;IACf,aAAa;IACb,CAAA;GACE,CAAA,EACN,oBAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;CACP,CAAA,CACzB;AAEF,SAAS,cAAc"}
+{"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;AAEvD,QACE,oBAACC,WAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EACnB,WAAW,GACT,yJACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,UACD;EACI;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;KACb,CAAA;IACE,CAAA,EACN,oBAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;EACP,CAAA;EAG9B;AAED,SAAS,cAAc"}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { t as Tone } from "../tones-DyCkL71h.js";
+import { t as Tone } from "../tones-PXJGlSpe.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/components/day-of-week-picker.cjs

@@ -98,7 +98,7 @@ const DayOfWeekPicker = react.forwardRef(({ className, disabled, onValueChange,
 					"aria-label": dayAriaLabels?.[day.value] ?? label,
 					disabled,
 					onClick: () => toggle(day.value),
-					className: (0, cnfast.cn)("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-slate-a4"),
+					className: (0, cnfast.cn)("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
 				}, day.value);
 			})
@@ -112,7 +112,7 @@ function PresetButton({ active, children, disabled, onClick }) {
 		onClick,
 		disabled,
 		"aria-pressed": active,
-		className: (0, cnfast.cn)("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-slate-a3"),
+		className: (0, cnfast.cn)("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-gray-a3"),
 		children
 	});
 }

package/dist/components/day-of-week-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-slate-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-slate-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,MAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;YAA9D,CACG,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,YAAA,GAAA,OAAA,IACE,uOACA,UACI,+DACA,sDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,qOACA,SACI,oCACA,mDACL;EAEA;EACM,CAAA"}
+{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,MAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;YAA9D,CACG,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,YAAA,GAAA,OAAA,IACE,yOACA,UACI,+DACA,qDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,uOACA,SACI,oCACA,kDACL;EAEA;EACM,CAAA"}

package/dist/components/day-of-week-picker.js

@@ -95,7 +95,7 @@ const DayOfWeekPicker = React$1.forwardRef(({ className, disabled, onValueChange
 					"aria-label": dayAriaLabels?.[day.value] ?? label,
 					disabled,
 					onClick: () => toggle(day.value),
-					className: cn("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-slate-a4"),
+					className: cn("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
 				}, day.value);
 			})
@@ -109,7 +109,7 @@ function PresetButton({ active, children, disabled, onClick }) {
 		onClick,
 		disabled,
 		"aria-pressed": active,
-		className: cn("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-slate-a3"),
+		className: cn("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-gray-a3"),
 		children
 	});
 }

package/dist/components/day-of-week-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.js","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-slate-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-slate-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,QAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,QAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,UAAU;YAA9D,CACG,eACC,qBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,WAAW,GACT,uOACA,UACI,+DACA,sDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,qOACA,SACI,oCACA,mDACL;EAEA;EACM,CAAA"}
+{"version":3,"file":"day-of-week-picker.js","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,QAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,QAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,UAAU;YAA9D,CACG,eACC,qBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,WAAW,GACT,yOACA,UACI,+DACA,qDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,uOACA,SACI,oCACA,kDACL;EAEA;EACM,CAAA"}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { MaterialSymbolIconName } from "../icons/material-symbol.js";
-import { t as Tone } from "../tones-DyCkL71h.js";
+import { t as Tone } from "../tones-PXJGlSpe.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/components/donut-chart.cjs

@@ -31,7 +31,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				cy: SIZE / 2,
 				r: RADIUS,
 				fill: "none",
-				stroke: "var(--gray-a3)",
+				stroke: "var(--neutral-a3)",
 				strokeWidth: STROKE
 			}),
 			arcs.map((arc, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
@@ -51,7 +51,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				textAnchor: "middle",
 				fontSize: 20,
 				fontWeight: 700,
-				fill: "var(--gray-12)",
+				fill: "var(--neutral-12)",
 				children: centerLabel
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
@@ -59,7 +59,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				y: SIZE / 2 + 14,
 				textAnchor: "middle",
 				fontSize: 12,
-				fill: "var(--gray-a11)",
+				fill: "var(--neutral-a11)",
 				children: centerSub
 			})
 		]

package/dist/components/donut-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"donut-chart.cjs","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--gray-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--gray-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--gray-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}
+{"version":3,"file":"donut-chart.cjs","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--neutral-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--neutral-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--neutral-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}

package/dist/components/donut-chart.js

@@ -29,7 +29,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				cy: SIZE / 2,
 				r: RADIUS,
 				fill: "none",
-				stroke: "var(--gray-a3)",
+				stroke: "var(--neutral-a3)",
 				strokeWidth: STROKE
 			}),
 			arcs.map((arc, i) => /* @__PURE__ */ jsx("circle", {
@@ -49,7 +49,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				textAnchor: "middle",
 				fontSize: 20,
 				fontWeight: 700,
-				fill: "var(--gray-12)",
+				fill: "var(--neutral-12)",
 				children: centerLabel
 			}),
 			/* @__PURE__ */ jsx("text", {
@@ -57,7 +57,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				y: SIZE / 2 + 14,
 				textAnchor: "middle",
 				fontSize: 12,
-				fill: "var(--gray-a11)",
+				fill: "var(--neutral-a11)",
 				children: centerSub
 			})
 		]

package/dist/components/donut-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut-chart.js","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--gray-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--gray-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--gray-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,qBAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,oBAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,oBAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}
+{"version":3,"file":"donut-chart.js","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--neutral-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--neutral-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--neutral-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,qBAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,oBAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,oBAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}

package/dist/components/energy-bar-chart.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChartCategory, BarChartLineSeries, BarChartSeries } from "./bar-chart.js";
-import { t as Format } from "../number-flow-DSbucQ_K.js";
+import { t as Format } from "../number-flow-D9zsxH0-.js";
 
 //#region src/components/energy-bar-chart.d.ts
 type Category = BarChartCategory;

package/dist/components/energy-breakdown.cjs

@@ -60,7 +60,7 @@ function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
 								})]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "h-1 w-full overflow-hidden rounded-full bg-slate-a4",
+							className: "h-1 w-full overflow-hidden rounded-full bg-gray-a4",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "h-full rounded-full",
 								style: {

package/dist/components/energy-breakdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"energy-breakdown.cjs","names":["formatThousands","integerFormat","oneDecimalFormat","twoDecimalFormat","DonutChart","formatEnergy"],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-slate-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAOA,qBAAAA,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAOC,qBAAAA,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;AAC9C,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,eAAA,GAAA,MAAA,eACE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,iBAAA,GAAA,kBAAA,MAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACbC,qBAAAA,aAAa,MAAM;SACf,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACb,GAAGJ,qBAAAA,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;OAAK,WAAU;iBACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}
+{"version":3,"file":"energy-breakdown.cjs","names":["formatThousands","integerFormat","oneDecimalFormat","twoDecimalFormat","DonutChart","formatEnergy"],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-gray-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAOA,qBAAAA,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAOC,qBAAAA,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;AAC9C,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,eAAA,GAAA,MAAA,eACE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,iBAAA,GAAA,kBAAA,MAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACbC,qBAAAA,aAAa,MAAM;SACf,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACb,GAAGJ,qBAAAA,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;OAAK,WAAU;iBACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}

package/dist/components/energy-breakdown.js

@@ -58,7 +58,7 @@ function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
 								})]
 							})]
 						}), /* @__PURE__ */ jsx("div", {
-							className: "h-1 w-full overflow-hidden rounded-full bg-slate-a4",
+							className: "h-1 w-full overflow-hidden rounded-full bg-gray-a4",
 							children: /* @__PURE__ */ jsx("div", {
 								className: "h-full rounded-full",
 								style: {