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

package/dist/components/solar-forecast-chart.d.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import { LineChartCurve, LineChartDatum } from "./line-chart.js";
+import { JSX, ReactNode } from "react";
+
+//#region src/components/solar-forecast-chart.d.ts
+interface SolarForecastWeatherPoint {
+  date: Date;
+  icon: MaterialSymbolIconName;
+}
+interface SolarForecastChartProps {
+  /** Measured production, drawn as the solid line. */
+  produced: LineChartDatum[];
+  /** Predicted production, drawn as the dashed line. */
+  forecast: LineChartDatum[];
+  /** Tooltip label for the produced series. */
+  producedLabel?: ReactNode;
+  /** Tooltip label for the forecast series. */
+  forecastLabel?: ReactNode;
+  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */
+  formatValue?: (value: number) => string;
+  /** X-axis tick formatter. Defaults to the zero-padded hour. */
+  formatTime?: (date: Date) => string;
+  /** Tooltip time formatter. Defaults to `formatTime`. */
+  formatTooltipTime?: (date: Date) => string;
+  /**
+   * Hourly weather icons drawn along the top of the plot, aligned to the time
+   * axis. Their dates must fall within the plotted day.
+   */
+  weather?: SolarForecastWeatherPoint[];
+  /** Sunrise time, drawn as a labelled vertical marker on the plot. */
+  sunrise?: Date;
+  /** Sunset time, drawn as a labelled vertical marker on the plot. */
+  sunset?: Date;
+  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */
+  formatMarkerTime?: (date: Date) => string;
+  curve?: LineChartCurve;
+  height?: number;
+  className?: string;
+}
+/**
+ * Responsive line plot of measured production (solid) against a forecast
+ * (dashed) over a day. Optionally overlays hourly weather icons and
+ * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
+ * container; compose a title and any summary around it.
+ */
+declare function SolarForecastChart({
+  produced,
+  forecast,
+  producedLabel,
+  forecastLabel,
+  formatValue,
+  formatTime,
+  formatTooltipTime,
+  weather,
+  sunrise,
+  sunset,
+  formatMarkerTime,
+  curve,
+  height,
+  className
+}: SolarForecastChartProps): JSX.Element;
+//#endregion
+export { SolarForecastChart, SolarForecastChart as default, SolarForecastChartProps, SolarForecastWeatherPoint };
+//# sourceMappingURL=solar-forecast-chart.d.ts.map

package/dist/components/solar-forecast-chart.js

@@ -0,0 +1,99 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import "../utils/chars.js";
+import { oneDecimalFormat } from "../utils/format.js";
+import { LineChart } from "./line-chart.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/solar-forecast-chart.tsx
+const DEFAULT_HEIGHT = 180;
+const BASE_MARGIN = {
+	top: 8,
+	right: 8,
+	bottom: 28,
+	left: 8
+};
+/** Extra headroom for the weather icon row pinned above the plot. */
+const WEATHER_ROW_HEIGHT = 24;
+function defaultFormatValue(value) {
+	return `${oneDecimalFormat.format(value)} kW`;
+}
+function defaultFormatTime(date) {
+	return date.getHours().toString().padStart(2, "0");
+}
+/**
+* Responsive line plot of measured production (solid) against a forecast
+* (dashed) over a day. Optionally overlays hourly weather icons and
+* sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
+* container; compose a title and any summary around it.
+*/
+function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
+	const containerRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setWidth(entry.contentRect.width);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const hasWeather = weather != null && weather.length > 0;
+	const margin = {
+		...BASE_MARGIN,
+		top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top
+	};
+	const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime;
+	const topContent = hasWeather ? weather.map((point, i) => ({
+		key: `weather-${point.date.valueOf()}-${i}`,
+		date: point.date,
+		content: /* @__PURE__ */ jsx(MaterialSymbol, {
+			name: point.icon,
+			className: "text-(length:--spark-icon-size,18px)! text-gray-light"
+		})
+	})) : void 0;
+	const referenceLines = [sunrise && {
+		key: "sunrise",
+		date: sunrise,
+		label: formatMarker(sunrise)
+	}, sunset && {
+		key: "sunset",
+		date: sunset,
+		label: formatMarker(sunset)
+	}].filter((x) => Boolean(x));
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("w-full", className),
+		children: width > 0 && /* @__PURE__ */ jsx(LineChart, {
+			width,
+			height,
+			margin,
+			curve,
+			series: [{
+				id: "produced",
+				data: produced,
+				label: producedLabel
+			}, {
+				id: "forecast",
+				data: forecast,
+				label: forecastLabel,
+				dashed: true
+			}],
+			showGrid: true,
+			xTickCount: 6,
+			yTickCount: 4,
+			formatDate: formatTime,
+			formatTooltipDate: formatTooltipTime ?? formatTime,
+			formatValue,
+			referenceLines: referenceLines.length > 0 ? referenceLines : void 0,
+			topContent
+		})
+	});
+}
+//#endregion
+export { SolarForecastChart, SolarForecastChart as default };
+
+//# sourceMappingURL=solar-forecast-chart.js.map

package/dist/components/solar-forecast-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"solar-forecast-chart.js","names":[],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 180\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 8 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;AAcA,MAAM,iBAAiB;AACvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAG,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA6CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,oBAAC,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,UAAU;YACvD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}

package/dist/components/sortable-list.cjs

@@ -0,0 +1,69 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _dnd_kit_core = require("@dnd-kit/core");
+let _dnd_kit_modifiers = require("@dnd-kit/modifiers");
+let _dnd_kit_sortable = require("@dnd-kit/sortable");
+let _dnd_kit_utilities = require("@dnd-kit/utilities");
+let cnfast = require("cnfast");
+//#region src/components/sortable-list.tsx
+/**
+* Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and
+* keyboard sensors are wired up; dragging is constrained to the vertical axis
+* within the list. The consumer owns row markup and decides which element is
+* the handle via the `handle` argument of `renderItem`.
+*/
+function SortableList({ items, getItemId, onReorder, renderItem, className }) {
+	const ids = items.map(getItemId);
+	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor, { activationConstraint: { distance: 5 } }), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.TouchSensor, { activationConstraint: {
+		delay: 150,
+		tolerance: 5
+	} }), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const oldIndex = ids.indexOf(String(active.id));
+		const newIndex = ids.indexOf(String(over.id));
+		if (oldIndex < 0 || newIndex < 0) return;
+		onReorder((0, _dnd_kit_sortable.arrayMove)(items, oldIndex, newIndex));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DndContext, {
+		sensors,
+		collisionDetection: _dnd_kit_core.closestCenter,
+		modifiers: [_dnd_kit_modifiers.restrictToVerticalAxis, _dnd_kit_modifiers.restrictToParentElement],
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
+			items: ids,
+			strategy: _dnd_kit_sortable.verticalListSortingStrategy,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, cnfast.cn)("flex flex-col gap-2", className),
+				children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableRow, {
+					id: getItemId(item),
+					children: (handle) => renderItem(item, handle, index)
+				}, getItemId(item)))
+			})
+		})
+	});
+}
+function SortableRow({ id, children }) {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: setNodeRef,
+		style: {
+			transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
+			transition
+		},
+		className: (0, cnfast.cn)(isDragging && "relative z-10"),
+		children: children({
+			ref: setActivatorNodeRef,
+			attributes,
+			listeners,
+			isDragging
+		})
+	});
+}
+//#endregion
+exports.SortableList = SortableList;
+
+//# sourceMappingURL=sortable-list.cjs.map

package/dist/components/sortable-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.cjs","names":["PointerSensor","TouchSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","restrictToVerticalAxis","restrictToParentElement","SortableContext","verticalListSortingStrategy","CSS"],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["import {\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport {\n  restrictToParentElement,\n  restrictToVerticalAxis,\n} from '@dnd-kit/modifiers'\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport type { ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SortableHookResult = ReturnType<typeof useSortable>\n\n/**\n * Props to spread onto the element that should start a drag (the handle).\n * Attach `ref`, `attributes`, and `listeners` to a focusable element such as a\n * button to make it the drag handle; `isDragging` reflects the row's state.\n */\nexport interface SortableDragHandle {\n  ref: SortableHookResult['setActivatorNodeRef']\n  attributes: SortableHookResult['attributes']\n  listeners: SortableHookResult['listeners']\n  isDragging: boolean\n}\n\nexport interface SortableListProps<T> {\n  items: T[]\n  /** Stable unique id for an item. */\n  getItemId: (item: T) => string\n  /** Called with the reordered items after a drag completes. */\n  onReorder: (items: T[]) => void\n  /** Render a single row. Spread `handle` onto the drag-handle element. */\n  renderItem: (item: T, handle: SortableDragHandle, index: number) => ReactNode\n  /** Classes for the list container (defaults to a vertical flex with gap). */\n  className?: string\n}\n\n/**\n * Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and\n * keyboard sensors are wired up; dragging is constrained to the vertical axis\n * within the list. The consumer owns row markup and decides which element is\n * the handle via the `handle` argument of `renderItem`.\n */\nexport function SortableList<T>({\n  items,\n  getItemId,\n  onReorder,\n  renderItem,\n  className,\n}: SortableListProps<T>) {\n  const ids = items.map(getItemId)\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(TouchSensor, {\n      activationConstraint: { delay: 150, tolerance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const oldIndex = ids.indexOf(String(active.id))\n    const newIndex = ids.indexOf(String(over.id))\n    if (oldIndex < 0 || newIndex < 0) return\n    onReorder(arrayMove(items, oldIndex, newIndex))\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={ids} strategy={verticalListSortingStrategy}>\n        <div className={cn('flex flex-col gap-2', className)}>\n          {items.map((item, index) => (\n            <SortableRow key={getItemId(item)} id={getItemId(item)}>\n              {(handle) => renderItem(item, handle, index)}\n            </SortableRow>\n          ))}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n\ninterface SortableRowProps {\n  id: string\n  children: (handle: SortableDragHandle) => ReactNode\n}\n\nfunction SortableRow({ id, children }: SortableRowProps) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cn(isDragging && 'relative z-10')}\n    >\n      {children({\n        ref: setActivatorNodeRef,\n        attributes,\n        listeners,\n        isDragging,\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyDA,SAAgB,aAAgB,EAC9B,OACA,WACA,WACA,YACA,aACuB;CACvB,MAAM,MAAM,MAAM,IAAI,UAAU;CAEhC,MAAM,WAAA,GAAA,cAAA,aAAA,GAAA,cAAA,WACMA,cAAAA,eAAe,EAAE,sBAAsB,EAAE,UAAU,GAAG,EAAE,CAAC,GAAA,GAAA,cAAA,WACzDC,cAAAA,aAAa,EACrB,sBAAsB;EAAE,OAAO;EAAK,WAAW;EAAG,EACnD,CAAC,GAAA,GAAA,cAAA,WACQC,cAAAA,gBAAgB,EACxB,kBAAkBC,kBAAAA,6BACnB,CAAC,CACH;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,GAAI;EACpC,MAAM,WAAW,IAAI,QAAQ,OAAO,OAAO,GAAG,CAAC;EAC/C,MAAM,WAAW,IAAI,QAAQ,OAAO,KAAK,GAAG,CAAC;AAC7C,MAAI,WAAW,KAAK,WAAW,EAAG;AAClC,aAAA,GAAA,kBAAA,WAAoB,OAAO,UAAU,SAAS,CAAC;;AAGjD,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;EACW;EACT,oBAAoBC,cAAAA;EACpB,WAAW,CAACC,mBAAAA,wBAAwBC,mBAAAA,wBAAwB;EAC5D,WAAW;YAEX,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,iBAAD;GAAiB,OAAO;GAAK,UAAUC,kBAAAA;aACrC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;cACjD,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,aAAD;KAAmC,IAAI,UAAU,KAAK;gBAClD,WAAW,WAAW,MAAM,QAAQ,MAAM;KAChC,EAFI,UAAU,KAAK,CAEnB,CACd;IACE,CAAA;GACU,CAAA;EACP,CAAA;;AASjB,SAAS,YAAY,EAAE,IAAI,YAA8B;CACvD,MAAM,EACJ,YACA,WACA,YACA,qBACA,WACA,YACA,gBAAA,GAAA,kBAAA,aACc,EAAE,IAAI,CAAC;AAOvB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACL,OAAO;GAPT,WAAWC,mBAAAA,IAAI,UAAU,SAAS,UAAU;GAC5C;GAMc;EACZ,YAAA,GAAA,OAAA,IAAc,cAAc,gBAAgB;YAE3C,SAAS;GACR,KAAK;GACL;GACA;GACA;GACD,CAAC;EACE,CAAA"}

package/dist/components/sortable-list.d.cts

@@ -0,0 +1,46 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+
+//#region src/components/sortable-list.d.ts
+type SortableHookResult = ReturnType<typeof useSortable>;
+/**
+ * Props to spread onto the element that should start a drag (the handle).
+ * Attach `ref`, `attributes`, and `listeners` to a focusable element such as a
+ * button to make it the drag handle; `isDragging` reflects the row's state.
+ */
+interface SortableDragHandle {
+  ref: SortableHookResult['setActivatorNodeRef'];
+  attributes: SortableHookResult['attributes'];
+  listeners: SortableHookResult['listeners'];
+  isDragging: boolean;
+}
+interface SortableListProps<T> {
+  items: T[];
+  /** Stable unique id for an item. */
+  getItemId: (item: T) => string;
+  /** Called with the reordered items after a drag completes. */
+  onReorder: (items: T[]) => void;
+  /** Render a single row. Spread `handle` onto the drag-handle element. */
+  renderItem: (item: T, handle: SortableDragHandle, index: number) => ReactNode;
+  /** Classes for the list container (defaults to a vertical flex with gap). */
+  className?: string;
+}
+/**
+ * Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and
+ * keyboard sensors are wired up; dragging is constrained to the vertical axis
+ * within the list. The consumer owns row markup and decides which element is
+ * the handle via the `handle` argument of `renderItem`.
+ */
+declare function SortableList<T>({
+  items,
+  getItemId,
+  onReorder,
+  renderItem,
+  className
+}: SortableListProps<T>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SortableDragHandle, SortableList, SortableListProps };
+//# sourceMappingURL=sortable-list.d.cts.map

package/dist/components/sortable-list.d.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+
+//#region src/components/sortable-list.d.ts
+type SortableHookResult = ReturnType<typeof useSortable>;
+/**
+ * Props to spread onto the element that should start a drag (the handle).
+ * Attach `ref`, `attributes`, and `listeners` to a focusable element such as a
+ * button to make it the drag handle; `isDragging` reflects the row's state.
+ */
+interface SortableDragHandle {
+  ref: SortableHookResult['setActivatorNodeRef'];
+  attributes: SortableHookResult['attributes'];
+  listeners: SortableHookResult['listeners'];
+  isDragging: boolean;
+}
+interface SortableListProps<T> {
+  items: T[];
+  /** Stable unique id for an item. */
+  getItemId: (item: T) => string;
+  /** Called with the reordered items after a drag completes. */
+  onReorder: (items: T[]) => void;
+  /** Render a single row. Spread `handle` onto the drag-handle element. */
+  renderItem: (item: T, handle: SortableDragHandle, index: number) => ReactNode;
+  /** Classes for the list container (defaults to a vertical flex with gap). */
+  className?: string;
+}
+/**
+ * Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and
+ * keyboard sensors are wired up; dragging is constrained to the vertical axis
+ * within the list. The consumer owns row markup and decides which element is
+ * the handle via the `handle` argument of `renderItem`.
+ */
+declare function SortableList<T>({
+  items,
+  getItemId,
+  onReorder,
+  renderItem,
+  className
+}: SortableListProps<T>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SortableDragHandle, SortableList, SortableListProps };
+//# sourceMappingURL=sortable-list.d.ts.map

package/dist/components/sortable-list.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/components/sortable-list.tsx
+/**
+* Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and
+* keyboard sensors are wired up; dragging is constrained to the vertical axis
+* within the list. The consumer owns row markup and decides which element is
+* the handle via the `handle` argument of `renderItem`.
+*/
+function SortableList({ items, getItemId, onReorder, renderItem, className }) {
+	const ids = items.map(getItemId);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 150,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const oldIndex = ids.indexOf(String(active.id));
+		const newIndex = ids.indexOf(String(over.id));
+		if (oldIndex < 0 || newIndex < 0) return;
+		onReorder(arrayMove(items, oldIndex, newIndex));
+	};
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis, restrictToParentElement],
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: ids,
+			strategy: verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-col gap-2", className),
+				children: items.map((item, index) => /* @__PURE__ */ jsx(SortableRow, {
+					id: getItemId(item),
+					children: (handle) => renderItem(item, handle, index)
+				}, getItemId(item)))
+			})
+		})
+	});
+}
+function SortableRow({ id, children }) {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({ id });
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition
+		},
+		className: cn(isDragging && "relative z-10"),
+		children: children({
+			ref: setActivatorNodeRef,
+			attributes,
+			listeners,
+			isDragging
+		})
+	});
+}
+//#endregion
+export { SortableList };
+
+//# sourceMappingURL=sortable-list.js.map

package/dist/components/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.js","names":[],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["import {\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport {\n  restrictToParentElement,\n  restrictToVerticalAxis,\n} from '@dnd-kit/modifiers'\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport type { ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SortableHookResult = ReturnType<typeof useSortable>\n\n/**\n * Props to spread onto the element that should start a drag (the handle).\n * Attach `ref`, `attributes`, and `listeners` to a focusable element such as a\n * button to make it the drag handle; `isDragging` reflects the row's state.\n */\nexport interface SortableDragHandle {\n  ref: SortableHookResult['setActivatorNodeRef']\n  attributes: SortableHookResult['attributes']\n  listeners: SortableHookResult['listeners']\n  isDragging: boolean\n}\n\nexport interface SortableListProps<T> {\n  items: T[]\n  /** Stable unique id for an item. */\n  getItemId: (item: T) => string\n  /** Called with the reordered items after a drag completes. */\n  onReorder: (items: T[]) => void\n  /** Render a single row. Spread `handle` onto the drag-handle element. */\n  renderItem: (item: T, handle: SortableDragHandle, index: number) => ReactNode\n  /** Classes for the list container (defaults to a vertical flex with gap). */\n  className?: string\n}\n\n/**\n * Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and\n * keyboard sensors are wired up; dragging is constrained to the vertical axis\n * within the list. The consumer owns row markup and decides which element is\n * the handle via the `handle` argument of `renderItem`.\n */\nexport function SortableList<T>({\n  items,\n  getItemId,\n  onReorder,\n  renderItem,\n  className,\n}: SortableListProps<T>) {\n  const ids = items.map(getItemId)\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(TouchSensor, {\n      activationConstraint: { delay: 150, tolerance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const oldIndex = ids.indexOf(String(active.id))\n    const newIndex = ids.indexOf(String(over.id))\n    if (oldIndex < 0 || newIndex < 0) return\n    onReorder(arrayMove(items, oldIndex, newIndex))\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={ids} strategy={verticalListSortingStrategy}>\n        <div className={cn('flex flex-col gap-2', className)}>\n          {items.map((item, index) => (\n            <SortableRow key={getItemId(item)} id={getItemId(item)}>\n              {(handle) => renderItem(item, handle, index)}\n            </SortableRow>\n          ))}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n\ninterface SortableRowProps {\n  id: string\n  children: (handle: SortableDragHandle) => ReactNode\n}\n\nfunction SortableRow({ id, children }: SortableRowProps) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cn(isDragging && 'relative z-10')}\n    >\n      {children({\n        ref: setActivatorNodeRef,\n        attributes,\n        listeners,\n        isDragging,\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAyDA,SAAgB,aAAgB,EAC9B,OACA,WACA,WACA,YACA,aACuB;CACvB,MAAM,MAAM,MAAM,IAAI,UAAU;CAEhC,MAAM,UAAU,WACd,UAAU,eAAe,EAAE,sBAAsB,EAAE,UAAU,GAAG,EAAE,CAAC,EACnE,UAAU,aAAa,EACrB,sBAAsB;EAAE,OAAO;EAAK,WAAW;EAAG,EACnD,CAAC,EACF,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AACzB,MAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,GAAI;EACpC,MAAM,WAAW,IAAI,QAAQ,OAAO,OAAO,GAAG,CAAC;EAC/C,MAAM,WAAW,IAAI,QAAQ,OAAO,KAAK,GAAG,CAAC;AAC7C,MAAI,WAAW,KAAK,WAAW,EAAG;AAClC,YAAU,UAAU,OAAO,UAAU,SAAS,CAAC;;AAGjD,QACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW,CAAC,wBAAwB,wBAAwB;EAC5D,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAK,UAAU;aACrC,oBAAC,OAAD;IAAK,WAAW,GAAG,uBAAuB,UAAU;cACjD,MAAM,KAAK,MAAM,UAChB,oBAAC,aAAD;KAAmC,IAAI,UAAU,KAAK;gBAClD,WAAW,WAAW,MAAM,QAAQ,MAAM;KAChC,EAFI,UAAU,KAAK,CAEnB,CACd;IACE,CAAA;GACU,CAAA;EACP,CAAA;;AASjB,SAAS,YAAY,EAAE,IAAI,YAA8B;CACvD,MAAM,EACJ,YACA,WACA,YACA,qBACA,WACA,YACA,eACE,YAAY,EAAE,IAAI,CAAC;AAOvB,QACE,oBAAC,OAAD;EACE,KAAK;EACL,OAAO;GAPT,WAAW,IAAI,UAAU,SAAS,UAAU;GAC5C;GAMc;EACZ,WAAW,GAAG,cAAc,gBAAgB;YAE3C,SAAS;GACR,KAAK;GACL;GACA;GACA;GACD,CAAC;EACE,CAAA"}

package/dist/components/spinner.cjs

@@ -0,0 +1,42 @@
+"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/spinner.tsx
+const sizeClasses = {
+	sm: "size-4",
+	default: "size-6",
+	lg: "size-8"
+};
+const Spinner = react.forwardRef(({ className, size = "default", label = "Loading", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: (0, cnfast.cn)("inline-flex text-spark-9", sizeClasses[size], className),
+	"data-slot": "spinner",
+	ref,
+	role: "status",
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "sr-only",
+		children: label
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		className: "size-full animate-spin [animation-duration:.65s] motion-reduce:animate-none",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
+			fill: "currentColor",
+			opacity: ".25"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z",
+			fill: "currentColor"
+		})]
+	})]
+}));
+Spinner.displayName = "Spinner";
+//#endregion
+exports.Spinner = Spinner;
+
+//# sourceMappingURL=spinner.cjs.map

package/dist/components/spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.cjs","names":["React"],"sources":["../../src/components/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Size variant */\n  size?: 'sm' | 'default' | 'lg'\n  /** Screen-reader announcement */\n  label?: string\n}\n\nconst sizeClasses = {\n  sm: 'size-4',\n  default: 'size-6',\n  lg: 'size-8',\n} as const\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  ({ className, size = 'default', label = 'Loading', ...props }, ref) => (\n    // color + size live on the wrapper so className can override them (svg inherits via currentColor/size-full)\n    <div\n      className={cn('inline-flex text-spark-9', sizeClasses[size], className)}\n      data-slot=\"spinner\"\n      ref={ref}\n      role=\"status\"\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {/* CSS animation (not the ECP loader's SMIL): respects prefers-reduced-motion\n          and stays off the main thread; the 0.65s speed matches ECP */}\n      <svg\n        className=\"size-full animate-spin [animation-duration:.65s] motion-reduce:animate-none\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z\"\n          fill=\"currentColor\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  ),\n)\n\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\nexport type { SpinnerProps }\n"],"mappings":";;;;;;;;AAUA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;CACL;AAED,MAAM,UAAUA,MAAM,YACnB,EAAE,WAAW,OAAO,WAAW,QAAQ,WAAW,GAAG,SAAS,QAE7D,iBAAA,GAAA,kBAAA,MAAC,OAAD;CACE,YAAA,GAAA,OAAA,IAAc,4BAA4B,YAAY,OAAO,UAAU;CACvE,aAAU;CACL;CACL,MAAK;CACL,GAAI;WALN,CAOE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAU;YAAW;EAAa,CAAA,EAGxC,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,SAAQ;EACR,OAAM;YAJR,CAME,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,SAAQ;GACR,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,CAAA,CACE;IACF;GAET;AAED,QAAQ,cAAc"}

package/dist/components/spinner.d.cts

@@ -0,0 +1,15 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/spinner.d.ts
+interface SpinnerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg';
+  /** Screen-reader announcement */
+  label?: string;
+}
+declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Spinner, type SpinnerProps };
+//# sourceMappingURL=spinner.d.cts.map

package/dist/components/spinner.d.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/spinner.d.ts
+interface SpinnerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg';
+  /** Screen-reader announcement */
+  label?: string;
+}
+declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Spinner, type SpinnerProps };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner.tsx
+const sizeClasses = {
+	sm: "size-4",
+	default: "size-6",
+	lg: "size-8"
+};
+const Spinner = React$1.forwardRef(({ className, size = "default", label = "Loading", ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	className: cn("inline-flex text-spark-9", sizeClasses[size], className),
+	"data-slot": "spinner",
+	ref,
+	role: "status",
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: label
+	}), /* @__PURE__ */ jsxs("svg", {
+		className: "size-full animate-spin [animation-duration:.65s] motion-reduce:animate-none",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
+			fill: "currentColor",
+			opacity: ".25"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z",
+			fill: "currentColor"
+		})]
+	})]
+}));
+Spinner.displayName = "Spinner";
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":["React"],"sources":["../../src/components/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Size variant */\n  size?: 'sm' | 'default' | 'lg'\n  /** Screen-reader announcement */\n  label?: string\n}\n\nconst sizeClasses = {\n  sm: 'size-4',\n  default: 'size-6',\n  lg: 'size-8',\n} as const\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  ({ className, size = 'default', label = 'Loading', ...props }, ref) => (\n    // color + size live on the wrapper so className can override them (svg inherits via currentColor/size-full)\n    <div\n      className={cn('inline-flex text-spark-9', sizeClasses[size], className)}\n      data-slot=\"spinner\"\n      ref={ref}\n      role=\"status\"\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {/* CSS animation (not the ECP loader's SMIL): respects prefers-reduced-motion\n          and stays off the main thread; the 0.65s speed matches ECP */}\n      <svg\n        className=\"size-full animate-spin [animation-duration:.65s] motion-reduce:animate-none\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z\"\n          fill=\"currentColor\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  ),\n)\n\nSpinner.displayName = 'Spinner'\n\nexport { Spinner }\nexport type { SpinnerProps }\n"],"mappings":";;;;;AAUA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;CACL;AAED,MAAM,UAAUA,QAAM,YACnB,EAAE,WAAW,OAAO,WAAW,QAAQ,WAAW,GAAG,SAAS,QAE7D,qBAAC,OAAD;CACE,WAAW,GAAG,4BAA4B,YAAY,OAAO,UAAU;CACvE,aAAU;CACL;CACL,MAAK;CACL,GAAI;WALN,CAOE,oBAAC,QAAD;EAAM,WAAU;YAAW;EAAa,CAAA,EAGxC,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,SAAQ;EACR,OAAM;YAJR,CAME,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,SAAQ;GACR,CAAA,EACF,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,CAAA,CACE;IACF;GAET;AAED,QAAQ,cAAc"}

package/dist/components/stat-card.cjs

@@ -0,0 +1,58 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/stat-card.tsx
+const StatCardContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex w-full flex-col gap-3 p-4 text-left", className),
+		...rest
+	});
+};
+const StatCardLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("text-xs font-medium text-gray-light", className),
+		...rest
+	});
+};
+const StatCardContent = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-end justify-between gap-px", className),
+		...rest
+	});
+};
+const StatCardValueContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col gap-0.5", className),
+		...rest
+	});
+};
+const StatCardValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("text-lg font-bold text-gray tabular-nums", className),
+		...rest
+	});
+};
+const StatCardSecondaryValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("text-xs text-gray-light", className),
+		...rest
+	});
+};
+const StatCardIcon = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)(`flex size-10 shrink-0 items-center justify-center rounded-xl`, className),
+		...rest
+	});
+};
+//#endregion
+exports.StatCardContainer = StatCardContainer;
+exports.StatCardContent = StatCardContent;
+exports.StatCardIcon = StatCardIcon;
+exports.StatCardLabel = StatCardLabel;
+exports.StatCardSecondaryValue = StatCardSecondaryValue;
+exports.StatCardValue = StatCardValue;
+exports.StatCardValueContainer = StatCardValueContainer;
+
+//# sourceMappingURL=stat-card.cjs.map

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

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