@alpic-ai/ui 0.0.0-dev.g16d80c2 → 0.0.0-dev.g172fb9f

package/dist/components/grid-fx.mjs

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/grid-fx.tsx
+const CELL_SIZE = 46;
+const TTL_MIN = 42;
+const TTL_MAX = 78;
+const SPAWN_MIN = 180;
+const SPAWN_MAX = 480;
+const rand = (min, max) => min + Math.random() * (max - min);
+function resolveColors(element) {
+	const styles = getComputedStyle(element);
+	return {
+		color: styles.getPropertyValue("--color-primary").trim() || "#e90060",
+		colorHi: styles.getPropertyValue("--color-primary-hover").trim() || "#f22b79"
+	};
+}
+function strokeFull(ctx, horiz, at, width, height) {
+	ctx.beginPath();
+	if (horiz) {
+		ctx.moveTo(0, at);
+		ctx.lineTo(width, at);
+	} else {
+		ctx.moveTo(at, 0);
+		ctx.lineTo(at, height);
+	}
+	ctx.stroke();
+}
+function drawGlitchLine(ctx, line, width, height) {
+	const { horiz, at, color, colorHi } = line;
+	const span = horiz ? width : height;
+	const progress = line.life / line.ttl;
+	const envelope = progress < .08 ? progress / .08 : 1 - (progress - .08) / .92;
+	const base = Math.max(0, envelope);
+	ctx.lineCap = "round";
+	const ghosts = [
+		{
+			offset: 0,
+			alpha: .85,
+			blur: 12
+		},
+		{
+			offset: rand(-3, 3),
+			alpha: .35,
+			blur: 0
+		},
+		{
+			offset: rand(-7, 7),
+			alpha: .2,
+			blur: 0
+		}
+	];
+	for (const ghost of ghosts) {
+		ctx.globalAlpha = base * ghost.alpha * (Math.random() < .1 ? .3 : 1);
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1.5;
+		ctx.shadowBlur = ghost.blur;
+		ctx.shadowColor = color;
+		strokeFull(ctx, horiz, at + ghost.offset, width, height);
+	}
+	if (Math.random() < .5) {
+		ctx.globalAlpha = base * .6;
+		ctx.lineWidth = 2;
+		ctx.shadowBlur = 0;
+		ctx.strokeStyle = colorHi;
+		for (let segment = 0; segment < 3; segment++) {
+			const start = rand(0, span * .85);
+			const end = start + rand(20, 80);
+			const jitter = rand(-4, 4);
+			ctx.beginPath();
+			if (horiz) {
+				ctx.moveTo(start, at + jitter);
+				ctx.lineTo(end, at + jitter);
+			} else {
+				ctx.moveTo(at + jitter, start);
+				ctx.lineTo(at + jitter, end);
+			}
+			ctx.stroke();
+		}
+	}
+}
+function GridFx({ className, cellSize = CELL_SIZE, style, ...props }) {
+	const reduced = useReducedMotion();
+	const canvasRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (reduced) return;
+		const canvas = canvasRef.current;
+		const parent = canvas?.parentElement;
+		const ctx = canvas?.getContext("2d");
+		if (!canvas || !parent || !ctx) return;
+		let width = 0;
+		let height = 0;
+		let dpr = 1;
+		let frame = 0;
+		let nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+		let onScreen = true;
+		const lines = [];
+		const resize = () => {
+			dpr = Math.min(window.devicePixelRatio || 1, 2);
+			width = parent.clientWidth;
+			height = parent.clientHeight;
+			canvas.width = width * dpr;
+			canvas.height = height * dpr;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		};
+		const spawn = () => {
+			const horiz = Math.random() < .5;
+			const tracks = Math.ceil((horiz ? height : width) / cellSize);
+			const { color, colorHi } = resolveColors(canvas);
+			lines.push({
+				horiz,
+				at: Math.floor(Math.random() * tracks) * cellSize + .5,
+				life: 0,
+				ttl: rand(TTL_MIN, TTL_MAX),
+				color,
+				colorHi
+			});
+		};
+		const tick = () => {
+			ctx.globalAlpha = 1;
+			ctx.shadowBlur = 0;
+			ctx.clearRect(0, 0, width, height);
+			if (--nextIn <= 0) {
+				spawn();
+				nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+			}
+			for (let index = lines.length - 1; index >= 0; index--) {
+				const line = lines[index];
+				if (!line) continue;
+				line.life++;
+				drawGlitchLine(ctx, line, width, height);
+				if (line.life >= line.ttl) lines.splice(index, 1);
+			}
+			ctx.globalAlpha = 1;
+			ctx.shadowBlur = 0;
+			frame = requestAnimationFrame(tick);
+		};
+		const running = () => onScreen && document.visibilityState === "visible";
+		const start = () => {
+			if (!frame && running()) frame = requestAnimationFrame(tick);
+		};
+		const stop = () => {
+			if (frame) cancelAnimationFrame(frame);
+			frame = 0;
+			ctx.clearRect(0, 0, width, height);
+		};
+		resize();
+		start();
+		const resizeObserver = new ResizeObserver(() => resize());
+		resizeObserver.observe(parent);
+		const intersectionObserver = new IntersectionObserver(([entry]) => {
+			if (!entry) return;
+			onScreen = entry.isIntersecting;
+			if (onScreen) start();
+			else stop();
+		});
+		intersectionObserver.observe(canvas);
+		const onVisibility = () => {
+			if (running()) start();
+			else stop();
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			stop();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, [reduced, cellSize]);
+	if (reduced) return null;
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		"aria-hidden": true,
+		"data-slot": "grid-fx",
+		className: cn("pointer-events-none absolute inset-0 h-full w-full", className),
+		style: {
+			zIndex: -1,
+			WebkitMaskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+			maskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { GridFx };

package/dist/components/heatmap-chart.d.mts

@@ -0,0 +1,40 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/heatmap-chart.d.ts
+interface HeatmapChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  xKey: string;
+  yKey: string;
+  dataKey?: string;
+  variant?: "square" | "dot";
+  palette?: ChartPaletteName;
+  xLabels?: readonly string[];
+  yLabels?: readonly string[];
+  highlightPeak?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  xTickFormatter?: (label: string) => string;
+  yTickFormatter?: (label: string) => string;
+  ariaLabel?: string;
+  className?: string;
+}
+declare function HeatmapChart({
+  data,
+  xKey,
+  yKey,
+  dataKey,
+  variant,
+  palette,
+  xLabels,
+  yLabels,
+  highlightPeak,
+  loading,
+  valueFormatter,
+  xTickFormatter,
+  yTickFormatter,
+  ariaLabel,
+  className
+}: HeatmapChartProps): React$1.JSX.Element;
+//#endregion
+export { HeatmapChart, HeatmapChartProps };

package/dist/components/heatmap-chart.mjs

@@ -0,0 +1,198 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { HEAT_EMPTY, heatColor, heatRamp } from "../lib/chart-palette.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { createPortal } from "react-dom";
+//#region src/components/heatmap-chart.tsx
+const PLACEHOLDER_HEIGHT = 168;
+const CELL = 22;
+const GAP = 3;
+const PAD = {
+	left: 36,
+	top: 18,
+	right: 6,
+	bottom: 6
+};
+const MAX_X_TICKS = 13;
+const DOT_MIN = .42;
+const DOT_RANGE = .52;
+const TOOLTIP_OFFSET = 14;
+const TOOLTIP_WIDTH = 150;
+const TOOLTIP_HEIGHT = 64;
+const pairKey = (rowLabel, colLabel) => JSON.stringify([rowLabel, colLabel]);
+const uniqueInOrder = (values) => {
+	const seen = /* @__PURE__ */ new Set();
+	const ordered = [];
+	for (const value of values) if (!seen.has(value)) {
+		seen.add(value);
+		ordered.push(value);
+	}
+	return ordered;
+};
+function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square", palette, xLabels, yLabels, highlightPeak = true, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), xTickFormatter, yTickFormatter, ariaLabel = "Activity heatmap", className }) {
+	const { paletteName, theme } = useChartContext(palette);
+	const [hovered, setHovered] = React$1.useState(null);
+	const [mounted, setMounted] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const { columns, rows, cells, maxValue, peakKey } = React$1.useMemo(() => {
+		const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
+		const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
+		const valueAt = /* @__PURE__ */ new Map();
+		for (const row of data) valueAt.set(pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? "")), Number(row[dataKey]) || 0);
+		let maxValue = 0;
+		let peakKey = "";
+		return {
+			columns,
+			rows,
+			cells: rows.flatMap((rowLabel, rowIndex) => columns.map((colLabel, colIndex) => {
+				const value = valueAt.get(pairKey(rowLabel, colLabel)) ?? 0;
+				if (value > maxValue) {
+					maxValue = value;
+					peakKey = pairKey(rowLabel, colLabel);
+				}
+				return {
+					rowLabel,
+					colLabel,
+					rowIndex,
+					colIndex,
+					value
+				};
+			})),
+			maxValue,
+			peakKey
+		};
+	}, [
+		data,
+		xKey,
+		yKey,
+		dataKey,
+		xLabels,
+		yLabels
+	]);
+	const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs", className),
+		style: { minHeight: PLACEHOLDER_HEIGHT },
+		children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+	});
+	if (isEmpty) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs", className),
+		style: { minHeight: PLACEHOLDER_HEIGHT },
+		children: "no data in range"
+	});
+	const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+	const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
+	const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
+	const xStride = Math.ceil(columns.length / MAX_X_TICKS);
+	const cellX = (col) => PAD.left + col * 25;
+	const cellY = (row) => PAD.top + row * 25;
+	const formatX = (label) => xTickFormatter ? xTickFormatter(label) : label;
+	const formatY = (label) => yTickFormatter ? yTickFormatter(label) : label;
+	const tooltipLeft = hovered && hovered.x + TOOLTIP_OFFSET + TOOLTIP_WIDTH > window.innerWidth ? hovered.x - TOOLTIP_OFFSET - TOOLTIP_WIDTH : (hovered?.x ?? 0) + TOOLTIP_OFFSET;
+	const tooltipTop = hovered && hovered.y + TOOLTIP_OFFSET + TOOLTIP_HEIGHT > window.innerHeight ? hovered.y - TOOLTIP_OFFSET - TOOLTIP_HEIGHT : (hovered?.y ?? 0) + TOOLTIP_OFFSET;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "heatmap-chart",
+		className: cn("w-full", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${totalWidth} ${totalHeight}`,
+				className: "block min-w-[480px]",
+				style: {
+					width: "100%",
+					height: "auto"
+				},
+				role: "img",
+				"aria-label": ariaLabel,
+				onMouseLeave: () => setHovered(null),
+				children: [
+					columns.map((label, col) => col % xStride === 0 ? /* @__PURE__ */ jsx("text", {
+						x: cellX(col) + CELL / 2,
+						y: PAD.top - 7,
+						textAnchor: "middle",
+						className: "fill-quaternary-foreground font-mono text-[8.5px]",
+						children: formatX(label)
+					}, `x-${label}`) : null),
+					rows.map((label, row) => /* @__PURE__ */ jsx("text", {
+						x: PAD.left - 8,
+						y: cellY(row) + CELL / 2 + 3,
+						textAnchor: "end",
+						className: "fill-quaternary-foreground font-mono text-[8.5px]",
+						children: formatY(label)
+					}, `y-${label}`)),
+					cells.map((cell) => {
+						const fraction = cell.value / maxValue;
+						const fill = heatColor(ramp, fraction);
+						const key = pairKey(cell.rowLabel, cell.colLabel);
+						const isPeak = highlightPeak && key === peakKey;
+						if (variant === "dot") return /* @__PURE__ */ jsx("circle", {
+							cx: cellX(cell.colIndex) + CELL / 2,
+							cy: cellY(cell.rowIndex) + CELL / 2,
+							r: CELL / 2 * (DOT_MIN + DOT_RANGE * fraction),
+							fill,
+							stroke: isPeak ? theme.foreground : void 0,
+							strokeWidth: isPeak ? 1.4 : void 0
+						}, key);
+						return /* @__PURE__ */ jsx("rect", {
+							x: cellX(cell.colIndex),
+							y: cellY(cell.rowIndex),
+							width: CELL,
+							height: CELL,
+							rx: 2.5,
+							fill,
+							stroke: isPeak ? theme.foreground : void 0,
+							strokeWidth: isPeak ? 1.4 : void 0
+						}, key);
+					}),
+					cells.map((cell) => /* @__PURE__ */ jsx("rect", {
+						x: cellX(cell.colIndex),
+						y: cellY(cell.rowIndex),
+						width: 25,
+						height: 25,
+						fill: "transparent",
+						onMouseMove: (event) => setHovered({
+							x: event.clientX,
+							y: event.clientY,
+							rowLabel: cell.rowLabel,
+							colLabel: cell.colLabel,
+							value: cell.value
+						})
+					}, `hit-${pairKey(cell.rowLabel, cell.colLabel)}`))
+				]
+			})
+		}), mounted && hovered && createPortal(/* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg",
+			style: {
+				left: tooltipLeft,
+				top: tooltipTop
+			},
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider",
+				children: [
+					formatY(hovered.rowLabel),
+					" · ",
+					formatX(hovered.colLabel)
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-4 text-text-xs",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-2 shrink-0 rounded-[2px]",
+						style: { background: heatColor(ramp, hovered.value / maxValue) }
+					}), "activity"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-mono font-semibold tabular-nums text-foreground",
+					children: valueFormatter(hovered.value)
+				})]
+			})]
+		}), document.body)]
+	});
+}
+//#endregion
+export { HeatmapChart };

package/dist/components/line-chart.d.mts

@@ -0,0 +1,55 @@
+import { ChartSeries } from "../lib/chart.mjs";
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import { ChartMarker } from "./area-chart.mjs";
+import * as React$1 from "react";
+
+//#region src/components/line-chart.d.ts
+declare const CURVE_TYPE: {
+  readonly monotone: "monotone";
+  readonly linear: "linear";
+  readonly step: "stepAfter";
+};
+interface LineChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  curve?: keyof typeof CURVE_TYPE;
+  legend?: boolean;
+  valueFlags?: boolean;
+  dots?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: {
+    y: number;
+    label?: string;
+    band?: boolean;
+  };
+  markers?: ChartMarker[];
+  lastValueLabel?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+declare function LineChart({
+  data,
+  index,
+  series,
+  curve,
+  legend,
+  valueFlags,
+  dots,
+  height,
+  yAxisWidth,
+  palette,
+  referenceLine,
+  markers,
+  lastValueLabel,
+  loading,
+  valueFormatter,
+  labelFormatter,
+  className
+}: LineChartProps): React$1.JSX.Element;
+//#endregion
+export { LineChart, LineChartProps };

package/dist/components/line-chart.mjs

@@ -0,0 +1,211 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { resolveSeries } from "../lib/chart.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { ChartLegend } from "./chart-legend.mjs";
+import { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { CartesianGrid, LabelList, Line, LineChart as LineChart$1, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/components/line-chart.tsx
+const CURVE_TYPE = {
+	monotone: "monotone",
+	linear: "linear",
+	step: "stepAfter"
+};
+function LineChart({ data, index, series, curve = "monotone", legend = false, valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+	const { palette: paletteColors, theme } = useChartContext(palette);
+	const animated = !useReducedMotion();
+	const resolved = resolveSeries(series, paletteColors, theme);
+	const numericMax = React$1.useMemo(() => {
+		let max = 0;
+		for (const row of data) for (const entry of series) {
+			const value = Number(row[entry.key]);
+			if (Number.isFinite(value) && value > max) max = value;
+		}
+		return max;
+	}, [data, series]);
+	const curveType = CURVE_TYPE[curve];
+	const margin = {
+		top: markers?.length ? 18 : 8,
+		right: lastValueLabel ? 56 : 8,
+		bottom: 2,
+		left: 0
+	};
+	const axis = {
+		stroke: theme.border,
+		tick: {
+			fill: theme.axisForeground,
+			fontSize: 10,
+			fontFamily: theme.fontMono
+		},
+		tickLine: false,
+		axisLine: {
+			stroke: theme.border,
+			strokeOpacity: .6
+		}
+	};
+	const legendItems = resolved.map((entry) => ({
+		name: entry.name,
+		color: entry.color,
+		dashed: entry.dashed
+	}));
+	const activeDotFor = (entry) => valueFlags ? (dotProps) => {
+		if (dotProps.cx == null || dotProps.cy == null) return /* @__PURE__ */ jsx("g", {});
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+			cx: dotProps.cx,
+			cy: dotProps.cy,
+			r: 3.5,
+			fill: entry.color,
+			stroke: theme.card,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("text", {
+			x: dotProps.cx,
+			y: dotProps.cy - 8,
+			textAnchor: "middle",
+			fill: entry.color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(dotProps.value ?? 0))
+		})] });
+	} : {
+		r: 3.5,
+		fill: entry.color,
+		stroke: theme.card,
+		strokeWidth: 2
+	};
+	const renderLastLabel = (color) => (props) => {
+		if (props.index !== data.length - 1 || props.x == null || props.y == null) return null;
+		return /* @__PURE__ */ jsx("text", {
+			x: Number(props.x) + 6,
+			y: Number(props.y),
+			dy: 3,
+			fill: color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			textAnchor: "start",
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(props.value ?? 0))
+		});
+	};
+	const isEmpty = data.length === 0 || resolved.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "line-chart",
+		className: cn("flex w-full flex-col gap-3", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-full",
+			style: { height },
+			children: loading ? /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+				children: "no data in range"
+			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(LineChart$1, {
+					data,
+					margin,
+					children: [
+						/* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: false,
+							stroke: theme.grid,
+							strokeDasharray: "2 4"
+						}),
+						/* @__PURE__ */ jsx(XAxis, {
+							dataKey: index,
+							...axis,
+							interval: "preserveStartEnd",
+							minTickGap: 44
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							...axis,
+							width: yAxisWidth,
+							tickFormatter: (value) => valueFormatter(value)
+						}),
+						/* @__PURE__ */ jsx(Tooltip, {
+							offset: 12,
+							allowEscapeViewBox: {
+								x: false,
+								y: false
+							},
+							cursor: {
+								stroke: theme.axisForeground,
+								strokeWidth: 1,
+								strokeDasharray: "3 3"
+							},
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								valueFormatter,
+								labelFormatter
+							})
+						}),
+						referenceLine?.band && /* @__PURE__ */ jsx(ReferenceArea, {
+							y1: referenceLine.y,
+							y2: numericMax,
+							fill: theme.warning,
+							fillOpacity: .06,
+							ifOverflow: "extendDomain"
+						}),
+						referenceLine && /* @__PURE__ */ jsx(ReferenceLine, {
+							y: referenceLine.y,
+							stroke: theme.warning,
+							strokeDasharray: "4 4",
+							strokeOpacity: .6,
+							label: referenceLine.label ? {
+								value: referenceLine.label,
+								fill: theme.warning,
+								fontSize: 9,
+								fontFamily: theme.fontMono,
+								position: "insideBottomRight"
+							} : void 0
+						}),
+						resolved.map((entry) => /* @__PURE__ */ jsx(Line, {
+							type: curveType,
+							dataKey: entry.key,
+							name: entry.name,
+							stroke: entry.color,
+							strokeWidth: entry.dashed ? 2 : 1.8,
+							strokeDasharray: entry.dashed ? "5 3" : void 0,
+							dot: dots ? {
+								r: 2.5,
+								fill: entry.color,
+								strokeWidth: 0
+							} : false,
+							activeDot: activeDotFor(entry),
+							isAnimationActive: animated,
+							animationDuration: 650,
+							animationEasing: "ease-out",
+							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {
+								dataKey: entry.key,
+								content: renderLastLabel(entry.color)
+							})
+						}, entry.key)),
+						markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
+							x: marker.x,
+							y: marker.y,
+							r: 3.5,
+							fill: marker.color ?? theme.foreground,
+							stroke: theme.card,
+							strokeWidth: 2,
+							label: marker.label ? {
+								value: marker.label,
+								fill: marker.color ?? theme.foreground,
+								fontSize: 9,
+								fontFamily: theme.fontMono,
+								position: "top"
+							} : void 0
+						}, `${marker.x}-${marker.y}`))
+					]
+				})
+			})
+		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems,
+			style: { paddingLeft: yAxisWidth }
+		})]
+	});
+}
+//#endregion
+export { LineChart };

package/dist/components/spinner.d.mts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  variant?: "secondary" | "primary" | null | undefined;
+  variant?: "primary" | "secondary" | null | undefined;
   size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}