@epilot/spark-ui 0.10.0

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

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-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/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-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);
+			})
+		})]
+	});
+});
+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-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
+	});
+}
+//#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-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;CAAM;CAChC;EAAE,OAAO;EAAW,OAAO;CAAM;CACjC;EAAE,OAAO;EAAa,OAAO;CAAM;CACnC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;CAChC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;AAClC;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,KAAK;AA4BxD,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,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;YAA7D,CACG,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,YAAY;IACf,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,cAAc,WAAW;IACd,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,cAAc,YAAY;IACf,CAAA;GACX;MAEP,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,KAAK;IACtC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;IAE5C,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,KAAK;KAC/B,YAAA,GAAA,OAAA,IACE,yOACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,IAAI,KAeH;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,uOACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}

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-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);
+			})
+		})]
+	});
+});
+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-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
+	});
+}
+//#endregion
+export { DayOfWeekPicker, WEEK_DAYS };
+
+//# sourceMappingURL=day-of-week-picker.js.map

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

@@ -0,0 +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-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;CAAM;CAChC;EAAE,OAAO;EAAW,OAAO;CAAM;CACjC;EAAE,OAAO;EAAa,OAAO;CAAM;CACnC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;CAChC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;AAClC;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,KAAK;AA4BxD,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,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,SAAS;YAA7D,CACG,eACC,qBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,YAAY;IACf,CAAA;IACd,oBAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,cAAc,WAAW;IACd,CAAA;IACd,oBAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,cAAc,YAAY;IACf,CAAA;GACX;MAEP,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,KAAK;IACtC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;IAE5C,OACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,KAAK;KAC/B,WAAW,GACT,yOACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,IAAI,KAeH;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,uOACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}

package/dist/components/device-card.cjs

@@ -0,0 +1,118 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let cnfast = require("cnfast");
+//#region src/components/device-card.tsx
+const DeviceCard = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex flex-col overflow-hidden rounded-2xl border border-gray bg-(--spark-background)", className),
+	...rest
+});
+const DeviceCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	type: "button",
+	className: (0, cnfast.cn)("flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", active && "bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%", className),
+	...rest
+});
+const DeviceCardHeader = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex w-full items-center gap-3", className),
+	...rest
+});
+const DeviceCardMeters = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex flex-col gap-2 border-t border-gray pt-3", className),
+	...rest
+});
+const iconToneVariants = (0, class_variance_authority.cva)("flex size-11 shrink-0 items-center justify-center rounded-xl", {
+	variants: { tone: {
+		success: "bg-base-success-soft text-success",
+		warning: "bg-base-warning-soft text-warning",
+		error: "bg-base-error-soft text-error",
+		accent: "bg-base-accent-soft text-accent",
+		neutral: "bg-base-gray-soft text-gray"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const DeviceCardIcon = ({ className, icon, tone, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: iconToneVariants({
+		tone,
+		className
+	}),
+	...rest,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+		className: "text-[18px]",
+		name: icon
+	})
+});
+const DeviceCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	...rest
+});
+const DeviceCardTitle = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: (0, cnfast.cn)("truncate text-sm font-bold text-gray", className),
+	...rest
+});
+const stateToneVariants = (0, class_variance_authority.cva)("inline-flex items-center gap-1.5 text-xs font-medium", {
+	variants: { tone: {
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		accent: "text-accent",
+		neutral: "text-gray-light"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const dotToneVariants = (0, class_variance_authority.cva)("size-1.5 shrink-0 rounded-full", {
+	variants: { tone: {
+		success: "bg-base-success-solid",
+		warning: "bg-base-warning-solid",
+		error: "bg-base-error-solid",
+		accent: "bg-base-accent-solid",
+		neutral: "bg-base-gray-solid"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const DeviceCardState = ({ className, tone, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+	className: stateToneVariants({
+		tone,
+		className
+	}),
+	...rest,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: dotToneVariants({ tone }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "truncate",
+		children
+	})]
+});
+const DeviceCardDetail = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: (0, cnfast.cn)("truncate text-xs text-gray-light tabular-nums", className),
+	...rest
+});
+const DeviceCardPower = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: (0, cnfast.cn)("ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums", className),
+	...rest
+});
+const DeviceCardControls = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3", className),
+	...rest
+});
+const DeviceCardFooter = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light", className),
+	...rest
+});
+//#endregion
+exports.DeviceCard = DeviceCard;
+exports.DeviceCardBody = DeviceCardBody;
+exports.DeviceCardControls = DeviceCardControls;
+exports.DeviceCardDetail = DeviceCardDetail;
+exports.DeviceCardFooter = DeviceCardFooter;
+exports.DeviceCardHeader = DeviceCardHeader;
+exports.DeviceCardIcon = DeviceCardIcon;
+exports.DeviceCardMeters = DeviceCardMeters;
+exports.DeviceCardPower = DeviceCardPower;
+exports.DeviceCardState = DeviceCardState;
+exports.DeviceCardTitle = DeviceCardTitle;
+exports.DeviceCardTitleColumn = DeviceCardTitleColumn;
+
+//# sourceMappingURL=device-card.cjs.map

package/dist/components/device-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-card.cjs","names":["MaterialSymbol"],"sources":["../../src/components/device-card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst DeviceCard = ({ className, ...rest }: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex flex-col overflow-hidden rounded-2xl border border-gray bg-(--spark-background)',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardBody = ({\n  className,\n  active,\n  ...rest\n}: React.ComponentProps<'button'> & { active?: boolean }) => (\n  <button\n    type=\"button\"\n    className={cn(\n      'flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n      active && 'bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('flex w-full items-center gap-3', className)} {...rest} />\n)\n\nconst DeviceCardMeters = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex flex-col gap-2 border-t border-gray pt-3', className)}\n    {...rest}\n  />\n)\n\nconst iconToneVariants = cva(\n  'flex size-11 shrink-0 items-center justify-center rounded-xl',\n  {\n    variants: {\n      tone: {\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        error: 'bg-base-error-soft text-error',\n        accent: 'bg-base-accent-soft text-accent',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst DeviceCardIcon = ({\n  className,\n  icon,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n  tone?: Tone\n}) => (\n  <span className={iconToneVariants({ tone, className })} {...rest}>\n    <MaterialSymbol className=\"text-[18px]\" name={icon} />\n  </span>\n)\n\nconst DeviceCardTitleColumn = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...rest}\n  />\n)\n\nconst DeviceCardTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-sm font-bold text-gray', className)}\n    {...rest}\n  />\n)\n\nconst stateToneVariants = cva(\n  'inline-flex items-center gap-1.5 text-xs font-medium',\n  {\n    variants: {\n      tone: {\n        success: 'text-success',\n        warning: 'text-warning',\n        error: 'text-error',\n        accent: 'text-accent',\n        neutral: 'text-gray-light',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst dotToneVariants = cva('size-1.5 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      success: 'bg-base-success-solid',\n      warning: 'bg-base-warning-solid',\n      error: 'bg-base-error-solid',\n      accent: 'bg-base-accent-solid',\n      neutral: 'bg-base-gray-solid',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst DeviceCardState = ({\n  className,\n  tone,\n  children,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => (\n  <span className={stateToneVariants({ tone, className })} {...rest}>\n    <span className={dotToneVariants({ tone })} />\n    <span className=\"truncate\">{children}</span>\n  </span>\n)\n\nconst DeviceCardDetail = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-xs text-gray-light tabular-nums', className)}\n    {...rest}\n  />\n)\n\nconst DeviceCardPower = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn(\n      'ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardControls = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst DeviceCardFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nexport {\n  DeviceCard,\n  DeviceCardBody,\n  DeviceCardControls,\n  DeviceCardDetail,\n  DeviceCardFooter,\n  DeviceCardHeader,\n  DeviceCardIcon,\n  DeviceCardMeters,\n  DeviceCardPower,\n  DeviceCardState,\n  DeviceCardTitle,\n  DeviceCardTitleColumn,\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
+import { Tone } from "../lib/tones.cjs";
+import * as React$1 from "react";
+
+//#region src/components/device-card.d.ts
+declare const DeviceCard: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardBody: ({
+  className,
+  active,
+  ...rest
+}: React$1.ComponentProps<"button"> & {
+  active?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardHeader: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardMeters: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardIcon: ({
+  className,
+  icon,
+  tone,
+  ...rest
+}: React$1.ComponentProps<"span"> & {
+  icon: MaterialSymbolIconName;
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardTitleColumn: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardTitle: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardState: ({
+  className,
+  tone,
+  children,
+  ...rest
+}: React$1.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardDetail: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardPower: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardControls: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const DeviceCardFooter: ({
+  className,
+  ...rest
+}: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DeviceCard, DeviceCardBody, DeviceCardControls, DeviceCardDetail, DeviceCardFooter, DeviceCardHeader, DeviceCardIcon, DeviceCardMeters, DeviceCardPower, DeviceCardState, DeviceCardTitle, DeviceCardTitleColumn };
+//# sourceMappingURL=device-card.d.cts.map