@epilot/spark-ui 0.20.0 → 0.21.0

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

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../utils/cn.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 = 220;
+const BASE_MARGIN = {
+	top: 8,
+	right: 8,
+	bottom: 28,
+	left: 34
+};
+/** 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, yAxisUnit = "kW", formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className, zoomable, zoomResetLabel, zoomDomain, onZoomDomainChange }) {
+	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) => {
+		const WeatherGlyph = point.icon;
+		return {
+			key: `weather-${point.date.valueOf()}-${i}`,
+			date: point.date,
+			content: /* @__PURE__ */ jsx(WeatherGlyph, { className: "text-gray-light [--spark-icon-size:18px]" })
+		};
+	}) : 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,
+			yAxisUnit,
+			formatDate: formatTime,
+			formatTooltipDate: formatTooltipTime ?? formatTime,
+			formatValue,
+			referenceLines: referenceLines.length > 0 ? referenceLines : void 0,
+			topContent,
+			zoomable,
+			zoomResetLabel,
+			zoomDomain,
+			onZoomDomainChange
+		})
+	});
+}
+//#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 { SparkIcon } from '@epilot/spark-icons'\nimport { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\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 = 220\n// `left` leaves room for the y-axis tick labels + unit (matches the 34px gutter\n// used by BarChart / PowerHistoryChart).\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 34 }\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: SparkIcon\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  /** Tooltip value formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to \"kW\". */\n  yAxisUnit?: 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  zoomable?: boolean\n  zoomResetLabel?: string\n  zoomDomain?: [Date, Date] | null\n  onZoomDomainChange?: (domain: [Date, Date] | null) => void\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  yAxisUnit = 'kW',\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n  zoomable,\n  zoomResetLabel,\n  zoomDomain,\n  onZoomDomainChange,\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        const WeatherGlyph = point.icon\n        return {\n          key: `weather-${point.date.valueOf()}-${i}`,\n          date: point.date,\n          content: (\n            <WeatherGlyph className=\"text-gray-light [--spark-icon-size:18px]\" />\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          yAxisUnit={yAxisUnit}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n          zoomable={zoomable}\n          zoomResetLabel={zoomResetLabel}\n          zoomDomain={zoomDomain}\n          onZoomDomainChange={onZoomDomainChange}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;AAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;CACjD,OAAO,GAAG,iBAAiB,OAAO,KAAK;AACzC;AAEA,SAAS,kBAAkB,MAAoB;CAC7C,OAAO,KAAK,SAAS,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG;AACnD;;;;;;;AAkDA,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,YAAY,MACZ,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,WACA,UACA,gBACA,YACA,sBACuC;CACvC,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,gBAAgB;EACd,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;GACtB,IAAI,OAAO,SAAS,MAAM,YAAY,KAAK;EAC7C,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;CACvE;CACA,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,MAAM;EACxB,MAAM,eAAe,MAAM;EAC3B,OAAO;GACL,KAAK,WAAW,MAAM,KAAK,QAAQ,EAAE,GAAG;GACxC,MAAM,MAAM;GACZ,SACE,oBAAC,cAAD,EAAc,WAAU,2CAA4C,CAAA;EAExE;CACF,CAAC,IACD,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,OAAO;CAAE,GACzE,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,MAAM;CAAE,CACvE,EAAE,QAAQ,MAAuD,QAAQ,CAAC,CAAC;CAE3E,OACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,SAAS;YACtD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;GAAc,GACvD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;GACV,CACF;GACA,UAAA;GACA,YAAY;GACZ,YAAY;GACD;GACX,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACF;GACM;GACJ;GACQ;EACrB,CAAA;CAEA,CAAA;AAET"}

package/dist/components/sortable-list.cjs

@@ -5,7 +5,7 @@ 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");
+let cn = require("cn");
 //#region src/components/sortable-list.tsx
 /**
 * Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and
@@ -36,7 +36,7 @@ function SortableList({ items, getItemId, onReorder, renderItem, className }) {
 			items: ids,
 			strategy: _dnd_kit_sortable.verticalListSortingStrategy,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, cnfast.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
+				className: (0, cn.cn)("flex flex-col gap-[calc(var(--spark-layout-gap)*2)]", className),
 				children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableRow, {
 					id: getItemId(item),
 					children: (handle) => renderItem(item, handle, index)
@@ -53,7 +53,7 @@ function SortableRow({ id, children }) {
 			transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
 			transition
 		},
-		className: (0, cnfast.cn)(isDragging && "relative z-10"),
+		className: (0, cn.cn)(isDragging && "relative z-10"),
 		children: children({
 			ref: setActivatorNodeRef,
 			attributes,

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

@@ -1 +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\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n            className,\n          )}\n        >\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,SAAS;CAE/B,MAAM,WAAA,GAAA,cAAA,aAAA,GAAA,cAAA,WACMA,cAAAA,eAAe,EAAE,sBAAsB,EAAE,UAAU,EAAE,EAAE,CAAC,IAAA,GAAA,cAAA,WACxDC,cAAAA,aAAa,EACrB,sBAAsB;EAAE,OAAO;EAAK,WAAW;CAAE,EACnD,CAAC,IAAA,GAAA,cAAA,WACSC,cAAAA,gBAAgB,EACxB,kBAAkBC,kBAAAA,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,IAAI;EACpC,MAAM,WAAW,IAAI,QAAQ,OAAO,OAAO,EAAE,CAAC;EAC9C,MAAM,WAAW,IAAI,QAAQ,OAAO,KAAK,EAAE,CAAC;EAC5C,IAAI,WAAW,KAAK,WAAW,GAAG;EAClC,WAAA,GAAA,kBAAA,WAAoB,OAAO,UAAU,QAAQ,CAAC;CAChD;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;EACW;EACT,oBAAoBC,cAAAA;EACpB,WAAW,CAACC,mBAAAA,wBAAwBC,mBAAAA,uBAAuB;EAC3D,WAAW;YAEX,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,iBAAD;GAAiB,OAAO;GAAK,UAAUC,kBAAAA;aACrC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,YAAA,GAAA,OAAA,IACE,uDACA,SACF;cAEC,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,aAAD;KAAmC,IAAI,UAAU,IAAI;gBACjD,WAAW,WAAW,MAAM,QAAQ,KAAK;IAChC,GAFK,UAAU,IAAI,CAEnB,CACd;GACE,CAAA;EACU,CAAA;CACP,CAAA;AAEhB;AAOA,SAAS,YAAY,EAAE,IAAI,YAA8B;CACvD,MAAM,EACJ,YACA,WACA,YACA,qBACA,WACA,YACA,gBAAA,GAAA,kBAAA,aACc,EAAE,GAAG,CAAC;CAOtB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACL,OAAO;GAPT,WAAWC,mBAAAA,IAAI,UAAU,SAAS,SAAS;GAC3C;EAMa;EACX,YAAA,GAAA,OAAA,IAAc,cAAc,eAAe;YAE1C,SAAS;GACR,KAAK;GACL;GACA;GACA;EACF,CAAC;CACE,CAAA;AAET"}
+{"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\n          className={cn(\n            'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n            className,\n          )}\n        >\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,SAAS;CAE/B,MAAM,WAAA,GAAA,cAAA,aAAA,GAAA,cAAA,WACMA,cAAAA,eAAe,EAAE,sBAAsB,EAAE,UAAU,EAAE,EAAE,CAAC,IAAA,GAAA,cAAA,WACxDC,cAAAA,aAAa,EACrB,sBAAsB;EAAE,OAAO;EAAK,WAAW;CAAE,EACnD,CAAC,IAAA,GAAA,cAAA,WACSC,cAAAA,gBAAgB,EACxB,kBAAkBC,kBAAAA,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,IAAI;EACpC,MAAM,WAAW,IAAI,QAAQ,OAAO,OAAO,EAAE,CAAC;EAC9C,MAAM,WAAW,IAAI,QAAQ,OAAO,KAAK,EAAE,CAAC;EAC5C,IAAI,WAAW,KAAK,WAAW,GAAG;EAClC,WAAA,GAAA,kBAAA,WAAoB,OAAO,UAAU,QAAQ,CAAC;CAChD;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;EACW;EACT,oBAAoBC,cAAAA;EACpB,WAAW,CAACC,mBAAAA,wBAAwBC,mBAAAA,uBAAuB;EAC3D,WAAW;YAEX,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,iBAAD;GAAiB,OAAO;GAAK,UAAUC,kBAAAA;aACrC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,YAAA,GAAA,GAAA,IACE,uDACA,SACF;cAEC,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAAC,aAAD;KAAmC,IAAI,UAAU,IAAI;gBACjD,WAAW,WAAW,MAAM,QAAQ,KAAK;IAChC,GAFK,UAAU,IAAI,CAEnB,CACd;GACE,CAAA;EACU,CAAA;CACP,CAAA;AAEhB;AAOA,SAAS,YAAY,EAAE,IAAI,YAA8B;CACvD,MAAM,EACJ,YACA,WACA,YACA,qBACA,WACA,YACA,gBAAA,GAAA,kBAAA,aACc,EAAE,GAAG,CAAC;CAOtB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACL,OAAO;GAPT,WAAWC,mBAAAA,IAAI,UAAU,SAAS,SAAS;GAC3C;EAMa;EACX,YAAA,GAAA,GAAA,IAAc,cAAc,eAAe;YAE1C,SAAS;GACR,KAAK;GACL;GACA;GACA;EACF,CAAC;CACE,CAAA;AAET"}

package/dist/components/spinner.cjs

@@ -4,7 +4,7 @@ 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");
+let cn = require("cn");
 //#region src/components/spinner.tsx
 const sizeClasses = {
 	sm: "size-4",
@@ -12,7 +12,7 @@ const sizeClasses = {
 	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),
+	className: (0, cn.cn)("inline-flex text-spark-9", sizeClasses[size], className),
 	"data-slot": "spinner",
 	ref,
 	role: "status",

package/dist/components/spinner.cjs.map

@@ -1 +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;AACN;AAEA,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,SAAS;CACtE,aAAU;CACL;CACL,MAAK;CACL,GAAI;WALN,CAOE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,GAGvC,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;EACT,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA,CACE;GACF;EAET;AAEA,QAAQ,cAAc"}
+{"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;AACN;AAEA,MAAM,UAAUA,MAAM,YACnB,EAAE,WAAW,OAAO,WAAW,QAAQ,WAAW,GAAG,SAAS,QAE7D,iBAAA,GAAA,kBAAA,MAAC,OAAD;CACE,YAAA,GAAA,GAAA,IAAc,4BAA4B,YAAY,OAAO,SAAS;CACtE,aAAU;CACL;CACL,MAAK;CACL,GAAI;WALN,CAOE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,GAGvC,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;EACT,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA,CACE;GACF;EAET;AAEA,QAAQ,cAAc"}

package/dist/components/stat-card.cjs

@@ -1,47 +1,47 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#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),
+		className: (0, cn.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),
+		className: (0, cn.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),
+		className: (0, cn.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),
+		className: (0, cn.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),
+		className: (0, cn.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),
+		className: (0, cn.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-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", className),
+		className: (0, cn.cn)("flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", className),
 		...rest
 	});
 };

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

@@ -1 +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        // max() pill escape (matches Icon): a tile stays rounded-md at low Roundness but\n        // becomes a circle at large/full, same as it did pre-harmonization via clamping.\n        'flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\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;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,OAAA,IAAc,yBAAyB,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAGE,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"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        // max() pill escape (matches Icon): a tile stays rounded-md at low Roundness but\n        // becomes a circle at large/full, same as it did pre-harmonization via clamping.\n        'flex size-10 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\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;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,GAAA,IAAc,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;CACjC,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,GAAA,IAAc,yBAAyB,SAAS;EAAG,GAAI;CAAO,CAAA;AAC5E;AAEA,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,GAAA,IAAc,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/E;AAEA,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAGE,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/stepper.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/stepper.tsx
 const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel, increaseLabel }, ref) => {
 	const commitTimerRef = react.useRef(null);
@@ -40,7 +40,7 @@ const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0
 		ref,
 		role: "group",
 		"aria-label": ariaLabel,
-		className: (0, cnfast.cn)("inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2", className),
+		className: (0, cn.cn)("inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",

package/dist/components/stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.cjs","names":["React","ChevronLeft","ChevronRight"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. */\n  decreaseLabel: string\n  /** Accessible label for the increment button. */\n  increaseLabel: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel,\n      increaseLabel,\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronLeft className=\"[--spark-icon-size:16px]\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronRight className=\"[--spark-icon-size:16px]\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;;;;AA6BA,MAAM,UAAUA,MAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,eACA,iBAEF,QACG;CACH,MAAM,iBAAiBA,MAAM,OAC3B,IACF;CAEA,MAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,0FACA,SACF;YAPF;GASE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,CAAA;GACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"stepper.cjs","names":["React","ChevronLeft","ChevronRight"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface StepperProps {\n  value: number\n  onValueChange: (value: number) => void\n  /**\n   * Fires once after the user stops interacting (default: 400ms after the last\n   * click). Use this for side effects like persisting the value, so rapid\n   * clicks don't fan out into a request per click.\n   */\n  onValueCommit?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  formatValue?: (value: number) => string\n  disabled?: boolean\n  className?: string\n  /** Delay (ms) after the last click before `onValueCommit` fires. */\n  commitDelayMs?: number\n  /** Accessible label, e.g. \"Sunshare percentage\". */\n  'aria-label'?: string\n  /** Accessible label for the decrement button. */\n  decreaseLabel: string\n  /** Accessible label for the increment button. */\n  increaseLabel: string\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      value,\n      onValueChange,\n      onValueCommit,\n      min = 0,\n      max = 100,\n      step = 1,\n      formatValue = (v) => String(v),\n      disabled,\n      className,\n      commitDelayMs = 400,\n      'aria-label': ariaLabel,\n      decreaseLabel,\n      increaseLabel,\n    },\n    ref,\n  ) => {\n    const commitTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(\n      null,\n    )\n\n    React.useEffect(\n      () => () => {\n        if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      },\n      [],\n    )\n\n    const scheduleCommit = (next: number) => {\n      if (!onValueCommit) return\n      if (commitTimerRef.current) clearTimeout(commitTimerRef.current)\n      commitTimerRef.current = setTimeout(() => {\n        commitTimerRef.current = null\n        onValueCommit(next)\n      }, commitDelayMs)\n    }\n\n    const decrement = () => {\n      const next = Math.max(min, value - step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n    const increment = () => {\n      const next = Math.min(max, value + step)\n      if (next !== value) {\n        onValueChange(next)\n        scheduleCommit(next)\n      }\n    }\n\n    const atMin = value <= min\n    const atMax = value >= max\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\n          'inline-flex h-12 w-full items-center justify-between rounded-md bg-base-gray-soft px-2',\n          className,\n        )}\n      >\n        <button\n          type=\"button\"\n          aria-label={decreaseLabel}\n          onClick={decrement}\n          disabled={disabled || atMin}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronLeft className=\"[--spark-icon-size:16px]\" />\n        </button>\n        <span\n          className=\"text-base font-semibold text-gray tabular-nums select-none\"\n          aria-live=\"polite\"\n        >\n          {formatValue(value)}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={increaseLabel}\n          onClick={increment}\n          disabled={disabled || atMax}\n          className=\"touch-target inline-flex size-8 items-center justify-center rounded-sm text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none\"\n        >\n          <ChevronRight className=\"[--spark-icon-size:16px]\" />\n        </button>\n      </div>\n    )\n  },\n)\n\nStepper.displayName = 'Stepper'\n\nexport { Stepper }\nexport type { StepperProps }\n"],"mappings":";;;;;;;;;AA6BA,MAAM,UAAUA,MAAM,YAElB,EACE,OACA,eACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,eAAe,MAAM,OAAO,CAAC,GAC7B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,eACA,iBAEF,QACG;CACH,MAAM,iBAAiBA,MAAM,OAC3B,IACF;CAEA,MAAM,sBACQ;EACV,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;CACjE,GACA,CAAC,CACH;CAEA,MAAM,kBAAkB,SAAiB;EACvC,IAAI,CAAC,eAAe;EACpB,IAAI,eAAe,SAAS,aAAa,eAAe,OAAO;EAC/D,eAAe,UAAU,iBAAiB;GACxC,eAAe,UAAU;GACzB,cAAc,IAAI;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CACA,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,IAAI;EACvC,IAAI,SAAS,OAAO;GAClB,cAAc,IAAI;GAClB,eAAe,IAAI;EACrB;CACF;CAEA,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,GAAA,IACE,0FACA,SACF;YAPF;GASE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,EAAa,WAAU,2BAA4B,CAAA;GAC7C,CAAA;GACR,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,KAAK;GACd,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,cAAD,EAAc,WAAU,2BAA4B,CAAA;GAC9C,CAAA;EACL;;AAET,CACF;AAEA,QAAQ,cAAc"}

package/dist/components/stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
 const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel, increaseLabel }, ref) => {

package/dist/components/switch.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_lib_accent_colors = require("../lib/accent-colors.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_switch = require("@base-ui/react/switch");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/switch.tsx
 function Switch({ className, styleVariant, color, size: _size, variant: _variant, render, nativeButton, ...props }) {
 	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
@@ -14,11 +14,11 @@ function Switch({ className, styleVariant, color, size: _size, variant: _variant
 		"data-accent-color": dataAccentColor,
 		nativeButton: nativeButton ?? render === void 0,
 		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
-		className: (0, cnfast.cn)("peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-(--spark-rounded-xl)", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
+		className: (0, cn.cn)("peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]", "before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']", "rounded-(--spark-rounded-xl)", "shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:pointer-events-none data-disabled:opacity-50", "data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]", "data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_switch.Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: (0, cnfast.cn)("pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform", "rounded-(--spark-rounded-lg)", "data-checked:translate-x-4 data-unchecked:translate-x-0")
+			className: (0, cn.cn)("pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform", "rounded-(--spark-rounded-lg)", "data-checked:translate-x-4 data-unchecked:translate-x-0")
 		})
 	});
 }

package/dist/components/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  render,\n  nativeButton,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        'peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,OAAA,IACE,kLAGA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IACE,wHACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}
+{"version":3,"file":"switch.cjs","names":["accentByColor","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkSwitchColor = 'accent' | 'neutral' | 'danger'\n\ntype SwitchProps = SwitchPrimitive.Root.Props & {\n  styleVariant?: SparkStyle\n  color?: SparkSwitchColor\n  /**\n   * @deprecated The switch now renders a single size. Accepted for back-compat\n   * but ignored.\n   */\n  size?: 'sm' | 'base' | 'lg'\n  /**\n   * @deprecated Use `color=\"danger\"` for a destructive/error switch. Accepted\n   * for back-compat but ignored.\n   */\n  variant?: 'primary' | 'destructive'\n}\n\nfunction Switch({\n  className,\n  styleVariant,\n  color,\n  size: _size,\n  variant: _variant,\n  render,\n  nativeButton,\n  ...props\n}: SwitchProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      // a native button owns the caller's `id`; on Base UI's default <span> the\n      // `id` lands on the hidden input and the control gets a generated one\n      nativeButton={nativeButton ?? render === undefined}\n      render={render ?? <button />}\n      className={cn(\n        'peer touch-target relative my-2 inline-flex h-6 w-10 shrink-0 cursor-pointer items-center p-[2px] transition-colors any-pointer-coarse:my-[calc((2.75rem-var(--spacing)*6)/2)]',\n        // both overlays are reserved as layout, so neither can bleed into a scroller;\n        // the coarse margin tracks --spacing so the 44px reserve holds at any [data-scaling]\n        \"before:absolute before:inset-x-0 before:top-1/2 before:h-10 before:-translate-y-1/2 before:content-['']\",\n        'rounded-(--spark-rounded-xl)',\n        'shadow-[0_1px_2px_0_rgb(0_0_0/0.05),inset_0_0_0_1px_var(--spark-switch-ring,transparent)]',\n        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-unchecked:bg-gray-a5 data-unchecked:[--spark-switch-ring:var(--spark-switch-idle-border,transparent)]',\n        'data-checked:bg-(--spark-switch-track,var(--spark-9)) data-checked:[--spark-switch-ring:var(--spark-style-border,transparent)]',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block size-5 bg-(--spark-switch-thumb,var(--spark-on-solid,#fff)) shadow-xs transition-transform',\n          'rounded-(--spark-rounded-lg)',\n          'data-checked:translate-x-4 data-unchecked:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":";;;;;;;AAsBA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,OACN,SAAS,UACT,QACA,cACA,GAAG,SACW;CAEd,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQA,0BAAAA,cAAc,SAAS,KAAA;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,cAAY;EACZ,qBAAmB;EAGnB,cAAc,gBAAgB,WAAW,KAAA;EACzC,QAAQ,UAAU,iBAAA,GAAA,kBAAA,KAAC,UAAD,CAAS,CAAA;EAC3B,YAAA,GAAA,GAAA,IACE,kLAGA,2GACA,gCACA,6FACA,iFACA,8DACA,8GACA,kIACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;GACE,aAAU;GACV,YAAA,GAAA,GAAA,IACE,wHACA,gCACA,yDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}

package/dist/components/switch.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.tsx

package/dist/components/table.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_skeleton = require("./skeleton.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let cnfast = require("cnfast");
+let cn = require("cn");
 //#region src/components/table.tsx
 const TableContext = react.createContext({
 	sort: null,
@@ -41,11 +41,11 @@ function Table({ children, className, containerProps, onSortChange, sort = null,
 		"data-slot": "table-container",
 		role: scrollRegion ? "region" : void 0,
 		tabIndex: scrollRegion ? 0 : void 0,
-		className: (0, cnfast.cn)("relative w-full overflow-x-auto", scrollRegion && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", containerClassName),
+		className: (0, cn.cn)("relative w-full overflow-x-auto", scrollRegion && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", containerClassName),
 		...container,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
 			"data-slot": "table",
-			className: (0, cnfast.cn)("w-full border-separate border-spacing-0 text-sm text-gray-12", className),
+			className: (0, cn.cn)("w-full border-separate border-spacing-0 text-sm text-gray-12", className),
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContext.Provider, {
 				value: context,
@@ -86,7 +86,7 @@ function TableRow({ className, onClick, onKeyDown, selected, skeleton, ...props
 			tabIndex: interactive ? 0 : void 0,
 			onClick: interactive ? onClick : void 0,
 			onKeyDown: handleKeyDown,
-			className: (0, cnfast.cn)("[&:last-child>td]:border-b-0", selected && !skeleton && "bg-spark-a3", interactive && [
+			className: (0, cn.cn)("[&:last-child>td]:border-b-0", selected && !skeleton && "bg-spark-a3", interactive && [
 				"cursor-pointer transition-colors duration-150 touch-target-table-row motion-reduce:transition-none",
 				"hover:bg-spark-a3 focus-visible:bg-spark-a3",
 				"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus"
@@ -102,14 +102,14 @@ function TableHead({ align = "start", children, className, sortKey, ...props })
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 		"data-slot": "table-head",
 		"aria-sort": sortKey == null ? void 0 : direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
-		className: (0, cnfast.cn)("border-b border-gray-a6 px-3 text-left align-middle text-xs font-medium text-gray-11", rowHeight, align === "end" && "text-right", stickyHeader && "sticky top-0 z-10 bg-gray-2", className),
+		className: (0, cn.cn)("border-b border-gray-a6 px-3 text-left align-middle text-xs font-medium text-gray-11", rowHeight, align === "end" && "text-right", stickyHeader && "sticky top-0 z-10 bg-gray-2", className),
 		...props,
 		children: sortKey == null ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			"data-slot": "table-head-sort",
 			onClick: () => onSortChange?.(nextSort(sort, sortKey)),
-			className: (0, cnfast.cn)("touch-target -mx-1 inline-flex min-h-[1.5rem] cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 text-left transition-colors [--spark-icon-size:1rem] hover:text-gray-12 motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", align === "end" && "flex-row-reverse"),
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Indicator, { className: (0, cnfast.cn)(!direction && "text-gray-a9") })]
+			className: (0, cn.cn)("touch-target -mx-1 inline-flex min-h-[1.5rem] cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 text-left transition-colors [--spark-icon-size:1rem] hover:text-gray-12 motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", align === "end" && "flex-row-reverse"),
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Indicator, { className: (0, cn.cn)(!direction && "text-gray-a9") })]
 		})
 	});
 }
@@ -117,7 +117,7 @@ function TableCell({ align = "start", children, className, ...props }) {
 	const { skeleton } = react.useContext(TableRowContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
 		"data-slot": "table-cell",
-		className: (0, cnfast.cn)("border-b border-gray-a6 px-3 align-middle", rowHeight, align === "end" && "text-right tabular-nums", className),
+		className: (0, cn.cn)("border-b border-gray-a6 px-3 align-middle", rowHeight, align === "end" && "text-right tabular-nums", className),
 		...props,
 		children: skeleton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-4 w-2/3" }) : children
 	});

package/dist/components/table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.cjs","names":["React","SwapVert","ArrowUpward","ArrowDownward","Skeleton"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward, SwapVert } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype SortDirection = 'asc' | 'desc'\n\ninterface TableSort {\n  key: string\n  direction: SortDirection\n}\n\ninterface TableContextValue {\n  sort: TableSort | null\n  onSortChange?: (sort: TableSort | null) => void\n  stickyHeader: boolean\n}\n\nconst TableContext = React.createContext<TableContextValue>({\n  sort: null,\n  stickyHeader: false,\n})\n\nconst TableRowContext = React.createContext<{ skeleton: boolean }>({\n  skeleton: false,\n})\n\n// Reads --spark-layout-gap like the collection primitives, so a nested <Theme spacing>\n// re-resolves it against the nearest <Theme> scope (an [[data-spacing=…]_&] variant would\n// match any ancestor, not the nearest). height, not min-height, which is inert on table boxes.\nconst rowHeight = 'h-[calc(var(--spark-layout-gap)*10)]'\n\n// A column the table isn't sorted by starts at asc; the sorted one steps asc → desc → off.\nfunction nextSort(current: TableSort | null, key: string): TableSort | null {\n  if (current?.key !== key) return { key, direction: 'asc' }\n  if (current.direction === 'asc') return { key, direction: 'desc' }\n  return null\n}\n\ninterface TableProps extends React.ComponentProps<'table'> {\n  stickyHeader?: boolean\n  /** Controlled only — the table never reorders rows; sort app-side and pass the result back. */\n  sort?: TableSort | null\n  onSortChange?: (sort: TableSort | null) => void\n  /** Spread onto the scroll wrapper; an `aria-label` here also makes it a focusable region. */\n  containerProps?: React.ComponentProps<'div'>\n}\n\nfunction Table({\n  children,\n  className,\n  containerProps,\n  onSortChange,\n  sort = null,\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const { className: containerClassName, ...container } = containerProps ?? {}\n  // A scrolling box only reaches the keyboard once it is focusable, and a focusable box\n  // has to say what it holds (WCAG 2.1.1 / 4.1.2) — so the label is what turns it on.\n  const scrollRegion = container['aria-label'] != null\n\n  const context = React.useMemo(\n    () => ({ sort, onSortChange, stickyHeader }),\n    [sort, onSortChange, stickyHeader],\n  )\n\n  return (\n    <div\n      data-slot=\"table-container\"\n      role={scrollRegion ? 'region' : undefined}\n      tabIndex={scrollRegion ? 0 : undefined}\n      className={cn(\n        'relative w-full overflow-x-auto',\n        // inset outline, not a ring: ring-offset paints outside the box and this box clips.\n        scrollRegion &&\n          'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n        containerClassName,\n      )}\n      {...container}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\n          // border-separate, not collapse: under collapse Chromium drops the border of a\n          // sticky <th>, so every rule lives on the cells instead.\n          'w-full border-separate border-spacing-0 text-sm text-gray-12',\n          className,\n        )}\n        {...props}\n      >\n        <TableContext.Provider value={context}>\n          {children}\n        </TableContext.Provider>\n      </table>\n    </div>\n  )\n}\n\nfunction TableHeader(props: React.ComponentProps<'thead'>) {\n  return <thead data-slot=\"table-header\" {...props} />\n}\n\nfunction TableBody(props: React.ComponentProps<'tbody'>) {\n  return <tbody data-slot=\"table-body\" {...props} />\n}\n\ninterface TableRowProps extends React.ComponentProps<'tr'> {\n  selected?: boolean\n  skeleton?: boolean\n}\n\nfunction TableRow({\n  className,\n  onClick,\n  onKeyDown,\n  selected,\n  skeleton,\n  ...props\n}: TableRowProps) {\n  // A skeleton row is a decorative placeholder: never focusable, never clickable, even if\n  // the caller passes a handler while the data loads (ListItem precedent).\n  const interactive = !skeleton && onClick != null\n\n  const rowContext = React.useMemo(\n    () => ({ skeleton: skeleton ?? false }),\n    [skeleton],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    onKeyDown?.(event)\n    // a key pressed inside a nested button, link or input belongs to that control\n    if (event.target !== event.currentTarget) return\n    if (!interactive || event.defaultPrevented) return\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    // Space would scroll the page.\n    if (event.key === ' ') event.preventDefault()\n    event.currentTarget.click()\n  }\n\n  return (\n    <TableRowContext.Provider value={rowContext}>\n      <tr\n        data-slot=\"table-row\"\n        data-selected={selected ? '' : undefined}\n        aria-hidden={skeleton ? true : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          '[&:last-child>td]:border-b-0',\n          selected && !skeleton && 'bg-spark-a3',\n          interactive && [\n            'cursor-pointer transition-colors duration-150 touch-target-table-row motion-reduce:transition-none',\n            'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n            // the inset recipe: a ring-offset would be clipped by the scroll container.\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n          ],\n          className,\n        )}\n        {...props}\n      />\n    </TableRowContext.Provider>\n  )\n}\n\n// `align` shadows the deprecated presentational HTML attribute of the same name, which\n// is why the native one is omitted rather than widened.\ninterface TableHeadProps extends Omit<React.ComponentProps<'th'>, 'align'> {\n  /** Pair with the matching `TableCell align` so the column lines up. */\n  align?: 'start' | 'end'\n  /** Presence turns the header into a sort button with an indicator and `aria-sort`. */\n  sortKey?: string\n}\n\nfunction TableHead({\n  align = 'start',\n  children,\n  className,\n  sortKey,\n  ...props\n}: TableHeadProps) {\n  const { onSortChange, sort, stickyHeader } = React.useContext(TableContext)\n  const active = sortKey != null && sort?.key === sortKey\n  const direction = active ? sort.direction : undefined\n  const Indicator = !direction\n    ? SwapVert\n    : direction === 'asc'\n      ? ArrowUpward\n      : ArrowDownward\n\n  return (\n    <th\n      data-slot=\"table-head\"\n      aria-sort={\n        sortKey == null\n          ? undefined\n          : direction === 'asc'\n            ? 'ascending'\n            : direction === 'desc'\n              ? 'descending'\n              : 'none'\n      }\n      className={cn(\n        'border-b border-gray-a6 px-3 text-left align-middle text-xs font-medium text-gray-11',\n        rowHeight,\n        align === 'end' && 'text-right',\n        // opaque fill, so rows scrolling under a sticky header stay hidden; override via\n        // className when the table sits on a non-default surface.\n        stickyHeader && 'sticky top-0 z-10 bg-gray-2',\n        className,\n      )}\n      {...props}\n    >\n      {sortKey == null ? (\n        children\n      ) : (\n        // min-h is a HARD 24px floor (WCAG 2.5.8): unlike h-*, it must not shrink\n        // with the scaling knob.\n        <button\n          type=\"button\"\n          data-slot=\"table-head-sort\"\n          onClick={() => onSortChange?.(nextSort(sort, sortKey))}\n          className={cn(\n            'touch-target -mx-1 inline-flex min-h-[1.5rem] cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 text-left transition-colors [--spark-icon-size:1rem] hover:text-gray-12 motion-reduce:transition-none',\n            // the inset recipe again: the first and the sticky header sit on the edge\n            // the scroll container clips.\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n            // indicator inboard, so the digits keep a clean alignment edge\n            align === 'end' && 'flex-row-reverse',\n          )}\n        >\n          {children}\n          <Indicator className={cn(!direction && 'text-gray-a9')} />\n        </button>\n      )}\n    </th>\n  )\n}\n\n// `align` shadows the deprecated presentational HTML attribute of the same name, which\n// is why the native one is omitted rather than widened.\ninterface TableCellProps extends Omit<React.ComponentProps<'td'>, 'align'> {\n  align?: 'start' | 'end'\n}\n\nfunction TableCell({\n  align = 'start',\n  children,\n  className,\n  ...props\n}: TableCellProps) {\n  const { skeleton } = React.useContext(TableRowContext)\n\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        'border-b border-gray-a6 px-3 align-middle',\n        rowHeight,\n        align === 'end' && 'text-right tabular-nums',\n        className,\n      )}\n      {...props}\n    >\n      {skeleton ? <Skeleton className=\"h-4 w-2/3\" /> : children}\n    </td>\n  )\n}\n\ninterface TableStatusProps extends React.ComponentProps<'tr'> {\n  colSpan: number\n}\n\nfunction TableStatus({\n  children,\n  className,\n  colSpan,\n  ...props\n}: TableStatusProps) {\n  return (\n    <tr data-slot=\"table-status\" className={className} {...props}>\n      <td\n        data-slot=\"table-status-cell\"\n        colSpan={colSpan}\n        // an element child (EmptyState, Callout) owns its own alignment and most of its\n        // vertical rhythm; the cell only keeps it off the header rule. Bare text takes both.\n        className=\"px-3 py-3 [&:not(:has(>*))]:py-6 [&:not(:has(>*))]:text-center\"\n      >\n        {children}\n      </td>\n    </tr>\n  )\n}\n\nexport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableStatus,\n}\nexport type {\n  SortDirection,\n  TableCellProps,\n  TableHeadProps,\n  TableProps,\n  TableRowProps,\n  TableSort,\n  TableStatusProps,\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,eAAeA,MAAM,cAAiC;CAC1D,MAAM;CACN,cAAc;AAChB,CAAC;AAED,MAAM,kBAAkBA,MAAM,cAAqC,EACjE,UAAU,MACZ,CAAC;AAKD,MAAM,YAAY;AAGlB,SAAS,SAAS,SAA2B,KAA+B;CAC1E,IAAI,SAAS,QAAQ,KAAK,OAAO;EAAE;EAAK,WAAW;CAAM;CACzD,IAAI,QAAQ,cAAc,OAAO,OAAO;EAAE;EAAK,WAAW;CAAO;CACjE,OAAO;AACT;AAWA,SAAS,MAAM,EACb,UACA,WACA,gBACA,cACA,OAAO,MACP,eAAe,OACf,GAAG,SACU;CACb,MAAM,EAAE,WAAW,oBAAoB,GAAG,cAAc,kBAAkB,CAAC;CAG3E,MAAM,eAAe,UAAU,iBAAiB;CAEhD,MAAM,UAAUA,MAAM,eACb;EAAE;EAAM;EAAc;CAAa,IAC1C;EAAC;EAAM;EAAc;CAAY,CACnC;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAM,eAAe,WAAW,KAAA;EAChC,UAAU,eAAe,IAAI,KAAA;EAC7B,YAAA,GAAA,OAAA,IACE,mCAEA,gBACE,8FACF,kBACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAGE,gEACA,SACF;GACA,GAAI;aAEJ,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAd;IAAuB,OAAO;IAC3B;GACoB,CAAA;EAClB,CAAA;CACJ,CAAA;AAET;AAEA,SAAS,YAAY,OAAsC;CACzD,OAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrD;AAEA,SAAS,UAAU,OAAsC;CACvD,OAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,aAAU;EAAa,GAAI;CAAQ,CAAA;AACnD;AAOA,SAAS,SAAS,EAChB,WACA,SACA,WACA,UACA,UACA,GAAG,SACa;CAGhB,MAAM,cAAc,CAAC,YAAY,WAAW;CAE5C,MAAM,aAAaA,MAAM,eAChB,EAAE,UAAU,YAAY,MAAM,IACrC,CAAC,QAAQ,CACX;CAEA,MAAM,iBAAiB,UAAoD;EACzE,YAAY,KAAK;EAEjB,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,CAAC,eAAe,MAAM,kBAAkB;EAC5C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAEhD,IAAI,MAAM,QAAQ,KAAK,MAAM,eAAe;EAC5C,MAAM,cAAc,MAAM;CAC5B;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAgB,UAAjB;EAA0B,OAAO;YAC/B,iBAAA,GAAA,kBAAA,KAAC,MAAD;GACE,aAAU;GACV,iBAAe,WAAW,KAAK,KAAA;GAC/B,eAAa,WAAW,OAAO,KAAA;GAC/B,UAAU,cAAc,IAAI,KAAA;GAC5B,SAAS,cAAc,UAAU,KAAA;GACjC,WAAW;GACX,YAAA,GAAA,OAAA,IACE,gCACA,YAAY,CAAC,YAAY,eACzB,eAAe;IACb;IACA;IAEA;GACF,GACA,SACF;GACA,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAWA,SAAS,UAAU,EACjB,QAAQ,SACR,UACA,WACA,SACA,GAAG,SACc;CACjB,MAAM,EAAE,cAAc,MAAM,iBAAiBA,MAAM,WAAW,YAAY;CAE1E,MAAM,YADS,WAAW,QAAQ,MAAM,QAAQ,UACrB,KAAK,YAAY,KAAA;CAC5C,MAAM,YAAY,CAAC,YACfC,oBAAAA,WACA,cAAc,QACZC,oBAAAA,cACAC,oBAAAA;CAEN,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,aACE,WAAW,OACP,KAAA,IACA,cAAc,QACZ,cACA,cAAc,SACZ,eACA;EAEV,YAAA,GAAA,OAAA,IACE,wFACA,WACA,UAAU,SAAS,cAGnB,gBAAgB,+BAChB,SACF;EACA,GAAI;YAEH,WAAW,OACV,WAIA,iBAAA,GAAA,kBAAA,MAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,eAAe,eAAe,SAAS,MAAM,OAAO,CAAC;GACrD,YAAA,GAAA,OAAA,IACE,gNAGA,8FAEA,UAAU,SAAS,kBACrB;aAXF,CAaG,UACD,iBAAA,GAAA,kBAAA,KAAC,WAAD,EAAW,YAAA,GAAA,OAAA,IAAc,CAAC,aAAa,cAAc,EAAI,CAAA,CACnD;;CAER,CAAA;AAER;AAQA,SAAS,UAAU,EACjB,QAAQ,SACR,UACA,WACA,GAAG,SACc;CACjB,MAAM,EAAE,aAAaH,MAAM,WAAW,eAAe;CAErD,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,6CACA,WACA,UAAU,SAAS,2BACnB,SACF;EACA,GAAI;YAEH,WAAW,iBAAA,GAAA,kBAAA,KAACI,4BAAAA,UAAD,EAAU,WAAU,YAAa,CAAA,IAAI;CAC/C,CAAA;AAER;AAMA,SAAS,YAAY,EACnB,UACA,WACA,SACA,GAAG,SACgB;CACnB,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAA0B;EAAW,GAAI;YACrD,iBAAA,GAAA,kBAAA,KAAC,MAAD;GACE,aAAU;GACD;GAGT,WAAU;GAET;EACC,CAAA;CACF,CAAA;AAER"}
+{"version":3,"file":"table.cjs","names":["React","SwapVert","ArrowUpward","ArrowDownward","Skeleton"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward, SwapVert } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype SortDirection = 'asc' | 'desc'\n\ninterface TableSort {\n  key: string\n  direction: SortDirection\n}\n\ninterface TableContextValue {\n  sort: TableSort | null\n  onSortChange?: (sort: TableSort | null) => void\n  stickyHeader: boolean\n}\n\nconst TableContext = React.createContext<TableContextValue>({\n  sort: null,\n  stickyHeader: false,\n})\n\nconst TableRowContext = React.createContext<{ skeleton: boolean }>({\n  skeleton: false,\n})\n\n// Reads --spark-layout-gap like the collection primitives, so a nested <Theme spacing>\n// re-resolves it against the nearest <Theme> scope (an [[data-spacing=…]_&] variant would\n// match any ancestor, not the nearest). height, not min-height, which is inert on table boxes.\nconst rowHeight = 'h-[calc(var(--spark-layout-gap)*10)]'\n\n// A column the table isn't sorted by starts at asc; the sorted one steps asc → desc → off.\nfunction nextSort(current: TableSort | null, key: string): TableSort | null {\n  if (current?.key !== key) return { key, direction: 'asc' }\n  if (current.direction === 'asc') return { key, direction: 'desc' }\n  return null\n}\n\ninterface TableProps extends React.ComponentProps<'table'> {\n  stickyHeader?: boolean\n  /** Controlled only — the table never reorders rows; sort app-side and pass the result back. */\n  sort?: TableSort | null\n  onSortChange?: (sort: TableSort | null) => void\n  /** Spread onto the scroll wrapper; an `aria-label` here also makes it a focusable region. */\n  containerProps?: React.ComponentProps<'div'>\n}\n\nfunction Table({\n  children,\n  className,\n  containerProps,\n  onSortChange,\n  sort = null,\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const { className: containerClassName, ...container } = containerProps ?? {}\n  // A scrolling box only reaches the keyboard once it is focusable, and a focusable box\n  // has to say what it holds (WCAG 2.1.1 / 4.1.2) — so the label is what turns it on.\n  const scrollRegion = container['aria-label'] != null\n\n  const context = React.useMemo(\n    () => ({ sort, onSortChange, stickyHeader }),\n    [sort, onSortChange, stickyHeader],\n  )\n\n  return (\n    <div\n      data-slot=\"table-container\"\n      role={scrollRegion ? 'region' : undefined}\n      tabIndex={scrollRegion ? 0 : undefined}\n      className={cn(\n        'relative w-full overflow-x-auto',\n        // inset outline, not a ring: ring-offset paints outside the box and this box clips.\n        scrollRegion &&\n          'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n        containerClassName,\n      )}\n      {...container}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\n          // border-separate, not collapse: under collapse Chromium drops the border of a\n          // sticky <th>, so every rule lives on the cells instead.\n          'w-full border-separate border-spacing-0 text-sm text-gray-12',\n          className,\n        )}\n        {...props}\n      >\n        <TableContext.Provider value={context}>\n          {children}\n        </TableContext.Provider>\n      </table>\n    </div>\n  )\n}\n\nfunction TableHeader(props: React.ComponentProps<'thead'>) {\n  return <thead data-slot=\"table-header\" {...props} />\n}\n\nfunction TableBody(props: React.ComponentProps<'tbody'>) {\n  return <tbody data-slot=\"table-body\" {...props} />\n}\n\ninterface TableRowProps extends React.ComponentProps<'tr'> {\n  selected?: boolean\n  skeleton?: boolean\n}\n\nfunction TableRow({\n  className,\n  onClick,\n  onKeyDown,\n  selected,\n  skeleton,\n  ...props\n}: TableRowProps) {\n  // A skeleton row is a decorative placeholder: never focusable, never clickable, even if\n  // the caller passes a handler while the data loads (ListItem precedent).\n  const interactive = !skeleton && onClick != null\n\n  const rowContext = React.useMemo(\n    () => ({ skeleton: skeleton ?? false }),\n    [skeleton],\n  )\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    onKeyDown?.(event)\n    // a key pressed inside a nested button, link or input belongs to that control\n    if (event.target !== event.currentTarget) return\n    if (!interactive || event.defaultPrevented) return\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    // Space would scroll the page.\n    if (event.key === ' ') event.preventDefault()\n    event.currentTarget.click()\n  }\n\n  return (\n    <TableRowContext.Provider value={rowContext}>\n      <tr\n        data-slot=\"table-row\"\n        data-selected={selected ? '' : undefined}\n        aria-hidden={skeleton ? true : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={interactive ? onClick : undefined}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          '[&:last-child>td]:border-b-0',\n          selected && !skeleton && 'bg-spark-a3',\n          interactive && [\n            'cursor-pointer transition-colors duration-150 touch-target-table-row motion-reduce:transition-none',\n            'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n            // the inset recipe: a ring-offset would be clipped by the scroll container.\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n          ],\n          className,\n        )}\n        {...props}\n      />\n    </TableRowContext.Provider>\n  )\n}\n\n// `align` shadows the deprecated presentational HTML attribute of the same name, which\n// is why the native one is omitted rather than widened.\ninterface TableHeadProps extends Omit<React.ComponentProps<'th'>, 'align'> {\n  /** Pair with the matching `TableCell align` so the column lines up. */\n  align?: 'start' | 'end'\n  /** Presence turns the header into a sort button with an indicator and `aria-sort`. */\n  sortKey?: string\n}\n\nfunction TableHead({\n  align = 'start',\n  children,\n  className,\n  sortKey,\n  ...props\n}: TableHeadProps) {\n  const { onSortChange, sort, stickyHeader } = React.useContext(TableContext)\n  const active = sortKey != null && sort?.key === sortKey\n  const direction = active ? sort.direction : undefined\n  const Indicator = !direction\n    ? SwapVert\n    : direction === 'asc'\n      ? ArrowUpward\n      : ArrowDownward\n\n  return (\n    <th\n      data-slot=\"table-head\"\n      aria-sort={\n        sortKey == null\n          ? undefined\n          : direction === 'asc'\n            ? 'ascending'\n            : direction === 'desc'\n              ? 'descending'\n              : 'none'\n      }\n      className={cn(\n        'border-b border-gray-a6 px-3 text-left align-middle text-xs font-medium text-gray-11',\n        rowHeight,\n        align === 'end' && 'text-right',\n        // opaque fill, so rows scrolling under a sticky header stay hidden; override via\n        // className when the table sits on a non-default surface.\n        stickyHeader && 'sticky top-0 z-10 bg-gray-2',\n        className,\n      )}\n      {...props}\n    >\n      {sortKey == null ? (\n        children\n      ) : (\n        // min-h is a HARD 24px floor (WCAG 2.5.8): unlike h-*, it must not shrink\n        // with the scaling knob.\n        <button\n          type=\"button\"\n          data-slot=\"table-head-sort\"\n          onClick={() => onSortChange?.(nextSort(sort, sortKey))}\n          className={cn(\n            'touch-target -mx-1 inline-flex min-h-[1.5rem] cursor-pointer items-center gap-1 rounded-sm px-1 py-0.5 text-left transition-colors [--spark-icon-size:1rem] hover:text-gray-12 motion-reduce:transition-none',\n            // the inset recipe again: the first and the sticky header sit on the edge\n            // the scroll container clips.\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n            // indicator inboard, so the digits keep a clean alignment edge\n            align === 'end' && 'flex-row-reverse',\n          )}\n        >\n          {children}\n          <Indicator className={cn(!direction && 'text-gray-a9')} />\n        </button>\n      )}\n    </th>\n  )\n}\n\n// `align` shadows the deprecated presentational HTML attribute of the same name, which\n// is why the native one is omitted rather than widened.\ninterface TableCellProps extends Omit<React.ComponentProps<'td'>, 'align'> {\n  align?: 'start' | 'end'\n}\n\nfunction TableCell({\n  align = 'start',\n  children,\n  className,\n  ...props\n}: TableCellProps) {\n  const { skeleton } = React.useContext(TableRowContext)\n\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        'border-b border-gray-a6 px-3 align-middle',\n        rowHeight,\n        align === 'end' && 'text-right tabular-nums',\n        className,\n      )}\n      {...props}\n    >\n      {skeleton ? <Skeleton className=\"h-4 w-2/3\" /> : children}\n    </td>\n  )\n}\n\ninterface TableStatusProps extends React.ComponentProps<'tr'> {\n  colSpan: number\n}\n\nfunction TableStatus({\n  children,\n  className,\n  colSpan,\n  ...props\n}: TableStatusProps) {\n  return (\n    <tr data-slot=\"table-status\" className={className} {...props}>\n      <td\n        data-slot=\"table-status-cell\"\n        colSpan={colSpan}\n        // an element child (EmptyState, Callout) owns its own alignment and most of its\n        // vertical rhythm; the cell only keeps it off the header rule. Bare text takes both.\n        className=\"px-3 py-3 [&:not(:has(>*))]:py-6 [&:not(:has(>*))]:text-center\"\n      >\n        {children}\n      </td>\n    </tr>\n  )\n}\n\nexport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableStatus,\n}\nexport type {\n  SortDirection,\n  TableCellProps,\n  TableHeadProps,\n  TableProps,\n  TableRowProps,\n  TableSort,\n  TableStatusProps,\n}\n"],"mappings":"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"}

package/dist/components/table.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Skeleton } from "./skeleton.js";
-import { ArrowDownward, ArrowUpward, SwapVert } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ArrowDownward, ArrowUpward, SwapVert } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table.tsx
 const TableContext = React$1.createContext({