@devalok/shilp-sutra 0.1.0

package/dist/ui/charts/bar-chart.js

@@ -0,0 +1,152 @@
+import { jsxs as v, jsx as r, Fragment as T } from "react/jsx-runtime";
+import { scaleBand as I, scaleLinear as H } from "d3-scale";
+import { cn as k } from "../lib/utils.js";
+import { ChartContainer as L } from "./chart-container.js";
+import { Axis as x } from "./_internal/axes.js";
+import { GridLines as tt } from "./_internal/grid-lines.js";
+import { Legend as at } from "./_internal/legend.js";
+import { useChartTooltip as rt, ChartTooltip as ot } from "./_internal/tooltip.js";
+import { resolveColor as X } from "./_internal/colors.js";
+import { useReducedMotion as nt } from "./_internal/animation.js";
+function it({
+  data: g,
+  xKey: V,
+  yKey: C,
+  orientation: Y = "vertical",
+  stacked: s = !1,
+  grouped: N = !1,
+  color: n,
+  height: _ = 300,
+  showGrid: q = !0,
+  showTooltip: z = !0,
+  showLegend: D = !1,
+  animate: et = !0,
+  barRadius: E = 4,
+  xLabel: F,
+  yLabel: G,
+  seriesLabels: f,
+  className: J
+}) {
+  const { tooltip: P, show: Q, hide: U } = rt();
+  nt();
+  const i = Y === "vertical", c = Array.isArray(C) ? C : [C], h = c.length > 1, S = h ? c.map(
+    (p, a) => X(
+      Array.isArray(n) ? n[a] : typeof n == "string" ? n : void 0,
+      a
+    )
+  ) : [
+    X(
+      typeof n == "string" ? n : Array.isArray(n) ? n[0] : void 0,
+      0
+    )
+  ];
+  return /* @__PURE__ */ v("div", { className: k("relative", J), children: [
+    /* @__PURE__ */ r(L, { height: _, children: ({ width: p, height: a, margin: lt }) => {
+      const Z = g.map((e) => String(e[V]));
+      let A;
+      s ? A = Math.max(
+        ...g.map(
+          (e) => c.reduce((l, o) => l + (Number(e[o]) || 0), 0)
+        )
+      ) : A = Math.max(
+        ...g.flatMap((e) => c.map((l) => Number(e[l]) || 0))
+      );
+      const u = I().domain(Z).range(i ? [0, p] : [0, a]).padding(0.2), t = H().domain([0, A * 1.1]).range(i ? [a, 0] : [0, p]).nice(), O = u.bandwidth(), y = h && N ? O / c.length : O;
+      return /* @__PURE__ */ v(T, { children: [
+        q && /* @__PURE__ */ r(
+          tt,
+          {
+            width: p,
+            height: a,
+            yScale: i ? t : void 0,
+            xScale: i ? void 0 : t,
+            horizontal: i,
+            vertical: !i
+          }
+        ),
+        g.map((e) => {
+          const l = String(e[V]);
+          let o = 0;
+          return c.map((B, M) => {
+            const m = Number(e[B]) || 0, K = S[M] || S[0];
+            let $, b, j, w;
+            return i ? ($ = (u(l) ?? 0) + (N && h ? M * y : 0), b = t(s ? o + m : m), j = y, w = s ? t(o) - t(o + m) : a - t(m)) : ($ = s ? t(o) : 0, b = (u(l) ?? 0) + (N && h ? M * y : 0), j = s ? t(o + m) - t(o) : t(m), w = y), s && (o += m), /* @__PURE__ */ r(
+              "rect",
+              {
+                x: $,
+                y: b,
+                width: Math.max(0, j),
+                height: Math.max(0, w),
+                rx: E,
+                fill: K,
+                className: "transition-opacity hover:opacity-80",
+                onMouseMove: (R) => {
+                  var W;
+                  if (z) {
+                    const d = (W = R.currentTarget.closest("div")) == null ? void 0 : W.getBoundingClientRect();
+                    Q(
+                      R.clientX - ((d == null ? void 0 : d.left) ?? 0),
+                      R.clientY - ((d == null ? void 0 : d.top) ?? 0),
+                      /* @__PURE__ */ v("div", { children: [
+                        /* @__PURE__ */ r("div", { className: "font-medium", children: l }),
+                        h && /* @__PURE__ */ r("div", { className: "text-text-secondary", children: (f == null ? void 0 : f[M]) ?? B }),
+                        /* @__PURE__ */ r("div", { children: m.toLocaleString() })
+                      ] })
+                    );
+                  }
+                },
+                onMouseLeave: U
+              },
+              `${l}-${B}`
+            );
+          });
+        }),
+        i ? /* @__PURE__ */ v(T, { children: [
+          /* @__PURE__ */ r(
+            x,
+            {
+              scale: u,
+              orientation: "bottom",
+              transform: `translate(0,${a})`,
+              label: F
+            }
+          ),
+          /* @__PURE__ */ r(x, { scale: t, orientation: "left", label: G })
+        ] }) : /* @__PURE__ */ v(T, { children: [
+          /* @__PURE__ */ r(
+            x,
+            {
+              scale: t,
+              orientation: "bottom",
+              transform: `translate(0,${a})`,
+              label: F
+            }
+          ),
+          /* @__PURE__ */ r(
+            x,
+            {
+              scale: u,
+              orientation: "left",
+              label: G
+            }
+          )
+        ] })
+      ] });
+    } }),
+    z && /* @__PURE__ */ r(ot, { state: P }),
+    D && h && /* @__PURE__ */ r(
+      at,
+      {
+        items: c.map((p, a) => ({
+          label: (f == null ? void 0 : f[a]) ?? p,
+          color: S[a]
+        })),
+        className: "mt-ds-04"
+      }
+    )
+  ] });
+}
+it.displayName = "BarChart";
+export {
+  it as BarChart
+};

package/dist/ui/charts/chart-container.d.ts

@@ -0,0 +1,20 @@
+import { ChartMargin } from './_internal/types';
+import * as React from 'react';
+export interface ChartContainerProps {
+    /** Fixed height in pixels */
+    height?: number;
+    /** Chart margins */
+    margin?: Partial<ChartMargin>;
+    className?: string;
+    /** Render function receiving inner dimensions (width/height minus margins) */
+    children: (dimensions: {
+        width: number;
+        height: number;
+        margin: ChartMargin;
+    }) => React.ReactNode;
+}
+export declare function ChartContainer({ height, margin: marginOverride, className, children, }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartContainer {
+    var displayName: string;
+}
+//# sourceMappingURL=chart-container.d.ts.map

package/dist/ui/charts/chart-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/chart-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,UAAU,EAAE;QACrB,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;QACd,MAAM,EAAE,WAAW,CAAA;KACpB,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CA8BrB;yBAnCe,cAAc"}

package/dist/ui/charts/chart-container.js

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as u, useState as p, useEffect as g } from "react";
+import { cn as v } from "../lib/utils.js";
+import { DEFAULT_MARGIN as w } from "./_internal/types.js";
+function R({
+  height: i = 300,
+  margin: c,
+  className: a,
+  children: m
+}) {
+  const e = u(null), [r, f] = p(0), t = { ...w, ...c };
+  g(() => {
+    if (!e.current) return;
+    const o = new ResizeObserver((d) => {
+      const s = d[0];
+      s && f(s.contentRect.width);
+    });
+    return o.observe(e.current), () => o.disconnect();
+  }, []);
+  const h = Math.max(0, r - t.left - t.right), l = Math.max(0, i - t.top - t.bottom);
+  return /* @__PURE__ */ n("div", { ref: e, className: v("relative w-full", a), children: r > 0 && /* @__PURE__ */ n("svg", { width: r, height: i, role: "img", children: /* @__PURE__ */ n("g", { transform: `translate(${t.left},${t.top})`, children: m({ width: h, height: l, margin: t }) }) }) });
+}
+R.displayName = "ChartContainer";
+export {
+  R as ChartContainer
+};

package/dist/ui/charts/gauge-chart.d.ts

@@ -0,0 +1,32 @@
+export interface GaugeChartProps {
+    /** Current value */
+    value: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Minimum value (default: 0) */
+    min?: number;
+    /** Label below the value */
+    label?: string;
+    /** Custom value display */
+    valueLabel?: string | ((value: number) => string);
+    /** Arc color */
+    color?: string;
+    /** Track (background) color */
+    trackColor?: string;
+    /** Chart height/width (default: 200) */
+    height?: number;
+    /** Start angle in degrees (default: -120) */
+    startAngle?: number;
+    /** End angle in degrees (default: 120) */
+    endAngle?: number;
+    /** Arc thickness in pixels (default: 16) */
+    thickness?: number;
+    /** Animate the value arc */
+    animate?: boolean;
+    className?: string;
+}
+export declare function GaugeChart({ value, max, min, label, valueLabel, color, trackColor, height, startAngle, endAngle, thickness, animate, className, }: GaugeChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GaugeChart {
+    var displayName: string;
+}
+//# sourceMappingURL=gauge-chart.d.ts.map

package/dist/ui/charts/gauge-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/gauge-chart.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IACjD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,GAAS,EACT,GAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,UAAyC,EACzC,MAAY,EACZ,UAAiB,EACjB,QAAc,EACd,SAAc,EACd,OAAc,EACd,SAAS,GACV,EAAE,eAAe,2CA4FjB;yBA1Ge,UAAU"}

package/dist/ui/charts/gauge-chart.js

@@ -0,0 +1,71 @@
+import { jsx as e, jsxs as w } from "react/jsx-runtime";
+import { arc as f } from "d3-shape";
+import { cn as B } from "../lib/utils.js";
+import { resolveColor as V } from "./_internal/colors.js";
+import { useReducedMotion as z, getTransitionDuration as D } from "./_internal/animation.js";
+const d = (c) => c * Math.PI / 180;
+function E({
+  value: c,
+  max: o = 100,
+  min: r = 0,
+  label: a,
+  valueLabel: n,
+  color: x,
+  trackColor: p = "var(--color-border-subtle)",
+  height: g = 200,
+  startAngle: i = -120,
+  endAngle: m = 120,
+  thickness: s = 16,
+  animate: v = !0,
+  className: y
+}) {
+  const R = z(), h = D(R, v ? 600 : 0), G = V(x, 0), u = g, t = u / 2, l = Math.min(Math.max(c, r), o), M = o === r ? 0 : (l - r) / (o - r), C = i + (m - i) * M, N = typeof n == "function" ? n(l) : typeof n == "string" ? n : String(l), A = f().innerRadius(t - s).outerRadius(t).startAngle(d(i)).endAngle(d(m)).cornerRadius(s / 2), P = f().innerRadius(t - s).outerRadius(t).startAngle(d(i)).endAngle(d(C)).cornerRadius(s / 2), $ = A(null) ?? "", j = P(null) ?? "";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: B("inline-flex flex-col items-center", y),
+      role: "meter",
+      "aria-valuenow": l,
+      "aria-valuemin": r,
+      "aria-valuemax": o,
+      "aria-label": a ?? "Gauge chart",
+      children: /* @__PURE__ */ e("svg", { width: u, height: u, role: "img", "aria-hidden": "true", children: /* @__PURE__ */ w("g", { transform: `translate(${t},${t})`, children: [
+        /* @__PURE__ */ e("path", { d: $, fill: p }),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: j,
+            fill: G,
+            style: h > 0 ? { transition: `d ${h}ms ease-out` } : void 0
+          }
+        ),
+        /* @__PURE__ */ e(
+          "text",
+          {
+            x: 0,
+            y: a ? -4 : 0,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            className: "fill-text-primary text-ds-2xl font-semibold",
+            children: N
+          }
+        ),
+        a && /* @__PURE__ */ e(
+          "text",
+          {
+            x: 0,
+            y: 20,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            className: "fill-text-secondary text-ds-xs",
+            children: a
+          }
+        )
+      ] }) })
+    }
+  );
+}
+E.displayName = "GaugeChart";
+export {
+  E as GaugeChart
+};

package/dist/ui/charts/index.d.ts

@@ -0,0 +1,10 @@
+export { ChartContainer, type ChartContainerProps } from './chart-container';
+export { BarChart, type BarChartProps } from './bar-chart';
+export { LineChart, type LineChartProps } from './line-chart';
+export { AreaChart, type AreaChartProps } from './area-chart';
+export { PieChart, type PieChartProps } from './pie-chart';
+export { Sparkline, type SparklineProps } from './sparkline';
+export { GaugeChart, type GaugeChartProps } from './gauge-chart';
+export { RadarChart, type RadarChartProps } from './radar-chart';
+export { Legend, type LegendItem, type LegendProps } from './_internal/legend';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/ui/charts/line-chart.d.ts

@@ -0,0 +1,37 @@
+import { DataPoint, Series } from './_internal/types';
+export interface LineChartProps {
+    /** Data array */
+    data: DataPoint[];
+    /** Key for x-axis */
+    xKey: string;
+    /** Series definitions — each becomes a line */
+    series: Series[];
+    /** Use curved (monotone) interpolation */
+    curved?: boolean;
+    /** Show dots at data points */
+    showDots?: boolean;
+    /** Dot radius */
+    dotSize?: number;
+    /** Line stroke width */
+    strokeWidth?: number;
+    /** Chart height */
+    height?: number;
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show tooltip on hover */
+    showTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Animate on mount */
+    animate?: boolean;
+    /** X-axis label */
+    xLabel?: string;
+    /** Y-axis label */
+    yLabel?: string;
+    className?: string;
+}
+export declare function LineChart({ data, xKey, series, curved, showDots, dotSize, strokeWidth, height, showGrid, showTooltip, showLegend, animate, xLabel, yLabel, className, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LineChart {
+    var displayName: string;
+}
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/ui/charts/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/line-chart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1D,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAA;IACjB,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,+CAA+C;IAC/C,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAc,EACd,QAAgB,EAChB,OAAW,EACX,WAAe,EACf,MAAY,EACZ,QAAe,EACf,WAAkB,EAClB,UAAkB,EAClB,OAAc,EACd,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE,cAAc,2CA2LhB;yBA3Me,SAAS"}

package/dist/ui/charts/line-chart.js

@@ -0,0 +1,162 @@
+import { jsxs as p, jsx as n, Fragment as q } from "react/jsx-runtime";
+import { line as E, curveMonotoneX as J, curveLinear as O } from "d3-shape";
+import { scaleLinear as N, scalePoint as Q } from "d3-scale";
+import { cn as U } from "../lib/utils.js";
+import { ChartContainer as Z } from "./chart-container.js";
+import { Axis as M } from "./_internal/axes.js";
+import { GridLines as _ } from "./_internal/grid-lines.js";
+import { Legend as w } from "./_internal/legend.js";
+import { useChartTooltip as I, ChartTooltip as H } from "./_internal/tooltip.js";
+import { resolveColor as K } from "./_internal/colors.js";
+import { useReducedMotion as ee } from "./_internal/animation.js";
+function te({
+  data: c,
+  xKey: d,
+  series: s,
+  curved: k = !1,
+  showDots: L = !1,
+  dotSize: C = 4,
+  strokeWidth: S = 2,
+  height: X = 300,
+  showGrid: G = !0,
+  showTooltip: b = !0,
+  showLegend: $ = !1,
+  animate: oe = !0,
+  xLabel: j,
+  yLabel: T,
+  className: V
+}) {
+  const { tooltip: A, show: R, hide: z } = I();
+  ee();
+  const f = s.map((r, a) => K(r.color, a));
+  return /* @__PURE__ */ p("div", { className: U("relative", V), children: [
+    /* @__PURE__ */ n(Z, { height: X, children: ({ width: r, height: a, margin: ne }) => {
+      const x = c.map((e) => e[d]), B = x.every((e) => typeof e == "number");
+      let y, u;
+      if (B) {
+        const e = x, o = Math.min(...e), m = Math.max(...e), i = N().domain([o, m]).range([0, r]);
+        y = i, u = (t) => i(Number(t[d]));
+      } else {
+        const e = x.map(String), o = Q().domain(e).range([0, r]).padding(0.5);
+        y = o, u = (m) => o(String(m[d])) ?? 0;
+      }
+      const D = c.flatMap(
+        (e) => s.map((o) => Number(e[o.key]) || 0)
+      ), F = Math.max(...D), g = N().domain([0, F * 1.1]).range([a, 0]).nice(), P = k ? J : O, W = E().curve(P).defined((e) => e != null);
+      return /* @__PURE__ */ p(q, { children: [
+        G && /* @__PURE__ */ n(
+          _,
+          {
+            width: r,
+            height: a,
+            yScale: g,
+            horizontal: !0
+          }
+        ),
+        s.map((e, o) => {
+          const i = W.x((t) => u(t)).y((t) => g(Number(t[e.key]) || 0))(c) ?? "";
+          return /* @__PURE__ */ p("g", { children: [
+            /* @__PURE__ */ n(
+              "path",
+              {
+                d: i,
+                fill: "none",
+                stroke: f[o],
+                strokeWidth: S,
+                strokeLinejoin: "round",
+                strokeLinecap: "round"
+              }
+            ),
+            L && c.map((t, l) => {
+              const v = u(t), h = g(Number(t[e.key]) || 0);
+              return /* @__PURE__ */ n(
+                "circle",
+                {
+                  cx: v,
+                  cy: h,
+                  r: C,
+                  fill: f[o],
+                  className: "transition-opacity hover:opacity-80"
+                },
+                `${e.key}-dot-${l}`
+              );
+            })
+          ] }, e.key);
+        }),
+        b && c.map((e, o) => {
+          const m = u(e), i = r / Math.max(c.length - 1, 1);
+          return /* @__PURE__ */ n(
+            "rect",
+            {
+              x: m - i / 2,
+              y: 0,
+              width: i,
+              height: a,
+              fill: "transparent",
+              onMouseMove: (t) => {
+                var v;
+                const l = (v = t.currentTarget.closest("div")) == null ? void 0 : v.getBoundingClientRect();
+                R(
+                  t.clientX - ((l == null ? void 0 : l.left) ?? 0),
+                  t.clientY - ((l == null ? void 0 : l.top) ?? 0),
+                  /* @__PURE__ */ p("div", { children: [
+                    /* @__PURE__ */ n("div", { className: "font-medium", children: String(e[d]) }),
+                    s.map((h, Y) => /* @__PURE__ */ p(
+                      "div",
+                      {
+                        className: "flex items-center gap-ds-02",
+                        children: [
+                          /* @__PURE__ */ n(
+                            "span",
+                            {
+                              className: "inline-block h-2 w-2 rounded-ds-full",
+                              style: { backgroundColor: f[Y] }
+                            }
+                          ),
+                          /* @__PURE__ */ p("span", { className: "text-text-secondary", children: [
+                            h.label,
+                            ":"
+                          ] }),
+                          " ",
+                          Number(e[h.key]).toLocaleString()
+                        ]
+                      },
+                      h.key
+                    ))
+                  ] })
+                );
+              },
+              onMouseLeave: z
+            },
+            `hover-${o}`
+          );
+        }),
+        /* @__PURE__ */ n(
+          M,
+          {
+            scale: y,
+            orientation: "bottom",
+            transform: `translate(0,${a})`,
+            label: j
+          }
+        ),
+        /* @__PURE__ */ n(M, { scale: g, orientation: "left", label: T })
+      ] });
+    } }),
+    b && /* @__PURE__ */ n(H, { state: A }),
+    $ && s.length > 1 && /* @__PURE__ */ n(
+      w,
+      {
+        items: s.map((r, a) => ({
+          label: r.label,
+          color: f[a]
+        })),
+        className: "mt-ds-04"
+      }
+    )
+  ] });
+}
+te.displayName = "LineChart";
+export {
+  te as LineChart
+};

package/dist/ui/charts/pie-chart.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+interface PieSlice {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface PieChartProps {
+    /** Data with label and value */
+    data: PieSlice[];
+    /** Pie or donut variant */
+    variant?: 'pie' | 'donut';
+    /** Inner radius ratio for donut (0-1, default 0.6) */
+    innerRadius?: number;
+    /** Gap angle between slices in radians */
+    padAngle?: number;
+    /** Corner radius for slice edges */
+    cornerRadius?: number;
+    /** Chart height (and width, since pie is square) */
+    height?: number;
+    /** Show tooltip on hover */
+    showTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show percentage labels on/near slices */
+    showLabels?: boolean;
+    /** Animate slices */
+    animate?: boolean;
+    className?: string;
+    /** Content to show in center of donut */
+    centerLabel?: React.ReactNode;
+}
+export declare function PieChart({ data, variant, innerRadius: innerRadiusRatio, padAngle, cornerRadius, height, showTooltip, showLegend, showLabels, animate, className, centerLabel, }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PieChart {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=pie-chart.d.ts.map

package/dist/ui/charts/pie-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/pie-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IACzB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,OAAe,EACf,WAAW,EAAE,gBAAsB,EACnC,QAAY,EACZ,YAAgB,EAChB,MAAY,EACZ,WAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,OAAc,EACd,SAAS,EACT,WAAW,GACZ,EAAE,aAAa,2CA8Kf;yBA3Le,QAAQ"}