tembro 3.1.17 → 4.0.0

package/dist/src/components/charts/charts.js

@@ -1,306 +1,442 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
 import { Card as t, CardContent as n, CardDescription as r, CardHeader as i, CardTitle as a } from "../ui/card/index.js";
+import { StateView as o } from "../feedback/state-view.js";
 import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Area as l, AreaChart as u, Bar as d, BarChart as f, CartesianGrid as p, Cell as m, Line as h, LineChart as g, Pie as _, PieChart as v, ResponsiveContainer as y, Tooltip as b, XAxis as x, YAxis as S } from "recharts";
 //#region src/components/charts/charts.tsx
-var c = {
+var C = {
 	sm: 120,
-	md: 180,
-	lg: 260
+	md: 220,
+	lg: 320
 };
-function l(e, t = 1) {
-	return Math.max(...e, t);
-}
-function u(e, t) {
-	return !Number.isFinite(e) || t <= 0 ? 0 : Math.max(0, Math.min(e / t, 1));
-}
-function d(e, t) {
+function w(e, t) {
 	return t ?? `var(--color-chart-${e % 5 + 1}, var(--primary))`;
 }
-function f(e, t) {
-	return t ? t(e) : e.toLocaleString();
-}
-function p(e) {
-	return typeof e == "string" || typeof e == "number" ? String(e) : void 0;
+function T(e, t) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : t;
 }
-function m(e, t, n, r) {
-	let i = (r - 90) * Math.PI / 180;
-	return {
-		x: e + n * Math.cos(i),
-		y: t + n * Math.sin(i)
-	};
+function E(e, t) {
+	return t ? t(e) : e.toLocaleString();
 }
-function h(e, t, n, r, i) {
-	let a = m(e, t, n, i), o = m(e, t, n, r), s = i - r <= 180 ? "0" : "1";
-	return [
-		"M",
-		a.x,
-		a.y,
-		"A",
-		n,
-		n,
-		0,
-		s,
-		0,
-		o.x,
-		o.y
-	].join(" ");
+function D({ state: e, emptyLabel: t, height: n }) {
+	return e === "loading" ? /* @__PURE__ */ s(o, {
+		status: "loading",
+		loadingVariant: "skeleton",
+		variant: "plain",
+		size: "compact",
+		style: { minHeight: n }
+	}) : e === "empty" ? /* @__PURE__ */ s(o, {
+		status: "empty",
+		title: t,
+		description: null,
+		variant: "plain",
+		size: "compact",
+		style: { minHeight: n }
+	}) : null;
 }
-function g(e, t, n, r = 12) {
-	let i = l(e), a = Math.max(t - r * 2, 1), o = Math.max(n - r * 2, 1);
-	return e.length === 0 ? "" : e.map((t, n) => {
-		let s = r + (e.length === 1 ? a / 2 : n / (e.length - 1) * a), c = r + (1 - u(t, i)) * o;
-		return `${n === 0 ? "M" : "L"} ${s} ${c}`;
-	}).join(" ");
+function O({ data: e, valueFormatter: t, caption: n }) {
+	return /* @__PURE__ */ s("div", {
+		className: "sr-only",
+		children: /* @__PURE__ */ c("table", { children: [
+			/* @__PURE__ */ s("caption", { children: n }),
+			/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { children: [
+				/* @__PURE__ */ s("th", {
+					scope: "col",
+					children: "Label"
+				}),
+				/* @__PURE__ */ s("th", {
+					scope: "col",
+					children: "Value"
+				}),
+				/* @__PURE__ */ s("th", {
+					scope: "col",
+					children: "Description"
+				})
+			] }) }),
+			/* @__PURE__ */ s("tbody", { children: e.map((e, n) => /* @__PURE__ */ c("tr", { children: [
+				/* @__PURE__ */ s("th", {
+					scope: "row",
+					children: e.label
+				}),
+				/* @__PURE__ */ s("td", { children: E(e.value, t) }),
+				/* @__PURE__ */ s("td", { children: e.description })
+			] }, n)) })
+		] })
+	});
 }
-function _(e, t, n, r = 12) {
-	let i = g(e, t, n, r);
-	if (!i) return "";
-	let a = n - r;
-	return `${i} L ${e.length === 1 ? t / 2 : t - r} ${a} L ${e.length === 1 ? t / 2 : r} ${a} Z`;
+function k({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter: i }) {
+	return !e || !n?.length ? null : /* @__PURE__ */ c("div", {
+		"data-slot": "chart-tooltip",
+		className: "min-w-36 rounded-[var(--radius-md)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-lg backdrop-blur",
+		children: [t === void 0 ? null : /* @__PURE__ */ s("div", {
+			className: "mb-2 text-xs font-semibold text-muted-foreground",
+			children: i ? i(t) : t
+		}), /* @__PURE__ */ s("div", {
+			className: "grid gap-1.5",
+			children: n.map((e, t) => {
+				let n = typeof e.value == "number" ? e.value : Number(e.value ?? 0);
+				return /* @__PURE__ */ c("div", {
+					className: "flex min-w-0 items-center gap-2 text-sm",
+					children: [
+						/* @__PURE__ */ s("span", {
+							className: "size-2.5 shrink-0 rounded-sm",
+							style: { background: e.color }
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: e.name ?? "Value"
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "font-semibold tabular-nums",
+							children: E(n, r)
+						})
+					]
+				}, `${e.name ?? "value"}-${t}`);
+			})
+		})]
+	});
 }
-function v({ title: c, description: l, action: u, state: d = "ready", emptyLabel: f = "No data available.", className: p, children: m, ...h }) {
-	return /* @__PURE__ */ s(t, {
+function A({ title: o, description: l, action: u, state: d = "ready", emptyLabel: f = "No data available.", className: p, children: m, ...h }) {
+	return /* @__PURE__ */ c(t, {
 		"data-slot": "chart-frame",
-		className: e("border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", p),
+		"data-state": d,
+		className: e("min-w-0", p),
 		...h,
-		children: [(c || l || u) && /* @__PURE__ */ s(i, {
-			className: "flex flex-row items-start justify-between gap-3",
-			children: [/* @__PURE__ */ s("div", {
-				className: "grid gap-1",
-				children: [c && /* @__PURE__ */ o(a, { children: c }), l && /* @__PURE__ */ o(r, { children: l })]
-			}), u]
-		}), /* @__PURE__ */ s(n, { children: [
-			d === "loading" ? /* @__PURE__ */ s("div", {
-				className: "grid gap-3",
-				children: [/* @__PURE__ */ o("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }), /* @__PURE__ */ o("div", { className: "h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" })]
-			}) : null,
-			d === "empty" ? /* @__PURE__ */ o("div", {
-				className: "rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground",
-				children: f
-			}) : null,
-			d === "ready" ? m : null
-		] })]
+		children: [o || l || u ? /* @__PURE__ */ c(i, {
+			className: "flex-row items-start justify-between gap-3",
+			children: [/* @__PURE__ */ c("div", {
+				className: "min-w-0 space-y-1",
+				children: [o ? /* @__PURE__ */ s(a, { children: o }) : null, l ? /* @__PURE__ */ s(r, { children: l }) : null]
+			}), u ? /* @__PURE__ */ s("div", {
+				className: "shrink-0",
+				children: u
+			}) : null]
+		}) : null, /* @__PURE__ */ s(n, { children: d === "ready" ? m : /* @__PURE__ */ s(D, {
+			state: d,
+			emptyLabel: f,
+			height: 180
+		}) })]
 	});
 }
-function y({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a = !0, valueFormatter: m, state: h = "ready", emptyLabel: g = "No chart data.", className: _, barClassName: v, ...y }) {
-	let b = t.map((e) => e.value), x = r ?? l(b.map((e) => Math.abs(e))), S = c[n], C = Math.max(S - (a ? 28 : 0) - (i ? 24 : 0), 32);
-	return h === "loading" ? /* @__PURE__ */ o("div", {
-		"data-slot": "bar-chart",
-		className: e("grid gap-3", _),
-		...y,
-		children: /* @__PURE__ */ o("div", { className: "h-40 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" })
-	}) : h === "empty" || t.length === 0 ? /* @__PURE__ */ o("div", {
-		"data-slot": "bar-chart",
-		className: e("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", _),
-		...y,
-		children: g
-	}) : /* @__PURE__ */ o("div", {
+function j({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a = !1, showGrid: o = !0, showTooltip: l = !0, valueFormatter: u, state: h = "ready", emptyLabel: g = "No chart data.", barClassName: _, domain: v, ariaLabel: A = "Bar chart", className: j, ...M }) {
+	let N = C[n], P = h === "ready" && t.length === 0 ? "empty" : h;
+	if (P !== "ready") return /* @__PURE__ */ s(D, {
+		state: P,
+		emptyLabel: g,
+		height: N
+	});
+	let F = t.map((e, t) => ({
+		name: T(e.label, `Item ${t + 1}`),
+		value: e.value,
+		fill: w(t, e.color),
+		originalLabel: e.label,
+		description: e.description
+	})), I = v ?? (r === void 0 ? ["auto", "auto"] : ["auto", r]);
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "bar-chart",
-		className: e("grid gap-3", _),
-		...y,
-		children: /* @__PURE__ */ o("div", {
-			className: "flex items-end gap-2",
-			style: { minHeight: S },
-			children: t.map((t, n) => {
-				let r = u(Math.abs(t.value), x), c = t.value < 0, l = p(t.label), h = Math.max(Math.round(r * C), Math.abs(t.value) > 0 ? 3 : 0);
-				return /* @__PURE__ */ s("div", {
-					className: "flex min-w-0 flex-1 flex-col items-center gap-2",
-					title: l ? `${l}: ${t.value}` : void 0,
+		role: "img",
+		"aria-label": A,
+		className: e("min-w-0", j),
+		...M,
+		children: [/* @__PURE__ */ s("div", {
+			style: { height: N },
+			children: /* @__PURE__ */ s(y, {
+				width: "100%",
+				height: "100%",
+				minWidth: 1,
+				minHeight: 1,
+				children: /* @__PURE__ */ c(f, {
+					data: F,
+					margin: {
+						top: a ? 20 : 8,
+						right: 8,
+						bottom: i ? 8 : 0,
+						left: 0
+					},
 					children: [
-						a && /* @__PURE__ */ o("div", {
-							className: "text-xs font-medium text-muted-foreground",
-							children: f(t.value, m)
+						o ? /* @__PURE__ */ s(p, {
+							vertical: !1,
+							stroke: "var(--border)",
+							strokeDasharray: "4 6"
+						}) : null,
+						/* @__PURE__ */ s(x, {
+							dataKey: "name",
+							hide: !i,
+							axisLine: !1,
+							tickLine: !1,
+							tick: {
+								fill: "var(--muted-foreground)",
+								fontSize: 12
+							},
+							interval: "preserveStartEnd"
 						}),
-						/* @__PURE__ */ o("div", {
-							className: "flex w-full items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1",
-							style: { height: C },
-							children: /* @__PURE__ */ o("div", {
-								className: e("w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all", v),
-								style: {
-									height: h,
-									background: d(n, t.color),
-									opacity: c ? .72 : 1
-								}
-							})
+						/* @__PURE__ */ s(S, {
+							hide: !0,
+							domain: I
 						}),
-						i && /* @__PURE__ */ o("div", {
-							className: "max-w-full truncate text-xs text-muted-foreground",
-							children: t.label
+						l ? /* @__PURE__ */ s(b, {
+							cursor: {
+								fill: "var(--muted)",
+								opacity: .35
+							},
+							content: /* @__PURE__ */ s(k, { valueFormatter: u })
+						}) : null,
+						/* @__PURE__ */ s(d, {
+							dataKey: "value",
+							name: "Value",
+							radius: [
+								6,
+								6,
+								2,
+								2
+							],
+							className: _,
+							isAnimationActive: !1,
+							label: a ? {
+								position: "top",
+								fill: "var(--muted-foreground)",
+								fontSize: 11,
+								formatter: (e) => String(E(Number(e), u))
+							} : !1,
+							children: F.map((e) => /* @__PURE__ */ s(m, { fill: e.fill }, e.name))
 						})
 					]
-				}, n);
+				})
 			})
-		})
+		}), /* @__PURE__ */ s(O, {
+			data: t,
+			valueFormatter: u,
+			caption: A
+		})]
 	});
 }
-function b({ values: t, size: n = "md", width: r = 560, showArea: i = !1, showGrid: a = !0, labels: d, valueFormatter: m, stroke: h = "var(--primary)", state: v = "ready", emptyLabel: y = "No line data.", className: b, style: x, ...S }) {
-	let C = c[n], w = g(t, r, C), T = _(t, r, C), E = l(t);
-	return v === "loading" ? /* @__PURE__ */ o("div", { className: e("h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70", b) }) : v === "empty" || t.length === 0 ? /* @__PURE__ */ o("div", {
-		className: e("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", b),
-		children: y
-	}) : /* @__PURE__ */ s("svg", {
-		"data-slot": "line-chart",
-		viewBox: `0 0 ${r} ${C}`,
-		className: e("w-full overflow-visible", b),
-		style: {
-			height: C,
-			...x
-		},
+function M({ values: t, size: n = "md", width: r = 560, height: i, showArea: a = !1, showGrid: o = !0, showAxis: d = !1, showTooltip: f = !0, labels: m, valueFormatter: _, stroke: v = "var(--primary)", state: w = "ready", emptyLabel: E = "No line data.", domain: A = ["auto", "auto"], ariaLabel: j = a ? "Area chart" : "Line chart", className: M, style: N, ...P }) {
+	let F = i ?? C[n], I = w === "ready" && t.length === 0 ? "empty" : w;
+	if (I !== "ready") return /* @__PURE__ */ s(D, {
+		state: I,
+		emptyLabel: E,
+		height: F
+	});
+	let L = t.map((e, t) => ({
+		name: T(m?.[t], String(t + 1)),
+		value: e,
+		originalLabel: m?.[t] ?? String(t + 1)
+	})), R = a ? u : g;
+	return /* @__PURE__ */ c("div", {
+		"data-slot": a ? "area-chart" : "line-chart",
 		role: "img",
-		...S,
-		children: [
-			a && [
-				.25,
-				.5,
-				.75
-			].map((e) => /* @__PURE__ */ o("line", {
-				x1: "12",
-				x2: r - 12,
-				y1: 12 + e * (C - 24),
-				y2: 12 + e * (C - 24),
-				stroke: "var(--border)",
-				strokeDasharray: "4 6",
-				opacity: "0.7"
-			}, e)),
-			i && /* @__PURE__ */ o("path", {
-				d: T,
-				fill: "var(--primary)",
-				opacity: "0.12"
-			}),
-			/* @__PURE__ */ o("path", {
-				d: w,
-				fill: "none",
-				stroke: h,
-				strokeWidth: "3",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
-			}),
-			t.map((e, n) => {
-				let i = 12 + (t.length === 1 ? (r - 24) / 2 : n / (t.length - 1) * (r - 24)), a = 12 + (1 - u(e, E)) * (C - 24), s = d?.[n], c = s == null ? `${e}` : `${p(s) ?? "Value"}: ${e}`;
-				return /* @__PURE__ */ o("circle", {
-					cx: i,
-					cy: a,
-					r: "3.5",
-					fill: h,
-					children: /* @__PURE__ */ o("title", { children: m ? `${s ?? "Value"}: ${f(e, m)}` : c })
-				}, n);
+		"aria-label": j,
+		"data-chart-width": r,
+		className: e("min-w-0", M),
+		style: N,
+		...P,
+		children: [/* @__PURE__ */ s("div", {
+			style: { height: F },
+			children: /* @__PURE__ */ s(y, {
+				width: "100%",
+				height: "100%",
+				minWidth: 1,
+				minHeight: 1,
+				children: /* @__PURE__ */ c(R, {
+					data: L,
+					margin: {
+						top: 10,
+						right: 10,
+						bottom: d ? 8 : 0,
+						left: d ? -12 : 0
+					},
+					children: [
+						o ? /* @__PURE__ */ s(p, {
+							vertical: !1,
+							stroke: "var(--border)",
+							strokeDasharray: "4 6"
+						}) : null,
+						/* @__PURE__ */ s(x, {
+							dataKey: "name",
+							hide: !d,
+							axisLine: !1,
+							tickLine: !1,
+							tick: {
+								fill: "var(--muted-foreground)",
+								fontSize: 12
+							},
+							interval: "preserveStartEnd"
+						}),
+						/* @__PURE__ */ s(S, {
+							hide: !d,
+							domain: A,
+							axisLine: !1,
+							tickLine: !1,
+							width: 44,
+							tick: {
+								fill: "var(--muted-foreground)",
+								fontSize: 11
+							}
+						}),
+						f ? /* @__PURE__ */ s(b, { content: /* @__PURE__ */ s(k, { valueFormatter: _ }) }) : null,
+						a ? /* @__PURE__ */ s(l, {
+							type: "monotone",
+							dataKey: "value",
+							name: "Value",
+							stroke: v,
+							strokeWidth: 2.5,
+							fill: v,
+							fillOpacity: .14,
+							activeDot: { r: 5 },
+							isAnimationActive: !1
+						}) : /* @__PURE__ */ s(h, {
+							type: "monotone",
+							dataKey: "value",
+							name: "Value",
+							stroke: v,
+							strokeWidth: 2.5,
+							dot: {
+								r: 3.5,
+								fill: v
+							},
+							activeDot: { r: 5 },
+							isAnimationActive: !1
+						})
+					]
+				})
 			})
-		]
+		}), /* @__PURE__ */ s(O, {
+			data: t.map((e, t) => ({
+				label: m?.[t] ?? t + 1,
+				value: e
+			})),
+			valueFormatter: _,
+			caption: j
+		})]
 	});
 }
-function x(e) {
-	return /* @__PURE__ */ o(b, {
+function N(e) {
+	return /* @__PURE__ */ s(M, {
 		showArea: !0,
 		...e
 	});
 }
-function S({ values: t, positive: n = !0, stroke: r, className: i, ...a }) {
-	return /* @__PURE__ */ o(b, {
+function P({ values: t, positive: n = !0, stroke: r, className: i, showTooltip: a = !1, ...o }) {
+	return /* @__PURE__ */ s(M, {
 		values: t,
-		width: 180,
 		size: "sm",
-		stroke: r ?? (n ? "var(--primary)" : "var(--destructive)"),
+		stroke: r ?? (n ? "var(--aui-success,var(--primary))" : "var(--destructive)"),
+		showGrid: !1,
+		showAxis: !1,
+		showTooltip: a,
 		className: e("max-w-44", i),
-		"aria-label": "Sparkline",
-		...a
+		ariaLabel: "Sparkline",
+		...o
 	});
 }
-function C({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, state: c = "ready", emptyLabel: l = "No distribution data.", className: u, ...f }) {
-	let m = t.reduce((e, t) => e + Math.max(t.value, 0), 0), g = n / 2 - r, _ = t.map((e, n) => {
-		let r = Math.max(e.value, 0), i = t.slice(0, n).reduce((e, t) => e + Math.max(t.value, 0), 0);
-		return {
-			item: e,
-			start: i,
-			end: m > 0 ? i + r / m * 360 : i
-		};
+function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, state: o = "ready", emptyLabel: l = "No distribution data.", showTooltip: u = !0, valueFormatter: d, ariaLabel: f = "Donut chart", className: p, style: h, ...g }) {
+	let x = o === "ready" && t.length === 0 ? "empty" : o;
+	if (x !== "ready") return /* @__PURE__ */ s(D, {
+		state: x,
+		emptyLabel: l,
+		height: n
 	});
-	return c === "loading" ? /* @__PURE__ */ o("div", { className: e("h-44 w-full max-w-48 animate-pulse rounded-full bg-muted/70", u) }) : c === "empty" || t.length === 0 || m <= 0 ? /* @__PURE__ */ o("div", {
-		className: e("flex h-44 w-full max-w-48 items-center justify-center rounded-full border border-dashed border-border/70 px-4 text-center text-sm text-muted-foreground", u),
-		children: l
-	}) : /* @__PURE__ */ s("svg", {
+	let S = t.map((e, t) => ({
+		name: T(e.label, `Item ${t + 1}`),
+		value: Math.max(0, e.value),
+		fill: w(t, e.color),
+		description: e.description
+	})), C = Math.max(8, n / 2 - 8);
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "donut-chart",
-		viewBox: `0 0 ${n} ${n}`,
-		className: e("h-auto w-full max-w-48", u),
 		role: "img",
-		...f,
+		"aria-label": f,
+		className: e("relative inline-grid place-items-center", p),
+		style: {
+			width: n,
+			height: n,
+			...h
+		},
+		...g,
 		children: [
-			/* @__PURE__ */ o("circle", {
-				cx: n / 2,
-				cy: n / 2,
-				r: g,
-				fill: "none",
-				stroke: "var(--muted)",
-				strokeWidth: r
+			/* @__PURE__ */ s(y, {
+				width: "100%",
+				height: "100%",
+				minWidth: 1,
+				minHeight: 1,
+				children: /* @__PURE__ */ c(v, { children: [u ? /* @__PURE__ */ s(b, { content: /* @__PURE__ */ s(k, { valueFormatter: d }) }) : null, /* @__PURE__ */ s(_, {
+					data: S,
+					dataKey: "value",
+					nameKey: "name",
+					cx: "50%",
+					cy: "50%",
+					innerRadius: Math.max(0, C - r),
+					outerRadius: C,
+					paddingAngle: 2,
+					stroke: "var(--background)",
+					strokeWidth: 2,
+					isAnimationActive: !1,
+					children: S.map((e) => /* @__PURE__ */ s(m, { fill: e.fill }, e.name))
+				})] })
 			}),
-			_.map(({ item: e, start: t, end: i }, a) => /* @__PURE__ */ o("path", {
-				d: h(n / 2, n / 2, g, t, i),
-				fill: "none",
-				stroke: d(a, e.color),
-				strokeWidth: r,
-				strokeLinecap: "round",
-				children: /* @__PURE__ */ o("title", { children: `${p(e.label) ?? "Segment"}: ${e.value}` })
-			}, a)),
-			(a || i) && /* @__PURE__ */ s("text", {
-				x: "50%",
-				y: "50%",
-				textAnchor: "middle",
-				dominantBaseline: "middle",
-				fill: "var(--foreground)",
-				children: [a && /* @__PURE__ */ o("tspan", {
-					x: "50%",
-					dy: i ? "-0.2em" : "0",
-					className: "text-lg font-semibold",
+			a || i ? /* @__PURE__ */ c("div", {
+				className: "pointer-events-none absolute inset-0 grid place-content-center text-center",
+				children: [/* @__PURE__ */ s("div", {
+					className: "text-xl font-semibold tabular-nums",
 					children: a
-				}), i && /* @__PURE__ */ o("tspan", {
-					x: "50%",
-					dy: "1.3em",
-					className: "text-xs fill-muted-foreground",
+				}), /* @__PURE__ */ s("div", {
+					className: "text-xs text-muted-foreground",
 					children: i
 				})]
+			}) : null,
+			/* @__PURE__ */ s(O, {
+				data: t,
+				valueFormatter: d,
+				caption: f
 			})
 		]
 	});
 }
-function w({ data: t, className: n, ...r }) {
-	return /* @__PURE__ */ o("div", {
+function I({ data: t, className: n, ...r }) {
+	return /* @__PURE__ */ s("div", {
 		"data-slot": "chart-legend",
-		className: e("flex flex-wrap gap-3 text-xs text-muted-foreground", n),
+		className: e("flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground", n),
 		...r,
-		children: t.map((e, t) => /* @__PURE__ */ s("div", {
-			className: "inline-flex items-center gap-1.5",
-			children: [/* @__PURE__ */ o("span", {
-				className: "size-2 rounded-full bg-primary",
-				style: { background: d(t, e.color) }
-			}), /* @__PURE__ */ o("span", { children: e.label })]
+		children: t.map((e, t) => /* @__PURE__ */ c("div", {
+			className: "inline-flex min-w-0 items-center gap-2",
+			children: [/* @__PURE__ */ s("span", {
+				className: "size-2.5 shrink-0 rounded-sm",
+				style: { background: w(t, e.color) }
+			}), /* @__PURE__ */ s("span", {
+				className: "truncate",
+				children: e.label
+			})]
 		}, t))
 	});
 }
-function T({ label: t, value: n, change: r, positive: i = !0, values: a, className: c, ...l }) {
-	return /* @__PURE__ */ s("div", {
+function L({ label: t, value: n, change: r, positive: i = !0, values: a, className: o, ...l }) {
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "metric-trend",
-		className: e("grid gap-3 rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 p-4 shadow-sm ring-1 ring-foreground/4", c),
+		className: e("grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4", o),
 		...l,
-		children: [/* @__PURE__ */ s("div", {
-			className: "flex items-start justify-between gap-3",
-			children: [/* @__PURE__ */ s("div", {
-				className: "grid gap-1",
-				children: [/* @__PURE__ */ o("div", {
+		children: [/* @__PURE__ */ c("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ s("div", {
 					className: "text-sm text-muted-foreground",
 					children: t
-				}), /* @__PURE__ */ o("div", {
-					className: "text-2xl font-semibold tracking-tight",
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
 					children: n
-				})]
-			}), r && /* @__PURE__ */ o("div", {
-				className: e("rounded-full px-2 py-1 text-xs font-medium", i ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive"),
-				children: r
-			})]
-		}), a && /* @__PURE__ */ o(S, {
+				}),
+				r ? /* @__PURE__ */ s("div", {
+					className: e("mt-1 text-xs font-medium", i ? "text-[color:var(--aui-success,var(--primary))]" : "text-destructive"),
+					children: r
+				}) : null
+			]
+		}), a?.length ? /* @__PURE__ */ s(P, {
 			values: a,
 			positive: i
-		})]
+		}) : null]
 	});
 }
 //#endregion
-export { x as AreaChart, y as BarChart, v as ChartFrame, w as ChartLegend, C as DonutChart, b as LineChart, T as MetricTrend, S as Sparkline };
+export { N as AreaChart, j as BarChart, A as ChartFrame, I as ChartLegend, k as ChartTooltipContent, F as DonutChart, M as LineChart, L as MetricTrend, P as Sparkline };