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

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"}

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

@@ -0,0 +1,36 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/stat-card.d.ts
+declare const StatCardContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardContent: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValueContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardSecondaryValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardIcon: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StatCardContainer, StatCardContent, StatCardIcon, StatCardLabel, StatCardSecondaryValue, StatCardValue, StatCardValueContainer };
+//# sourceMappingURL=stat-card.d.cts.map

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

@@ -0,0 +1,36 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/stat-card.d.ts
+declare const StatCardContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardContent: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValueContainer: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardSecondaryValue: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
+declare const StatCardIcon: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StatCardContainer, StatCardContent, StatCardIcon, StatCardLabel, StatCardSecondaryValue, StatCardValue, StatCardValueContainer };
+//# sourceMappingURL=stat-card.d.ts.map

package/dist/components/stat-card.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stat-card.tsx
+const StatCardContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-col gap-3 p-4 text-left", className),
+		...rest
+	});
+};
+const StatCardLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-xs font-medium text-gray-light", className),
+		...rest
+	});
+};
+const StatCardContent = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-end justify-between gap-px", className),
+		...rest
+	});
+};
+const StatCardValueContainer = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-0.5", className),
+		...rest
+	});
+};
+const StatCardValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-lg font-bold text-gray tabular-nums", className),
+		...rest
+	});
+};
+const StatCardSecondaryValue = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-xs text-gray-light", className),
+		...rest
+	});
+};
+const StatCardIcon = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(`flex size-10 shrink-0 items-center justify-center rounded-xl`, className),
+		...rest
+	});
+};
+//#endregion
+export { StatCardContainer, StatCardContent, StatCardIcon, StatCardLabel, StatCardSecondaryValue, StatCardValue, StatCardValueContainer };
+
+//# sourceMappingURL=stat-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.js","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,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EACpE,GAAI;EACJ,CAAA;;AAIN,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;AACjC,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC8B;AACjC,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAG7E,MAAM,iBAAiB,EACrB,WACA,GAAG,WAC+B;AAClC,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EACpE,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,EAC9B,WACA,GAAG,WAC+B;AAClC,QAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,2BAA2B,UAAU;EAAE,GAAI;EAAQ,CAAA;;AAGhF,MAAM,gBAAgB,EAAE,WAAW,GAAG,WAAwC;AAC5E,QACE,oBAAC,OAAD;EACE,WAAW,GACT,gEACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/components/stepper.cjs

@@ -0,0 +1,79 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#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 = "Decrease", increaseLabel = "Increase" }, ref) => {
+	const commitTimerRef = react.useRef(null);
+	react.useEffect(() => () => {
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+	}, []);
+	const scheduleCommit = (next) => {
+		if (!onValueCommit) return;
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+		commitTimerRef.current = setTimeout(() => {
+			commitTimerRef.current = null;
+			onValueCommit(next);
+		}, commitDelayMs);
+	};
+	const decrement = () => {
+		const next = Math.max(min, value - step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const increment = () => {
+		const next = Math.min(max, value + step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const atMin = value <= min;
+	const atMax = value >= max;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		role: "group",
+		"aria-label": ariaLabel,
+		className: (0, cnfast.cn)("inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": decreaseLabel,
+				onClick: decrement,
+				disabled: disabled || atMin,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_left"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-base font-semibold text-gray tabular-nums select-none",
+				"aria-live": "polite",
+				children: formatValue(value)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": increaseLabel,
+				onClick: increment,
+				disabled: disabled || atMax,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_right"
+				})
+			})
+		]
+	});
+});
+Stepper.displayName = "Stepper";
+//#endregion
+exports.Stepper = Stepper;
+
+//# sourceMappingURL=stepper.cjs.map

package/dist/components/stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/stepper.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\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. Defaults to `\"Decrease\"`. */\n  decreaseLabel?: string\n  /** Accessible label for the increment button. Defaults to `\"Increase\"`. */\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 = 'Decrease',\n      increaseLabel = 'Increase',\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-xl 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=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_left\" />\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=\"inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent\"\n        >\n          <MaterialSymbol className=\"text-[16px]\" name=\"chevron_right\" />\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,EAAE,EAC9B,UACA,WACA,gBAAgB,KAChB,cAAc,WACd,gBAAgB,YAChB,gBAAgB,cAElB,QACG;CACH,MAAM,iBAAiBA,MAAM,OAC3B,KACD;AAED,OAAM,sBACQ;AACV,MAAI,eAAe,QAAS,cAAa,eAAe,QAAQ;IAElE,EAAE,CACH;CAED,MAAM,kBAAkB,SAAiB;AACvC,MAAI,CAAC,cAAe;AACpB,MAAI,eAAe,QAAS,cAAa,eAAe,QAAQ;AAChE,iBAAe,UAAU,iBAAiB;AACxC,kBAAe,UAAU;AACzB,iBAAc,KAAK;KAClB,cAAc;;CAGnB,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK;AACxC,MAAI,SAAS,OAAO;AAClB,iBAAc,KAAK;AACnB,kBAAe,KAAK;;;CAGxB,MAAM,kBAAkB;EACtB,MAAM,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK;AACxC,MAAI,SAAS,OAAO;AAClB,iBAAc,KAAK;AACnB,kBAAe,KAAK;;;CAIxB,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;AAEvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IACE,0FACA,UACD;YAPH;GASE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;KAAiB,CAAA;IACvD,CAAA;GACT,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,aAAU;cAET,YAAY,MAAM;IACd,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,UAAU,YAAY;IACtB,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;KAAgB,WAAU;KAAc,MAAK;KAAkB,CAAA;IACxD,CAAA;GACL;;EAGX;AAED,QAAQ,cAAc"}

package/dist/components/stepper.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/stepper.d.ts
+interface StepperProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  /**
+   * Fires once after the user stops interacting (default: 400ms after the last
+   * click). Use this for side effects like persisting the value, so rapid
+   * clicks don't fan out into a request per click.
+   */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  className?: string;
+  /** Delay (ms) after the last click before `onValueCommit` fires. */
+  commitDelayMs?: number;
+  /** Accessible label, e.g. "Sunshare percentage". */
+  'aria-label'?: string;
+  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
+  decreaseLabel?: string;
+  /** Accessible label for the increment button. Defaults to `"Increase"`. */
+  increaseLabel?: string;
+}
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Stepper, type StepperProps };
+//# sourceMappingURL=stepper.d.cts.map

package/dist/components/stepper.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/stepper.d.ts
+interface StepperProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  /**
+   * Fires once after the user stops interacting (default: 400ms after the last
+   * click). Use this for side effects like persisting the value, so rapid
+   * clicks don't fan out into a request per click.
+   */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  className?: string;
+  /** Delay (ms) after the last click before `onValueCommit` fires. */
+  commitDelayMs?: number;
+  /** Accessible label, e.g. "Sunshare percentage". */
+  'aria-label'?: string;
+  /** Accessible label for the decrement button. Defaults to `"Decrease"`. */
+  decreaseLabel?: string;
+  /** Accessible label for the increment button. Defaults to `"Increase"`. */
+  increaseLabel?: string;
+}
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Stepper, type StepperProps };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import * as React$1 from "react";
+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 = "Decrease", increaseLabel = "Increase" }, ref) => {
+	const commitTimerRef = React$1.useRef(null);
+	React$1.useEffect(() => () => {
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+	}, []);
+	const scheduleCommit = (next) => {
+		if (!onValueCommit) return;
+		if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+		commitTimerRef.current = setTimeout(() => {
+			commitTimerRef.current = null;
+			onValueCommit(next);
+		}, commitDelayMs);
+	};
+	const decrement = () => {
+		const next = Math.max(min, value - step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const increment = () => {
+		const next = Math.min(max, value + step);
+		if (next !== value) {
+			onValueChange(next);
+			scheduleCommit(next);
+		}
+	};
+	const atMin = value <= min;
+	const atMax = value >= max;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("inline-flex h-12 w-full items-center justify-between rounded-xl bg-base-gray-soft px-2", className),
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": decreaseLabel,
+				onClick: decrement,
+				disabled: disabled || atMin,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ jsx(MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_left"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base font-semibold text-gray tabular-nums select-none",
+				"aria-live": "polite",
+				children: formatValue(value)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": increaseLabel,
+				onClick: increment,
+				disabled: disabled || atMax,
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				children: /* @__PURE__ */ jsx(MaterialSymbol, {
+					className: "text-[16px]",
+					name: "chevron_right"
+				})
+			})
+		]
+	});
+});
+Stepper.displayName = "Stepper";
+//#endregion
+export { Stepper };
+
+//# sourceMappingURL=stepper.js.map