@signalflare-ai/ui 0.5.0

package/dist/chart-Bes4MN3C.js

@@ -0,0 +1,618 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart/color.ts
+/**
+* Categorical colors for light mode — used when assigning colors to data series
+* by index (e.g. the first series gets Blue, the second gets Violet, etc.).
+*/
+var ChartCategoricalLightColors = /* @__PURE__ */ function(ChartCategoricalLightColors) {
+	ChartCategoricalLightColors["Blue"] = "#086FFF";
+	ChartCategoricalLightColors["Violet"] = "#CF7EE9";
+	ChartCategoricalLightColors["Cyan"] = "#73CEE6";
+	ChartCategoricalLightColors["Indigo"] = "#5B5FEF";
+	ChartCategoricalLightColors["LightBlue"] = "#82B6FF";
+	ChartCategoricalLightColors["Pink"] = "#F5609F";
+	ChartCategoricalLightColors["Indigo3"] = "#C2BDF3";
+	ChartCategoricalLightColors["Violet2"] = "#8D1EB1";
+	ChartCategoricalLightColors["Violet3"] = "#EBCAF6";
+	ChartCategoricalLightColors["Indigo2"] = "#7366E4";
+	return ChartCategoricalLightColors;
+}(ChartCategoricalLightColors || {});
+/**
+* Categorical colors for dark mode — same hues as the light palette but with
+* `E6` alpha (90% opacity) appended to soften contrast on dark backgrounds.
+*/
+var ChartCategoricalDarkColors = /* @__PURE__ */ function(ChartCategoricalDarkColors) {
+	ChartCategoricalDarkColors["Blue"] = "#086FFFE6";
+	ChartCategoricalDarkColors["Violet"] = "#CF7EE9E6";
+	ChartCategoricalDarkColors["Cyan"] = "#73CEE6E6";
+	ChartCategoricalDarkColors["Indigo"] = "#5B5FEFE6";
+	ChartCategoricalDarkColors["LightBlue"] = "#82B6FFE6";
+	ChartCategoricalDarkColors["Pink"] = "#F5609FE6";
+	ChartCategoricalDarkColors["Indigo3"] = "#C2BDF3E6";
+	ChartCategoricalDarkColors["Violet2"] = "#8D1EB1E6";
+	ChartCategoricalDarkColors["Violet3"] = "#EBCAF6E6";
+	ChartCategoricalDarkColors["Indigo2"] = "#7366E4E6";
+	return ChartCategoricalDarkColors;
+}(ChartCategoricalDarkColors || {});
+/**
+* Semantic colors for light mode — used to convey meaning (status, severity)
+* rather than just distinguishing series. Use via `ChartPalette.semantic()`.
+*/
+var ChartSemanticLightColors = /* @__PURE__ */ function(ChartSemanticLightColors) {
+	ChartSemanticLightColors["Attention"] = "#FC574A";
+	ChartSemanticLightColors["Warning"] = "#F8A054";
+	ChartSemanticLightColors["Neutral"] = "#82B6FF";
+	ChartSemanticLightColors["NeutralLight"] = "#B9D6FF";
+	ChartSemanticLightColors["Disabled"] = "#B6B6B6";
+	ChartSemanticLightColors["DisabledLight"] = "#D9D9D9";
+	return ChartSemanticLightColors;
+}(ChartSemanticLightColors || {});
+/**
+* Semantic colors for dark mode — same meanings as the light palette but with
+* `E6` alpha (90% opacity) for dark backgrounds.
+*/
+var ChartSemanticDarkColors = /* @__PURE__ */ function(ChartSemanticDarkColors) {
+	ChartSemanticDarkColors["Attention"] = "#FC574AE6";
+	ChartSemanticDarkColors["Warning"] = "#F8A054E6";
+	ChartSemanticDarkColors["Neutral"] = "#82B6FFE6";
+	ChartSemanticDarkColors["NeutralLight"] = "#B9D6FFE6";
+	ChartSemanticDarkColors["Disabled"] = "#B6B6B6E6";
+	ChartSemanticDarkColors["DisabledLight"] = "#D9D9D9E6";
+	return ChartSemanticDarkColors;
+}(ChartSemanticDarkColors || {});
+/**
+* Ordered list of categorical colors for light mode, indexed by series position.
+* Used as the default ECharts color palette when `isDarkMode` is `false`.
+*/
+var CHART_LIGHT_COLORS = [
+	ChartCategoricalLightColors.Blue,
+	ChartCategoricalLightColors.Violet,
+	ChartCategoricalLightColors.Cyan,
+	ChartCategoricalLightColors.Indigo,
+	ChartCategoricalLightColors.LightBlue,
+	ChartCategoricalLightColors.Pink,
+	ChartCategoricalLightColors.Indigo3,
+	ChartCategoricalLightColors.Violet2,
+	ChartCategoricalLightColors.Violet3,
+	ChartCategoricalLightColors.Indigo2
+];
+/**
+* Ordered list of categorical colors for dark mode, indexed by series position.
+* Used as the default ECharts color palette when `isDarkMode` is `true`.
+*/
+var CHART_DARK_COLORS = [
+	ChartCategoricalDarkColors.Blue,
+	ChartCategoricalDarkColors.Violet,
+	ChartCategoricalDarkColors.Cyan,
+	ChartCategoricalDarkColors.Indigo,
+	ChartCategoricalDarkColors.LightBlue,
+	ChartCategoricalDarkColors.Pink,
+	ChartCategoricalDarkColors.Indigo3,
+	ChartCategoricalDarkColors.Violet2,
+	ChartCategoricalDarkColors.Violet3,
+	ChartCategoricalDarkColors.Indigo2
+];
+/**
+* Returns the hex color for a named semantic value (status, severity, etc.).
+*
+* @example
+* ```ts
+* ChartPalette.semantic("Attention")           // "#FC574A" (light)
+* ChartPalette.semantic("Warning", true)       // "#F8A054E6" (dark)
+* ```
+*/
+function semantic(name, isDarkMode = false) {
+	return isDarkMode ? ChartSemanticDarkColors[name] : ChartSemanticLightColors[name];
+}
+/**
+* Returns the categorical color for a given series index.
+* Wraps around via modulo when `index` exceeds the palette length (10 colors).
+*
+* @example
+* ```ts
+* ChartPalette.color(0)        // Blue (light)
+* ChartPalette.color(0, true)  // Blue with E6 alpha (dark)
+* ChartPalette.color(10)       // wraps back to Blue
+* ```
+*/
+function color(index, isDarkMode = false) {
+	return isDarkMode ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length] : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];
+}
+/**
+* Utilities for resolving SignalFlare chart colors by semantic name or series index.
+* Both functions accept an `isDarkMode` flag and return the appropriate hex color.
+*/
+var ChartPalette = {
+	semantic,
+	color
+};
+//#endregion
+//#region src/components/chart/echart.tsx
+/**
+* Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).
+*
+* Manages the ECharts instance lifecycle (init, option updates, event binding,
+* resize observation, and disposal). Exposes the raw `echarts.ECharts` instance
+* via `ref` for imperative access when needed.
+*
+* Prefer `TimeseriesChart` for time-series data; use this component when you
+* need full control over the ECharts option object.
+*
+* @example
+* ```tsx
+* import * as echarts from "echarts/core";
+* import { BarChart } from "echarts/charts";
+* import { GridComponent } from "echarts/components";
+* import { CanvasRenderer } from "echarts/renderers";
+*
+* echarts.use([BarChart, GridComponent, CanvasRenderer]);
+*
+* <Chart
+*   echarts={echarts}
+*   options={{ xAxis: { data: ["A", "B"] }, yAxis: {}, series: [{ type: "bar", data: [1, 2] }] }}
+* />
+* ```
+*/
+var Chart = forwardRef(function Chart({ echarts, options, optionUpdateBehavior, className, isDarkMode, height = 350, onEvents }, ref) {
+	const elRef = useRef(null);
+	const chartRef = useRef(null);
+	const handlersRef = useRef({});
+	const wrappersRef = useRef({});
+	const boundEventsRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (!elRef.current) return;
+		const chart = echarts.init(elRef.current, isDarkMode ? "dark" : { color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS });
+		chartRef.current = chart;
+		if (typeof ref === "function") ref(chart);
+		else if (ref) ref.current = chart;
+		return () => {
+			for (const event of boundEventsRef.current) {
+				const wrapper = wrappersRef.current[event];
+				if (wrapper) chart.off(event, wrapper);
+			}
+			boundEventsRef.current.clear();
+			if (typeof ref === "function") ref(null);
+			else if (ref) ref.current = null;
+			chartRef.current = null;
+			chart.dispose();
+		};
+	}, [elRef, isDarkMode]);
+	useEffect(() => {
+		const chart = chartRef.current;
+		if (!chart) return;
+		chart.setOption(options, {
+			notMerge: false,
+			lazyUpdate: true,
+			...optionUpdateBehavior
+		});
+	}, [
+		isDarkMode,
+		optionUpdateBehavior,
+		options
+	]);
+	useEffect(() => {
+		handlersRef.current = onEvents ?? {};
+	}, [onEvents]);
+	useEffect(() => {
+		const chart = chartRef.current;
+		if (!chart) return;
+		const nextBound = /* @__PURE__ */ new Set();
+		for (const [event, handler] of Object.entries(onEvents ?? {})) {
+			if (typeof handler !== "function") continue;
+			nextBound.add(event);
+			if (!wrappersRef.current[event]) wrappersRef.current[event] = (params) => {
+				handlersRef.current[event]?.(params);
+			};
+			if (!boundEventsRef.current.has(event)) chart.on(event, wrappersRef.current[event]);
+		}
+		for (const event of boundEventsRef.current) {
+			if (nextBound.has(event)) continue;
+			const wrapper = wrappersRef.current[event];
+			if (wrapper) chart.off(event, wrapper);
+		}
+		boundEventsRef.current = nextBound;
+	}, [
+		echarts,
+		isDarkMode,
+		onEvents
+	]);
+	useEffect(() => {
+		const chart = chartRef.current;
+		const el = elRef.current;
+		if (!chart || !el) return;
+		let isInitial = true;
+		const ro = new ResizeObserver(() => {
+			if (isInitial) {
+				isInitial = false;
+				return;
+			}
+			chart.resize();
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: elRef,
+		className: cn("w-full", className),
+		style: { height },
+		tabIndex: options.aria?.enabled ? 0 : void 0,
+		role: options.aria?.enabled ? "img" : void 0
+	});
+});
+Chart.displayName = "Chart";
+//#endregion
+//#region src/components/chart/timeseries-chart.tsx
+/**
+* TimeseriesChart — a time-series line or bar chart.
+*
+* Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:
+* a time-typed x-axis, dashed lines for incomplete data periods, brush-based
+* time range selection, and automatic tooltip deduplication.
+*
+* @example
+* ```tsx
+* import * as echarts from "echarts/core";
+* import { LineChart } from "echarts/charts";
+* import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from "echarts/components";
+* import { CanvasRenderer } from "echarts/renderers";
+*
+* echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);
+*
+* const [range, setRange] = useState<[number, number]>();
+*
+* <TimeseriesChart
+*   echarts={echarts}
+*   data={[{ name: "Requests", data: [[Date.now(), 42]], color: "#086FFF" }]}
+*   xAxisName="Time"
+*   xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}
+*   yAxisName="Count"
+*   yAxisTickFormat={(value) => `${value / 1000}k`}
+*   tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}
+*   onTimeRangeChange={(from, to) => setRange([from, to])}
+* />
+* ```
+*/
+function TimeseriesChart({ echarts, type = "line", data, xAxisName, xAxisTickCount, xAxisTickFormat, yAxisTickFormat, yAxisTickLabelFormat, yAxisName, yAxisTickCount, tooltipValueFormat, onTimeRangeChange, height = 350, incomplete, isDarkMode, gradient, loading, ariaDescription }) {
+	const chartRef = useRef(null);
+	const incompleteBefore = incomplete?.before;
+	const incompleteAfter = incomplete?.after;
+	const options = useMemo(() => {
+		const transformSeries = [];
+		const seriesType = type === "bar" ? {
+			type: "bar",
+			stack: "total"
+		} : {
+			type: "line",
+			showSymbol: false
+		};
+		for (const s of data) {
+			const incompleteBeforePoints = incompleteBefore && type === "line" ? s.data.filter((point) => point[0] <= incompleteBefore) : [];
+			const incompleteAfterPoints = incompleteAfter && type === "line" ? s.data.filter((point) => point[0] >= incompleteAfter) : [];
+			const completePoints = incompleteBeforePoints.length > 0 || incompleteAfterPoints.length > 0 ? s.data.slice(Math.max(0, incompleteBeforePoints.length - 1), Math.max(0, s.data.length - incompleteAfterPoints.length + 1)) : s.data;
+			const areaStyle = gradient && type === "line" ? { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+				offset: 0,
+				color: colorWithOpacity(s.color, .4)
+			}, {
+				offset: 1,
+				color: colorWithOpacity(s.color, 0)
+			}]) } : void 0;
+			transformSeries.push({
+				data: completePoints,
+				color: s.color,
+				name: s.name,
+				emphasis: { focus: "series" },
+				...areaStyle ? { areaStyle } : {},
+				...seriesType
+			});
+			const incompleteSeriesConfig = {
+				color: s.color,
+				name: s.name,
+				type: "line",
+				lineStyle: { type: "dashed" },
+				showSymbol: false,
+				emphasis: { focus: "series" }
+			};
+			if (incompleteBeforePoints.length > 0) transformSeries.push({
+				...incompleteSeriesConfig,
+				data: incompleteBeforePoints
+			});
+			if (incompleteAfterPoints.length > 0) transformSeries.push({
+				...incompleteSeriesConfig,
+				data: incompleteAfterPoints
+			});
+		}
+		return {
+			aria: {
+				enabled: true,
+				...ariaDescription && { label: { description: ariaDescription } }
+			},
+			brush: {
+				snapToData: true,
+				xAxisIndex: "all",
+				brushType: "lineX",
+				brushMode: "single",
+				outOfBrush: { colorAlpha: .3 },
+				brushStyle: {
+					borderWidth: 1,
+					color: "rgba(120,140,180,0.3)",
+					borderColor: "rgba(120,140,180,0.8)"
+				}
+			},
+			tooltip: {
+				trigger: "axis",
+				axisPointer: { type: "shadow" },
+				formatter: (params) => {
+					const items = Array.isArray(params) ? params : [params];
+					const seenNames = /* @__PURE__ */ new Set();
+					const filteredParams = items.filter((param) => {
+						if (seenNames.has(param.seriesName)) return false;
+						seenNames.add(param.seriesName);
+						return true;
+					});
+					const first = filteredParams[0];
+					const ts = first?.value?.[0] ?? first?.axisValue;
+					return `${ts != null ? `<div style="font-weight:600;margin-bottom:4px;">${formatTimestamp(ts)}</div>` : ""}${filteredParams.map((param) => {
+						const value = param?.value?.[1];
+						const formatFn = tooltipValueFormat ?? yAxisTickLabelFormat;
+						return `${param.marker} ${param.seriesName}: <strong>${formatFn ? formatFn(value) : value}</strong>`;
+					}).join("<br/>")}`;
+				}
+			},
+			backgroundColor: "transparent",
+			toolbox: { show: false },
+			xAxis: {
+				name: xAxisName,
+				nameLocation: "middle",
+				nameGap: 30,
+				type: "time",
+				splitLine: { show: false },
+				axisLine: { show: false },
+				splitNumber: xAxisTickCount ?? 5,
+				...xAxisTickFormat && { axisLabel: { formatter: (value) => xAxisTickFormat(value) } }
+			},
+			yAxis: {
+				name: yAxisName,
+				nameLocation: "middle",
+				nameGap: 40,
+				type: "value",
+				axisTick: { show: true },
+				axisLabel: {
+					margin: 15,
+					...yAxisTickFormat && { formatter: (value) => yAxisTickFormat(value) }
+				},
+				splitLine: {
+					show: true,
+					lineStyle: {
+						type: "dashed",
+						width: 1
+					}
+				},
+				splitNumber: yAxisTickCount
+			},
+			grid: {
+				left: yAxisName ? 30 : 24,
+				right: 24,
+				top: 24,
+				bottom: xAxisName ? 30 : 24
+			},
+			series: transformSeries
+		};
+	}, [
+		data,
+		xAxisName,
+		xAxisTickCount,
+		xAxisTickFormat,
+		yAxisTickFormat,
+		yAxisTickLabelFormat,
+		yAxisName,
+		yAxisTickCount,
+		tooltipValueFormat,
+		incompleteBefore,
+		incompleteAfter,
+		type,
+		gradient,
+		echarts,
+		ariaDescription
+	]);
+	const events = useMemo(() => {
+		if (!onTimeRangeChange) return {};
+		return { brushend: (params) => {
+			const range = params.areas[0].coordRange;
+			onTimeRangeChange(range[0], range[1]);
+			chartRef.current?.dispatchAction({
+				type: "brush",
+				areas: []
+			});
+		} };
+	}, [onTimeRangeChange]);
+	const hasTimeRangeCallback = !!onTimeRangeChange;
+	useEffect(() => {
+		const chart = chartRef.current;
+		if (chart && hasTimeRangeCallback) {
+			chart.dispatchAction({
+				type: "takeGlobalCursor",
+				key: "brush",
+				brushOption: {
+					brushType: "lineX",
+					brushMode: "single"
+				}
+			});
+			return () => {
+				chart.dispatchAction({
+					type: "takeGlobalCursor",
+					key: "brush",
+					brushOption: { brushType: false }
+				});
+			};
+		}
+	}, [
+		chartRef,
+		hasTimeRangeCallback,
+		loading
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		style: { height },
+		children: [loading && /* @__PURE__ */ jsx(ChartWaveLoader, {
+			height,
+			isDarkMode
+		}), !loading && /* @__PURE__ */ jsx(Chart, {
+			echarts,
+			ref: chartRef,
+			options,
+			height,
+			isDarkMode,
+			onEvents: events
+		})]
+	});
+}
+/**
+* Animated sine-wave skeleton shown while `TimeseriesChart` is in `loading` state.
+* Renders multiple staggered wave paths that sweep continuously left-to-right,
+* mimicking the motion of live time-series data being drawn.
+*/
+function ChartWaveLoader({ height, isDarkMode }) {
+	const mid = height / 2;
+	const amp = Math.min(height * .12, 28);
+	const period = 400;
+	const steps = 120;
+	const points = [];
+	for (let i = 0; i <= steps; i++) {
+		const x = -period + i / steps * period * 3;
+		const y = mid + Math.sin(i / steps * 2 * Math.PI * 3) * amp;
+		points.push(`${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`);
+	}
+	const d = points.join(" ");
+	const strokeColor = isDarkMode ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		className: "absolute inset-0 overflow-hidden",
+		style: { height },
+		children: [/* @__PURE__ */ jsx("style", { children: `@keyframes sf-chart-wave{from{transform:translateX(0)}to{transform:translateX(${period}px)}}` }), /* @__PURE__ */ jsx("svg", {
+			width: "100%",
+			height,
+			viewBox: `0 0 ${period} ${height}`,
+			preserveAspectRatio: "none",
+			className: "w-full animate-pulse",
+			children: /* @__PURE__ */ jsx("path", {
+				d,
+				fill: "none",
+				stroke: strokeColor,
+				strokeWidth: "2",
+				style: {
+					animation: `sf-chart-wave 2.4s linear infinite`,
+					transformOrigin: "0 0"
+				}
+			})
+		})]
+	});
+}
+/**
+* Returns an `rgba(r, g, b, alpha)` string for any hex or rgb(a) color input,
+* replacing whatever opacity was already present with the given `alpha` (0–1).
+*
+* Handles:
+* - 6-digit hex:  `#RRGGBB`
+* - 8-digit hex:  `#RRGGBBAA`  ← strips existing alpha
+* - 3-digit hex:  `#RGB`
+* - `rgb(r, g, b)`
+* - `rgba(r, g, b, a)`  ← replaces existing alpha
+*/
+function colorWithOpacity(color, alpha) {
+	const a = Math.max(0, Math.min(1, alpha));
+	const rgbMatch = color.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+	if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;
+	let hex = color.replace(/^#/, "");
+	if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+	if (hex.length === 8) hex = hex.slice(0, 6);
+	return `rgba(${Number.parseInt(hex.slice(0, 2), 16)}, ${Number.parseInt(hex.slice(2, 4), 16)}, ${Number.parseInt(hex.slice(4, 6), 16)}, ${a})`;
+}
+/** Zero-pads a number to two digits (e.g. `5` → `"05"`) */
+function pad(n) {
+	return n.toString().padStart(2, "0");
+}
+/**
+* Formats a timestamp as `"YYYY-MM-DD HH:mm:ss"` for use in chart tooltips.
+* Accepts a Unix timestamp in milliseconds, an ISO date string, or a `Date` object.
+*/
+function formatTimestamp(ts) {
+	const d = new Date(ts);
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+//#endregion
+//#region src/components/chart/legend.tsx
+/**
+* Large legend item — stacked layout with a colored dot + series name on top
+* and a large value with an optional small unit below. Use for prominent
+* single-metric displays such as dashboard cards.
+*/
+function LargeItem({ color, value, name, unit, inactive }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex flex-col gap-2 min-w-42 py-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("size-2 rounded-full inline-block", { "opacity-50": inactive }),
+				style: { backgroundColor: color }
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("text-xs", { "opacity-50": inactive }),
+				children: name
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("text-lg font-medium leading-none", { "opacity-50": inactive }),
+				children: value
+			}), unit && /* @__PURE__ */ jsx("span", {
+				className: cn("text-xs text-sf-subtle leading-none", { "opacity-50": inactive }),
+				children: unit
+			})]
+		})]
+	});
+}
+/**
+* Small legend item — inline layout with a colored dot, series name, and value
+* on a single row. Use for compact legends below or beside a chart.
+*/
+function SmallItem({ color, value, name, inactive }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("size-2 rounded-full inline-block", { "opacity-50": inactive }),
+				style: { backgroundColor: color }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-xs", { "opacity-50": inactive }),
+				children: name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-xs font-medium", { "opacity-50": inactive }),
+				children: value
+			})
+		]
+	});
+}
+/**
+* ChartLegend — pre-built legend item components for use alongside a chart.
+*
+* - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends
+* - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards
+*
+* @example
+* ```tsx
+* <ChartLegend.SmallItem name="Requests" color="#086FFF" value="1,234" />
+* <ChartLegend.LargeItem name="Latency" color="#CF7EE9" value="42" unit="ms" inactive />
+* ```
+*/
+var ChartLegend = {
+	SmallItem,
+	LargeItem
+};
+//#endregion
+export { ChartPalette as i, TimeseriesChart as n, Chart as r, ChartLegend as t };
+
+//# sourceMappingURL=chart-Bes4MN3C.js.map