@devalok/shilp-sutra 0.8.3 → 0.9.0

package/dist/ui/charts/index.js

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