tembro 4.0.0 → 4.1.0

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

@@ -2,32 +2,32 @@
 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 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";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Area as u, AreaChart as d, Bar as f, BarChart as p, CartesianGrid as m, Cell as h, Line as g, LineChart as _, Pie as v, PieChart as y, ResponsiveContainer as b, Tooltip as x, XAxis as S, YAxis as C } from "recharts";
 //#region src/components/charts/charts.tsx
-var C = {
+var w = {
 	sm: 120,
 	md: 220,
 	lg: 320
 };
-function w(e, t) {
+function T(e, t) {
 	return t ?? `var(--color-chart-${e % 5 + 1}, var(--primary))`;
 }
-function T(e, t) {
+function E(e, t) {
 	return typeof e == "string" || typeof e == "number" ? String(e) : t;
 }
-function E(e, t) {
+function D(e, t) {
 	return t ? t(e) : e.toLocaleString();
 }
-function D({ state: e, emptyLabel: t, height: n }) {
-	return e === "loading" ? /* @__PURE__ */ s(o, {
+function O({ state: e, emptyLabel: t, height: n }) {
+	return e === "loading" ? /* @__PURE__ */ c(o, {
 		status: "loading",
 		loadingVariant: "skeleton",
 		variant: "plain",
 		size: "compact",
 		style: { minHeight: n }
-	}) : e === "empty" ? /* @__PURE__ */ s(o, {
+	}) : e === "empty" ? /* @__PURE__ */ c(o, {
 		status: "empty",
 		title: t,
 		description: null,
@@ -36,61 +36,80 @@ function D({ state: e, emptyLabel: t, height: n }) {
 		style: { minHeight: n }
 	}) : null;
 }
-function O({ data: e, valueFormatter: t, caption: n }) {
-	return /* @__PURE__ */ s("div", {
+function k({ data: e, valueFormatter: t, caption: n }) {
+	return /* @__PURE__ */ c("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", {
+		children: /* @__PURE__ */ l("table", { children: [
+			/* @__PURE__ */ c("caption", { children: n }),
+			/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ l("tr", { children: [
+				/* @__PURE__ */ c("th", {
 					scope: "col",
 					children: "Label"
 				}),
-				/* @__PURE__ */ s("th", {
+				/* @__PURE__ */ c("th", {
 					scope: "col",
 					children: "Value"
 				}),
-				/* @__PURE__ */ s("th", {
+				/* @__PURE__ */ c("th", {
 					scope: "col",
 					children: "Description"
 				})
 			] }) }),
-			/* @__PURE__ */ s("tbody", { children: e.map((e, n) => /* @__PURE__ */ c("tr", { children: [
-				/* @__PURE__ */ s("th", {
+			/* @__PURE__ */ c("tbody", { children: e.map((e, n) => /* @__PURE__ */ l("tr", { children: [
+				/* @__PURE__ */ c("th", {
 					scope: "row",
 					children: e.label
 				}),
-				/* @__PURE__ */ s("td", { children: E(e.value, t) }),
-				/* @__PURE__ */ s("td", { children: e.description })
+				/* @__PURE__ */ c("td", { children: D(e.value, t) }),
+				/* @__PURE__ */ c("td", { children: e.description })
 			] }, n)) })
 		] })
 	});
 }
-function k({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter: i }) {
-	return !e || !n?.length ? null : /* @__PURE__ */ c("div", {
+function A({ labels: e, series: t, valueFormatter: n, caption: r }) {
+	return /* @__PURE__ */ c("div", {
+		className: "sr-only",
+		children: /* @__PURE__ */ l("table", { children: [
+			/* @__PURE__ */ c("caption", { children: r }),
+			/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ l("tr", { children: [/* @__PURE__ */ c("th", {
+				scope: "col",
+				children: "Label"
+			}), t.map((e) => /* @__PURE__ */ c("th", {
+				scope: "col",
+				children: e.label
+			}, e.key))] }) }),
+			/* @__PURE__ */ c("tbody", { children: e.map((e, r) => /* @__PURE__ */ l("tr", { children: [/* @__PURE__ */ c("th", {
+				scope: "row",
+				children: e
+			}), t.map((e) => /* @__PURE__ */ c("td", { children: D(e.data[r] ?? 0, n) }, e.key))] }, r)) })
+		] })
+	});
+}
+function j({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter: i }) {
+	return !e || !n?.length ? null : /* @__PURE__ */ l("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", {
+		children: [t === void 0 ? null : /* @__PURE__ */ c("div", {
 			className: "mb-2 text-xs font-semibold text-muted-foreground",
 			children: i ? i(t) : t
-		}), /* @__PURE__ */ s("div", {
+		}), /* @__PURE__ */ c("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", {
+				return /* @__PURE__ */ l("div", {
 					className: "flex min-w-0 items-center gap-2 text-sm",
 					children: [
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "size-2.5 shrink-0 rounded-sm",
 							style: { background: e.color }
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "min-w-0 flex-1 truncate",
 							children: e.name ?? "Value"
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "font-semibold tabular-nums",
-							children: E(n, r)
+							children: D(n, r)
 						})
 					]
 				}, `${e.name ?? "value"}-${t}`);
@@ -98,228 +117,300 @@ function k({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter:
 		})]
 	});
 }
-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, {
+function M({ title: o, description: s, action: u, state: d = "ready", emptyLabel: f = "No data available.", className: p, children: m, ...h }) {
+	return /* @__PURE__ */ l(t, {
 		"data-slot": "chart-frame",
 		"data-state": d,
 		className: e("min-w-0", p),
 		...h,
-		children: [o || l || u ? /* @__PURE__ */ c(i, {
+		children: [o || s || u ? /* @__PURE__ */ l(i, {
 			className: "flex-row items-start justify-between gap-3",
-			children: [/* @__PURE__ */ c("div", {
+			children: [/* @__PURE__ */ l("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", {
+				children: [o ? /* @__PURE__ */ c(a, { children: o }) : null, s ? /* @__PURE__ */ c(r, { children: s }) : null]
+			}), u ? /* @__PURE__ */ c("div", {
 				className: "shrink-0",
 				children: u
 			}) : null]
-		}) : null, /* @__PURE__ */ s(n, { children: d === "ready" ? m : /* @__PURE__ */ s(D, {
+		}) : null, /* @__PURE__ */ c(n, { children: d === "ready" ? m : /* @__PURE__ */ c(O, {
 			state: d,
 			emptyLabel: f,
 			height: 180
 		}) })]
 	});
 }
-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
+function N({ data: t = [], series: n, size: r = "md", max: i, showLabels: a = !0, showValues: o = !1, showGrid: s = !0, showTooltip: u = !0, valueFormatter: d, state: g = "ready", emptyLabel: _ = "No chart data.", barClassName: v, domain: y, ariaLabel: M = "Bar chart", stacked: N = !1, showLegend: P = !!n?.length, barRadius: F = 6, className: I, ...L }) {
+	let z = w[r], B = n?.length ? n : [{
+		key: "value",
+		label: "Value",
+		data: t.map((e) => e.value)
+	}], V = Math.max(t.length, ...B.map((e) => e.data.length)), H = g === "ready" && V === 0 ? "empty" : g;
+	if (H !== "ready") return /* @__PURE__ */ c(O, {
+		state: H,
+		emptyLabel: _,
+		height: z
 	});
-	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", {
+	let U = Array.from({ length: V }, (e, n) => t[n]?.label ?? `Item ${n + 1}`), W = U.map((e, t) => Object.fromEntries([
+		["name", E(e, `Item ${t + 1}`)],
+		["originalLabel", e],
+		...B.map((e) => [e.key, e.data[t] ?? 0])
+	])), G = y ?? (i === void 0 ? ["auto", "auto"] : ["auto", i]);
+	return /* @__PURE__ */ l("div", {
 		"data-slot": "bar-chart",
 		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: [
-						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__ */ s(S, {
-							hide: !0,
-							domain: I
-						}),
-						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))
-						})
-					]
+		"aria-label": M,
+		className: e("min-w-0", I),
+		...L,
+		children: [
+			/* @__PURE__ */ c("div", {
+				style: { height: z },
+				children: /* @__PURE__ */ c(b, {
+					width: "100%",
+					height: "100%",
+					minWidth: 1,
+					minHeight: 1,
+					children: /* @__PURE__ */ l(p, {
+						data: W,
+						margin: {
+							top: o ? 20 : 8,
+							right: 8,
+							bottom: a ? 8 : 0,
+							left: 0
+						},
+						children: [
+							s ? /* @__PURE__ */ c(m, {
+								vertical: !1,
+								stroke: "var(--border)",
+								strokeDasharray: "4 6"
+							}) : null,
+							/* @__PURE__ */ c(S, {
+								dataKey: "name",
+								hide: !a,
+								axisLine: !1,
+								tickLine: !1,
+								tick: {
+									fill: "var(--muted-foreground)",
+									fontSize: 12
+								},
+								interval: "preserveStartEnd"
+							}),
+							/* @__PURE__ */ c(C, {
+								hide: !0,
+								domain: G
+							}),
+							u ? /* @__PURE__ */ c(x, {
+								cursor: {
+									fill: "var(--muted)",
+									opacity: .35
+								},
+								content: /* @__PURE__ */ c(j, { valueFormatter: d })
+							}) : null,
+							B.map((e, r) => /* @__PURE__ */ c(f, {
+								dataKey: e.key,
+								name: E(e.label, e.key),
+								fill: T(r, e.color),
+								stackId: N ? "total" : void 0,
+								radius: [
+									F,
+									F,
+									2,
+									2
+								],
+								className: v,
+								isAnimationActive: !1,
+								label: o && (!N || r === B.length - 1) ? {
+									position: "top",
+									fill: "var(--muted-foreground)",
+									fontSize: 11,
+									formatter: (e) => String(D(Number(e), d))
+								} : !1,
+								children: n?.length ? null : t.map((e, t) => /* @__PURE__ */ c(h, { fill: T(t, e.color) }, t))
+							}, e.key))
+						]
+					})
 				})
+			}),
+			P && B.length > 1 ? /* @__PURE__ */ c(R, {
+				className: "mt-3",
+				data: B.map((e, t) => ({
+					label: e.label,
+					value: 0,
+					color: T(t, e.color)
+				}))
+			}) : null,
+			n?.length ? /* @__PURE__ */ c(A, {
+				labels: U,
+				series: B,
+				valueFormatter: d,
+				caption: M
+			}) : /* @__PURE__ */ c(k, {
+				data: t,
+				valueFormatter: d,
+				caption: M
 			})
-		}), /* @__PURE__ */ s(O, {
-			data: t,
-			valueFormatter: u,
-			caption: A
-		})]
+		]
 	});
 }
-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
+function P({ values: t = [], series: n, size: r = "md", width: i = 560, height: a, showArea: o = !1, showGrid: f = !0, showAxis: p = !1, showTooltip: h = !0, labels: v, valueFormatter: y, stroke: D = "var(--primary)", state: k = "ready", emptyLabel: M = "No line data.", domain: N = ["auto", "auto"], ariaLabel: P = o ? "Area chart" : "Line chart", curve: F = "monotone", showDots: I = !o, showLegend: L = !!n?.length, gradient: z = o, strokeWidth: B = 2.5, className: V, style: H, ...U }) {
+	let W = a ?? w[r], G = s.useId().replace(/:/g, ""), K = n?.length ? n : [{
+		key: "value",
+		label: "Value",
+		data: t,
+		color: D
+	}], q = Math.max(...K.map((e) => e.data.length), 0), J = k === "ready" && q === 0 ? "empty" : k;
+	if (J !== "ready") return /* @__PURE__ */ c(O, {
+		state: J,
+		emptyLabel: M,
+		height: W
 	});
-	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",
+	let Y = Array.from({ length: q }, (e, t) => v?.[t] ?? String(t + 1)), X = Y.map((e, t) => Object.fromEntries([
+		["name", E(e, String(t + 1))],
+		["originalLabel", e],
+		...K.map((e) => [e.key, e.data[t] ?? 0])
+	])), Z = o ? d : _;
+	return /* @__PURE__ */ l("div", {
+		"data-slot": o ? "area-chart" : "line-chart",
 		role: "img",
-		"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
-						})
-					]
+		"aria-label": P,
+		"data-chart-width": i,
+		className: e("min-w-0", V),
+		style: H,
+		...U,
+		children: [
+			/* @__PURE__ */ c("div", {
+				style: { height: W },
+				children: /* @__PURE__ */ c(b, {
+					width: "100%",
+					height: "100%",
+					minWidth: 1,
+					minHeight: 1,
+					children: /* @__PURE__ */ l(Z, {
+						data: X,
+						margin: {
+							top: 10,
+							right: 10,
+							bottom: p ? 8 : 0,
+							left: p ? -12 : 0
+						},
+						children: [
+							o && z ? /* @__PURE__ */ c("defs", { children: K.map((e, t) => {
+								let n = T(t, e.color);
+								return /* @__PURE__ */ l("linearGradient", {
+									id: `${G}-${e.key}`,
+									x1: "0",
+									y1: "0",
+									x2: "0",
+									y2: "1",
+									children: [/* @__PURE__ */ c("stop", {
+										offset: "0%",
+										stopColor: n,
+										stopOpacity: .34
+									}), /* @__PURE__ */ c("stop", {
+										offset: "92%",
+										stopColor: n,
+										stopOpacity: .02
+									})]
+								}, e.key);
+							}) }) : null,
+							f ? /* @__PURE__ */ c(m, {
+								vertical: !1,
+								stroke: "var(--border)",
+								strokeDasharray: "4 6"
+							}) : null,
+							/* @__PURE__ */ c(S, {
+								dataKey: "name",
+								hide: !p,
+								axisLine: !1,
+								tickLine: !1,
+								tick: {
+									fill: "var(--muted-foreground)",
+									fontSize: 12
+								},
+								interval: "preserveStartEnd"
+							}),
+							/* @__PURE__ */ c(C, {
+								hide: !p,
+								domain: N,
+								axisLine: !1,
+								tickLine: !1,
+								width: 44,
+								tick: {
+									fill: "var(--muted-foreground)",
+									fontSize: 11
+								}
+							}),
+							h ? /* @__PURE__ */ c(x, { content: /* @__PURE__ */ c(j, { valueFormatter: y }) }) : null,
+							K.map((e, t) => {
+								let n = T(t, e.color);
+								return o ? /* @__PURE__ */ c(u, {
+									type: F,
+									dataKey: e.key,
+									name: E(e.label, e.key),
+									stroke: n,
+									strokeWidth: B,
+									fill: z ? `url(#${G}-${e.key})` : n,
+									fillOpacity: z ? 1 : .12,
+									dot: I ? {
+										r: 3,
+										fill: n,
+										strokeWidth: 2,
+										stroke: "var(--background)"
+									} : !1,
+									activeDot: {
+										r: 5,
+										strokeWidth: 2,
+										stroke: "var(--background)"
+									},
+									isAnimationActive: !1
+								}, e.key) : /* @__PURE__ */ c(g, {
+									type: F,
+									dataKey: e.key,
+									name: E(e.label, e.key),
+									stroke: n,
+									strokeWidth: B,
+									dot: I ? {
+										r: 3,
+										fill: n,
+										strokeWidth: 2,
+										stroke: "var(--background)"
+									} : !1,
+									activeDot: {
+										r: 5,
+										strokeWidth: 2,
+										stroke: "var(--background)"
+									},
+									isAnimationActive: !1
+								}, e.key);
+							})
+						]
+					})
 				})
+			}),
+			L && K.length > 1 ? /* @__PURE__ */ c(R, {
+				className: "mt-3",
+				data: K.map((e, t) => ({
+					label: e.label,
+					value: 0,
+					color: T(t, e.color)
+				}))
+			}) : null,
+			/* @__PURE__ */ c(A, {
+				labels: Y,
+				series: K,
+				valueFormatter: y,
+				caption: P
 			})
-		}), /* @__PURE__ */ s(O, {
-			data: t.map((e, t) => ({
-				label: m?.[t] ?? t + 1,
-				value: e
-			})),
-			valueFormatter: _,
-			caption: j
-		})]
+		]
 	});
 }
-function N(e) {
-	return /* @__PURE__ */ s(M, {
+function F(e) {
+	return /* @__PURE__ */ c(P, {
 		showArea: !0,
 		...e
 	});
 }
-function P({ values: t, positive: n = !0, stroke: r, className: i, showTooltip: a = !1, ...o }) {
-	return /* @__PURE__ */ s(M, {
+function I({ values: t, positive: n = !0, stroke: r, className: i, showTooltip: a = !1, ...o }) {
+	return /* @__PURE__ */ c(P, {
 		values: t,
 		size: "sm",
 		stroke: r ?? (n ? "var(--aui-success,var(--primary))" : "var(--destructive)"),
@@ -331,20 +422,20 @@ function P({ values: t, positive: n = !0, stroke: r, className: i, showTooltip:
 		...o
 	});
 }
-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,
+function L({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, state: o = "ready", emptyLabel: s = "No distribution data.", showTooltip: u = !0, valueFormatter: d, ariaLabel: f = "Donut chart", className: p, style: m, ...g }) {
+	let _ = o === "ready" && t.length === 0 ? "empty" : o;
+	if (_ !== "ready") return /* @__PURE__ */ c(O, {
+		state: _,
+		emptyLabel: s,
 		height: n
 	});
 	let S = t.map((e, t) => ({
-		name: T(e.label, `Item ${t + 1}`),
+		name: E(e.label, `Item ${t + 1}`),
 		value: Math.max(0, e.value),
-		fill: w(t, e.color),
+		fill: T(t, e.color),
 		description: e.description
 	})), C = Math.max(8, n / 2 - 8);
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		"data-slot": "donut-chart",
 		role: "img",
 		"aria-label": f,
@@ -352,16 +443,16 @@ function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
 		style: {
 			width: n,
 			height: n,
-			...h
+			...m
 		},
 		...g,
 		children: [
-			/* @__PURE__ */ s(y, {
+			/* @__PURE__ */ c(b, {
 				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(_, {
+				children: /* @__PURE__ */ l(y, { children: [u ? /* @__PURE__ */ c(x, { content: /* @__PURE__ */ c(j, { valueFormatter: d }) }) : null, /* @__PURE__ */ c(v, {
 					data: S,
 					dataKey: "value",
 					nameKey: "name",
@@ -373,20 +464,20 @@ function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
 					stroke: "var(--background)",
 					strokeWidth: 2,
 					isAnimationActive: !1,
-					children: S.map((e) => /* @__PURE__ */ s(m, { fill: e.fill }, e.name))
+					children: S.map((e) => /* @__PURE__ */ c(h, { fill: e.fill }, e.name))
 				})] })
 			}),
-			a || i ? /* @__PURE__ */ c("div", {
+			a || i ? /* @__PURE__ */ l("div", {
 				className: "pointer-events-none absolute inset-0 grid place-content-center text-center",
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ c("div", {
 					className: "text-xl font-semibold tabular-nums",
 					children: a
-				}), /* @__PURE__ */ s("div", {
+				}), /* @__PURE__ */ c("div", {
 					className: "text-xs text-muted-foreground",
 					children: i
 				})]
 			}) : null,
-			/* @__PURE__ */ s(O, {
+			/* @__PURE__ */ c(k, {
 				data: t,
 				valueFormatter: d,
 				caption: f
@@ -394,49 +485,49 @@ function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
 		]
 	});
 }
-function I({ data: t, className: n, ...r }) {
-	return /* @__PURE__ */ s("div", {
+function R({ data: t, className: n, ...r }) {
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "chart-legend",
 		className: e("flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground", n),
 		...r,
-		children: t.map((e, t) => /* @__PURE__ */ c("div", {
+		children: t.map((e, t) => /* @__PURE__ */ l("div", {
 			className: "inline-flex min-w-0 items-center gap-2",
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ c("span", {
 				className: "size-2.5 shrink-0 rounded-sm",
-				style: { background: w(t, e.color) }
-			}), /* @__PURE__ */ s("span", {
+				style: { background: T(t, e.color) }
+			}), /* @__PURE__ */ c("span", {
 				className: "truncate",
 				children: e.label
 			})]
 		}, t))
 	});
 }
-function L({ label: t, value: n, change: r, positive: i = !0, values: a, className: o, ...l }) {
-	return /* @__PURE__ */ c("div", {
+function z({ label: t, value: n, change: r, positive: i = !0, values: a, className: o, ...s }) {
+	return /* @__PURE__ */ l("div", {
 		"data-slot": "metric-trend",
 		className: e("grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4", o),
-		...l,
-		children: [/* @__PURE__ */ c("div", {
+		...s,
+		children: [/* @__PURE__ */ l("div", {
 			className: "min-w-0",
 			children: [
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					className: "text-sm text-muted-foreground",
 					children: t
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
 					children: n
 				}),
-				r ? /* @__PURE__ */ s("div", {
+				r ? /* @__PURE__ */ c("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, {
+		}), a?.length ? /* @__PURE__ */ c(I, {
 			values: a,
 			positive: i
 		}) : null]
 	});
 }
 //#endregion
-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 };
+export { F as AreaChart, N as BarChart, M as ChartFrame, R as ChartLegend, j as ChartTooltipContent, L as DonutChart, P as LineChart, z as MetricTrend, I as Sparkline };