@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/ui/charts/index.js

@@ -1,86 +1,66 @@
 "use client";
-import { a as e } from "../../_chunks/framer.js";
-import { motionProps as t, tweens as n } from "../lib/motion.js";
-import { cn as r } from "../lib/utils.js";
-import { n as i } from "../../_chunks/motion-provider.js";
-import * as a from "react";
-import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { motionProps as e, tweens as t } from "../lib/motion.js";
+import { cn as n } from "../lib/utils.js";
+import { n as r } from "../../_chunks/motion-provider.js";
+import * as i from "react";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { motion as f } from "framer-motion";
 import { scaleBand as p, scaleLinear as m, scalePoint as h } from "d3-scale";
-import { axisBottom as g, axisLeft as _, axisRight as v, axisTop as y } from "d3-axis";
-import { select as b } from "d3-selection";
-import { arc as x, area as S, curveLinear as C, curveLinearClosed as w, curveMonotoneX as T, line as E, lineRadial as D, pie as O, stack as k, stackOffsetNone as A, stackOrderNone as j } from "d3-shape";
-//#region src/ui/charts/_internal/types.ts
-var M = {
-	top: 20,
-	right: 20,
-	bottom: 40,
-	left: 50
-}, N = a.forwardRef(({ height: e = 300, margin: t, className: n, ariaLabel: i = "Chart", ariaDescription: a, children: o, ...u }, p) => {
-	let m = c(null), [h, g] = l(0), _ = {
-		...M,
-		...t
-	};
-	s(() => {
-		if (!m.current) return;
-		let e = new ResizeObserver((e) => {
-			let t = e[0];
-			t && g(t.contentRect.width);
-		});
-		return e.observe(m.current), () => e.disconnect();
-	}, []);
-	let v = Math.max(0, h - _.left - _.right), y = Math.max(0, e - _.top - _.bottom);
-	return /* @__PURE__ */ d("div", {
-		ref: (e) => {
-			m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
-		},
-		className: r("relative w-full", n),
-		...u,
-		children: h > 0 && /* @__PURE__ */ f("svg", {
-			width: h,
-			height: e,
-			role: "img",
-			"aria-label": i,
-			children: [a && /* @__PURE__ */ d("desc", { children: a }), /* @__PURE__ */ d("g", {
-				transform: `translate(${_.left},${_.top})`,
-				children: o({
-					width: v,
-					height: y,
-					margin: _
-				})
-			})]
-		})
+import { arc as g, area as _, curveLinear as v, curveLinearClosed as y, curveMonotoneX as b, line as x, lineRadial as S, pie as C, stack as w, stackOffsetNone as T, stackOrderNone as E } from "d3-shape";
+import { axisBottom as D, axisLeft as O, axisRight as k, axisTop as A } from "d3-axis";
+import { select as j } from "d3-selection";
+//#region src/ui/charts/_internal/legend.tsx
+function M({ items: e, position: t = "bottom", className: r }) {
+	return /* @__PURE__ */ u("div", {
+		className: n("flex gap-ds-04 text-ds-sm text-surface-fg-muted", t === "left" || t === "right" ? "flex-col" : "flex-row flex-wrap justify-center", r),
+		children: e.map((e) => /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-ds-02",
+			children: [/* @__PURE__ */ u("span", {
+				className: "inline-block h-3 w-3 shrink-0 rounded-ds-sm",
+				style: { backgroundColor: e.color }
+			}), /* @__PURE__ */ u("span", { children: e.label })]
+		}, e.label))
 	});
-});
-N.displayName = "ChartContainer";
+}
+M.displayName = "Legend";
+//#endregion
+//#region src/ui/charts/_internal/animation.ts
+function N() {
+	let { reducedMotion: e } = r();
+	return e;
+}
+function P(e, t = 300) {
+	return e ? 0 : t;
+}
 //#endregion
 //#region src/ui/charts/_internal/axes.tsx
-function P({ scale: e, orientation: t, transform: n, tickCount: r, tickFormat: i, label: a, className: o }) {
-	let l = c(null);
-	return s(() => {
+function F({ scale: e, orientation: t, transform: n, tickCount: r, tickFormat: i, label: a, className: c }) {
+	let l = s(null);
+	return o(() => {
 		if (!l.current) return;
 		let n = {
-			top: y,
-			right: v,
-			bottom: g,
-			left: _
+			top: A,
+			right: k,
+			bottom: D,
+			left: O
 		}[t], a = n(e);
 		r && (a = a.ticks(r)), i && (a = a.tickFormat(i));
-		let o = b(l.current);
-		o.call(a), o.selectAll(".tick line").attr("stroke", "var(--color-surface-border)"), o.selectAll(".tick text").attr("fill", "var(--color-surface-fg-muted)").attr("font-size", "var(--font-size-xs)"), o.selectAll(".domain").attr("stroke", "var(--color-surface-border-strong)");
+		let o = j(l.current);
+		o.call(a), o.selectAll(".tick line").attr("stroke", "var(--color-surface-border)"), o.selectAll(".tick text").attr("fill", "var(--color-surface-fg-muted)").attr("font-size", "var(--text-ds-xs)"), o.selectAll(".domain").attr("stroke", "var(--color-surface-border-strong)");
 	}, [
 		e,
 		t,
 		r,
 		i
-	]), /* @__PURE__ */ d("g", {
+	]), /* @__PURE__ */ u("g", {
 		ref: l,
 		transform: n,
-		className: o,
-		children: a && /* @__PURE__ */ d("text", {
+		className: c,
+		children: a && /* @__PURE__ */ u("text", {
 			textAnchor: "middle",
 			fill: "var(--color-surface-fg-muted)",
-			fontSize: "var(--font-size-sm)",
+			fontSize: "var(--text-ds-sm)",
 			...t === "bottom" ? {
 				x: "50%",
 				dy: 35
@@ -93,13 +73,31 @@ function P({ scale: e, orientation: t, transform: n, tickCount: r, tickFormat: i
 		})
 	});
 }
-P.displayName = "Axis";
+F.displayName = "Axis";
+//#endregion
+//#region src/ui/charts/_internal/colors.ts
+var I = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"chart-6",
+	"chart-7",
+	"chart-8"
+];
+function L(e) {
+	return `var(--${e})`;
+}
+function R(e, t = 0) {
+	return e ? I.includes(e) ? L(e) : e : L(I[t % I.length]);
+}
 //#endregion
 //#region src/ui/charts/_internal/grid-lines.tsx
-function F({ width: e, height: t, xScale: n, yScale: r, horizontal: i = !0, vertical: a = !1 }) {
-	return /* @__PURE__ */ f("g", {
+function z({ width: e, height: t, xScale: n, yScale: r, horizontal: i = !0, vertical: a = !1 }) {
+	return /* @__PURE__ */ d("g", {
 		className: "grid-lines",
-		children: [i && r?.ticks && r.ticks().map((t, n) => /* @__PURE__ */ d("line", {
+		children: [i && r?.ticks && r.ticks().map((t, n) => /* @__PURE__ */ u("line", {
 			x1: 0,
 			x2: e,
 			y1: r(t),
@@ -107,7 +105,7 @@ function F({ width: e, height: t, xScale: n, yScale: r, horizontal: i = !0, vert
 			stroke: "var(--color-surface-border)",
 			strokeDasharray: "3,3",
 			opacity: .6
-		}, `h-${n}`)), a && n?.ticks && n.ticks().map((e, r) => /* @__PURE__ */ d("line", {
+		}, `h-${n}`)), a && n?.ticks && n.ticks().map((e, r) => /* @__PURE__ */ u("line", {
 			x1: n(e),
 			x2: n(e),
 			y1: 0,
@@ -118,27 +116,12 @@ function F({ width: e, height: t, xScale: n, yScale: r, horizontal: i = !0, vert
 		}, `v-${r}`))]
 	});
 }
-F.displayName = "GridLines";
-//#endregion
-//#region src/ui/charts/_internal/legend.tsx
-function I({ items: e, position: t = "bottom", className: n }) {
-	return /* @__PURE__ */ d("div", {
-		className: r("flex gap-ds-04 text-ds-sm text-surface-fg-muted", t === "left" || t === "right" ? "flex-col" : "flex-row flex-wrap justify-center", n),
-		children: e.map((e) => /* @__PURE__ */ f("div", {
-			className: "flex items-center gap-ds-02",
-			children: [/* @__PURE__ */ d("span", {
-				className: "inline-block h-3 w-3 shrink-0 rounded-ds-sm",
-				style: { backgroundColor: e.color }
-			}), /* @__PURE__ */ d("span", { children: e.label })]
-		}, e.label))
-	});
-}
-I.displayName = "Legend";
+z.displayName = "GridLines";
 //#endregion
 //#region src/ui/charts/_internal/tooltip.tsx
-function L({ state: e, className: t }) {
-	return e.visible ? /* @__PURE__ */ d("div", {
-		className: r("pointer-events-none absolute z-tooltip", "rounded-ds-md border border-surface-border-strong", "bg-surface-overlay px-ds-03 py-ds-02", "shadow-raised-hover", "text-ds-sm text-surface-fg", t),
+function B({ state: e, className: t }) {
+	return e.visible ? /* @__PURE__ */ u("div", {
+		className: n("pointer-events-none absolute z-tooltip", "rounded-ds-md border border-surface-border-strong", "bg-surface-overlay px-ds-03 py-ds-02", "shadow-raised-hover", "text-ds-sm text-surface-fg", t),
 		style: {
 			left: e.x + 12,
 			top: e.y - 12
@@ -146,9 +129,9 @@ function L({ state: e, className: t }) {
 		children: e.content
 	}) : null;
 }
-L.displayName = "ChartTooltip";
-function R() {
-	let [e, t] = l({
+B.displayName = "ChartTooltip";
+function V() {
+	let [e, t] = c({
 		visible: !1,
 		x: 0,
 		y: 0,
@@ -156,7 +139,7 @@ function R() {
 	});
 	return {
 		tooltip: e,
-		show: o((e, n, r) => {
+		show: a((e, n, r) => {
 			t({
 				visible: !0,
 				x: e,
@@ -164,7 +147,7 @@ function R() {
 				content: r
 			});
 		}, []),
-		hide: o(() => {
+		hide: a(() => {
 			t((e) => ({
 				...e,
 				visible: !1
@@ -173,40 +156,221 @@ function R() {
 	};
 }
 //#endregion
-//#region src/ui/charts/_internal/colors.ts
-var z = [
-	"chart-1",
-	"chart-2",
-	"chart-3",
-	"chart-4",
-	"chart-5",
-	"chart-6",
-	"chart-7",
-	"chart-8"
-];
-function B(e) {
-	return `var(--${e})`;
-}
-function V(e, t = 0) {
-	return e ? z.includes(e) ? B(e) : e : B(z[t % z.length]);
-}
+//#region src/ui/charts/_internal/types.ts
+var H = {
+	top: 20,
+	right: 20,
+	bottom: 40,
+	left: 50
+}, U = i.forwardRef(({ height: e = 300, margin: t, className: r, ariaLabel: i = "Chart", ariaDescription: a, children: l, ...f }, p) => {
+	let m = s(null), [h, g] = c(0), _ = {
+		...H,
+		...t
+	};
+	o(() => {
+		if (!m.current) return;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			t && g(t.contentRect.width);
+		});
+		return e.observe(m.current), () => e.disconnect();
+	}, []);
+	let v = Math.max(0, h - _.left - _.right), y = Math.max(0, e - _.top - _.bottom);
+	return /* @__PURE__ */ u("div", {
+		ref: (e) => {
+			m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+		},
+		className: n("relative w-full", r),
+		...f,
+		children: h > 0 && /* @__PURE__ */ d("svg", {
+			width: h,
+			height: e,
+			role: "img",
+			"aria-label": i,
+			children: [a && /* @__PURE__ */ u("desc", { children: a }), /* @__PURE__ */ u("g", {
+				transform: `translate(${_.left},${_.top})`,
+				children: l({
+					width: v,
+					height: y,
+					margin: _
+				})
+			})]
+		})
+	});
+});
+U.displayName = "ChartContainer";
 //#endregion
-//#region src/ui/charts/_internal/animation.ts
-function H() {
-	let { reducedMotion: e } = i();
-	return e;
-}
-function U(e, t = 300) {
-	return e ? 0 : t;
-}
+//#region src/ui/charts/area-chart.tsx
+var W = i.forwardRef(({ data: r, xKey: a, series: o, curved: s = !1, stacked: c = !1, fillOpacity: p = .3, gradient: g = !1, strokeWidth: y = 2, height: S = 300, showGrid: C = !0, showTooltip: D = !0, showLegend: O = !1, animate: k = !0, xLabel: A, yLabel: j, ariaLabel: P, className: I, ...L }, H) => {
+	let { tooltip: W, show: G, hide: K } = V(), q = N(), J = k && !q, Y = o.map((e, t) => R(e.color, t)), X = i.useId();
+	return /* @__PURE__ */ d(f.div, {
+		ref: H,
+		className: n("relative", I),
+		...J ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: t.fade
+		} : {},
+		...e(L),
+		children: [
+			/* @__PURE__ */ u(U, {
+				height: S,
+				ariaLabel: P ?? "Area chart",
+				children: ({ width: e, height: t, margin: n }) => {
+					let i = r.map((e) => e[a]), f = i.every((e) => typeof e == "number"), S, O, k;
+					if (f) {
+						let t = i, n = Math.min(...t), o = Math.max(...t), s = m().domain([n, o]).range([0, e]);
+						S = s, O = (e) => s(Number(e[a])), k = (e) => s(Number(r[e][a]));
+					} else {
+						let t = i.map(String), n = h().domain(t).range([0, e]).padding(.5);
+						S = n, O = (e) => n(String(e[a])) ?? 0, k = (e) => n(String(r[e][a])) ?? 0;
+					}
+					let M;
+					M = Math.max(...c ? r.map((e) => o.reduce((t, n) => t + (Number(e[n.key]) || 0), 0)) : r.flatMap((e) => o.map((t) => Number(e[t.key]) || 0)));
+					let N = m().domain([0, M * 1.1]).range([t, 0]).nice(), P = s ? b : v, I = () => r.map((n, i) => {
+						let s = O(n), c = e / Math.max(r.length - 1, 1);
+						return /* @__PURE__ */ u("rect", {
+							x: s - c / 2,
+							y: 0,
+							width: c,
+							height: t,
+							fill: "transparent",
+							onMouseMove: (e) => {
+								let t = e.currentTarget.closest("div")?.getBoundingClientRect();
+								G(e.clientX - (t?.left ?? 0), e.clientY - (t?.top ?? 0), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
+									className: "font-medium",
+									children: String(n[a])
+								}), o.map((e, t) => /* @__PURE__ */ d("div", {
+									className: "flex items-center gap-ds-02",
+									children: [
+										/* @__PURE__ */ u("span", {
+											className: "inline-block h-2 w-2 rounded-ds-full",
+											style: { backgroundColor: Y[t] }
+										}),
+										/* @__PURE__ */ d("span", {
+											className: "text-surface-fg-muted",
+											children: [e.label, ":"]
+										}),
+										" ",
+										Number(n[e.key]).toLocaleString()
+									]
+								}, e.key))] }));
+							},
+							onMouseLeave: K
+						}, `hover-${i}`);
+					}), L = () => g ? /* @__PURE__ */ u("defs", { children: o.map((e, t) => /* @__PURE__ */ d("linearGradient", {
+						id: `${X}-gradient-${t}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ u("stop", {
+							offset: "0%",
+							stopColor: Y[t],
+							stopOpacity: p
+						}), /* @__PURE__ */ u("stop", {
+							offset: "100%",
+							stopColor: Y[t],
+							stopOpacity: .05
+						})]
+					}, `grad-${t}`)) }) : null, R = () => /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(F, {
+						scale: S,
+						orientation: "bottom",
+						transform: `translate(0,${t})`,
+						label: A
+					}), /* @__PURE__ */ u(F, {
+						scale: N,
+						orientation: "left",
+						label: j
+					})] });
+					if (c) {
+						let n = o.map((e) => e.key), i = w().keys(n).order(E).offset(T)(r.map((e) => {
+							let t = { [a]: String(e[a]) };
+							for (let n of o) t[n.key] = Number(e[n.key]) || 0;
+							return t;
+						})), s = _().curve(P).x((e, t) => k(t)).y0((e) => N(e[0])).y1((e) => N(e[1])), c = x().curve(P).x((e, t) => k(t)).y((e) => N(e[1]));
+						return /* @__PURE__ */ d(l, { children: [
+							L(),
+							C && /* @__PURE__ */ u(z, {
+								width: e,
+								height: t,
+								yScale: N,
+								horizontal: !0
+							}),
+							[...i].reverse().map((e, t) => {
+								let n = i.length - 1 - t, r = e, a = s(r) ?? "", l = c(r) ?? "";
+								return /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("path", {
+									d: a,
+									fill: g ? `url(#${X}-gradient-${n})` : Y[n],
+									opacity: g ? 1 : p
+								}), /* @__PURE__ */ u("path", {
+									d: l,
+									fill: "none",
+									stroke: Y[n],
+									strokeWidth: y,
+									strokeLinejoin: "round",
+									strokeLinecap: "round"
+								})] }, o[n].key);
+							}),
+							D && I(),
+							R()
+						] });
+					}
+					let B = _().curve(P).defined((e) => e != null), V = x().curve(P).defined((e) => e != null);
+					return /* @__PURE__ */ d(l, { children: [
+						L(),
+						C && /* @__PURE__ */ u(z, {
+							width: e,
+							height: t,
+							yScale: N,
+							horizontal: !0
+						}),
+						[...o].reverse().map((e, n) => {
+							let i = o.length - 1 - n, a = B.x((e) => O(e)).y0(t).y1((t) => N(Number(t[e.key]) || 0)), s = V.x((e) => O(e)).y((t) => N(Number(t[e.key]) || 0)), c = a(r) ?? "", l = s(r) ?? "";
+							return /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("path", {
+								d: c,
+								fill: g ? `url(#${X}-gradient-${i})` : Y[i],
+								opacity: g ? 1 : p
+							}), /* @__PURE__ */ u("path", {
+								d: l,
+								fill: "none",
+								stroke: Y[i],
+								strokeWidth: y,
+								strokeLinejoin: "round",
+								strokeLinecap: "round"
+							})] }, e.key);
+						}),
+						D && I(),
+						R()
+					] });
+				}
+			}),
+			D && /* @__PURE__ */ u(B, { state: W }),
+			O && o.length > 1 && /* @__PURE__ */ u(M, {
+				items: o.map((e, t) => ({
+					label: e.label,
+					color: Y[t]
+				})),
+				className: "mt-ds-04"
+			})
+		]
+	});
+});
+W.displayName = "AreaChart";
 //#endregion
 //#region src/ui/charts/bar-chart.tsx
-var W = a.forwardRef(({ data: i, xKey: a, yKey: o, orientation: s = "vertical", stacked: c = !1, grouped: l = !1, color: h, height: g = 300, showGrid: _ = !0, showTooltip: v = !0, showLegend: y = !1, animate: b = !0, barRadius: x = 4, xLabel: S, yLabel: C, seriesLabels: w, ariaLabel: T, className: E, ...D }, O) => {
-	let { tooltip: k, show: A, hide: j } = R(), M = H(), z = s === "vertical", B = b && !M, U = Array.isArray(o) ? o : [o], W = U.length > 1, G = W ? U.map((e, t) => V(Array.isArray(h) ? h[t] : typeof h == "string" ? h : void 0, t)) : [V(typeof h == "string" ? h : Array.isArray(h) ? h[0] : void 0, 0)];
-	return /* @__PURE__ */ f(e.div, {
+var G = i.forwardRef(({ data: r, xKey: i, yKey: a, orientation: o = "vertical", stacked: s = !1, grouped: c = !1, color: h, height: g = 300, showGrid: _ = !0, showTooltip: v = !0, showLegend: y = !1, animate: b = !0, barRadius: x = 4, xLabel: S, yLabel: C, seriesLabels: w, ariaLabel: T, className: E, ...D }, O) => {
+	let { tooltip: k, show: A, hide: j } = V(), P = N(), I = o === "vertical", L = b && !P, H = Array.isArray(a) ? a : [a], W = H.length > 1, G = W ? H.map((e, t) => R(Array.isArray(h) ? h[t] : typeof h == "string" ? h : void 0, t)) : [R(typeof h == "string" ? h : Array.isArray(h) ? h[0] : void 0, 0)];
+	return /* @__PURE__ */ d(f.div, {
 		ref: O,
-		className: r("relative", E),
-		...B ? {
+		className: n("relative", E),
+		...L ? {
 			initial: {
 				opacity: 0,
 				scale: .96
@@ -215,51 +379,51 @@ var W = a.forwardRef(({ data: i, xKey: a, yKey: o, orientation: s = "vertical",
 				opacity: 1,
 				scale: 1
 			},
-			transition: n.fade
+			transition: t.fade
 		} : {},
-		...t(D),
+		...e(D),
 		children: [
-			/* @__PURE__ */ d(N, {
+			/* @__PURE__ */ u(U, {
 				height: g,
 				ariaLabel: T ?? "Bar chart",
 				children: ({ width: e, height: t, margin: n }) => {
-					let r = i.map((e) => String(e[a])), o = i.map((e) => `${String(e[a])} — ${U.map((t, n) => `${w?.[n] ?? t}: ${Number(e[t]).toLocaleString()}`).join(", ")}`).join(". "), s;
-					s = Math.max(...c ? i.map((e) => U.reduce((t, n) => t + (Number(e[n]) || 0), 0)) : i.flatMap((e) => U.map((t) => Number(e[t]) || 0)));
-					let h = p().domain(r).range(z ? [0, e] : [0, t]).padding(.2), g = m().domain([0, s * 1.1]).range(z ? [t, 0] : [0, e]).nice(), y = h.bandwidth(), b = W && l ? y / U.length : y;
-					return /* @__PURE__ */ f(u, { children: [
-						/* @__PURE__ */ d("desc", { children: o }),
-						_ && /* @__PURE__ */ d(F, {
+					let a = r.map((e) => String(e[i])), o = r.map((e) => `${String(e[i])} — ${H.map((t, n) => `${w?.[n] ?? t}: ${Number(e[t]).toLocaleString()}`).join(", ")}`).join(". "), f;
+					f = Math.max(...s ? r.map((e) => H.reduce((t, n) => t + (Number(e[n]) || 0), 0)) : r.flatMap((e) => H.map((t) => Number(e[t]) || 0)));
+					let h = p().domain(a).range(I ? [0, e] : [0, t]).padding(.2), g = m().domain([0, f * 1.1]).range(I ? [t, 0] : [0, e]).nice(), y = h.bandwidth(), b = W && c ? y / H.length : y;
+					return /* @__PURE__ */ d(l, { children: [
+						/* @__PURE__ */ u("desc", { children: o }),
+						_ && /* @__PURE__ */ u(z, {
 							width: e,
 							height: t,
-							yScale: z ? g : void 0,
-							xScale: z ? void 0 : g,
-							horizontal: z,
-							vertical: !z
+							yScale: I ? g : void 0,
+							xScale: I ? void 0 : g,
+							horizontal: I,
+							vertical: !I
 						}),
-						i.map((e) => {
-							let n = String(e[a]), r = 0;
-							return U.map((i, a) => {
-								let o = Number(e[i]) || 0, s = G[a] || G[0], u, p, m, _;
-								z ? (u = (h(n) ?? 0) + (l && W ? a * b : 0), p = g(c ? r + o : o), m = b, _ = c ? g(r) - g(r + o) : t - g(o)) : (u = c ? g(r) : 0, p = (h(n) ?? 0) + (l && W ? a * b : 0), m = c ? g(r + o) - g(r) : g(o), _ = b), c && (r += o);
-								let y = w?.[a] ?? i, S = W ? `${n}, ${y}: ${o.toLocaleString()}` : `${n}: ${o.toLocaleString()}`, C = /* @__PURE__ */ f("div", { children: [
-									/* @__PURE__ */ d("div", {
+						r.map((e) => {
+							let n = String(e[i]), r = 0;
+							return H.map((i, a) => {
+								let o = Number(e[i]) || 0, l = G[a] || G[0], f, p, m, _;
+								I ? (f = (h(n) ?? 0) + (c && W ? a * b : 0), p = g(s ? r + o : o), m = b, _ = s ? g(r) - g(r + o) : t - g(o)) : (f = s ? g(r) : 0, p = (h(n) ?? 0) + (c && W ? a * b : 0), m = s ? g(r + o) - g(r) : g(o), _ = b), s && (r += o);
+								let y = w?.[a] ?? i, S = W ? `${n}, ${y}: ${o.toLocaleString()}` : `${n}: ${o.toLocaleString()}`, C = /* @__PURE__ */ d("div", { children: [
+									/* @__PURE__ */ u("div", {
 										className: "font-medium",
 										children: n
 									}),
-									W && /* @__PURE__ */ d("div", {
+									W && /* @__PURE__ */ u("div", {
 										className: "text-surface-fg-muted",
 										children: y
 									}),
-									/* @__PURE__ */ d("div", { children: o.toLocaleString() })
+									/* @__PURE__ */ u("div", { children: o.toLocaleString() })
 								] });
-								return /* @__PURE__ */ d("rect", {
-									x: u,
+								return /* @__PURE__ */ u("rect", {
+									x: f,
 									y: p,
 									width: Math.max(0, m),
 									height: Math.max(0, _),
 									rx: x,
-									fill: s,
-									className: "transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:opacity-80",
+									fill: l,
+									className: "transition-opacity hover:opacity-80 focus-visible:outline-hidden focus-visible:opacity-80",
 									tabIndex: v ? 0 : void 0,
 									role: v ? "graphics-symbol" : void 0,
 									"aria-label": S,
@@ -280,21 +444,21 @@ var W = a.forwardRef(({ data: i, xKey: a, yKey: o, orientation: s = "vertical",
 								}, `${n}-${i}`);
 							});
 						}),
-						z ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(P, {
+						I ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(F, {
 							scale: h,
 							orientation: "bottom",
 							transform: `translate(0,${t})`,
 							label: S
-						}), /* @__PURE__ */ d(P, {
+						}), /* @__PURE__ */ u(F, {
 							scale: g,
 							orientation: "left",
 							label: C
-						})] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(P, {
+						})] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(F, {
 							scale: g,
 							orientation: "bottom",
 							transform: `translate(0,${t})`,
 							label: S
-						}), /* @__PURE__ */ d(P, {
+						}), /* @__PURE__ */ u(F, {
 							scale: h,
 							orientation: "left",
 							label: C
@@ -302,9 +466,9 @@ var W = a.forwardRef(({ data: i, xKey: a, yKey: o, orientation: s = "vertical",
 					] });
 				}
 			}),
-			v && /* @__PURE__ */ d(L, { state: k }),
-			y && W && /* @__PURE__ */ d(I, {
-				items: U.map((e, t) => ({
+			v && /* @__PURE__ */ u(B, { state: k }),
+			y && W && /* @__PURE__ */ u(M, {
+				items: H.map((e, t) => ({
 					label: w?.[t] ?? e,
 					color: G[t]
 				})),
@@ -313,15 +477,78 @@ var W = a.forwardRef(({ data: i, xKey: a, yKey: o, orientation: s = "vertical",
 		]
 	});
 });
-W.displayName = "BarChart";
+G.displayName = "BarChart";
+//#endregion
+//#region src/ui/charts/gauge-chart.tsx
+var K = (e) => e * Math.PI / 180, q = i.forwardRef(({ value: r, max: i = 100, min: a = 0, label: o, valueLabel: s, color: c, trackColor: l = "var(--color-surface-border)", height: p = 200, startAngle: m = -120, endAngle: h = 120, thickness: _ = 16, animate: v = !0, className: y, ...b }, x) => {
+	let S = N(), C = P(S, v ? 600 : 0), w = v && !S, T = R(c, 0), E = p, D = E / 2, O = Math.min(Math.max(r, a), i), k = i === a ? 0 : (O - a) / (i - a), A = m + (h - m) * k, j = typeof s == "function" ? s(O) : typeof s == "string" ? s : String(O), M = g().innerRadius(D - _).outerRadius(D).startAngle(K(m)).endAngle(K(h)).cornerRadius(_ / 2), F = g().innerRadius(D - _).outerRadius(D).startAngle(K(m)).endAngle(K(A)).cornerRadius(_ / 2), I = M(null) ?? "", L = F(null) ?? "";
+	return /* @__PURE__ */ u(f.div, {
+		ref: x,
+		className: n("inline-flex flex-col items-center", y),
+		...w ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: t.fade
+		} : {},
+		...e(b),
+		role: "meter",
+		"aria-valuenow": O,
+		"aria-valuemin": a,
+		"aria-valuemax": i,
+		"aria-label": o ?? "Gauge chart",
+		children: /* @__PURE__ */ u("svg", {
+			width: E,
+			height: E,
+			role: "img",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ d("g", {
+				transform: `translate(${D},${D})`,
+				children: [
+					/* @__PURE__ */ u("path", {
+						d: I,
+						fill: l
+					}),
+					/* @__PURE__ */ u("path", {
+						d: L,
+						fill: T,
+						style: C > 0 ? { transition: `d ${C}ms ease-out` } : void 0
+					}),
+					/* @__PURE__ */ u("text", {
+						x: 0,
+						y: o ? -4 : 0,
+						textAnchor: "middle",
+						dominantBaseline: "central",
+						className: "fill-surface-fg text-ds-2xl font-semibold",
+						children: j
+					}),
+					o && /* @__PURE__ */ u("text", {
+						x: 0,
+						y: 20,
+						textAnchor: "middle",
+						dominantBaseline: "central",
+						className: "fill-surface-fg-muted text-ds-xs",
+						children: o
+					})
+				]
+			})
+		})
+	});
+});
+q.displayName = "GaugeChart";
 //#endregion
 //#region src/ui/charts/line-chart.tsx
-var G = a.forwardRef(({ data: i, xKey: a, series: o, curved: s = !1, showDots: c = !1, dotSize: l = 4, strokeWidth: p = 2, height: g = 300, showGrid: _ = !0, showTooltip: v = !0, showLegend: y = !1, animate: b = !0, xLabel: x, yLabel: S, ariaLabel: w, className: D, ...O }, k) => {
-	let { tooltip: A, show: j, hide: M } = R(), z = H(), B = b && !z, U = o.map((e, t) => V(e.color, t));
-	return /* @__PURE__ */ f(e.div, {
+var J = i.forwardRef(({ data: r, xKey: i, series: a, curved: o = !1, showDots: s = !1, dotSize: c = 4, strokeWidth: p = 2, height: g = 300, showGrid: _ = !0, showTooltip: y = !0, showLegend: S = !1, animate: C = !0, xLabel: w, yLabel: T, ariaLabel: E, className: D, ...O }, k) => {
+	let { tooltip: A, show: j, hide: P } = V(), I = N(), L = C && !I, H = a.map((e, t) => R(e.color, t));
+	return /* @__PURE__ */ d(f.div, {
 		ref: k,
-		className: r("relative", D),
-		...B ? {
+		className: n("relative", D),
+		...L ? {
 			initial: {
 				opacity: 0,
 				scale: .96
@@ -330,57 +557,57 @@ var G = a.forwardRef(({ data: i, xKey: a, series: o, curved: s = !1, showDots: c
 				opacity: 1,
 				scale: 1
 			},
-			transition: n.fade
+			transition: t.fade
 		} : {},
-		...t(O),
+		...e(O),
 		children: [
-			/* @__PURE__ */ d(N, {
+			/* @__PURE__ */ u(U, {
 				height: g,
-				ariaLabel: w ?? "Line chart",
+				ariaLabel: E ?? "Line chart",
 				children: ({ width: e, height: t, margin: n }) => {
-					let r = i.map((e) => e[a]), g = r.every((e) => typeof e == "number"), y, b;
+					let f = r.map((e) => e[i]), g = f.every((e) => typeof e == "number"), S, C;
 					if (g) {
-						let t = r, n = Math.min(...t), i = Math.max(...t), o = m().domain([n, i]).range([0, e]);
-						y = o, b = (e) => o(Number(e[a]));
+						let t = f, n = Math.min(...t), r = Math.max(...t), a = m().domain([n, r]).range([0, e]);
+						S = a, C = (e) => a(Number(e[i]));
 					} else {
-						let t = r.map(String), n = h().domain(t).range([0, e]).padding(.5);
-						y = n, b = (e) => n(String(e[a])) ?? 0;
+						let t = f.map(String), n = h().domain(t).range([0, e]).padding(.5);
+						S = n, C = (e) => n(String(e[i])) ?? 0;
 					}
-					let w = i.flatMap((e) => o.map((t) => Number(e[t.key]) || 0)), D = Math.max(...w), O = m().domain([0, D * 1.1]).range([t, 0]).nice(), k = s ? T : C, A = E().curve(k).defined((e) => e != null);
-					return /* @__PURE__ */ f(u, { children: [
-						/* @__PURE__ */ d("desc", { children: i.map((e) => `${String(e[a])} — ${o.map((t) => `${t.label}: ${Number(e[t.key]).toLocaleString()}`).join(", ")}`).join(". ") }),
-						_ && /* @__PURE__ */ d(F, {
+					let E = r.flatMap((e) => a.map((t) => Number(e[t.key]) || 0)), D = Math.max(...E), O = m().domain([0, D * 1.1]).range([t, 0]).nice(), k = o ? b : v, A = x().curve(k).defined((e) => e != null);
+					return /* @__PURE__ */ d(l, { children: [
+						/* @__PURE__ */ u("desc", { children: r.map((e) => `${String(e[i])} — ${a.map((t) => `${t.label}: ${Number(e[t.key]).toLocaleString()}`).join(", ")}`).join(". ") }),
+						_ && /* @__PURE__ */ u(z, {
 							width: e,
 							height: t,
 							yScale: O,
 							horizontal: !0
 						}),
-						o.map((e, t) => /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("path", {
-							d: A.x((e) => b(e)).y((t) => O(Number(t[e.key]) || 0))(i) ?? "",
+						a.map((e, t) => /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("path", {
+							d: A.x((e) => C(e)).y((t) => O(Number(t[e.key]) || 0))(r) ?? "",
 							fill: "none",
-							stroke: U[t],
+							stroke: H[t],
 							strokeWidth: p,
 							strokeLinejoin: "round",
 							strokeLinecap: "round"
-						}), c && i.map((n, r) => /* @__PURE__ */ d("circle", {
-							cx: b(n),
+						}), s && r.map((n, r) => /* @__PURE__ */ u("circle", {
+							cx: C(n),
 							cy: O(Number(n[e.key]) || 0),
-							r: l,
-							fill: U[t],
+							r: c,
+							fill: H[t],
 							className: "transition-opacity hover:opacity-80"
 						}, `${e.key}-dot-${r}`))] }, e.key)),
-						v && i.map((n, r) => {
-							let s = b(n), c = e / Math.max(i.length - 1, 1), l = String(n[a]), u = `${l}: ${o.map((e) => `${e.label} ${Number(n[e.key]).toLocaleString()}`).join(", ")}`, p = /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
+						y && r.map((n, o) => {
+							let s = C(n), c = e / Math.max(r.length - 1, 1), l = String(n[i]), f = `${l}: ${a.map((e) => `${e.label} ${Number(n[e.key]).toLocaleString()}`).join(", ")}`, p = /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
 								className: "font-medium",
 								children: l
-							}), o.map((e, t) => /* @__PURE__ */ f("div", {
+							}), a.map((e, t) => /* @__PURE__ */ d("div", {
 								className: "flex items-center gap-ds-02",
 								children: [
-									/* @__PURE__ */ d("span", {
+									/* @__PURE__ */ u("span", {
 										className: "inline-block h-2 w-2 rounded-ds-full",
-										style: { backgroundColor: U[t] }
+										style: { backgroundColor: H[t] }
 									}),
-									/* @__PURE__ */ f("span", {
+									/* @__PURE__ */ d("span", {
 										className: "text-surface-fg-muted",
 										children: [e.label, ":"]
 									}),
@@ -388,7 +615,7 @@ var G = a.forwardRef(({ data: i, xKey: a, series: o, curved: s = !1, showDots: c
 									Number(n[e.key]).toLocaleString()
 								]
 							}, e.key))] });
-							return /* @__PURE__ */ d("rect", {
+							return /* @__PURE__ */ u("rect", {
 								x: s - c / 2,
 								y: 0,
 								width: c,
@@ -396,228 +623,64 @@ var G = a.forwardRef(({ data: i, xKey: a, series: o, curved: s = !1, showDots: c
 								fill: "transparent",
 								tabIndex: 0,
 								role: "graphics-symbol",
-								"aria-label": u,
-								className: "focus-visible:outline-none",
+								"aria-label": f,
+								className: "focus-visible:outline-hidden",
 								onMouseMove: (e) => {
 									let t = e.currentTarget.closest("div")?.getBoundingClientRect();
 									j(e.clientX - (t?.left ?? 0), e.clientY - (t?.top ?? 0), p);
 								},
-								onMouseLeave: M,
+								onMouseLeave: P,
 								onFocus: (e) => {
 									let t = e.currentTarget.closest("div")?.getBoundingClientRect(), n = e.currentTarget.getBoundingClientRect();
 									j(n.left + n.width / 2 - (t?.left ?? 0), n.top + n.height / 2 - (t?.top ?? 0), p);
 								},
-								onBlur: M
-							}, `hover-${r}`);
+								onBlur: P
+							}, `hover-${o}`);
 						}),
-						/* @__PURE__ */ d(P, {
-							scale: y,
+						/* @__PURE__ */ u(F, {
+							scale: S,
 							orientation: "bottom",
 							transform: `translate(0,${t})`,
-							label: x
+							label: w
 						}),
-						/* @__PURE__ */ d(P, {
+						/* @__PURE__ */ u(F, {
 							scale: O,
 							orientation: "left",
-							label: S
+							label: T
 						})
 					] });
 				}
 			}),
-			v && /* @__PURE__ */ d(L, { state: A }),
-			y && o.length > 1 && /* @__PURE__ */ d(I, {
-				items: o.map((e, t) => ({
+			y && /* @__PURE__ */ u(B, { state: A }),
+			S && a.length > 1 && /* @__PURE__ */ u(M, {
+				items: a.map((e, t) => ({
 					label: e.label,
-					color: U[t]
+					color: H[t]
 				})),
 				className: "mt-ds-04"
 			})
 		]
 	});
 });
-G.displayName = "LineChart";
-//#endregion
-//#region src/ui/charts/area-chart.tsx
-var K = a.forwardRef(({ data: i, xKey: o, series: s, curved: c = !1, stacked: l = !1, fillOpacity: p = .3, gradient: g = !1, strokeWidth: _ = 2, height: v = 300, showGrid: y = !0, showTooltip: b = !0, showLegend: x = !1, animate: w = !0, xLabel: D, yLabel: O, ariaLabel: M, className: z, ...B }, U) => {
-	let { tooltip: W, show: G, hide: K } = R(), q = H(), J = w && !q, Y = s.map((e, t) => V(e.color, t)), X = a.useId();
-	return /* @__PURE__ */ f(e.div, {
-		ref: U,
-		className: r("relative", z),
-		...J ? {
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			transition: n.fade
-		} : {},
-		...t(B),
-		children: [
-			/* @__PURE__ */ d(N, {
-				height: v,
-				ariaLabel: M ?? "Area chart",
-				children: ({ width: e, height: t, margin: n }) => {
-					let r = i.map((e) => e[o]), a = r.every((e) => typeof e == "number"), v, x, w;
-					if (a) {
-						let t = r, n = Math.min(...t), a = Math.max(...t), s = m().domain([n, a]).range([0, e]);
-						v = s, x = (e) => s(Number(e[o])), w = (e) => s(Number(i[e][o]));
-					} else {
-						let t = r.map(String), n = h().domain(t).range([0, e]).padding(.5);
-						v = n, x = (e) => n(String(e[o])) ?? 0, w = (e) => n(String(i[e][o])) ?? 0;
-					}
-					let M;
-					M = Math.max(...l ? i.map((e) => s.reduce((t, n) => t + (Number(e[n.key]) || 0), 0)) : i.flatMap((e) => s.map((t) => Number(e[t.key]) || 0)));
-					let N = m().domain([0, M * 1.1]).range([t, 0]).nice(), I = c ? T : C, L = () => i.map((n, r) => {
-						let a = x(n), c = e / Math.max(i.length - 1, 1);
-						return /* @__PURE__ */ d("rect", {
-							x: a - c / 2,
-							y: 0,
-							width: c,
-							height: t,
-							fill: "transparent",
-							onMouseMove: (e) => {
-								let t = e.currentTarget.closest("div")?.getBoundingClientRect();
-								G(e.clientX - (t?.left ?? 0), e.clientY - (t?.top ?? 0), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
-									className: "font-medium",
-									children: String(n[o])
-								}), s.map((e, t) => /* @__PURE__ */ f("div", {
-									className: "flex items-center gap-ds-02",
-									children: [
-										/* @__PURE__ */ d("span", {
-											className: "inline-block h-2 w-2 rounded-ds-full",
-											style: { backgroundColor: Y[t] }
-										}),
-										/* @__PURE__ */ f("span", {
-											className: "text-surface-fg-muted",
-											children: [e.label, ":"]
-										}),
-										" ",
-										Number(n[e.key]).toLocaleString()
-									]
-								}, e.key))] }));
-							},
-							onMouseLeave: K
-						}, `hover-${r}`);
-					}), R = () => g ? /* @__PURE__ */ d("defs", { children: s.map((e, t) => /* @__PURE__ */ f("linearGradient", {
-						id: `${X}-gradient-${t}`,
-						x1: "0",
-						y1: "0",
-						x2: "0",
-						y2: "1",
-						children: [/* @__PURE__ */ d("stop", {
-							offset: "0%",
-							stopColor: Y[t],
-							stopOpacity: p
-						}), /* @__PURE__ */ d("stop", {
-							offset: "100%",
-							stopColor: Y[t],
-							stopOpacity: .05
-						})]
-					}, `grad-${t}`)) }) : null, z = () => /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(P, {
-						scale: v,
-						orientation: "bottom",
-						transform: `translate(0,${t})`,
-						label: D
-					}), /* @__PURE__ */ d(P, {
-						scale: N,
-						orientation: "left",
-						label: O
-					})] });
-					if (l) {
-						let n = s.map((e) => e.key), r = k().keys(n).order(j).offset(A)(i.map((e) => {
-							let t = { [o]: String(e[o]) };
-							for (let n of s) t[n.key] = Number(e[n.key]) || 0;
-							return t;
-						})), a = S().curve(I).x((e, t) => w(t)).y0((e) => N(e[0])).y1((e) => N(e[1])), c = E().curve(I).x((e, t) => w(t)).y((e) => N(e[1]));
-						return /* @__PURE__ */ f(u, { children: [
-							R(),
-							y && /* @__PURE__ */ d(F, {
-								width: e,
-								height: t,
-								yScale: N,
-								horizontal: !0
-							}),
-							[...r].reverse().map((e, t) => {
-								let n = r.length - 1 - t, i = e, o = a(i) ?? "", l = c(i) ?? "";
-								return /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("path", {
-									d: o,
-									fill: g ? `url(#${X}-gradient-${n})` : Y[n],
-									opacity: g ? 1 : p
-								}), /* @__PURE__ */ d("path", {
-									d: l,
-									fill: "none",
-									stroke: Y[n],
-									strokeWidth: _,
-									strokeLinejoin: "round",
-									strokeLinecap: "round"
-								})] }, s[n].key);
-							}),
-							b && L(),
-							z()
-						] });
-					}
-					let B = S().curve(I).defined((e) => e != null), V = E().curve(I).defined((e) => e != null);
-					return /* @__PURE__ */ f(u, { children: [
-						R(),
-						y && /* @__PURE__ */ d(F, {
-							width: e,
-							height: t,
-							yScale: N,
-							horizontal: !0
-						}),
-						[...s].reverse().map((e, n) => {
-							let r = s.length - 1 - n, a = B.x((e) => x(e)).y0(t).y1((t) => N(Number(t[e.key]) || 0)), o = V.x((e) => x(e)).y((t) => N(Number(t[e.key]) || 0)), c = a(i) ?? "", l = o(i) ?? "";
-							return /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("path", {
-								d: c,
-								fill: g ? `url(#${X}-gradient-${r})` : Y[r],
-								opacity: g ? 1 : p
-							}), /* @__PURE__ */ d("path", {
-								d: l,
-								fill: "none",
-								stroke: Y[r],
-								strokeWidth: _,
-								strokeLinejoin: "round",
-								strokeLinecap: "round"
-							})] }, e.key);
-						}),
-						b && L(),
-						z()
-					] });
-				}
-			}),
-			b && /* @__PURE__ */ d(L, { state: W }),
-			x && s.length > 1 && /* @__PURE__ */ d(I, {
-				items: s.map((e, t) => ({
-					label: e.label,
-					color: Y[t]
-				})),
-				className: "mt-ds-04"
-			})
-		]
-	});
-});
-K.displayName = "AreaChart";
+J.displayName = "LineChart";
 //#endregion
 //#region src/ui/charts/pie-chart.tsx
-var q = a.forwardRef(({ data: i, variant: a = "pie", innerRadius: o = .6, padAngle: p = 0, cornerRadius: m = 0, height: h = 300, showTooltip: g = !0, showLegend: _ = !1, showLabels: v = !1, animate: y = !0, className: b, centerLabel: S, ariaLabel: C, ...w }, T) => {
-	let E = c(null), [D, k] = l(0), [A, j] = l(null), { tooltip: M, show: N, hide: P } = R(), F = H(), z = y && !F;
-	s(() => {
-		if (!E.current) return;
+var Y = i.forwardRef(({ data: r, variant: i = "pie", innerRadius: a = .6, padAngle: p = 0, cornerRadius: m = 0, height: h = 300, showTooltip: _ = !0, showLegend: v = !1, showLabels: y = !1, animate: b = !0, className: x, centerLabel: S, ariaLabel: w, ...T }, E) => {
+	let D = s(null), [O, k] = c(0), [A, j] = c(null), { tooltip: P, show: F, hide: I } = V(), L = N(), z = b && !L;
+	o(() => {
+		if (!D.current) return;
 		let e = new ResizeObserver((e) => {
 			let t = e[0];
 			t && k(t.contentRect.width);
 		});
-		return e.observe(E.current), () => e.disconnect();
+		return e.observe(D.current), () => e.disconnect();
 	}, []);
-	let B = (D > 0 ? Math.min(D, h) : h) / 2, U = a === "donut" ? B * o : 0, W = i.map((e, t) => V(e.color, t)), G = i.reduce((e, t) => e + t.value, 0), K = O().value((e) => e.value).padAngle(p).sort(null)(i), q = x().innerRadius(U).outerRadius(B - 2).cornerRadius(m), J = U + (B - 2 - U) * .7, Y = x().innerRadius(J).outerRadius(J);
-	return /* @__PURE__ */ f(e.div, {
+	let H = (O > 0 ? Math.min(O, h) : h) / 2, U = i === "donut" ? H * a : 0, W = r.map((e, t) => R(e.color, t)), G = r.reduce((e, t) => e + t.value, 0), K = C().value((e) => e.value).padAngle(p).sort(null)(r), q = g().innerRadius(U).outerRadius(H - 2).cornerRadius(m), J = U + (H - 2 - U) * .7, Y = g().innerRadius(J).outerRadius(J);
+	return /* @__PURE__ */ d(f.div, {
 		ref: (e) => {
-			E.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
+			D.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
 		},
-		className: r("relative w-full", b),
+		className: n("relative w-full", x),
 		...z ? {
 			initial: {
 				opacity: 0,
@@ -627,34 +690,34 @@ var q = a.forwardRef(({ data: i, variant: a = "pie", innerRadius: o = .6, padAng
 				opacity: 1,
 				scale: 1
 			},
-			transition: n.fade
+			transition: t.fade
 		} : {},
-		...t(w),
-		children: [D > 0 && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("svg", {
-			width: D,
+		...e(T),
+		children: [O > 0 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("svg", {
+			width: O,
 			height: h,
 			role: "img",
-			"aria-label": C ?? "Pie chart",
-			children: /* @__PURE__ */ f("g", {
-				transform: `translate(${D / 2},${h / 2})`,
+			"aria-label": w ?? "Pie chart",
+			children: /* @__PURE__ */ d("g", {
+				transform: `translate(${O / 2},${h / 2})`,
 				children: [
 					K.map((e, t) => {
 						let n = q(e);
 						if (!n) return null;
 						let [r, i] = q.centroid(e), a = Math.atan2(i, r), o = Math.cos(a) * 4, s = Math.sin(a) * 4, c = A === t;
-						return /* @__PURE__ */ d("path", {
+						return /* @__PURE__ */ u("path", {
 							d: n,
 							fill: W[t],
 							className: "cursor-pointer transition-transform",
 							style: { transform: c ? `translate(${o}px, ${s}px)` : void 0 },
 							onMouseEnter: () => j(t),
 							onMouseMove: (t) => {
-								if (g) {
+								if (_) {
 									let n = t.currentTarget.closest("div")?.getBoundingClientRect(), r = G > 0 ? (e.data.value / G * 100).toFixed(1) : "0";
-									N(t.clientX - (n?.left ?? 0), t.clientY - (n?.top ?? 0), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
+									F(t.clientX - (n?.left ?? 0), t.clientY - (n?.top ?? 0), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
 										className: "font-medium",
 										children: e.data.label
-									}), /* @__PURE__ */ f("div", { children: [
+									}), /* @__PURE__ */ d("div", { children: [
 										e.data.value.toLocaleString(),
 										" (",
 										r,
@@ -663,13 +726,13 @@ var q = a.forwardRef(({ data: i, variant: a = "pie", innerRadius: o = .6, padAng
 								}
 							},
 							onMouseLeave: () => {
-								j(null), P();
+								j(null), I();
 							}
 						}, `slice-${e.data.label}-${t}`);
 					}),
-					v && K.map((e, t) => {
+					y && K.map((e, t) => {
 						let [n, r] = Y.centroid(e), i = G > 0 ? (e.data.value / G * 100).toFixed(0) : "0";
-						return G > 0 && e.data.value / G < .03 ? null : /* @__PURE__ */ f("text", {
+						return G > 0 && e.data.value / G < .03 ? null : /* @__PURE__ */ d("text", {
 							x: n,
 							y: r,
 							textAnchor: "middle",
@@ -678,20 +741,20 @@ var q = a.forwardRef(({ data: i, variant: a = "pie", innerRadius: o = .6, padAng
 							children: [i, "%"]
 						}, `label-${e.data.label}-${t}`);
 					}),
-					a === "donut" && S && U > 0 && /* @__PURE__ */ d("foreignObject", {
+					i === "donut" && S && U > 0 && /* @__PURE__ */ u("foreignObject", {
 						x: -U * .7,
 						y: -U * .7,
 						width: U * 1.4,
 						height: U * 1.4,
-						children: /* @__PURE__ */ d("div", {
+						children: /* @__PURE__ */ u("div", {
 							className: "flex h-full w-full items-center justify-center text-center text-surface-fg",
 							children: S
 						})
 					})
 				]
 			})
-		}), g && /* @__PURE__ */ d(L, { state: M })] }), _ && /* @__PURE__ */ d(I, {
-			items: i.map((e, t) => ({
+		}), _ && /* @__PURE__ */ u(B, { state: P })] }), v && /* @__PURE__ */ u(M, {
+			items: r.map((e, t) => ({
 				label: e.label,
 				color: W[t]
 			})),
@@ -699,205 +762,32 @@ var q = a.forwardRef(({ data: i, variant: a = "pie", innerRadius: o = .6, padAng
 		})]
 	});
 });
-q.displayName = "PieChart";
-//#endregion
-//#region src/ui/charts/sparkline.tsx
-var J = {
-	duration: 1,
-	ease: "easeOut"
-}, Y = a.forwardRef(({ data: t, variant: n = "line", width: i = 120, height: a = 32, color: o, showLastDot: s = !1, strokeWidth: c = 1.5, animate: l = !0, className: u, ...p }, h) => {
-	let g = V(o, 0), _ = H(), v = l && !_;
-	if (!t.length) return null;
-	let y = n === "bar" ? 1 : c, b = i - y * 2, x = a - y * 2, C = m().domain([0, Math.max(t.length - 1, 1)]).range([y, y + b]), w = Math.min(...t), D = Math.max(...t), O = w === D ? [w - 1, D + 1] : [w, D], k = m().domain(O).range([y + x, y]);
-	if (n === "bar") {
-		let e = Math.max(1, (b - 1 * (t.length - 1)) / t.length), n = y + x;
-		return /* @__PURE__ */ d("svg", {
-			ref: h,
-			width: i,
-			height: a,
-			role: "img",
-			"aria-label": "Sparkline bar chart",
-			className: r("inline-block align-middle", u),
-			...p,
-			children: t.map((t, r) => {
-				let i = y + r * (e + 1), a = k(t);
-				return /* @__PURE__ */ d("rect", {
-					x: i,
-					y: a,
-					width: e,
-					height: Math.max(1, n - a),
-					rx: Math.min(1, e / 2),
-					fill: g
-				}, r);
-			})
-		});
-	}
-	if (n === "area") {
-		let n = S().curve(T).x((e, t) => C(t)).y0(y + x).y1((e) => k(e)), o = E().curve(T).x((e, t) => C(t)).y((e) => k(e)), l = n(t) ?? "", m = o(t) ?? "", _ = C(t.length - 1), b = k(t[t.length - 1]);
-		return /* @__PURE__ */ f("svg", {
-			ref: h,
-			width: i,
-			height: a,
-			role: "img",
-			"aria-label": "Sparkline area chart",
-			className: r("inline-block align-middle", u),
-			...p,
-			children: [
-				/* @__PURE__ */ d("path", {
-					d: l,
-					fill: g,
-					opacity: .2
-				}),
-				v ? /* @__PURE__ */ d(e.path, {
-					d: m,
-					fill: "none",
-					stroke: g,
-					strokeWidth: c,
-					strokeLinejoin: "round",
-					strokeLinecap: "round",
-					initial: { pathLength: 0 },
-					animate: { pathLength: 1 },
-					transition: J
-				}) : /* @__PURE__ */ d("path", {
-					d: m,
-					fill: "none",
-					stroke: g,
-					strokeWidth: c,
-					strokeLinejoin: "round",
-					strokeLinecap: "round"
-				}),
-				s && /* @__PURE__ */ d("circle", {
-					cx: _,
-					cy: b,
-					r: c + 1,
-					fill: g
-				})
-			]
-		});
-	}
-	let A = E().curve(T).x((e, t) => C(t)).y((e) => k(e))(t) ?? "", j = C(t.length - 1), M = k(t[t.length - 1]);
-	return /* @__PURE__ */ f("svg", {
-		ref: h,
-		width: i,
-		height: a,
-		role: "img",
-		"aria-label": "Sparkline chart",
-		className: r("inline-block align-middle", u),
-		...p,
-		children: [v ? /* @__PURE__ */ d(e.path, {
-			d: A,
-			fill: "none",
-			stroke: g,
-			strokeWidth: c,
-			strokeLinejoin: "round",
-			strokeLinecap: "round",
-			initial: { pathLength: 0 },
-			animate: { pathLength: 1 },
-			transition: J
-		}) : /* @__PURE__ */ d("path", {
-			d: A,
-			fill: "none",
-			stroke: g,
-			strokeWidth: c,
-			strokeLinejoin: "round",
-			strokeLinecap: "round"
-		}), s && /* @__PURE__ */ d("circle", {
-			cx: j,
-			cy: M,
-			r: c + 1,
-			fill: g
-		})]
-	});
-});
-Y.displayName = "Sparkline";
-//#endregion
-//#region src/ui/charts/gauge-chart.tsx
-var X = (e) => e * Math.PI / 180, Z = a.forwardRef(({ value: i, max: a = 100, min: o = 0, label: s, valueLabel: c, color: l, trackColor: u = "var(--color-surface-border)", height: p = 200, startAngle: m = -120, endAngle: h = 120, thickness: g = 16, animate: _ = !0, className: v, ...y }, b) => {
-	let S = H(), C = U(S, _ ? 600 : 0), w = _ && !S, T = V(l, 0), E = p, D = E / 2, O = Math.min(Math.max(i, o), a), k = a === o ? 0 : (O - o) / (a - o), A = m + (h - m) * k, j = typeof c == "function" ? c(O) : typeof c == "string" ? c : String(O), M = x().innerRadius(D - g).outerRadius(D).startAngle(X(m)).endAngle(X(h)).cornerRadius(g / 2), N = x().innerRadius(D - g).outerRadius(D).startAngle(X(m)).endAngle(X(A)).cornerRadius(g / 2), P = M(null) ?? "", F = N(null) ?? "";
-	return /* @__PURE__ */ d(e.div, {
-		ref: b,
-		className: r("inline-flex flex-col items-center", v),
-		...w ? {
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			transition: n.fade
-		} : {},
-		...t(y),
-		role: "meter",
-		"aria-valuenow": O,
-		"aria-valuemin": o,
-		"aria-valuemax": a,
-		"aria-label": s ?? "Gauge chart",
-		children: /* @__PURE__ */ d("svg", {
-			width: E,
-			height: E,
-			role: "img",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ f("g", {
-				transform: `translate(${D},${D})`,
-				children: [
-					/* @__PURE__ */ d("path", {
-						d: P,
-						fill: u
-					}),
-					/* @__PURE__ */ d("path", {
-						d: F,
-						fill: T,
-						style: C > 0 ? { transition: `d ${C}ms ease-out` } : void 0
-					}),
-					/* @__PURE__ */ d("text", {
-						x: 0,
-						y: s ? -4 : 0,
-						textAnchor: "middle",
-						dominantBaseline: "central",
-						className: "fill-surface-fg text-ds-2xl font-semibold",
-						children: j
-					}),
-					s && /* @__PURE__ */ d("text", {
-						x: 0,
-						y: 20,
-						textAnchor: "middle",
-						dominantBaseline: "central",
-						className: "fill-surface-fg-muted text-ds-xs",
-						children: s
-					})
-				]
-			})
-		})
-	});
-});
-Z.displayName = "GaugeChart";
+Y.displayName = "PieChart";
 //#endregion
 //#region src/ui/charts/radar-chart.tsx
-var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5, fillOpacity: h = .25, showDots: g = !1, height: _ = 300, showTooltip: v = !0, showLegend: y = !1, animate: b = !0, ariaLabel: x, className: S, ...C }, T) => {
-	let E = c(null), [O, k] = l(0), { tooltip: A, show: j, hide: M } = R(), N = H(), P = b && !N;
-	s(() => {
-		if (!E.current) return;
+var X = i.forwardRef(({ data: r, axes: i, series: a, maxValue: p, levels: m = 5, fillOpacity: h = .25, showDots: g = !1, height: _ = 300, showTooltip: v = !0, showLegend: b = !1, animate: x = !0, ariaLabel: C, className: w, ...T }, E) => {
+	let D = s(null), [O, k] = c(0), { tooltip: A, show: j, hide: P } = V(), F = N(), I = x && !F;
+	o(() => {
+		if (!D.current) return;
 		let e = new ResizeObserver((e) => {
 			let t = e[0];
 			t && k(t.contentRect.width);
 		});
-		return e.observe(E.current), () => e.disconnect();
+		return e.observe(D.current), () => e.disconnect();
 	}, []);
-	let F = (O > 0 ? Math.min(O, _) : _) / 2 - 40, z = o.map((e, t) => V(e.color, t)), B = p ?? Math.max(...i.flatMap((e) => o.map((t) => Number(e[t.key]) || 0)), 1), U = 2 * Math.PI / a.length, W = D().radius((e) => F * e / B).angle((e, t) => t * U).curve(w), G = (e) => a.map((t, n) => Number(i[n]?.[e]) || 0), K = (e, t) => {
-		let n = U * e - Math.PI / 2, r = F * t / B;
+	let L = (O > 0 ? Math.min(O, _) : _) / 2 - 40, z = a.map((e, t) => R(e.color, t)), H = p ?? Math.max(...r.flatMap((e) => a.map((t) => Number(e[t.key]) || 0)), 1), U = 2 * Math.PI / i.length, W = S().radius((e) => L * e / H).angle((e, t) => t * U).curve(y), G = (e) => i.map((t, n) => Number(r[n]?.[e]) || 0), K = (e, t) => {
+		let n = U * e - Math.PI / 2, r = L * t / H;
 		return {
 			x: r * Math.cos(n),
 			y: r * Math.sin(n)
 		};
 	};
-	return /* @__PURE__ */ f(e.div, {
+	return /* @__PURE__ */ d(f.div, {
 		ref: (e) => {
-			E.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
+			D.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
 		},
-		className: r("relative w-full", S),
-		...P ? {
+		className: n("relative w-full", w),
+		...I ? {
 			initial: {
 				opacity: 0,
 				scale: .96
@@ -906,21 +796,21 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 				opacity: 1,
 				scale: 1
 			},
-			transition: n.fade
+			transition: t.fade
 		} : {},
-		...t(C),
-		children: [O > 0 && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("svg", {
+		...e(T),
+		children: [O > 0 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("svg", {
 			width: O,
 			height: _,
 			role: "img",
-			"aria-label": x ?? "Radar chart",
-			children: /* @__PURE__ */ f("g", {
+			"aria-label": C ?? "Radar chart",
+			children: /* @__PURE__ */ d("g", {
 				transform: `translate(${O / 2},${_ / 2})`,
 				children: [
 					Array.from({ length: m }, (e, t) => {
-						let n = F / m * (t + 1);
-						return /* @__PURE__ */ d("polygon", {
-							points: a.map((e, t) => {
+						let n = L / m * (t + 1);
+						return /* @__PURE__ */ u("polygon", {
+							points: i.map((e, t) => {
 								let r = U * t - Math.PI / 2;
 								return `${n * Math.cos(r)},${n * Math.sin(r)}`;
 							}).join(" "),
@@ -930,20 +820,20 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 							strokeWidth: 1
 						}, `grid-${t}`);
 					}),
-					a.map((e, t) => {
+					i.map((e, t) => {
 						let n = U * t - Math.PI / 2;
-						return /* @__PURE__ */ d("line", {
+						return /* @__PURE__ */ u("line", {
 							x1: 0,
 							y1: 0,
-							x2: F * Math.cos(n),
-							y2: F * Math.sin(n),
+							x2: L * Math.cos(n),
+							y2: L * Math.sin(n),
 							stroke: "var(--color-surface-border)",
 							strokeWidth: 1
 						}, `axis-${t}`);
 					}),
-					a.map((e, t) => {
-						let n = U * t - Math.PI / 2, r = F + 18, i = r * Math.cos(n), a = r * Math.sin(n), o = "middle";
-						return Math.abs(Math.cos(n)) > .1 && (o = Math.cos(n) > 0 ? "start" : "end"), /* @__PURE__ */ d("text", {
+					i.map((e, t) => {
+						let n = U * t - Math.PI / 2, r = L + 18, i = r * Math.cos(n), a = r * Math.sin(n), o = "middle";
+						return Math.abs(Math.cos(n)) > .1 && (o = Math.cos(n) > 0 ? "start" : "end"), /* @__PURE__ */ u("text", {
 							x: i,
 							y: a,
 							textAnchor: o,
@@ -953,8 +843,8 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 						}, `label-${t}`);
 					}),
 					Array.from({ length: m }, (e, t) => {
-						let n = Math.round(B / m * (t + 1)), r = F / m * (t + 1), i = -Math.PI / 2;
-						return /* @__PURE__ */ d("text", {
+						let n = Math.round(H / m * (t + 1)), r = L / m * (t + 1), i = -Math.PI / 2;
+						return /* @__PURE__ */ u("text", {
 							x: r * Math.cos(i) + 4,
 							y: r * Math.sin(i),
 							textAnchor: "start",
@@ -963,9 +853,9 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 							children: n
 						}, `level-label-${t}`);
 					}),
-					o.map((e, t) => {
+					a.map((e, t) => {
 						let n = G(e.key), r = W(n);
-						return r ? /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("path", {
+						return r ? /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("path", {
 							d: r,
 							fill: z[t],
 							fillOpacity: h,
@@ -974,7 +864,7 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 							strokeLinejoin: "round"
 						}), g && n.map((n, r) => {
 							let { x: i, y: a } = K(r, n);
-							return /* @__PURE__ */ d("circle", {
+							return /* @__PURE__ */ u("circle", {
 								cx: i,
 								cy: a,
 								r: 4,
@@ -985,45 +875,45 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 							}, `dot-${e.key}-${r}`);
 						})] }, e.key) : null;
 					}),
-					v && a.map((e, t) => {
+					v && i.map((e, t) => {
 						let n = U * t - Math.PI / 2;
-						return /* @__PURE__ */ d("circle", {
-							cx: F * Math.cos(n),
-							cy: F * Math.sin(n),
+						return /* @__PURE__ */ u("circle", {
+							cx: L * Math.cos(n),
+							cy: L * Math.sin(n),
 							r: 16,
 							fill: "transparent",
 							className: "cursor-pointer",
 							onMouseMove: (n) => {
-								let r = n.currentTarget.closest("div")?.getBoundingClientRect();
-								j(n.clientX - (r?.left ?? 0), n.clientY - (r?.top ?? 0), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
+								let i = n.currentTarget.closest("div")?.getBoundingClientRect();
+								j(n.clientX - (i?.left ?? 0), n.clientY - (i?.top ?? 0), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
 									className: "font-medium",
 									children: e
-								}), o.map((e, n) => {
-									let r = Number(i[t]?.[e.key]) || 0;
-									return /* @__PURE__ */ f("div", {
+								}), a.map((e, n) => {
+									let i = Number(r[t]?.[e.key]) || 0;
+									return /* @__PURE__ */ d("div", {
 										className: "flex items-center gap-ds-02",
 										children: [
-											/* @__PURE__ */ d("span", {
+											/* @__PURE__ */ u("span", {
 												className: "inline-block h-2 w-2 rounded-ds-full",
 												style: { backgroundColor: z[n] }
 											}),
-											/* @__PURE__ */ f("span", {
+											/* @__PURE__ */ d("span", {
 												className: "text-surface-fg-muted",
 												children: [e.label, ":"]
 											}),
 											" ",
-											r.toLocaleString()
+											i.toLocaleString()
 										]
 									}, e.key);
 								})] }));
 							},
-							onMouseLeave: M
+							onMouseLeave: P
 						}, `hover-${t}`);
 					})
 				]
 			})
-		}), v && /* @__PURE__ */ d(L, { state: A })] }), y && /* @__PURE__ */ d(I, {
-			items: o.map((e, t) => ({
+		}), v && /* @__PURE__ */ u(B, { state: A })] }), b && /* @__PURE__ */ u(M, {
+			items: a.map((e, t) => ({
 				label: e.label,
 				color: z[t]
 			})),
@@ -1031,6 +921,116 @@ var Q = a.forwardRef(({ data: i, axes: a, series: o, maxValue: p, levels: m = 5,
 		})]
 	});
 });
-Q.displayName = "RadarChart";
+X.displayName = "RadarChart";
+//#endregion
+//#region src/ui/charts/sparkline.tsx
+var Z = {
+	duration: 1,
+	ease: "easeOut"
+}, Q = i.forwardRef(({ data: e, variant: t = "line", width: r = 120, height: i = 32, color: a, showLastDot: o = !1, strokeWidth: s = 1.5, animate: c = !0, className: l, ...p }, h) => {
+	let g = R(a, 0), v = N(), y = c && !v;
+	if (!e.length) return null;
+	let S = t === "bar" ? 1 : s, C = r - S * 2, w = i - S * 2, T = m().domain([0, Math.max(e.length - 1, 1)]).range([S, S + C]), E = Math.min(...e), D = Math.max(...e), O = E === D ? [E - 1, D + 1] : [E, D], k = m().domain(O).range([S + w, S]);
+	if (t === "bar") {
+		let t = Math.max(1, (C - 1 * (e.length - 1)) / e.length), a = S + w;
+		return /* @__PURE__ */ u("svg", {
+			ref: h,
+			width: r,
+			height: i,
+			role: "img",
+			"aria-label": "Sparkline bar chart",
+			className: n("inline-block align-middle", l),
+			...p,
+			children: e.map((e, n) => {
+				let r = S + n * (t + 1), i = k(e);
+				return /* @__PURE__ */ u("rect", {
+					x: r,
+					y: i,
+					width: t,
+					height: Math.max(1, a - i),
+					rx: Math.min(1, t / 2),
+					fill: g
+				}, n);
+			})
+		});
+	}
+	if (t === "area") {
+		let t = _().curve(b).x((e, t) => T(t)).y0(S + w).y1((e) => k(e)), a = x().curve(b).x((e, t) => T(t)).y((e) => k(e)), c = t(e) ?? "", m = a(e) ?? "", v = T(e.length - 1), C = k(e[e.length - 1]);
+		return /* @__PURE__ */ d("svg", {
+			ref: h,
+			width: r,
+			height: i,
+			role: "img",
+			"aria-label": "Sparkline area chart",
+			className: n("inline-block align-middle", l),
+			...p,
+			children: [
+				/* @__PURE__ */ u("path", {
+					d: c,
+					fill: g,
+					opacity: .2
+				}),
+				y ? /* @__PURE__ */ u(f.path, {
+					d: m,
+					fill: "none",
+					stroke: g,
+					strokeWidth: s,
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					initial: { pathLength: 0 },
+					animate: { pathLength: 1 },
+					transition: Z
+				}) : /* @__PURE__ */ u("path", {
+					d: m,
+					fill: "none",
+					stroke: g,
+					strokeWidth: s,
+					strokeLinejoin: "round",
+					strokeLinecap: "round"
+				}),
+				o && /* @__PURE__ */ u("circle", {
+					cx: v,
+					cy: C,
+					r: s + 1,
+					fill: g
+				})
+			]
+		});
+	}
+	let A = x().curve(b).x((e, t) => T(t)).y((e) => k(e))(e) ?? "", j = T(e.length - 1), M = k(e[e.length - 1]);
+	return /* @__PURE__ */ d("svg", {
+		ref: h,
+		width: r,
+		height: i,
+		role: "img",
+		"aria-label": "Sparkline chart",
+		className: n("inline-block align-middle", l),
+		...p,
+		children: [y ? /* @__PURE__ */ u(f.path, {
+			d: A,
+			fill: "none",
+			stroke: g,
+			strokeWidth: s,
+			strokeLinejoin: "round",
+			strokeLinecap: "round",
+			initial: { pathLength: 0 },
+			animate: { pathLength: 1 },
+			transition: Z
+		}) : /* @__PURE__ */ u("path", {
+			d: A,
+			fill: "none",
+			stroke: g,
+			strokeWidth: s,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}), o && /* @__PURE__ */ u("circle", {
+			cx: j,
+			cy: M,
+			r: s + 1,
+			fill: g
+		})]
+	});
+});
+Q.displayName = "Sparkline";
 //#endregion
-export { K as AreaChart, W as BarChart, N as ChartContainer, Z as GaugeChart, I as Legend, G as LineChart, q as PieChart, Q as RadarChart, Y as Sparkline };
+export { W as AreaChart, G as BarChart, U as ChartContainer, q as GaugeChart, M as Legend, J as LineChart, Y as PieChart, X as RadarChart, Q as Sparkline };