@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/charts/index.js

@@ -1,1330 +1,1036 @@
 "use client";
-import { jsx as e, jsxs as p, Fragment as te } from "react/jsx-runtime";
-import * as ne from "react";
-import { useRef as ye, useState as me, useEffect as xe, useCallback as Re } from "react";
-import { cn as H } from "../lib/utils.js";
-import { scaleBand as Xe, scaleLinear as oe, scalePoint as Le } from "d3-scale";
-import { tweens as se, motionProps as ce } from "../lib/motion.js";
-import { axisLeft as De, axisBottom as Pe, axisRight as ze, axisTop as Be } from "d3-axis";
-import { select as Ve } from "d3-selection";
-import { u as _e } from "../../_chunks/motion-provider.js";
-import { m as re } from "../../_chunks/framer.js";
-import { line as he, curveMonotoneX as de, curveLinear as Ae, stack as je, stackOrderNone as Te, stackOffsetNone as Ye, area as Ne, pie as Oe, arc as ve, lineRadial as We, curveLinearClosed as Ie } from "d3-shape";
-const Fe = {
-  top: 20,
-  right: 20,
-  bottom: 40,
-  left: 50
-}, be = ne.forwardRef(
-  ({
-    height: t = 300,
-    margin: a,
-    className: o,
-    ariaLabel: x = "Chart",
-    children: d,
-    ...M
-  }, i) => {
-    const k = ye(null), [G, P] = me(0), v = { ...Fe, ...a };
-    xe(() => {
-      if (!k.current) return;
-      const B = new ResizeObserver((N) => {
-        const z = N[0];
-        z && P(z.contentRect.width);
-      });
-      return B.observe(k.current), () => B.disconnect();
-    }, []);
-    const R = Math.max(0, G - v.left - v.right), Z = Math.max(0, t - v.top - v.bottom);
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        ref: (B) => {
-          k.current = B, typeof i == "function" ? i(B) : i && (i.current = B);
-        },
-        className: H("relative w-full", o),
-        ...M,
-        children: G > 0 && /* @__PURE__ */ e("svg", { width: G, height: t, role: "img", "aria-label": x, children: /* @__PURE__ */ e("g", { transform: `translate(${v.left},${v.top})`, children: d({ width: R, height: Z, margin: v }) }) })
-      }
-    );
-  }
-);
-be.displayName = "ChartContainer";
-function ee({
-  scale: t,
-  orientation: a,
-  transform: o,
-  tickCount: x,
-  tickFormat: d,
-  label: M,
-  className: i
-}) {
-  const k = ye(null);
-  return xe(() => {
-    if (!k.current) return;
-    const P = {
-      top: Be,
-      right: ze,
-      bottom: Pe,
-      left: De
-    }[a];
-    let v = P(t);
-    x && (v = v.ticks(x)), d && (v = v.tickFormat(d));
-    const R = Ve(k.current);
-    R.call(v), R.selectAll(".tick line").attr("stroke", "var(--color-surface-border)"), R.selectAll(".tick text").attr("fill", "var(--color-surface-fg-muted)").attr("font-size", "var(--font-size-xs)"), R.selectAll(".domain").attr("stroke", "var(--color-surface-border-strong)");
-  }, [t, a, x, d]), /* @__PURE__ */ e("g", { ref: k, transform: o, className: i, children: M && /* @__PURE__ */ e(
-    "text",
-    {
-      textAnchor: "middle",
-      fill: "var(--color-surface-fg-muted)",
-      fontSize: "var(--font-size-sm)",
-      ...a === "bottom" ? { x: "50%", dy: 35 } : a === "left" ? { transform: "rotate(-90)", y: -40, x: 0 } : {},
-      children: M
-    }
-  ) });
+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 { 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: _
+				})
+			})]
+		})
+	});
+});
+N.displayName = "ChartContainer";
+//#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(() => {
+		if (!l.current) return;
+		let n = {
+			top: y,
+			right: v,
+			bottom: g,
+			left: _
+		}[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)");
+	}, [
+		e,
+		t,
+		r,
+		i
+	]), /* @__PURE__ */ d("g", {
+		ref: l,
+		transform: n,
+		className: o,
+		children: a && /* @__PURE__ */ d("text", {
+			textAnchor: "middle",
+			fill: "var(--color-surface-fg-muted)",
+			fontSize: "var(--font-size-sm)",
+			...t === "bottom" ? {
+				x: "50%",
+				dy: 35
+			} : t === "left" ? {
+				transform: "rotate(-90)",
+				y: -40,
+				x: 0
+			} : {},
+			children: a
+		})
+	});
 }
-ee.displayName = "Axis";
-function fe({
-  width: t,
-  height: a,
-  xScale: o,
-  yScale: x,
-  horizontal: d = !0,
-  vertical: M = !1
-}) {
-  return /* @__PURE__ */ p("g", { className: "grid-lines", children: [
-    d && x?.ticks && x.ticks().map((i, k) => /* @__PURE__ */ e(
-      "line",
-      {
-        x1: 0,
-        x2: t,
-        y1: x(i),
-        y2: x(i),
-        stroke: "var(--color-surface-border)",
-        strokeDasharray: "3,3",
-        opacity: 0.6
-      },
-      `h-${k}`
-    )),
-    M && o?.ticks && o.ticks().map((i, k) => /* @__PURE__ */ e(
-      "line",
-      {
-        x1: o(i),
-        x2: o(i),
-        y1: 0,
-        y2: a,
-        stroke: "var(--color-surface-border)",
-        strokeDasharray: "3,3",
-        opacity: 0.6
-      },
-      `v-${k}`
-    ))
-  ] });
+P.displayName = "Axis";
+//#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", {
+		className: "grid-lines",
+		children: [i && r?.ticks && r.ticks().map((t, n) => /* @__PURE__ */ d("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__ */ d("line", {
+			x1: n(e),
+			x2: n(e),
+			y1: 0,
+			y2: t,
+			stroke: "var(--color-surface-border)",
+			strokeDasharray: "3,3",
+			opacity: .6
+		}, `v-${r}`))]
+	});
 }
-fe.displayName = "GridLines";
-function ie({ items: t, position: a = "bottom", className: o }) {
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: H(
-        "flex gap-ds-04 text-ds-sm text-surface-fg-muted",
-        a === "left" || a === "right" ? "flex-col" : "flex-row flex-wrap justify-center",
-        o
-      ),
-      children: t.map((d) => /* @__PURE__ */ p("div", { className: "flex items-center gap-ds-02", children: [
-        /* @__PURE__ */ e(
-          "span",
-          {
-            className: "inline-block h-3 w-3 shrink-0 rounded-ds-sm",
-            style: { backgroundColor: d.color }
-          }
-        ),
-        /* @__PURE__ */ e("span", { children: d.label })
-      ] }, d.label))
-    }
-  );
+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))
+	});
 }
-ie.displayName = "Legend";
-function ue({ state: t, className: a }) {
-  return t.visible ? /* @__PURE__ */ e(
-    "div",
-    {
-      className: H(
-        "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",
-        a
-      ),
-      style: { left: t.x + 12, top: t.y - 12 },
-      children: t.content
-    }
-  ) : null;
+I.displayName = "Legend";
+//#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),
+		style: {
+			left: e.x + 12,
+			top: e.y - 12
+		},
+		children: e.content
+	}) : null;
 }
-ue.displayName = "ChartTooltip";
-function pe() {
-  const [t, a] = me({
-    visible: !1,
-    x: 0,
-    y: 0,
-    content: null
-  }), o = Re((d, M, i) => {
-    a({ visible: !0, x: d, y: M, content: i });
-  }, []), x = Re(() => {
-    a((d) => ({ ...d, visible: !1 }));
-  }, []);
-  return { tooltip: t, show: o, hide: x };
+L.displayName = "ChartTooltip";
+function R() {
+	let [e, t] = l({
+		visible: !1,
+		x: 0,
+		y: 0,
+		content: null
+	});
+	return {
+		tooltip: e,
+		show: o((e, n, r) => {
+			t({
+				visible: !0,
+				x: e,
+				y: n,
+				content: r
+			});
+		}, []),
+		hide: o(() => {
+			t((e) => ({
+				...e,
+				visible: !1
+			}));
+		}, [])
+	};
 }
-const Me = [
-  "chart-1",
-  "chart-2",
-  "chart-3",
-  "chart-4",
-  "chart-5",
-  "chart-6",
-  "chart-7",
-  "chart-8"
+//#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 $e(t) {
-  return `var(--${t})`;
+function B(e) {
+	return `var(--${e})`;
 }
-function ae(t, a = 0) {
-  return t ? Me.includes(t) ? $e(t) : t : $e(Me[a % Me.length]);
+function V(e, t = 0) {
+	return e ? z.includes(e) ? B(e) : e : B(z[t % z.length]);
 }
-function le() {
-  const { reducedMotion: t } = _e();
-  return t;
+//#endregion
+//#region src/ui/charts/_internal/animation.ts
+function H() {
+	let { reducedMotion: e } = i();
+	return e;
 }
-function Ee(t, a = 300) {
-  return t ? 0 : a;
+function U(e, t = 300) {
+	return e ? 0 : t;
 }
-const Ue = ne.forwardRef(
-  ({
-    data: t,
-    xKey: a,
-    yKey: o,
-    orientation: x = "vertical",
-    stacked: d = !1,
-    grouped: M = !1,
-    color: i,
-    height: k = 300,
-    showGrid: G = !0,
-    showTooltip: P = !0,
-    showLegend: v = !1,
-    animate: R = !0,
-    barRadius: Z = 4,
-    xLabel: B,
-    yLabel: N,
-    seriesLabels: z,
-    ariaLabel: X,
-    className: W,
-    ...q
-  }, j) => {
-    const { tooltip: T, show: V, hide: J } = pe(), E = le(), m = x === "vertical", S = R && !E, y = Array.isArray(o) ? o : [o], c = y.length > 1, I = c ? y.map(
-      (C, L) => ae(
-        Array.isArray(i) ? i[L] : typeof i == "string" ? i : void 0,
-        L
-      )
-    ) : [
-      ae(
-        typeof i == "string" ? i : Array.isArray(i) ? i[0] : void 0,
-        0
-      )
-    ];
-    return /* @__PURE__ */ p(
-      re.div,
-      {
-        ref: j,
-        className: H("relative", W),
-        ...S ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ce(q),
-        children: [
-          /* @__PURE__ */ e(be, { height: k, ariaLabel: X ?? "Bar chart", children: ({ width: C, height: L, margin: u }) => {
-            const l = t.map((A) => String(A[a]));
-            let s;
-            d ? s = Math.max(
-              ...t.map(
-                (A) => y.reduce((w, $) => w + (Number(A[$]) || 0), 0)
-              )
-            ) : s = Math.max(
-              ...t.flatMap((A) => y.map((w) => Number(A[w]) || 0))
-            );
-            const b = Xe().domain(l).range(m ? [0, C] : [0, L]).padding(0.2), n = oe().domain([0, s * 1.1]).range(m ? [L, 0] : [0, C]).nice(), r = b.bandwidth(), f = c && M ? r / y.length : r;
-            return /* @__PURE__ */ p(te, { children: [
-              G && /* @__PURE__ */ e(
-                fe,
-                {
-                  width: C,
-                  height: L,
-                  yScale: m ? n : void 0,
-                  xScale: m ? void 0 : n,
-                  horizontal: m,
-                  vertical: !m
-                }
-              ),
-              t.map((A) => {
-                const w = String(A[a]);
-                let $ = 0;
-                return y.map((Q, h) => {
-                  const g = Number(A[Q]) || 0, _ = I[h] || I[0];
-                  let Y, F, K, D;
-                  return m ? (Y = (b(w) ?? 0) + (M && c ? h * f : 0), F = n(d ? $ + g : g), K = f, D = d ? n($) - n($ + g) : L - n(g)) : (Y = d ? n($) : 0, F = (b(w) ?? 0) + (M && c ? h * f : 0), K = d ? n($ + g) - n($) : n(g), D = f), d && ($ += g), /* @__PURE__ */ e(
-                    "rect",
-                    {
-                      x: Y,
-                      y: F,
-                      width: Math.max(0, K),
-                      height: Math.max(0, D),
-                      rx: Z,
-                      fill: _,
-                      className: "transition-opacity hover:opacity-80",
-                      onMouseMove: (U) => {
-                        if (P) {
-                          const O = U.currentTarget.closest("div")?.getBoundingClientRect();
-                          V(
-                            U.clientX - (O?.left ?? 0),
-                            U.clientY - (O?.top ?? 0),
-                            /* @__PURE__ */ p("div", { children: [
-                              /* @__PURE__ */ e("div", { className: "font-medium", children: w }),
-                              c && /* @__PURE__ */ e("div", { className: "text-surface-fg-muted", children: z?.[h] ?? Q }),
-                              /* @__PURE__ */ e("div", { children: g.toLocaleString() })
-                            ] })
-                          );
-                        }
-                      },
-                      onMouseLeave: J
-                    },
-                    `${w}-${Q}`
-                  );
-                });
-              }),
-              m ? /* @__PURE__ */ p(te, { children: [
-                /* @__PURE__ */ e(
-                  ee,
-                  {
-                    scale: b,
-                    orientation: "bottom",
-                    transform: `translate(0,${L})`,
-                    label: B
-                  }
-                ),
-                /* @__PURE__ */ e(ee, { scale: n, orientation: "left", label: N })
-              ] }) : /* @__PURE__ */ p(te, { children: [
-                /* @__PURE__ */ e(
-                  ee,
-                  {
-                    scale: n,
-                    orientation: "bottom",
-                    transform: `translate(0,${L})`,
-                    label: B
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  ee,
-                  {
-                    scale: b,
-                    orientation: "left",
-                    label: N
-                  }
-                )
-              ] })
-            ] });
-          } }),
-          P && /* @__PURE__ */ e(ue, { state: T }),
-          v && c && /* @__PURE__ */ e(
-            ie,
-            {
-              items: y.map((C, L) => ({
-                label: z?.[L] ?? C,
-                color: I[L]
-              })),
-              className: "mt-ds-04"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Ue.displayName = "BarChart";
-const Ze = ne.forwardRef(
-  ({
-    data: t,
-    xKey: a,
-    series: o,
-    curved: x = !1,
-    showDots: d = !1,
-    dotSize: M = 4,
-    strokeWidth: i = 2,
-    height: k = 300,
-    showGrid: G = !0,
-    showTooltip: P = !0,
-    showLegend: v = !1,
-    animate: R = !0,
-    xLabel: Z,
-    yLabel: B,
-    ariaLabel: N,
-    className: z,
-    ...X
-  }, W) => {
-    const { tooltip: q, show: j, hide: T } = pe(), V = le(), J = R && !V, E = o.map((m, S) => ae(m.color, S));
-    return /* @__PURE__ */ p(
-      re.div,
-      {
-        ref: W,
-        className: H("relative", z),
-        ...J ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ce(X),
-        children: [
-          /* @__PURE__ */ e(be, { height: k, ariaLabel: N ?? "Line chart", children: ({ width: m, height: S, margin: y }) => {
-            const c = t.map((r) => r[a]), I = c.every((r) => typeof r == "number");
-            let C, L;
-            if (I) {
-              const r = c, f = Math.min(...r), A = Math.max(...r), w = oe().domain([f, A]).range([0, m]);
-              C = w, L = ($) => w(Number($[a]));
-            } else {
-              const r = c.map(String), f = Le().domain(r).range([0, m]).padding(0.5);
-              C = f, L = (A) => f(String(A[a])) ?? 0;
-            }
-            const u = t.flatMap(
-              (r) => o.map((f) => Number(r[f.key]) || 0)
-            ), l = Math.max(...u), s = oe().domain([0, l * 1.1]).range([S, 0]).nice(), b = x ? de : Ae, n = he().curve(b).defined((r) => r != null);
-            return /* @__PURE__ */ p(te, { children: [
-              G && /* @__PURE__ */ e(
-                fe,
-                {
-                  width: m,
-                  height: S,
-                  yScale: s,
-                  horizontal: !0
-                }
-              ),
-              o.map((r, f) => {
-                const w = n.x(($) => L($)).y(($) => s(Number($[r.key]) || 0))(t) ?? "";
-                return /* @__PURE__ */ p("g", { children: [
-                  /* @__PURE__ */ e(
-                    "path",
-                    {
-                      d: w,
-                      fill: "none",
-                      stroke: E[f],
-                      strokeWidth: i,
-                      strokeLinejoin: "round",
-                      strokeLinecap: "round"
-                    }
-                  ),
-                  d && t.map(($, Q) => {
-                    const h = L($), g = s(Number($[r.key]) || 0);
-                    return /* @__PURE__ */ e(
-                      "circle",
-                      {
-                        cx: h,
-                        cy: g,
-                        r: M,
-                        fill: E[f],
-                        className: "transition-opacity hover:opacity-80"
-                      },
-                      `${r.key}-dot-${Q}`
-                    );
-                  })
-                ] }, r.key);
-              }),
-              P && t.map((r, f) => {
-                const A = L(r), w = m / Math.max(t.length - 1, 1);
-                return /* @__PURE__ */ e(
-                  "rect",
-                  {
-                    x: A - w / 2,
-                    y: 0,
-                    width: w,
-                    height: S,
-                    fill: "transparent",
-                    onMouseMove: ($) => {
-                      const Q = $.currentTarget.closest("div")?.getBoundingClientRect();
-                      j(
-                        $.clientX - (Q?.left ?? 0),
-                        $.clientY - (Q?.top ?? 0),
-                        /* @__PURE__ */ p("div", { children: [
-                          /* @__PURE__ */ e("div", { className: "font-medium", children: String(r[a]) }),
-                          o.map((h, g) => /* @__PURE__ */ p(
-                            "div",
-                            {
-                              className: "flex items-center gap-ds-02",
-                              children: [
-                                /* @__PURE__ */ e(
-                                  "span",
-                                  {
-                                    className: "inline-block h-2 w-2 rounded-ds-full",
-                                    style: { backgroundColor: E[g] }
-                                  }
-                                ),
-                                /* @__PURE__ */ p("span", { className: "text-surface-fg-muted", children: [
-                                  h.label,
-                                  ":"
-                                ] }),
-                                " ",
-                                Number(r[h.key]).toLocaleString()
-                              ]
-                            },
-                            h.key
-                          ))
-                        ] })
-                      );
-                    },
-                    onMouseLeave: T
-                  },
-                  `hover-${f}`
-                );
-              }),
-              /* @__PURE__ */ e(
-                ee,
-                {
-                  scale: C,
-                  orientation: "bottom",
-                  transform: `translate(0,${S})`,
-                  label: Z
-                }
-              ),
-              /* @__PURE__ */ e(ee, { scale: s, orientation: "left", label: B })
-            ] });
-          } }),
-          P && /* @__PURE__ */ e(ue, { state: q }),
-          v && o.length > 1 && /* @__PURE__ */ e(
-            ie,
-            {
-              items: o.map((m, S) => ({
-                label: m.label,
-                color: E[S]
-              })),
-              className: "mt-ds-04"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Ze.displayName = "LineChart";
-const qe = ne.forwardRef(
-  ({
-    data: t,
-    xKey: a,
-    series: o,
-    curved: x = !1,
-    stacked: d = !1,
-    fillOpacity: M = 0.3,
-    gradient: i = !1,
-    strokeWidth: k = 2,
-    height: G = 300,
-    showGrid: P = !0,
-    showTooltip: v = !0,
-    showLegend: R = !1,
-    animate: Z = !0,
-    xLabel: B,
-    yLabel: N,
-    ariaLabel: z,
-    className: X,
-    ...W
-  }, q) => {
-    const { tooltip: j, show: T, hide: V } = pe(), J = le(), E = Z && !J, m = o.map((y, c) => ae(y.color, c)), S = ne.useId();
-    return /* @__PURE__ */ p(
-      re.div,
-      {
-        ref: q,
-        className: H("relative", X),
-        ...E ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ce(W),
-        children: [
-          /* @__PURE__ */ e(be, { height: G, ariaLabel: z ?? "Area chart", children: ({ width: y, height: c, margin: I }) => {
-            const C = t.map((h) => h[a]), L = C.every((h) => typeof h == "number");
-            let u, l, s;
-            if (L) {
-              const h = C, g = Math.min(...h), _ = Math.max(...h), Y = oe().domain([g, _]).range([0, y]);
-              u = Y, l = (F) => Y(Number(F[a])), s = (F) => Y(Number(t[F][a]));
-            } else {
-              const h = C.map(String), g = Le().domain(h).range([0, y]).padding(0.5);
-              u = g, l = (_) => g(String(_[a])) ?? 0, s = (_) => g(String(t[_][a])) ?? 0;
-            }
-            let b;
-            d ? b = Math.max(
-              ...t.map(
-                (h) => o.reduce((g, _) => g + (Number(h[_.key]) || 0), 0)
-              )
-            ) : b = Math.max(
-              ...t.flatMap(
-                (h) => o.map((g) => Number(h[g.key]) || 0)
-              )
-            );
-            const n = oe().domain([0, b * 1.1]).range([c, 0]).nice(), r = x ? de : Ae, f = () => t.map((h, g) => {
-              const _ = l(h), Y = y / Math.max(t.length - 1, 1);
-              return /* @__PURE__ */ e(
-                "rect",
-                {
-                  x: _ - Y / 2,
-                  y: 0,
-                  width: Y,
-                  height: c,
-                  fill: "transparent",
-                  onMouseMove: (F) => {
-                    const K = F.currentTarget.closest("div")?.getBoundingClientRect();
-                    T(
-                      F.clientX - (K?.left ?? 0),
-                      F.clientY - (K?.top ?? 0),
-                      /* @__PURE__ */ p("div", { children: [
-                        /* @__PURE__ */ e("div", { className: "font-medium", children: String(h[a]) }),
-                        o.map((D, U) => /* @__PURE__ */ p(
-                          "div",
-                          {
-                            className: "flex items-center gap-ds-02",
-                            children: [
-                              /* @__PURE__ */ e(
-                                "span",
-                                {
-                                  className: "inline-block h-2 w-2 rounded-ds-full",
-                                  style: { backgroundColor: m[U] }
-                                }
-                              ),
-                              /* @__PURE__ */ p("span", { className: "text-surface-fg-muted", children: [
-                                D.label,
-                                ":"
-                              ] }),
-                              " ",
-                              Number(h[D.key]).toLocaleString()
-                            ]
-                          },
-                          D.key
-                        ))
-                      ] })
-                    );
-                  },
-                  onMouseLeave: V
-                },
-                `hover-${g}`
-              );
-            }), A = () => i ? /* @__PURE__ */ e("defs", { children: o.map((h, g) => /* @__PURE__ */ p(
-              "linearGradient",
-              {
-                id: `${S}-gradient-${g}`,
-                x1: "0",
-                y1: "0",
-                x2: "0",
-                y2: "1",
-                children: [
-                  /* @__PURE__ */ e(
-                    "stop",
-                    {
-                      offset: "0%",
-                      stopColor: m[g],
-                      stopOpacity: M
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    "stop",
-                    {
-                      offset: "100%",
-                      stopColor: m[g],
-                      stopOpacity: 0.05
-                    }
-                  )
-                ]
-              },
-              `grad-${g}`
-            )) }) : null, w = () => /* @__PURE__ */ p(te, { children: [
-              /* @__PURE__ */ e(
-                ee,
-                {
-                  scale: u,
-                  orientation: "bottom",
-                  transform: `translate(0,${c})`,
-                  label: B
-                }
-              ),
-              /* @__PURE__ */ e(ee, { scale: n, orientation: "left", label: N })
-            ] });
-            if (d) {
-              const h = o.map((D) => D.key), g = je().keys(h).order(Te).offset(Ye), _ = t.map((D) => {
-                const U = { [a]: String(D[a]) };
-                for (const O of o)
-                  U[O.key] = Number(D[O.key]) || 0;
-                return U;
-              }), Y = g(_), F = Ne().curve(r).x((D, U) => s(U)).y0((D) => n(D[0])).y1((D) => n(D[1])), K = he().curve(r).x((D, U) => s(U)).y((D) => n(D[1]));
-              return /* @__PURE__ */ p(te, { children: [
-                A(),
-                P && /* @__PURE__ */ e(
-                  fe,
-                  {
-                    width: y,
-                    height: c,
-                    yScale: n,
-                    horizontal: !0
-                  }
-                ),
-                [...Y].reverse().map((D, U) => {
-                  const O = Y.length - 1 - U, ke = D, Se = F(ke) ?? "", we = K(ke) ?? "", Ge = i ? `url(#${S}-gradient-${O})` : m[O];
-                  return /* @__PURE__ */ p("g", { children: [
-                    /* @__PURE__ */ e(
-                      "path",
-                      {
-                        d: Se,
-                        fill: Ge,
-                        opacity: i ? 1 : M
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "path",
-                      {
-                        d: we,
-                        fill: "none",
-                        stroke: m[O],
-                        strokeWidth: k,
-                        strokeLinejoin: "round",
-                        strokeLinecap: "round"
-                      }
-                    )
-                  ] }, o[O].key);
-                }),
-                v && f(),
-                w()
-              ] });
-            }
-            const $ = Ne().curve(r).defined((h) => h != null), Q = he().curve(r).defined((h) => h != null);
-            return /* @__PURE__ */ p(te, { children: [
-              A(),
-              P && /* @__PURE__ */ e(
-                fe,
-                {
-                  width: y,
-                  height: c,
-                  yScale: n,
-                  horizontal: !0
-                }
-              ),
-              [...o].reverse().map((h, g) => {
-                const _ = o.length - 1 - g, Y = $.x((O) => l(O)).y0(c).y1((O) => n(Number(O[h.key]) || 0)), F = Q.x((O) => l(O)).y((O) => n(Number(O[h.key]) || 0)), K = Y(t) ?? "", D = F(t) ?? "", U = i ? `url(#${S}-gradient-${_})` : m[_];
-                return /* @__PURE__ */ p("g", { children: [
-                  /* @__PURE__ */ e(
-                    "path",
-                    {
-                      d: K,
-                      fill: U,
-                      opacity: i ? 1 : M
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    "path",
-                    {
-                      d: D,
-                      fill: "none",
-                      stroke: m[_],
-                      strokeWidth: k,
-                      strokeLinejoin: "round",
-                      strokeLinecap: "round"
-                    }
-                  )
-                ] }, h.key);
-              }),
-              v && f(),
-              w()
-            ] });
-          } }),
-          v && /* @__PURE__ */ e(ue, { state: j }),
-          R && o.length > 1 && /* @__PURE__ */ e(
-            ie,
-            {
-              items: o.map((y, c) => ({
-                label: y.label,
-                color: m[c]
-              })),
-              className: "mt-ds-04"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-qe.displayName = "AreaChart";
-const Je = ne.forwardRef(
-  ({
-    data: t,
-    variant: a = "pie",
-    innerRadius: o = 0.6,
-    padAngle: x = 0,
-    cornerRadius: d = 0,
-    height: M = 300,
-    showTooltip: i = !0,
-    showLegend: k = !1,
-    showLabels: G = !1,
-    animate: P = !0,
-    className: v,
-    centerLabel: R,
-    ariaLabel: Z,
-    ...B
-  }, N) => {
-    const z = ye(null), [X, W] = me(0), [q, j] = me(null), { tooltip: T, show: V, hide: J } = pe(), E = le(), m = P && !E;
-    xe(() => {
-      if (!z.current) return;
-      const n = new ResizeObserver((r) => {
-        const f = r[0];
-        f && W(f.contentRect.width);
-      });
-      return n.observe(z.current), () => n.disconnect();
-    }, []);
-    const y = (X > 0 ? Math.min(X, M) : M) / 2, c = a === "donut" ? y * o : 0, I = t.map((n, r) => ae(n.color, r)), C = t.reduce((n, r) => n + r.value, 0), u = Oe().value((n) => n.value).padAngle(x).sort(null)(t), l = ve().innerRadius(c).outerRadius(y - 2).cornerRadius(d), s = c + (y - 2 - c) * 0.7, b = ve().innerRadius(s).outerRadius(s);
-    return /* @__PURE__ */ p(
-      re.div,
-      {
-        ref: (n) => {
-          z.current = n, typeof N == "function" ? N(n) : N && (N.current = n);
-        },
-        className: H("relative w-full", v),
-        ...m ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ce(B),
-        children: [
-          X > 0 && /* @__PURE__ */ p(te, { children: [
-            /* @__PURE__ */ e(
-              "svg",
-              {
-                width: X,
-                height: M,
-                role: "img",
-                "aria-label": Z ?? "Pie chart",
-                children: /* @__PURE__ */ p("g", { transform: `translate(${X / 2},${M / 2})`, children: [
-                  u.map((n, r) => {
-                    const f = l(n);
-                    if (!f) return null;
-                    const [A, w] = l.centroid(n), $ = Math.atan2(w, A), Q = Math.cos($) * 4, h = Math.sin($) * 4, g = q === r;
-                    return /* @__PURE__ */ e(
-                      "path",
-                      {
-                        d: f,
-                        fill: I[r],
-                        className: "cursor-pointer transition-transform",
-                        style: {
-                          transform: g ? `translate(${Q}px, ${h}px)` : void 0
-                        },
-                        onMouseEnter: () => j(r),
-                        onMouseMove: (_) => {
-                          if (i) {
-                            const Y = _.currentTarget.closest("div")?.getBoundingClientRect(), F = C > 0 ? (n.data.value / C * 100).toFixed(1) : "0";
-                            V(
-                              _.clientX - (Y?.left ?? 0),
-                              _.clientY - (Y?.top ?? 0),
-                              /* @__PURE__ */ p("div", { children: [
-                                /* @__PURE__ */ e("div", { className: "font-medium", children: n.data.label }),
-                                /* @__PURE__ */ p("div", { children: [
-                                  n.data.value.toLocaleString(),
-                                  " (",
-                                  F,
-                                  "%)"
-                                ] })
-                              ] })
-                            );
-                          }
-                        },
-                        onMouseLeave: () => {
-                          j(null), J();
-                        }
-                      },
-                      `slice-${n.data.label}-${r}`
-                    );
-                  }),
-                  G && u.map((n, r) => {
-                    const [f, A] = b.centroid(n), w = C > 0 ? (n.data.value / C * 100).toFixed(0) : "0";
-                    return C > 0 && n.data.value / C < 0.03 ? null : /* @__PURE__ */ p(
-                      "text",
-                      {
-                        x: f,
-                        y: A,
-                        textAnchor: "middle",
-                        dominantBaseline: "central",
-                        className: "pointer-events-none fill-accent-fg text-ds-xs font-medium",
-                        children: [
-                          w,
-                          "%"
-                        ]
-                      },
-                      `label-${n.data.label}-${r}`
-                    );
-                  }),
-                  a === "donut" && R && c > 0 && /* @__PURE__ */ e(
-                    "foreignObject",
-                    {
-                      x: -c * 0.7,
-                      y: -c * 0.7,
-                      width: c * 1.4,
-                      height: c * 1.4,
-                      children: /* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center text-center text-surface-fg", children: R })
-                    }
-                  )
-                ] })
-              }
-            ),
-            i && /* @__PURE__ */ e(ue, { state: T })
-          ] }),
-          k && /* @__PURE__ */ e(
-            ie,
-            {
-              items: t.map((n, r) => ({
-                label: n.label,
-                color: I[r]
-              })),
-              className: "mt-ds-04"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Je.displayName = "PieChart";
-const Ce = { duration: 1, ease: "easeOut" }, Qe = ne.forwardRef(
-  ({
-    data: t,
-    variant: a = "line",
-    width: o = 120,
-    height: x = 32,
-    color: d,
-    showLastDot: M = !1,
-    strokeWidth: i = 1.5,
-    animate: k = !0,
-    className: G,
-    ...P
-  }, v) => {
-    const R = ae(d, 0), Z = le(), B = k && !Z;
-    if (!t.length) return null;
-    const N = a === "bar" ? 1 : i, z = o - N * 2, X = x - N * 2, W = oe().domain([0, Math.max(t.length - 1, 1)]).range([N, N + z]), q = Math.min(...t), j = Math.max(...t), T = q === j ? [q - 1, j + 1] : [q, j], V = oe().domain(T).range([N + X, N]);
-    if (a === "bar") {
-      const c = Math.max(
-        1,
-        (z - 1 * (t.length - 1)) / t.length
-      ), I = N + X;
-      return /* @__PURE__ */ e(
-        "svg",
-        {
-          ref: v,
-          width: o,
-          height: x,
-          role: "img",
-          "aria-label": "Sparkline bar chart",
-          className: H("inline-block align-middle", G),
-          ...P,
-          children: t.map((C, L) => {
-            const u = N + L * (c + 1), l = V(C), s = Math.max(1, I - l);
-            return /* @__PURE__ */ e(
-              "rect",
-              {
-                x: u,
-                y: l,
-                width: c,
-                height: s,
-                rx: Math.min(1, c / 2),
-                fill: R
-              },
-              L
-            );
-          })
-        }
-      );
-    }
-    if (a === "area") {
-      const y = Ne().curve(de).x((l, s) => W(s)).y0(N + X).y1((l) => V(l)), c = he().curve(de).x((l, s) => W(s)).y((l) => V(l)), I = y(t) ?? "", C = c(t) ?? "", L = W(t.length - 1), u = V(t[t.length - 1]);
-      return /* @__PURE__ */ p(
-        "svg",
-        {
-          ref: v,
-          width: o,
-          height: x,
-          role: "img",
-          "aria-label": "Sparkline area chart",
-          className: H("inline-block align-middle", G),
-          ...P,
-          children: [
-            /* @__PURE__ */ e("path", { d: I, fill: R, opacity: 0.2 }),
-            B ? /* @__PURE__ */ e(
-              re.path,
-              {
-                d: C,
-                fill: "none",
-                stroke: R,
-                strokeWidth: i,
-                strokeLinejoin: "round",
-                strokeLinecap: "round",
-                initial: { pathLength: 0 },
-                animate: { pathLength: 1 },
-                transition: Ce
-              }
-            ) : /* @__PURE__ */ e(
-              "path",
-              {
-                d: C,
-                fill: "none",
-                stroke: R,
-                strokeWidth: i,
-                strokeLinejoin: "round",
-                strokeLinecap: "round"
-              }
-            ),
-            M && /* @__PURE__ */ e(
-              "circle",
-              {
-                cx: L,
-                cy: u,
-                r: i + 1,
-                fill: R
-              }
-            )
-          ]
-        }
-      );
-    }
-    const E = he().curve(de).x((y, c) => W(c)).y((y) => V(y))(t) ?? "", m = W(t.length - 1), S = V(t[t.length - 1]);
-    return /* @__PURE__ */ p(
-      "svg",
-      {
-        ref: v,
-        width: o,
-        height: x,
-        role: "img",
-        "aria-label": "Sparkline chart",
-        className: H("inline-block align-middle", G),
-        ...P,
-        children: [
-          B ? /* @__PURE__ */ e(
-            re.path,
-            {
-              d: E,
-              fill: "none",
-              stroke: R,
-              strokeWidth: i,
-              strokeLinejoin: "round",
-              strokeLinecap: "round",
-              initial: { pathLength: 0 },
-              animate: { pathLength: 1 },
-              transition: Ce
-            }
-          ) : /* @__PURE__ */ e(
-            "path",
-            {
-              d: E,
-              fill: "none",
-              stroke: R,
-              strokeWidth: i,
-              strokeLinejoin: "round",
-              strokeLinecap: "round"
-            }
-          ),
-          M && /* @__PURE__ */ e(
-            "circle",
-            {
-              cx: m,
-              cy: S,
-              r: i + 1,
-              fill: R
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Qe.displayName = "Sparkline";
-const ge = (t) => t * Math.PI / 180, He = ne.forwardRef(
-  ({
-    value: t,
-    max: a = 100,
-    min: o = 0,
-    label: x,
-    valueLabel: d,
-    color: M,
-    trackColor: i = "var(--color-surface-border)",
-    height: k = 200,
-    startAngle: G = -120,
-    endAngle: P = 120,
-    thickness: v = 16,
-    animate: R = !0,
-    className: Z,
-    ...B
-  }, N) => {
-    const z = le(), X = Ee(z, R ? 600 : 0), W = R && !z, q = ae(M, 0), j = k, T = j / 2, V = Math.min(Math.max(t, o), a), J = a === o ? 0 : (V - o) / (a - o), E = G + (P - G) * J, m = typeof d == "function" ? d(V) : typeof d == "string" ? d : String(V), S = ve().innerRadius(T - v).outerRadius(T).startAngle(ge(G)).endAngle(ge(P)).cornerRadius(v / 2), y = ve().innerRadius(T - v).outerRadius(T).startAngle(ge(G)).endAngle(ge(E)).cornerRadius(v / 2), c = S(null) ?? "", I = y(null) ?? "";
-    return /* @__PURE__ */ e(
-      re.div,
-      {
-        ref: N,
-        className: H("inline-flex flex-col items-center", Z),
-        ...W ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ce(B),
-        role: "meter",
-        "aria-valuenow": V,
-        "aria-valuemin": o,
-        "aria-valuemax": a,
-        "aria-label": x ?? "Gauge chart",
-        children: /* @__PURE__ */ e("svg", { width: j, height: j, role: "img", "aria-hidden": "true", children: /* @__PURE__ */ p("g", { transform: `translate(${T},${T})`, children: [
-          /* @__PURE__ */ e("path", { d: c, fill: i }),
-          /* @__PURE__ */ e(
-            "path",
-            {
-              d: I,
-              fill: q,
-              style: X > 0 ? { transition: `d ${X}ms ease-out` } : void 0
-            }
-          ),
-          /* @__PURE__ */ e(
-            "text",
-            {
-              x: 0,
-              y: x ? -4 : 0,
-              textAnchor: "middle",
-              dominantBaseline: "central",
-              className: "fill-surface-fg text-ds-2xl font-semibold",
-              children: m
-            }
-          ),
-          x && /* @__PURE__ */ e(
-            "text",
-            {
-              x: 0,
-              y: 20,
-              textAnchor: "middle",
-              dominantBaseline: "central",
-              className: "fill-surface-fg-muted text-ds-xs",
-              children: x
-            }
-          )
-        ] }) })
-      }
-    );
-  }
-);
-He.displayName = "GaugeChart";
-const Ke = ne.forwardRef(
-  ({
-    data: t,
-    axes: a,
-    series: o,
-    maxValue: x,
-    levels: d = 5,
-    fillOpacity: M = 0.25,
-    showDots: i = !1,
-    height: k = 300,
-    showTooltip: G = !0,
-    showLegend: P = !1,
-    animate: v = !0,
-    ariaLabel: R,
-    className: Z,
-    ...B
-  }, N) => {
-    const z = ye(null), [X, W] = me(0), { tooltip: q, show: j, hide: T } = pe(), V = le(), J = v && !V;
-    xe(() => {
-      if (!z.current) return;
-      const u = new ResizeObserver((l) => {
-        const s = l[0];
-        s && W(s.contentRect.width);
-      });
-      return u.observe(z.current), () => u.disconnect();
-    }, []);
-    const m = (X > 0 ? Math.min(X, k) : k) / 2 - 40, S = o.map((u, l) => ae(u.color, l)), y = x ?? Math.max(
-      ...t.flatMap((u) => o.map((l) => Number(u[l.key]) || 0)),
-      1
-    ), c = 2 * Math.PI / a.length, I = We().radius((u) => m * u / y).angle((u, l) => l * c).curve(Ie), C = (u) => a.map((l, s) => Number(t[s]?.[u]) || 0), L = (u, l) => {
-      const s = c * u - Math.PI / 2, b = m * l / y;
-      return {
-        x: b * Math.cos(s),
-        y: b * Math.sin(s)
-      };
-    };
-    return /* @__PURE__ */ p(
-      re.div,
-      {
-        ref: (u) => {
-          z.current = u, typeof N == "function" ? N(u) : N && (N.current = u);
-        },
-        className: H("relative w-full", Z),
-        ...J ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ce(B),
-        children: [
-          X > 0 && /* @__PURE__ */ p(te, { children: [
-            /* @__PURE__ */ e(
-              "svg",
-              {
-                width: X,
-                height: k,
-                role: "img",
-                "aria-label": R ?? "Radar chart",
-                children: /* @__PURE__ */ p("g", { transform: `translate(${X / 2},${k / 2})`, children: [
-                  Array.from({ length: d }, (u, l) => {
-                    const s = m / d * (l + 1), b = a.map((n, r) => {
-                      const f = c * r - Math.PI / 2;
-                      return `${s * Math.cos(f)},${s * Math.sin(f)}`;
-                    }).join(" ");
-                    return /* @__PURE__ */ e(
-                      "polygon",
-                      {
-                        points: b,
-                        fill: "none",
-                        stroke: "var(--color-surface-border)",
-                        strokeDasharray: "3,3",
-                        strokeWidth: 1
-                      },
-                      `grid-${l}`
-                    );
-                  }),
-                  a.map((u, l) => {
-                    const s = c * l - Math.PI / 2, b = m * Math.cos(s), n = m * Math.sin(s);
-                    return /* @__PURE__ */ e(
-                      "line",
-                      {
-                        x1: 0,
-                        y1: 0,
-                        x2: b,
-                        y2: n,
-                        stroke: "var(--color-surface-border)",
-                        strokeWidth: 1
-                      },
-                      `axis-${l}`
-                    );
-                  }),
-                  a.map((u, l) => {
-                    const s = c * l - Math.PI / 2, b = m + 18, n = b * Math.cos(s), r = b * Math.sin(s);
-                    let f = "middle";
-                    return Math.abs(Math.cos(s)) > 0.1 && (f = Math.cos(s) > 0 ? "start" : "end"), /* @__PURE__ */ e(
-                      "text",
-                      {
-                        x: n,
-                        y: r,
-                        textAnchor: f,
-                        dominantBaseline: "central",
-                        className: "fill-surface-fg-muted text-ds-xs",
-                        children: u
-                      },
-                      `label-${l}`
-                    );
-                  }),
-                  Array.from({ length: d }, (u, l) => {
-                    const s = Math.round(y / d * (l + 1)), b = m / d * (l + 1), n = -Math.PI / 2, r = b * Math.cos(n) + 4, f = b * Math.sin(n);
-                    return /* @__PURE__ */ e(
-                      "text",
-                      {
-                        x: r,
-                        y: f,
-                        textAnchor: "start",
-                        dominantBaseline: "auto",
-                        className: "fill-surface-fg-subtle text-ds-xs",
-                        children: s
-                      },
-                      `level-label-${l}`
-                    );
-                  }),
-                  o.map((u, l) => {
-                    const s = C(u.key), b = I(s);
-                    return b ? /* @__PURE__ */ p("g", { children: [
-                      /* @__PURE__ */ e(
-                        "path",
-                        {
-                          d: b,
-                          fill: S[l],
-                          fillOpacity: M,
-                          stroke: S[l],
-                          strokeWidth: 2,
-                          strokeLinejoin: "round"
-                        }
-                      ),
-                      i && s.map((n, r) => {
-                        const { x: f, y: A } = L(r, n);
-                        return /* @__PURE__ */ e(
-                          "circle",
-                          {
-                            cx: f,
-                            cy: A,
-                            r: 4,
-                            fill: S[l],
-                            stroke: "var(--color-surface-base)",
-                            strokeWidth: 2,
-                            className: "transition-opacity"
-                          },
-                          `dot-${u.key}-${r}`
-                        );
-                      })
-                    ] }, u.key) : null;
-                  }),
-                  G && a.map((u, l) => {
-                    const s = c * l - Math.PI / 2, b = m * Math.cos(s), n = m * Math.sin(s);
-                    return /* @__PURE__ */ e(
-                      "circle",
-                      {
-                        cx: b,
-                        cy: n,
-                        r: 16,
-                        fill: "transparent",
-                        className: "cursor-pointer",
-                        onMouseMove: (r) => {
-                          const f = r.currentTarget.closest("div")?.getBoundingClientRect();
-                          j(
-                            r.clientX - (f?.left ?? 0),
-                            r.clientY - (f?.top ?? 0),
-                            /* @__PURE__ */ p("div", { children: [
-                              /* @__PURE__ */ e("div", { className: "font-medium", children: u }),
-                              o.map((A, w) => {
-                                const $ = Number(t[l]?.[A.key]) || 0;
-                                return /* @__PURE__ */ p(
-                                  "div",
-                                  {
-                                    className: "flex items-center gap-ds-02",
-                                    children: [
-                                      /* @__PURE__ */ e(
-                                        "span",
-                                        {
-                                          className: "inline-block h-2 w-2 rounded-ds-full",
-                                          style: { backgroundColor: S[w] }
-                                        }
-                                      ),
-                                      /* @__PURE__ */ p("span", { className: "text-surface-fg-muted", children: [
-                                        A.label,
-                                        ":"
-                                      ] }),
-                                      " ",
-                                      $.toLocaleString()
-                                    ]
-                                  },
-                                  A.key
-                                );
-                              })
-                            ] })
-                          );
-                        },
-                        onMouseLeave: T
-                      },
-                      `hover-${l}`
-                    );
-                  })
-                ] })
-              }
-            ),
-            G && /* @__PURE__ */ e(ue, { state: q })
-          ] }),
-          P && /* @__PURE__ */ e(
-            ie,
-            {
-              items: o.map((u, l) => ({
-                label: u.label,
-                color: S[l]
-              })),
-              className: "mt-ds-04"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Ke.displayName = "RadarChart";
-export {
-  qe as AreaChart,
-  Ue as BarChart,
-  be as ChartContainer,
-  He as GaugeChart,
-  ie as Legend,
-  Ze as LineChart,
-  Je as PieChart,
-  Ke as RadarChart,
-  Qe as Sparkline
-};
+//#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, {
+		ref: O,
+		className: r("relative", E),
+		...B ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: n.fade
+		} : {},
+		...t(D),
+		children: [
+			/* @__PURE__ */ d(N, {
+				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, {
+							width: e,
+							height: t,
+							yScale: z ? g : void 0,
+							xScale: z ? void 0 : g,
+							horizontal: z,
+							vertical: !z
+						}),
+						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", {
+										className: "font-medium",
+										children: n
+									}),
+									W && /* @__PURE__ */ d("div", {
+										className: "text-surface-fg-muted",
+										children: y
+									}),
+									/* @__PURE__ */ d("div", { children: o.toLocaleString() })
+								] });
+								return /* @__PURE__ */ d("rect", {
+									x: u,
+									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",
+									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}`);
+							});
+						}),
+						z ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(P, {
+							scale: h,
+							orientation: "bottom",
+							transform: `translate(0,${t})`,
+							label: S
+						}), /* @__PURE__ */ d(P, {
+							scale: g,
+							orientation: "left",
+							label: C
+						})] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(P, {
+							scale: g,
+							orientation: "bottom",
+							transform: `translate(0,${t})`,
+							label: S
+						}), /* @__PURE__ */ d(P, {
+							scale: h,
+							orientation: "left",
+							label: C
+						})] })
+					] });
+				}
+			}),
+			v && /* @__PURE__ */ d(L, { state: k }),
+			y && W && /* @__PURE__ */ d(I, {
+				items: U.map((e, t) => ({
+					label: w?.[t] ?? e,
+					color: G[t]
+				})),
+				className: "mt-ds-04"
+			})
+		]
+	});
+});
+W.displayName = "BarChart";
+//#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, {
+		ref: k,
+		className: r("relative", D),
+		...B ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: n.fade
+		} : {},
+		...t(O),
+		children: [
+			/* @__PURE__ */ d(N, {
+				height: g,
+				ariaLabel: w ?? "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;
+					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]));
+					} 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 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, {
+							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) ?? "",
+							fill: "none",
+							stroke: U[t],
+							strokeWidth: p,
+							strokeLinejoin: "round",
+							strokeLinecap: "round"
+						}), c && i.map((n, r) => /* @__PURE__ */ d("circle", {
+							cx: b(n),
+							cy: O(Number(n[e.key]) || 0),
+							r: l,
+							fill: U[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", {
+								className: "font-medium",
+								children: l
+							}), o.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: U[t] }
+									}),
+									/* @__PURE__ */ f("span", {
+										className: "text-surface-fg-muted",
+										children: [e.label, ":"]
+									}),
+									" ",
+									Number(n[e.key]).toLocaleString()
+								]
+							}, e.key))] });
+							return /* @__PURE__ */ d("rect", {
+								x: s - c / 2,
+								y: 0,
+								width: c,
+								height: t,
+								fill: "transparent",
+								tabIndex: 0,
+								role: "graphics-symbol",
+								"aria-label": u,
+								className: "focus-visible:outline-none",
+								onMouseMove: (e) => {
+									let t = e.currentTarget.closest("div")?.getBoundingClientRect();
+									j(e.clientX - (t?.left ?? 0), e.clientY - (t?.top ?? 0), p);
+								},
+								onMouseLeave: M,
+								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}`);
+						}),
+						/* @__PURE__ */ d(P, {
+							scale: y,
+							orientation: "bottom",
+							transform: `translate(0,${t})`,
+							label: x
+						}),
+						/* @__PURE__ */ d(P, {
+							scale: O,
+							orientation: "left",
+							label: S
+						})
+					] });
+				}
+			}),
+			v && /* @__PURE__ */ d(L, { state: A }),
+			y && o.length > 1 && /* @__PURE__ */ d(I, {
+				items: o.map((e, t) => ({
+					label: e.label,
+					color: U[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";
+//#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;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			t && k(t.contentRect.width);
+		});
+		return e.observe(E.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, {
+		ref: (e) => {
+			E.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
+		},
+		className: r("relative w-full", b),
+		...z ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: n.fade
+		} : {},
+		...t(w),
+		children: [D > 0 && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("svg", {
+			width: D,
+			height: h,
+			role: "img",
+			"aria-label": C ?? "Pie chart",
+			children: /* @__PURE__ */ f("g", {
+				transform: `translate(${D / 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", {
+							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) {
+									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", {
+										className: "font-medium",
+										children: e.data.label
+									}), /* @__PURE__ */ f("div", { children: [
+										e.data.value.toLocaleString(),
+										" (",
+										r,
+										"%)"
+									] })] }));
+								}
+							},
+							onMouseLeave: () => {
+								j(null), P();
+							}
+						}, `slice-${e.data.label}-${t}`);
+					}),
+					v && 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", {
+							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}`);
+					}),
+					a === "donut" && S && U > 0 && /* @__PURE__ */ d("foreignObject", {
+						x: -U * .7,
+						y: -U * .7,
+						width: U * 1.4,
+						height: U * 1.4,
+						children: /* @__PURE__ */ d("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) => ({
+				label: e.label,
+				color: W[t]
+			})),
+			className: "mt-ds-04"
+		})]
+	});
+});
+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";
+//#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;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			t && k(t.contentRect.width);
+		});
+		return e.observe(E.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;
+		return {
+			x: r * Math.cos(n),
+			y: r * Math.sin(n)
+		};
+	};
+	return /* @__PURE__ */ f(e.div, {
+		ref: (e) => {
+			E.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
+		},
+		className: r("relative w-full", S),
+		...P ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: n.fade
+		} : {},
+		...t(C),
+		children: [O > 0 && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("svg", {
+			width: O,
+			height: _,
+			role: "img",
+			"aria-label": x ?? "Radar chart",
+			children: /* @__PURE__ */ f("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 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}`);
+					}),
+					a.map((e, t) => {
+						let n = U * t - Math.PI / 2;
+						return /* @__PURE__ */ d("line", {
+							x1: 0,
+							y1: 0,
+							x2: F * Math.cos(n),
+							y2: F * 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", {
+							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(B / m * (t + 1)), r = F / m * (t + 1), i = -Math.PI / 2;
+						return /* @__PURE__ */ d("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}`);
+					}),
+					o.map((e, t) => {
+						let n = G(e.key), r = W(n);
+						return r ? /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("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__ */ d("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 && a.map((e, t) => {
+						let n = U * t - Math.PI / 2;
+						return /* @__PURE__ */ d("circle", {
+							cx: F * Math.cos(n),
+							cy: F * 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", {
+									className: "font-medium",
+									children: e
+								}), o.map((e, n) => {
+									let r = Number(i[t]?.[e.key]) || 0;
+									return /* @__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: z[n] }
+											}),
+											/* @__PURE__ */ f("span", {
+												className: "text-surface-fg-muted",
+												children: [e.label, ":"]
+											}),
+											" ",
+											r.toLocaleString()
+										]
+									}, e.key);
+								})] }));
+							},
+							onMouseLeave: M
+						}, `hover-${t}`);
+					})
+				]
+			})
+		}), v && /* @__PURE__ */ d(L, { state: A })] }), y && /* @__PURE__ */ d(I, {
+			items: o.map((e, t) => ({
+				label: e.label,
+				color: z[t]
+			})),
+			className: "mt-ds-04"
+		})]
+	});
+});
+Q.displayName = "RadarChart";
+//#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 };