@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/ui/charts/index.js

@@ -1,1036 +1,11 @@
 "use client";
-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 { 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))
-	});
-}
-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 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: A,
-			right: k,
-			bottom: D,
-			left: O
-		}[t], a = n(e);
-		r && (a = a.ticks(r)), i && (a = a.tickFormat(i));
-		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__ */ u("g", {
-		ref: l,
-		transform: n,
-		className: c,
-		children: a && /* @__PURE__ */ u("text", {
-			textAnchor: "middle",
-			fill: "var(--color-surface-fg-muted)",
-			fontSize: "var(--text-ds-sm)",
-			...t === "bottom" ? {
-				x: "50%",
-				dy: 35
-			} : t === "left" ? {
-				transform: "rotate(-90)",
-				y: -40,
-				x: 0
-			} : {},
-			children: a
-		})
-	});
-}
-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 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__ */ u("line", {
-			x1: 0,
-			x2: e,
-			y1: r(t),
-			y2: r(t),
-			stroke: "var(--color-surface-border)",
-			strokeDasharray: "3,3",
-			opacity: .6
-		}, `h-${n}`)), a && n?.ticks && n.ticks().map((e, r) => /* @__PURE__ */ u("line", {
-			x1: n(e),
-			x2: n(e),
-			y1: 0,
-			y2: t,
-			stroke: "var(--color-surface-border)",
-			strokeDasharray: "3,3",
-			opacity: .6
-		}, `v-${r}`))]
-	});
-}
-z.displayName = "GridLines";
-//#endregion
-//#region src/ui/charts/_internal/tooltip.tsx
-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
-		},
-		children: e.content
-	}) : null;
-}
-B.displayName = "ChartTooltip";
-function V() {
-	let [e, t] = c({
-		visible: !1,
-		x: 0,
-		y: 0,
-		content: null
-	});
-	return {
-		tooltip: e,
-		show: a((e, n, r) => {
-			t({
-				visible: !0,
-				x: e,
-				y: n,
-				content: r
-			});
-		}, []),
-		hide: a(() => {
-			t((e) => ({
-				...e,
-				visible: !1
-			}));
-		}, [])
-	};
-}
-//#endregion
-//#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/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 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: n("relative", E),
-		...L ? {
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			transition: t.fade
-		} : {},
-		...e(D),
-		children: [
-			/* @__PURE__ */ u(U, {
-				height: g,
-				ariaLabel: T ?? "Bar chart",
-				children: ({ width: e, height: t, margin: n }) => {
-					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: I ? g : void 0,
-							xScale: I ? void 0 : g,
-							horizontal: I,
-							vertical: !I
-						}),
-						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__ */ u("div", {
-										className: "text-surface-fg-muted",
-										children: y
-									}),
-									/* @__PURE__ */ u("div", { children: o.toLocaleString() })
-								] });
-								return /* @__PURE__ */ u("rect", {
-									x: f,
-									y: p,
-									width: Math.max(0, m),
-									height: Math.max(0, _),
-									rx: x,
-									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,
-									onMouseMove: (e) => {
-										if (v) {
-											let t = e.currentTarget.closest("div")?.getBoundingClientRect();
-											A(e.clientX - (t?.left ?? 0), e.clientY - (t?.top ?? 0), C);
-										}
-									},
-									onMouseLeave: j,
-									onFocus: (e) => {
-										if (v) {
-											let t = e.currentTarget.closest("div")?.getBoundingClientRect(), n = e.currentTarget.getBoundingClientRect();
-											A(n.left + n.width / 2 - (t?.left ?? 0), n.top - (t?.top ?? 0), C);
-										}
-									},
-									onBlur: j
-								}, `${n}-${i}`);
-							});
-						}),
-						I ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(F, {
-							scale: h,
-							orientation: "bottom",
-							transform: `translate(0,${t})`,
-							label: S
-						}), /* @__PURE__ */ u(F, {
-							scale: g,
-							orientation: "left",
-							label: C
-						})] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(F, {
-							scale: g,
-							orientation: "bottom",
-							transform: `translate(0,${t})`,
-							label: S
-						}), /* @__PURE__ */ u(F, {
-							scale: h,
-							orientation: "left",
-							label: C
-						})] })
-					] });
-				}
-			}),
-			v && /* @__PURE__ */ u(B, { state: k }),
-			y && W && /* @__PURE__ */ u(M, {
-				items: H.map((e, t) => ({
-					label: w?.[t] ?? e,
-					color: G[t]
-				})),
-				className: "mt-ds-04"
-			})
-		]
-	});
-});
-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 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: n("relative", D),
-		...L ? {
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			transition: t.fade
-		} : {},
-		...e(O),
-		children: [
-			/* @__PURE__ */ u(U, {
-				height: g,
-				ariaLabel: E ?? "Line chart",
-				children: ({ width: e, height: t, margin: n }) => {
-					let f = r.map((e) => e[i]), g = f.every((e) => typeof e == "number"), S, C;
-					if (g) {
-						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 = f.map(String), n = h().domain(t).range([0, e]).padding(.5);
-						S = n, C = (e) => n(String(e[i])) ?? 0;
-					}
-					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
-						}),
-						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: H[t],
-							strokeWidth: p,
-							strokeLinejoin: "round",
-							strokeLinecap: "round"
-						}), s && r.map((n, r) => /* @__PURE__ */ u("circle", {
-							cx: C(n),
-							cy: O(Number(n[e.key]) || 0),
-							r: c,
-							fill: H[t],
-							className: "transition-opacity hover:opacity-80"
-						}, `${e.key}-dot-${r}`))] }, e.key)),
-						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
-							}), a.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: H[t] }
-									}),
-									/* @__PURE__ */ d("span", {
-										className: "text-surface-fg-muted",
-										children: [e.label, ":"]
-									}),
-									" ",
-									Number(n[e.key]).toLocaleString()
-								]
-							}, e.key))] });
-							return /* @__PURE__ */ u("rect", {
-								x: s - c / 2,
-								y: 0,
-								width: c,
-								height: t,
-								fill: "transparent",
-								tabIndex: 0,
-								role: "graphics-symbol",
-								"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: 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: P
-							}, `hover-${o}`);
-						}),
-						/* @__PURE__ */ u(F, {
-							scale: S,
-							orientation: "bottom",
-							transform: `translate(0,${t})`,
-							label: w
-						}),
-						/* @__PURE__ */ u(F, {
-							scale: O,
-							orientation: "left",
-							label: T
-						})
-					] });
-				}
-			}),
-			y && /* @__PURE__ */ u(B, { state: A }),
-			S && a.length > 1 && /* @__PURE__ */ u(M, {
-				items: a.map((e, t) => ({
-					label: e.label,
-					color: H[t]
-				})),
-				className: "mt-ds-04"
-			})
-		]
-	});
-});
-J.displayName = "LineChart";
-//#endregion
-//#region src/ui/charts/pie-chart.tsx
-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(D.current), () => e.disconnect();
-	}, []);
-	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) => {
-			D.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
-		},
-		className: n("relative w-full", x),
-		...z ? {
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			transition: t.fade
-		} : {},
-		...e(T),
-		children: [O > 0 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("svg", {
-			width: O,
-			height: h,
-			role: "img",
-			"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__ */ 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 (_) {
-									let n = t.currentTarget.closest("div")?.getBoundingClientRect(), r = G > 0 ? (e.data.value / G * 100).toFixed(1) : "0";
-									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__ */ d("div", { children: [
-										e.data.value.toLocaleString(),
-										" (",
-										r,
-										"%)"
-									] })] }));
-								}
-							},
-							onMouseLeave: () => {
-								j(null), I();
-							}
-						}, `slice-${e.data.label}-${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__ */ d("text", {
-							x: n,
-							y: r,
-							textAnchor: "middle",
-							dominantBaseline: "central",
-							className: "pointer-events-none fill-accent-fg text-ds-xs font-medium",
-							children: [i, "%"]
-						}, `label-${e.data.label}-${t}`);
-					}),
-					i === "donut" && S && U > 0 && /* @__PURE__ */ u("foreignObject", {
-						x: -U * .7,
-						y: -U * .7,
-						width: U * 1.4,
-						height: U * 1.4,
-						children: /* @__PURE__ */ u("div", {
-							className: "flex h-full w-full items-center justify-center text-center text-surface-fg",
-							children: S
-						})
-					})
-				]
-			})
-		}), _ && /* @__PURE__ */ u(B, { state: P })] }), v && /* @__PURE__ */ u(M, {
-			items: r.map((e, t) => ({
-				label: e.label,
-				color: W[t]
-			})),
-			className: "mt-ds-04"
-		})]
-	});
-});
-Y.displayName = "PieChart";
-//#endregion
-//#region src/ui/charts/radar-chart.tsx
-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(D.current), () => e.disconnect();
-	}, []);
-	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__ */ d(f.div, {
-		ref: (e) => {
-			D.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
-		},
-		className: n("relative w-full", w),
-		...I ? {
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			transition: t.fade
-		} : {},
-		...e(T),
-		children: [O > 0 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("svg", {
-			width: O,
-			height: _,
-			role: "img",
-			"aria-label": C ?? "Radar chart",
-			children: /* @__PURE__ */ d("g", {
-				transform: `translate(${O / 2},${_ / 2})`,
-				children: [
-					Array.from({ length: m }, (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(" "),
-							fill: "none",
-							stroke: "var(--color-surface-border)",
-							strokeDasharray: "3,3",
-							strokeWidth: 1
-						}, `grid-${t}`);
-					}),
-					i.map((e, t) => {
-						let n = U * t - Math.PI / 2;
-						return /* @__PURE__ */ u("line", {
-							x1: 0,
-							y1: 0,
-							x2: L * Math.cos(n),
-							y2: L * Math.sin(n),
-							stroke: "var(--color-surface-border)",
-							strokeWidth: 1
-						}, `axis-${t}`);
-					}),
-					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,
-							dominantBaseline: "central",
-							className: "fill-surface-fg-muted text-ds-xs",
-							children: e
-						}, `label-${t}`);
-					}),
-					Array.from({ length: m }, (e, t) => {
-						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",
-							dominantBaseline: "auto",
-							className: "fill-surface-fg-subtle text-ds-xs",
-							children: n
-						}, `level-label-${t}`);
-					}),
-					a.map((e, t) => {
-						let n = G(e.key), r = W(n);
-						return r ? /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("path", {
-							d: r,
-							fill: z[t],
-							fillOpacity: h,
-							stroke: z[t],
-							strokeWidth: 2,
-							strokeLinejoin: "round"
-						}), g && n.map((n, r) => {
-							let { x: i, y: a } = K(r, n);
-							return /* @__PURE__ */ u("circle", {
-								cx: i,
-								cy: a,
-								r: 4,
-								fill: z[t],
-								stroke: "var(--color-surface-base)",
-								strokeWidth: 2,
-								className: "transition-opacity"
-							}, `dot-${e.key}-${r}`);
-						})] }, e.key) : null;
-					}),
-					v && i.map((e, t) => {
-						let n = U * t - Math.PI / 2;
-						return /* @__PURE__ */ u("circle", {
-							cx: L * Math.cos(n),
-							cy: L * Math.sin(n),
-							r: 16,
-							fill: "transparent",
-							className: "cursor-pointer",
-							onMouseMove: (n) => {
-								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
-								}), 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__ */ u("span", {
-												className: "inline-block h-2 w-2 rounded-ds-full",
-												style: { backgroundColor: z[n] }
-											}),
-											/* @__PURE__ */ d("span", {
-												className: "text-surface-fg-muted",
-												children: [e.label, ":"]
-											}),
-											" ",
-											i.toLocaleString()
-										]
-									}, e.key);
-								})] }));
-							},
-							onMouseLeave: P
-						}, `hover-${t}`);
-					})
-				]
-			})
-		}), v && /* @__PURE__ */ u(B, { state: A })] }), b && /* @__PURE__ */ u(M, {
-			items: a.map((e, t) => ({
-				label: e.label,
-				color: z[t]
-			})),
-			className: "mt-ds-04"
-		})]
-	});
-});
-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 { 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 };
+import { r as e } from "../../_chunks/tooltip.js";
+import { t } from "../../_chunks/chart-container.js";
+import { AreaChart as n } from "./area-chart.js";
+import { BarChart as r } from "./bar-chart.js";
+import { GaugeChart as i } from "./gauge-chart.js";
+import { LineChart as a } from "./line-chart.js";
+import { PieChart as o } from "./pie-chart.js";
+import { RadarChart as s } from "./radar-chart.js";
+import { Sparkline as c } from "./sparkline.js";
+export { n as AreaChart, r as BarChart, t as ChartContainer, i as GaugeChart, e as Legend, a as LineChart, o as PieChart, s as RadarChart, c as Sparkline };