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

package/dist/components/checkbox.d.ts

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

package/dist/components/checkbox.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn } from "../utils/cn.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" })]
+	})
+}));
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { 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"}

package/dist/components/circular-gauge.cjs

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

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

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

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

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

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

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

package/dist/components/circular-gauge.js

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

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

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

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

@@ -0,0 +1,123 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/day-of-week-picker.tsx
+const WEEK_DAYS = [
+	{
+		value: "monday",
+		short: "Mon"
+	},
+	{
+		value: "tuesday",
+		short: "Tue"
+	},
+	{
+		value: "wednesday",
+		short: "Wed"
+	},
+	{
+		value: "thursday",
+		short: "Thu"
+	},
+	{
+		value: "friday",
+		short: "Fri"
+	},
+	{
+		value: "saturday",
+		short: "Sat"
+	},
+	{
+		value: "sunday",
+		short: "Sun"
+	}
+];
+const WEEKDAYS_ONLY = [
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday"
+];
+const WEEKEND_ONLY = ["saturday", "sunday"];
+const ALL_DAYS = WEEK_DAYS.map((d) => d.value);
+const DayOfWeekPicker = react.forwardRef(({ className, disabled, onValueChange, showPresets = false, value, dayLabels, dayAriaLabels, presetLabels, presetsAriaLabel = "Day presets", daysAriaLabel = "Days of the week" }, ref) => {
+	const selected = react.useMemo(() => new Set(value), [value]);
+	const toggle = (day) => {
+		const next = new Set(selected);
+		if (next.has(day)) next.delete(day);
+		else next.add(day);
+		onValueChange(ALL_DAYS.filter((d) => next.has(d)));
+	};
+	const matches = (preset) => selected.size === preset.length && preset.every((d) => selected.has(d));
+	const setPreset = (preset) => {
+		onValueChange(preset);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: (0, cnfast.cn)("flex flex-col gap-2", className),
+		children: [showPresets && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "group",
+			"aria-label": presetsAriaLabel,
+			className: "flex flex-wrap gap-1.5",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
+					active: matches(WEEKDAYS_ONLY),
+					disabled,
+					onClick: () => setPreset(WEEKDAYS_ONLY),
+					children: presetLabels?.weekdays ?? "Weekdays"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
+					active: matches(WEEKEND_ONLY),
+					disabled,
+					onClick: () => setPreset(WEEKEND_ONLY),
+					children: presetLabels?.weekend ?? "Weekend"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
+					active: matches(ALL_DAYS),
+					disabled,
+					onClick: () => setPreset(ALL_DAYS),
+					children: presetLabels?.everyDay ?? "Every day"
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "group",
+			"aria-label": daysAriaLabel,
+			className: "flex gap-1",
+			children: WEEK_DAYS.map((day) => {
+				const checked = selected.has(day.value);
+				const label = dayLabels?.[day.value] ?? day.short;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					role: "checkbox",
+					"aria-checked": checked,
+					"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"),
+					children: label
+				}, day.value);
+			})
+		})]
+	});
+});
+DayOfWeekPicker.displayName = "DayOfWeekPicker";
+function PresetButton({ active, children, disabled, onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		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"),
+		children
+	});
+}
+//#endregion
+exports.DayOfWeekPicker = DayOfWeekPicker;
+exports.WEEK_DAYS = WEEK_DAYS;
+
+//# sourceMappingURL=day-of-week-picker.cjs.map

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

@@ -0,0 +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"}

package/dist/components/day-of-week-picker.d.cts

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/day-of-week-picker.d.ts
+type WeekDay = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
+declare const WEEK_DAYS: ReadonlyArray<{
+  value: WeekDay;
+  short: string;
+}>;
+interface DayOfWeekPickerProps {
+  value: WeekDay[];
+  onValueChange: (next: WeekDay[]) => void;
+  disabled?: boolean;
+  /** Show "Weekdays / Weekend / Every day" preset shortcuts above the chips. */
+  showPresets?: boolean;
+  className?: string;
+  /** Short labels (e.g. "Mon", "Tue") shown on each day chip. Defaults to English. */
+  dayLabels?: Partial<Record<WeekDay, string>>;
+  /**
+   * Full accessible names per day (e.g. "Monday"). Used as each chip's
+   * `aria-label`. Falls back to the visible short label when omitted.
+   */
+  dayAriaLabels?: Partial<Record<WeekDay, string>>;
+  /** Preset button labels. Each defaults to its English name. */
+  presetLabels?: {
+    weekdays?: React$1.ReactNode;
+    weekend?: React$1.ReactNode;
+    everyDay?: React$1.ReactNode;
+  };
+  /** Accessible label for the preset row. Defaults to `"Day presets"`. */
+  presetsAriaLabel?: string;
+  /** Accessible label for the day chip group. Defaults to `"Days of the week"`. */
+  daysAriaLabel?: string;
+}
+declare const DayOfWeekPicker: React$1.ForwardRefExoticComponent<DayOfWeekPickerProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DayOfWeekPicker, WEEK_DAYS, WeekDay };
+//# sourceMappingURL=day-of-week-picker.d.cts.map

package/dist/components/day-of-week-picker.d.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/day-of-week-picker.d.ts
+type WeekDay = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
+declare const WEEK_DAYS: ReadonlyArray<{
+  value: WeekDay;
+  short: string;
+}>;
+interface DayOfWeekPickerProps {
+  value: WeekDay[];
+  onValueChange: (next: WeekDay[]) => void;
+  disabled?: boolean;
+  /** Show "Weekdays / Weekend / Every day" preset shortcuts above the chips. */
+  showPresets?: boolean;
+  className?: string;
+  /** Short labels (e.g. "Mon", "Tue") shown on each day chip. Defaults to English. */
+  dayLabels?: Partial<Record<WeekDay, string>>;
+  /**
+   * Full accessible names per day (e.g. "Monday"). Used as each chip's
+   * `aria-label`. Falls back to the visible short label when omitted.
+   */
+  dayAriaLabels?: Partial<Record<WeekDay, string>>;
+  /** Preset button labels. Each defaults to its English name. */
+  presetLabels?: {
+    weekdays?: React$1.ReactNode;
+    weekend?: React$1.ReactNode;
+    everyDay?: React$1.ReactNode;
+  };
+  /** Accessible label for the preset row. Defaults to `"Day presets"`. */
+  presetsAriaLabel?: string;
+  /** Accessible label for the day chip group. Defaults to `"Days of the week"`. */
+  daysAriaLabel?: string;
+}
+declare const DayOfWeekPicker: React$1.ForwardRefExoticComponent<DayOfWeekPickerProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DayOfWeekPicker, WEEK_DAYS, WeekDay };
+//# sourceMappingURL=day-of-week-picker.d.ts.map

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

@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/day-of-week-picker.tsx
+const WEEK_DAYS = [
+	{
+		value: "monday",
+		short: "Mon"
+	},
+	{
+		value: "tuesday",
+		short: "Tue"
+	},
+	{
+		value: "wednesday",
+		short: "Wed"
+	},
+	{
+		value: "thursday",
+		short: "Thu"
+	},
+	{
+		value: "friday",
+		short: "Fri"
+	},
+	{
+		value: "saturday",
+		short: "Sat"
+	},
+	{
+		value: "sunday",
+		short: "Sun"
+	}
+];
+const WEEKDAYS_ONLY = [
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday"
+];
+const WEEKEND_ONLY = ["saturday", "sunday"];
+const ALL_DAYS = WEEK_DAYS.map((d) => d.value);
+const DayOfWeekPicker = React$1.forwardRef(({ className, disabled, onValueChange, showPresets = false, value, dayLabels, dayAriaLabels, presetLabels, presetsAriaLabel = "Day presets", daysAriaLabel = "Days of the week" }, ref) => {
+	const selected = React$1.useMemo(() => new Set(value), [value]);
+	const toggle = (day) => {
+		const next = new Set(selected);
+		if (next.has(day)) next.delete(day);
+		else next.add(day);
+		onValueChange(ALL_DAYS.filter((d) => next.has(d)));
+	};
+	const matches = (preset) => selected.size === preset.length && preset.every((d) => selected.has(d));
+	const setPreset = (preset) => {
+		onValueChange(preset);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex flex-col gap-2", className),
+		children: [showPresets && /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"aria-label": presetsAriaLabel,
+			className: "flex flex-wrap gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx(PresetButton, {
+					active: matches(WEEKDAYS_ONLY),
+					disabled,
+					onClick: () => setPreset(WEEKDAYS_ONLY),
+					children: presetLabels?.weekdays ?? "Weekdays"
+				}),
+				/* @__PURE__ */ jsx(PresetButton, {
+					active: matches(WEEKEND_ONLY),
+					disabled,
+					onClick: () => setPreset(WEEKEND_ONLY),
+					children: presetLabels?.weekend ?? "Weekend"
+				}),
+				/* @__PURE__ */ jsx(PresetButton, {
+					active: matches(ALL_DAYS),
+					disabled,
+					onClick: () => setPreset(ALL_DAYS),
+					children: presetLabels?.everyDay ?? "Every day"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": daysAriaLabel,
+			className: "flex gap-1",
+			children: WEEK_DAYS.map((day) => {
+				const checked = selected.has(day.value);
+				const label = dayLabels?.[day.value] ?? day.short;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "checkbox",
+					"aria-checked": checked,
+					"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"),
+					children: label
+				}, day.value);
+			})
+		})]
+	});
+});
+DayOfWeekPicker.displayName = "DayOfWeekPicker";
+function PresetButton({ active, children, disabled, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		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"),
+		children
+	});
+}
+//#endregion
+export { DayOfWeekPicker, WEEK_DAYS };
+
+//# sourceMappingURL=day-of-week-picker.js.map