@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/chart/chart.js

@@ -0,0 +1,147 @@
+import { cn } from "../../utils/cn.js";
+import { THEMES } from "./chart.types.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as RechartsPrimitive from "recharts";
+//#region src/components/chart/chart.tsx
+var INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+var ChartContext = React$1.createContext(null);
+function useChart() {
+	const context = React$1.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+var ChartContainer = React$1.forwardRef(function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }, ref) {
+	const uniqueId = React$1.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("flex w-full min-w-0 flex-col items-stretch aspect-video text-xs [&_.recharts-responsive-container]:min-h-0 [&_.recharts-responsive-container]:w-full [&_.recharts-responsive-container]:min-w-0 [&_.recharts-responsive-container]:flex-1 [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+});
+ChartContainer.displayName = "ChartContainer";
+var ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, item]) => item.theme ?? item.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = React$1.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-[10rem] items-start gap-2.5 rounded-lg border border-border/50 bg-background px-4 py-3 text-xs shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-2.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full min-w-0 flex-wrap items-stretch gap-x-4 gap-y-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment$1, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-1 justify-between gap-3 leading-snug", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-2",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, index);
+			})
+		})]
+	});
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-2", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.filter((item) => item.type !== "none").map((item, index) => {
+			const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.dataKey ?? "value"}`);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: "h-4 w-4 shrink-0 rounded-sm",
+					style: { backgroundColor: item.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-normal",
+					children: itemConfig?.label
+				})]
+			}, index);
+		})
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+//#endregion
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/components/chart/chart.types.js

@@ -0,0 +1,7 @@
+//#region src/components/chart/chart.types.ts
+var THEMES = {
+	light: "",
+	dark: ".dark"
+};
+//#endregion
+export { THEMES };

package/dist/components/chart/composed-chart.js

@@ -0,0 +1,182 @@
+import { cn } from "../../utils/cn.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bar, CartesianGrid, Cell, ComposedChart, Line, XAxis, YAxis } from "recharts";
+//#region src/components/chart/composed-chart.tsx
+var BAR_SIZE_MAP = {
+	sm: 14,
+	default: 24,
+	lg: 36
+};
+var STROKE_WIDTH_MAP = {
+	sm: 1.5,
+	default: 2,
+	lg: 3
+};
+var BAR_RADIUS = 4;
+function resolveBarSize(size) {
+	if (size == null) return BAR_SIZE_MAP.default;
+	if (typeof size === "number") return size;
+	return BAR_SIZE_MAP[size];
+}
+function resolveStrokeWidth(width) {
+	if (width == null) return STROKE_WIDTH_MAP.default;
+	if (typeof width === "number") return width;
+	return STROKE_WIDTH_MAP[width];
+}
+function getBarRadius(index, total, stacked, rounded) {
+	if (!rounded) return [
+		0,
+		0,
+		0,
+		0
+	];
+	const r = BAR_RADIUS;
+	if (!stacked || total === 1) return [
+		r,
+		r,
+		0,
+		0
+	];
+	if (index === total - 1) return [
+		r,
+		r,
+		0,
+		0
+	];
+	return [
+		0,
+		0,
+		0,
+		0
+	];
+}
+/**
+* Recharts falls back to axis id `0` for a series without `yAxisId`, and throws
+* ("Invariant failed") because the only axes declared are "left" and "right".
+*/
+var DEFAULT_Y_AXIS_ID = "left";
+function buildDefaultSeries(config) {
+	return Object.keys(config).map((dataKey) => ({
+		dataKey,
+		type: "bar"
+	}));
+}
+var ComposedChart$1 = React$1.forwardRef(function ComposedChart$2({ data, config: explicitConfig, categoryKey, series: explicitSeries, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, hideRightYAxis = true, xAxisTickFormatter, yAxisTickFormatter, rightYAxisTickFormatter, yAxisTickCount, rightYAxisTickCount, yAxisDomain, rightYAxisDomain, rightYAxisTicks, labelFormatter, tooltipFormatter, tooltipContent, defs, barGap, categoryGap, className, margin }, ref) {
+	const resolvedCategoryKey = React$1.useMemo(() => categoryKey ?? inferCategoryKey(data[0]), [categoryKey, data]);
+	const config = React$1.useMemo(() => buildAutoSeriesConfig(data, resolvedCategoryKey, explicitConfig), [
+		data,
+		resolvedCategoryKey,
+		explicitConfig
+	]);
+	const series = React$1.useMemo(() => explicitSeries ?? buildDefaultSeries(config), [explicitSeries, config]);
+	const seriesKeys = React$1.useMemo(() => series.map((item) => item.dataKey), [series]);
+	const chartData = React$1.useMemo(() => coerceSeriesValuesToNumbers(data, seriesKeys), [data, seriesKeys]);
+	const barSeries = React$1.useMemo(() => series.filter((item) => item.type === "bar"), [series]);
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		ref,
+		config,
+		className: cn("w-full", className),
+		children: /* @__PURE__ */ jsxs(ComposedChart, {
+			accessibilityLayer: true,
+			data: chartData,
+			margin,
+			barGap,
+			barCategoryGap: categoryGap,
+			children: [
+				defs,
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+				/* @__PURE__ */ jsx(XAxis, {
+					type: "category",
+					dataKey: resolvedCategoryKey,
+					hide: hideXAxis,
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: xAxisTickFormatter
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					yAxisId: "left",
+					type: "number",
+					hide: hideYAxis,
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: yAxisTickFormatter,
+					tickCount: yAxisTickCount,
+					domain: yAxisDomain
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					yAxisId: "right",
+					orientation: "right",
+					type: "number",
+					hide: hideRightYAxis,
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: rightYAxisTickFormatter,
+					tickCount: rightYAxisTickCount,
+					domain: rightYAxisDomain,
+					ticks: rightYAxisTicks
+				}),
+				showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+					cursor: {
+						fill: "var(--color-muted)",
+						fillOpacity: .12
+					},
+					labelFormatter,
+					content: tooltipContent ?? /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: tooltipFormatter })
+				}),
+				showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+				series.map((item) => {
+					if (item.type === "bar") {
+						const maxBarSize = resolveBarSize(item.barSize);
+						const rounded = item.rounded ?? true;
+						const stacked = Boolean(item.stackId);
+						const radius = getBarRadius(barSeries.findIndex((bar) => bar.dataKey === item.dataKey), barSeries.length, stacked, rounded);
+						return /* @__PURE__ */ jsx(Bar, {
+							dataKey: item.dataKey,
+							yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
+							stackId: item.stackId,
+							fill: `var(--color-${item.dataKey})`,
+							maxBarSize,
+							radius,
+							children: item.getCellFill && chartData.map((row, index) => {
+								const fill = item.getCellFill?.(row, index);
+								return /* @__PURE__ */ jsx(Cell, { fill: fill ?? `var(--color-${item.dataKey})` }, `${item.dataKey}-${index}`);
+							})
+						}, item.dataKey);
+					}
+					const lineCurve = item.curveType ?? "monotone";
+					const lineStrokeWidth = resolveStrokeWidth(item.strokeWidth);
+					const showDots = item.showDots ?? false;
+					const showActiveDot = item.showActiveDot ?? true;
+					return /* @__PURE__ */ jsx(Line, {
+						type: lineCurve,
+						dataKey: item.dataKey,
+						yAxisId: item.yAxisId ?? DEFAULT_Y_AXIS_ID,
+						stroke: `var(--color-${item.dataKey})`,
+						strokeWidth: lineStrokeWidth,
+						dot: showDots ? {
+							r: 3,
+							strokeWidth: 0,
+							fill: `var(--color-${item.dataKey})`
+						} : false,
+						activeDot: showActiveDot ? {
+							r: 4,
+							strokeWidth: 2,
+							stroke: "var(--color-background)",
+							fill: `var(--color-${item.dataKey})`
+						} : false,
+						isAnimationActive: true
+					}, item.dataKey);
+				})
+			]
+		})
+	});
+});
+ComposedChart$1.displayName = "ComposedChart";
+//#endregion
+export { ComposedChart$1 as ComposedChart };

package/dist/components/chart/donut-chart.js

@@ -0,0 +1,177 @@
+import { cn } from "../../utils/cn.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { buildSeriesChartConfig } from "./chart-colors.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart } from "recharts";
+//#region src/components/chart/donut-chart.tsx
+var GRADIENT_TOP_OPACITY = 1;
+var GRADIENT_BOTTOM_OPACITY = .82;
+function flattenKeys(data) {
+	const keys = [];
+	for (const d of data) {
+		keys.push(d.key);
+		if (d.children) for (const c of d.children) keys.push(c.key);
+	}
+	return keys;
+}
+function deriveConfig(data, explicitConfig) {
+	if (explicitConfig) return explicitConfig;
+	return buildSeriesChartConfig(Array.from(new Set(flattenKeys(data))));
+}
+function hasChildren(data) {
+	return data.some((d) => d.children && d.children.length > 0);
+}
+function buildOuterRing(data) {
+	const out = [];
+	for (const d of data) if (d.children && d.children.length > 0) for (const c of d.children) out.push(c);
+	else out.push(d);
+	return out;
+}
+function parseRadius(r) {
+	if (typeof r === "number") return {
+		raw: r,
+		isPct: false
+	};
+	const trimmed = r.trim();
+	const isPct = trimmed.endsWith("%");
+	return {
+		raw: Number.parseFloat(trimmed),
+		isPct
+	};
+}
+function formatRadius(value, isPct) {
+	return isPct ? `${value}%` : value;
+}
+function validateChildren(data) {
+	for (const d of data) if (d.children && d.children.length > 0) {
+		const sum = d.children.reduce((s, c) => s + c.value, 0);
+		if (Math.abs(sum - d.value) > 1e-4) console.warn(`[DonutChart] children of "${d.key}" sum to ${sum}, but parent value is ${d.value}.`);
+	}
+}
+function resolveConfigColor(config, key) {
+	const item = config[key];
+	if (!item) return void 0;
+	if ("color" in item && item.color) return item.color;
+	if ("theme" in item && item.theme) return item.theme.light ?? item.theme.dark;
+}
+function DonutLegend({ config, order }) {
+	const seen = /* @__PURE__ */ new Set();
+	const items = order.filter((k) => {
+		if (seen.has(k)) return false;
+		seen.add(k);
+		return k in config;
+	}).map((k) => ({
+		key: k,
+		entry: config[k]
+	}));
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-2 pt-3 text-sm",
+		children: items.map(({ key, entry }) => {
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "h-3 w-3 shrink-0 rounded-sm",
+					style: { backgroundColor: resolveConfigColor(config, key) }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-normal text-foreground",
+					children: entry.label ?? key
+				})]
+			}, key);
+		})
+	});
+}
+var DonutChart = React$1.forwardRef(function DonutChart({ data, config: explicitConfig, innerRadius = "55%", outerRadius = "95%", ringGap = 3, startAngle = 90, endAngle = -270, paddingAngle = 2, cornerRadius = 4, showTooltip = true, showLegend = false, gradient = true, centerLabel, className, margin }, ref) {
+	const gradientScope = React$1.useId().replace(/:/g, "");
+	const config = React$1.useMemo(() => deriveConfig(data, explicitConfig), [data, explicitConfig]);
+	const twoRing = React$1.useMemo(() => hasChildren(data), [data]);
+	const outerRing = React$1.useMemo(() => twoRing ? buildOuterRing(data) : null, [data, twoRing]);
+	React$1.useEffect(() => {
+		validateChildren(data);
+	}, [data]);
+	const inner = parseRadius(innerRadius);
+	const outer = parseRadius(outerRadius);
+	const mid = (inner.raw + outer.raw) / 2;
+	const gapHalf = ringGap / 2;
+	const innerRingOuterRadius = twoRing ? formatRadius(mid - gapHalf, inner.isPct) : outerRadius;
+	const outerRingInnerRadius = formatRadius(mid + gapHalf, outer.isPct);
+	const legendOrder = React$1.useMemo(() => flattenKeys(data), [data]);
+	const uniqueKeys = React$1.useMemo(() => Array.from(new Set(flattenKeys(data))), [data]);
+	const fillFor = (key) => gradient ? `url(#donut-grad-${gradientScope}-${key})` : `var(--color-${key})`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex w-full flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-0 flex-1",
+			children: [/* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: "h-full w-full",
+				children: /* @__PURE__ */ jsxs(PieChart, {
+					margin,
+					children: [
+						gradient && /* @__PURE__ */ jsx("defs", { children: uniqueKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
+							id: `donut-grad-${gradientScope}-${key}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ jsx("stop", {
+								offset: "0%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: GRADIENT_TOP_OPACITY
+							}), /* @__PURE__ */ jsx("stop", {
+								offset: "100%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: GRADIENT_BOTTOM_OPACITY
+							})]
+						}, key)) }),
+						showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+							cursor: false,
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								hideLabel: true,
+								nameKey: "key"
+							})
+						}),
+						/* @__PURE__ */ jsx(Pie, {
+							data,
+							dataKey: "value",
+							nameKey: "key",
+							innerRadius,
+							outerRadius: innerRingOuterRadius,
+							startAngle,
+							endAngle,
+							paddingAngle,
+							cornerRadius,
+							stroke: "transparent",
+							isAnimationActive: true,
+							children: data.map((d) => /* @__PURE__ */ jsx(Cell, { fill: fillFor(d.key) }, d.key))
+						}),
+						twoRing && outerRing && /* @__PURE__ */ jsx(Pie, {
+							data: outerRing,
+							dataKey: "value",
+							nameKey: "key",
+							innerRadius: outerRingInnerRadius,
+							outerRadius,
+							startAngle,
+							endAngle,
+							paddingAngle,
+							cornerRadius,
+							stroke: "transparent",
+							isAnimationActive: true,
+							children: outerRing.map((d, i) => /* @__PURE__ */ jsx(Cell, { fill: fillFor(d.key) }, `${d.key}-${i}`))
+						})
+					]
+				})
+			}), centerLabel && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+				children: centerLabel
+			})]
+		}), showLegend && /* @__PURE__ */ jsx(DonutLegend, {
+			config,
+			order: legendOrder
+		})]
+	});
+});
+//#endregion
+export { DonutChart };

package/dist/components/chart/line-chart.js

@@ -0,0 +1,137 @@
+import { cn } from "../../utils/cn.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+//#region src/components/chart/line-chart.tsx
+var STROKE_WIDTH_MAP = {
+	sm: 1.5,
+	default: 2,
+	lg: 3
+};
+function resolveStrokeWidth(width) {
+	if (width == null) return STROKE_WIDTH_MAP.default;
+	if (typeof width === "number") return width;
+	return STROKE_WIDTH_MAP[width];
+}
+var LineChart$1 = React$1.forwardRef(function LineChart$2({ data, config: explicitConfig, categoryKey, stacked = false, curveType = "monotone", strokeWidth, showDots = false, showActiveDot = true, gradientStroke: _gradientStroke = true, gradientGlow = true, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, labelFormatter, className, margin }, ref) {
+	const resolvedCategoryKey = React$1.useMemo(() => categoryKey ?? inferCategoryKey(data[0]), [categoryKey, data]);
+	const config = React$1.useMemo(() => buildAutoSeriesConfig(data, resolvedCategoryKey, explicitConfig), [
+		data,
+		resolvedCategoryKey,
+		explicitConfig
+	]);
+	const seriesKeys = React$1.useMemo(() => Object.keys(config), [config]);
+	const resolvedStrokeWidth = resolveStrokeWidth(strokeWidth);
+	const processedData = React$1.useMemo(() => {
+		const base = coerceSeriesValuesToNumbers(data, seriesKeys);
+		if (!stacked) return base;
+		return base.map((row) => {
+			const out = { ...row };
+			let cum = 0;
+			for (const key of seriesKeys) {
+				const raw = out[key];
+				if (typeof raw === "number" && Number.isFinite(raw)) {
+					cum += raw;
+					out[key] = cum;
+				}
+			}
+			return out;
+		});
+	}, [
+		data,
+		seriesKeys,
+		stacked
+	]);
+	const glowOrderKeys = React$1.useMemo(() => stacked ? [...seriesKeys].reverse() : seriesKeys, [seriesKeys, stacked]);
+	const idPrefix = `line-${React$1.useId().replace(/:/g, "")}`;
+	const glowGradientId = (key) => `${idPrefix}-glow-${key}`;
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		ref,
+		config,
+		className: cn("w-full", className),
+		children: /* @__PURE__ */ jsxs(LineChart, {
+			accessibilityLayer: true,
+			data: processedData,
+			margin,
+			children: [
+				gradientGlow && /* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
+					id: glowGradientId(key),
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: `var(--color-${key})`,
+						stopOpacity: .18
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: `var(--color-${key})`,
+						stopOpacity: 0
+					})]
+				}, key)) }),
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+				/* @__PURE__ */ jsx(XAxis, {
+					type: "category",
+					dataKey: resolvedCategoryKey,
+					hide: hideXAxis,
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: xAxisTickFormatter
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					type: "number",
+					hide: hideYAxis,
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: yAxisTickFormatter
+				}),
+				showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+					cursor: {
+						stroke: "var(--color-border)",
+						strokeWidth: 1
+					},
+					labelFormatter,
+					content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
+				}),
+				showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+				gradientGlow && glowOrderKeys.map((key) => /* @__PURE__ */ jsx(Area, {
+					type: curveType,
+					dataKey: key,
+					fill: `url(#${glowGradientId(key)})`,
+					stroke: "transparent",
+					strokeWidth: 0,
+					activeDot: false,
+					isAnimationActive: true,
+					legendType: "none",
+					tooltipType: "none"
+				}, `glow-${key}`)),
+				seriesKeys.map((key) => /* @__PURE__ */ jsx(Line, {
+					type: curveType,
+					dataKey: key,
+					stroke: `var(--color-${key})`,
+					strokeWidth: resolvedStrokeWidth,
+					dot: showDots ? {
+						r: 3,
+						strokeWidth: 0,
+						fill: `var(--color-${key})`
+					} : false,
+					activeDot: showActiveDot ? {
+						r: 4,
+						strokeWidth: 2,
+						stroke: "var(--color-background)",
+						fill: `var(--color-${key})`
+					} : false,
+					isAnimationActive: true
+				}, key))
+			]
+		})
+	});
+});
+LineChart$1.displayName = "LineChart";
+//#endregion
+export { LineChart$1 as LineChart };