@epilot/spark-ui 0.10.0

package/dist/components/smart-toggle-button.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/smart-toggle-button.tsx
+function SmartToggleButton({ active, disabled, onClick }) {
+	const handleClick = (event) => {
+		event.stopPropagation();
+		onClick();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-pressed": active,
+		className: cn("inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed", active ? "bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80" : "border-gray text-gray-light border hover:bg-base-gray-soft"),
+		disabled,
+		onClick: handleClick,
+		type: "button",
+		children: [/* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "block text-[16px]! leading-none",
+			name: "auto_awesome"
+		}), "Smart"]
+	});
+}
+//#endregion
+export { SmartToggleButton };
+
+//# sourceMappingURL=smart-toggle-button.js.map

package/dist/components/smart-toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-toggle-button.js","names":[],"sources":["../../src/components/smart-toggle-button.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ninterface SmartToggleButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n}\n\nexport function SmartToggleButton({\n  active,\n  disabled,\n  onClick,\n}: SmartToggleButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const base =\n    'inline-flex min-w-9 cursor-pointer items-center gap-1.5 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] px-3 text-sm font-medium transition-colors max-sm:h-10 md:h-9 focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60 disabled:cursor-not-allowed'\n  const tone = active\n    ? 'bg-base-accent-soft text-accent border border-transparent hover:bg-base-accent-soft/80'\n    : 'border-gray text-gray-light border hover:bg-base-gray-soft'\n\n  return (\n    <button\n      aria-pressed={active}\n      className={cn(base, tone)}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"auto_awesome\"\n      />\n      Smart\n    </button>\n  )\n}\n"],"mappings":";;;;;AAUA,SAAgB,kBAAkB,EAChC,QACA,UACA,WACyB;CACzB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAQA,OACE,qBAAC,UAAD;EACE,gBAAc;EACd,WAAW,GAAG,qTAPL,SACT,2FACA,4DAKwB;EACd;EACV,SAAS;EACT,MAAK;YALP,CAOE,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA,GAAC,OAEI;;AAEZ"}

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

@@ -0,0 +1,109 @@
+"use client";
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_line_chart = require("./line-chart.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#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 `${require_utils_format.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 = (0, react.useRef)(null);
+	const [width, setWidth] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setWidth(entry.contentRect.width);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const hasWeather = weather != null && weather.length > 0;
+	const margin = {
+		...BASE_MARGIN,
+		top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top
+	};
+	const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime;
+	const topContent = hasWeather ? weather.map((point, i) => ({
+		key: `weather-${point.date.valueOf()}-${i}`,
+		date: point.date,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+			name: point.icon,
+			className: "text-(length:--spark-icon-size,18px)! text-gray-light"
+		})
+	})) : void 0;
+	const referenceLines = [sunrise && {
+		key: "sunrise",
+		date: sunrise,
+		label: formatMarker(sunrise)
+	}, sunset && {
+		key: "sunset",
+		date: sunset,
+		label: formatMarker(sunset)
+	}].filter((x) => Boolean(x));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		className: (0, cnfast.cn)("w-full", className),
+		children: width > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_line_chart.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
+exports.SolarForecastChart = SolarForecastChart;
+exports.default = SolarForecastChart;
+
+//# sourceMappingURL=solar-forecast-chart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"solar-forecast-chart.cjs","names":["oneDecimalFormat","MaterialSymbol","LineChart"],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 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: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** 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        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          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":";;;;;;;;;;;;;AAcA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;AAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;CACjD,OAAO,GAAGA,qBAAAA,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,gBAAA,GAAA,MAAA,QAAsC,IAAI;CAChD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,CAAC;CAEpC,CAAA,GAAA,MAAA,iBAAgB;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,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,QAAQ,EAAE,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;EACX,CAAA;CAEL,EAAE,IACF,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,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,KAAK;EAAc,YAAA,GAAA,OAAA,IAAc,UAAU,SAAS;YACtD,QAAQ,KACP,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,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/solar-forecast-chart.d.cts

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

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

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

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

@@ -0,0 +1,104 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import "../utils/chars.js";
+import { oneDecimalFormat } from "../utils/format.js";
+import { LineChart } from "./line-chart.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/solar-forecast-chart.tsx
+const DEFAULT_HEIGHT = 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) => ({
+		key: `weather-${point.date.valueOf()}-${i}`,
+		date: point.date,
+		content: /* @__PURE__ */ jsx(MaterialSymbol, {
+			name: point.icon,
+			className: "text-(length:--spark-icon-size,18px)! text-gray-light"
+		})
+	})) : void 0;
+	const referenceLines = [sunrise && {
+		key: "sunrise",
+		date: sunrise,
+		label: formatMarker(sunrise)
+	}, sunset && {
+		key: "sunset",
+		date: sunset,
+		label: formatMarker(sunset)
+	}].filter((x) => Boolean(x));
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("w-full", className),
+		children: width > 0 && /* @__PURE__ */ jsx(LineChart, {
+			width,
+			height,
+			margin,
+			curve,
+			series: [{
+				id: "produced",
+				data: produced,
+				label: producedLabel
+			}, {
+				id: "forecast",
+				data: forecast,
+				label: forecastLabel,
+				dashed: true
+			}],
+			showGrid: true,
+			xTickCount: 6,
+			yTickCount: 4,
+			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 JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 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: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** 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        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          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":";;;;;;;;;AAcA,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,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,QAAQ,EAAE,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,oBAAC,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;EACX,CAAA;CAEL,EAAE,IACF,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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.cjs","names":["PointerSensor","TouchSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","restrictToVerticalAxis","restrictToParentElement","SortableContext","verticalListSortingStrategy","CSS"],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["import {\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport {\n  restrictToParentElement,\n  restrictToVerticalAxis,\n} from '@dnd-kit/modifiers'\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport type { ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SortableHookResult = ReturnType<typeof useSortable>\n\n/**\n * Props to spread onto the element that should start a drag (the handle).\n * Attach `ref`, `attributes`, and `listeners` to a focusable element such as a\n * button to make it the drag handle; `isDragging` reflects the row's state.\n */\nexport interface SortableDragHandle {\n  ref: SortableHookResult['setActivatorNodeRef']\n  attributes: SortableHookResult['attributes']\n  listeners: SortableHookResult['listeners']\n  isDragging: boolean\n}\n\nexport interface SortableListProps<T> {\n  items: T[]\n  /** Stable unique id for an item. */\n  getItemId: (item: T) => string\n  /** Called with the reordered items after a drag completes. */\n  onReorder: (items: T[]) => void\n  /** Render a single row. Spread `handle` onto the drag-handle element. */\n  renderItem: (item: T, handle: SortableDragHandle, index: number) => ReactNode\n  /** Classes for the list container (defaults to a vertical flex with gap). */\n  className?: string\n}\n\n/**\n * Vertical drag-and-drop sortable list built on @dnd-kit. Pointer, touch and\n * keyboard sensors are wired up; dragging is constrained to the vertical axis\n * within the list. The consumer owns row markup and decides which element is\n * the handle via the `handle` argument of `renderItem`.\n */\nexport function SortableList<T>({\n  items,\n  getItemId,\n  onReorder,\n  renderItem,\n  className,\n}: SortableListProps<T>) {\n  const ids = items.map(getItemId)\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(TouchSensor, {\n      activationConstraint: { delay: 150, tolerance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const oldIndex = ids.indexOf(String(active.id))\n    const newIndex = ids.indexOf(String(over.id))\n    if (oldIndex < 0 || newIndex < 0) return\n    onReorder(arrayMove(items, oldIndex, newIndex))\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={ids} strategy={verticalListSortingStrategy}>\n        <div\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"}

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

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

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

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