soadtech-ui 0.1.0

package/dist/components/Chart/DonutChart.module.css.js

@@ -0,0 +1,11 @@
+import './DonutChart.module.css';const t = "_root_1s3aq_1", o = "_center_1s3aq_13", r = "_dark_1s3aq_25", s = {
+  root: t,
+  center: o,
+  dark: r
+};
+export {
+  o as center,
+  r as dark,
+  s as default,
+  t as root
+};

package/dist/components/Chart/DonutChart.types.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface DonutChartSegment {
+    value: number;
+    label?: string;
+}
+export interface DonutChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Segments with values (will be normalized) */
+    segments: DonutChartSegment[];
+    /** Center label content */
+    centerLabel?: ReactNode;
+    /** Donut thickness in px */
+    thickness?: number;
+    /** Outer size in px */
+    size?: number;
+    /** Dark background variant */
+    dark?: boolean;
+}
+//# sourceMappingURL=DonutChart.types.d.ts.map

package/dist/components/Chart/DonutChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/DonutChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACrD,gDAAgD;IAChD,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/dist/components/Chart/GridChart.d.ts

@@ -0,0 +1,3 @@
+import { GridChartProps } from './GridChart.types';
+export declare const GridChart: import('react').ForwardRefExoticComponent<GridChartProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=GridChart.d.ts.map

package/dist/components/Chart/GridChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridChart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/GridChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,SAAS,2GAmDrB,CAAC"}

package/dist/components/Chart/GridChart.js

@@ -0,0 +1,57 @@
+import { jsxs as M, jsx as c } from "react/jsx-runtime";
+import { forwardRef as R, useMemo as w } from "react";
+import { cn as N } from "../../utils/cn.js";
+import { useChartHover as T } from "./useChartHover.js";
+import { HoverTooltip as j } from "./HoverTooltip.js";
+import l from "./GridChart.module.css.js";
+const B = R(
+  ({ data: r, color: a = "primary", cellSize: i = 16, gap: m = 3, className: p, style: f, ...h }, d) => {
+    const { flat: g, cols: u, maxVal: x } = w(() => {
+      var e;
+      const t = r.flat();
+      return {
+        flat: t,
+        cols: ((e = r[0]) == null ? void 0 : e.length) ?? 0,
+        maxVal: Math.max(...t, 1)
+      };
+    }, [r]), { hover: v, show: y, hide: C } = T();
+    return /* @__PURE__ */ M(
+      "div",
+      {
+        ref: d,
+        className: N(l.root, l[a], p),
+        style: {
+          "--gc-cols": u,
+          "--gc-cell": `${i}px`,
+          "--gc-gap": `${m}px`,
+          ...f
+        },
+        ...h,
+        children: [
+          g.map((t, e) => /* @__PURE__ */ c(
+            "div",
+            {
+              className: l.cell,
+              style: { opacity: Math.max(0.1, t / x) },
+              onMouseEnter: (n) => {
+                const o = n.currentTarget.getBoundingClientRect(), s = n.currentTarget.parentElement.getBoundingClientRect();
+                y(
+                  o.left - s.left + o.width / 2,
+                  o.top - s.top,
+                  /* @__PURE__ */ c("div", { children: t })
+                );
+              },
+              onMouseLeave: C
+            },
+            e
+          )),
+          /* @__PURE__ */ c(j, { hover: v })
+        ]
+      }
+    );
+  }
+);
+B.displayName = "GridChart";
+export {
+  B as GridChart
+};

package/dist/components/Chart/GridChart.module.css

@@ -0,0 +1 @@
+._root_1dfgh_1{position:relative;display:grid;grid-template-columns:repeat(var(--gc-cols),var(--gc-cell));gap:var(--gc-gap)}._cell_1dfgh_8{width:var(--gc-cell);height:var(--gc-cell);border-radius:var(--st-radius-sm)}._primary_1dfgh_16 ._cell_1dfgh_8{background-color:var(--st-color-chart-1)}._secondary_1dfgh_20 ._cell_1dfgh_8{background-color:var(--st-color-chart-2)}._neutral_1dfgh_24 ._cell_1dfgh_8{background-color:var(--st-color-chart-4)}

package/dist/components/Chart/GridChart.module.css.js

@@ -0,0 +1,15 @@
+import './GridChart.module.css';const o = "_root_1dfgh_1", r = "_cell_1dfgh_8", t = "_primary_1dfgh_16", _ = "_secondary_1dfgh_20", c = "_neutral_1dfgh_24", e = {
+  root: o,
+  cell: r,
+  primary: t,
+  secondary: _,
+  neutral: c
+};
+export {
+  r as cell,
+  e as default,
+  c as neutral,
+  t as primary,
+  o as root,
+  _ as secondary
+};

package/dist/components/Chart/GridChart.types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+export type GridChartColor = 'primary' | 'secondary' | 'neutral';
+export interface GridChartProps extends HTMLAttributes<HTMLDivElement> {
+    /** 2D array of values (0–1 normalized, or raw — will auto-normalize) */
+    data: number[][];
+    /** Color palette */
+    color?: GridChartColor;
+    /** Cell size in px */
+    cellSize?: number;
+    /** Gap between cells in px */
+    gap?: number;
+}
+//# sourceMappingURL=GridChart.types.d.ts.map

package/dist/components/Chart/GridChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridChart.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/GridChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,wEAAwE;IACxE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd"}

package/dist/components/Chart/HoverTooltip.d.ts

@@ -0,0 +1,7 @@
+import { HoverState } from './useChartHover';
+interface HoverTooltipProps {
+    hover: HoverState;
+}
+export declare function HoverTooltip({ hover }: HoverTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=HoverTooltip.d.ts.map

package/dist/components/Chart/HoverTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/HoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB,kDAcxD"}

package/dist/components/Chart/HoverTooltip.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import i from "./HoverTooltip.module.css.js";
+function e({ hover: t }) {
+  return t.visible ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: i.root,
+      style: {
+        left: t.x,
+        top: t.y
+      },
+      children: t.content
+    }
+  ) : null;
+}
+export {
+  e as HoverTooltip
+};

package/dist/components/Chart/HoverTooltip.module.css

@@ -0,0 +1 @@
+._root_8imk9_1{position:absolute;z-index:var(--st-z-tooltip);pointer-events:none;transform:translate(-50%,-100%);margin-top:-8px;background-color:var(--st-color-chart-tooltip-bg);color:var(--st-color-chart-tooltip-fg);border-radius:var(--st-radius-lg);padding:var(--st-space-2) var(--st-space-3);font-family:var(--st-font-family);font-size:var(--st-font-size-xs);white-space:nowrap;box-shadow:var(--st-shadow-lg);line-height:var(--st-line-height-normal)}

package/dist/components/Chart/HoverTooltip.module.css.js

@@ -0,0 +1,7 @@
+import './HoverTooltip.module.css';const o = "_root_8imk9_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/Chart/KPIIndicator.d.ts

@@ -0,0 +1,3 @@
+import { KPIIndicatorProps } from './KPIIndicator.types';
+export declare const KPIIndicator: import('react').ForwardRefExoticComponent<KPIIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=KPIIndicator.d.ts.map

package/dist/components/Chart/KPIIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPIIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/KPIIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,eAAO,MAAM,YAAY,8GAoBxB,CAAC"}

package/dist/components/Chart/KPIIndicator.js

@@ -0,0 +1,26 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { cn as p } from "../../utils/cn.js";
+import a from "./KPIIndicator.module.css.js";
+const N = t(
+  ({ value: m, label: r, trend: e, description: c, size: o = "md", className: i, ...n }, d) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: d,
+      className: p(a.root, a[o], i),
+      ...n,
+      children: [
+        r && /* @__PURE__ */ s("span", { className: a.label, children: r }),
+        /* @__PURE__ */ l("div", { className: a.valueRow, children: [
+          /* @__PURE__ */ s("span", { className: a.value, children: m }),
+          e && /* @__PURE__ */ s("span", { className: a.trend, children: e })
+        ] }),
+        c && /* @__PURE__ */ s("span", { className: a.description, children: c })
+      ]
+    }
+  )
+);
+N.displayName = "KPIIndicator";
+export {
+  N as KPIIndicator
+};

package/dist/components/Chart/KPIIndicator.module.css

@@ -0,0 +1 @@
+._root_19096_1{display:flex;flex-direction:column;font-family:var(--st-font-family)}._label_19096_7{font-size:var(--st-font-size-sm);font-weight:var(--st-font-weight-medium);color:var(--st-color-muted);margin-bottom:var(--st-space-1)}._valueRow_19096_14{display:flex;align-items:center;gap:var(--st-space-2)}._value_19096_14{font-weight:var(--st-font-weight-bold);color:var(--st-color-foreground);line-height:var(--st-line-height-tight)}._trend_19096_26{display:inline-flex}._description_19096_30{font-size:var(--st-font-size-sm);color:var(--st-color-muted);margin-top:var(--st-space-1)}._sm_19096_38 ._value_19096_14{font-size:var(--st-font-size-xl)}._md_19096_42 ._value_19096_14{font-size:var(--st-font-size-3xl)}._lg_19096_46 ._value_19096_14{font-size:var(--st-font-size-4xl)}

package/dist/components/Chart/KPIIndicator.module.css.js

@@ -0,0 +1,23 @@
+import './KPIIndicator.module.css';const _ = "_root_19096_1", o = "_label_19096_7", t = "_valueRow_19096_14", s = "_value_19096_14", e = "_trend_19096_26", l = "_description_19096_30", n = "_sm_19096_38", c = "_md_19096_42", a = "_lg_19096_46", d = {
+  root: _,
+  label: o,
+  valueRow: t,
+  value: s,
+  trend: e,
+  description: l,
+  sm: n,
+  md: c,
+  lg: a
+};
+export {
+  d as default,
+  l as description,
+  o as label,
+  a as lg,
+  c as md,
+  _ as root,
+  n as sm,
+  e as trend,
+  s as value,
+  t as valueRow
+};

package/dist/components/Chart/KPIIndicator.types.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type KPIIndicatorSize = 'sm' | 'md' | 'lg';
+export interface KPIIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    /** Large display value (e.g. "2,450" or "$12.5k") */
+    value: string;
+    /** Label displayed above the value */
+    label?: string;
+    /** Trend badge element (e.g. <TrendBadge />) */
+    trend?: ReactNode;
+    /** Description text below the value */
+    description?: string;
+    /** Size variant */
+    size?: KPIIndicatorSize;
+}
+//# sourceMappingURL=KPIIndicator.types.d.ts.map

package/dist/components/Chart/KPIIndicator.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPIIndicator.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/KPIIndicator.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB"}

package/dist/components/Chart/LineChart.d.ts

@@ -0,0 +1,3 @@
+import { LineChartProps } from './LineChart.types';
+export declare const LineChart: import('react').ForwardRefExoticComponent<LineChartProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=LineChart.d.ts.map

package/dist/components/Chart/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAoBxD,eAAO,MAAM,SAAS,2GA8PrB,CAAC"}

package/dist/components/Chart/LineChart.js

@@ -0,0 +1,229 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { forwardRef as D, useRef as H, useState as M, useId as O, useEffect as T, useMemo as L } from "react";
+import { cn as _ } from "../../utils/cn.js";
+import { niceScale as q, areaPath as R, smoothPath as F } from "./chart.utils.js";
+import { useChartHover as J } from "./useChartHover.js";
+import { HoverTooltip as K } from "./HoverTooltip.js";
+import c from "./LineChart.module.css.js";
+function A(s, i, p, f, o) {
+  const m = s.map((v, b) => ({
+    x: b / (s.length - 1) * i,
+    y: p - (f > 0 ? v / f * p : 0)
+  })), k = o ? F(m) : `M${m.map((v) => `${v.x},${v.y}`).join("L")}`;
+  return { points: m, path: k };
+}
+const Q = D(
+  ({
+    data: s,
+    comparison: i = !1,
+    smooth: p = !0,
+    areaFill: f = !0,
+    height: o = 200,
+    legend: m,
+    className: k,
+    ...v
+  }, b) => {
+    const W = H(null), [n, j] = M(0), N = O(), $ = O(), { hover: B, show: P, hide: g } = J(), [d, C] = M(null);
+    T(() => {
+      if (!W.current) return;
+      const t = new ResizeObserver((e) => {
+        for (const u of e)
+          j(u.contentRect.width);
+      });
+      return t.observe(W.current), () => t.disconnect();
+    }, []);
+    const E = L(() => {
+      const t = s.map((e) => e.value);
+      return i && t.push(...s.map((e) => e.compareValue ?? 0)), t;
+    }, [s, i]), G = Math.max(...E, 0), x = q(0, G), y = x[x.length - 1], l = L(
+      () => n > 0 ? A(s.map((t) => t.value), n, o, y, p) : null,
+      [s, n, o, y, p]
+    ), h = L(
+      () => i && n > 0 ? A(
+        s.map((t) => t.compareValue ?? 0),
+        n,
+        o,
+        y,
+        p
+      ) : null,
+      [s, i, n, o, y, p]
+    ), w = n > 0 && s.length > 1 ? n / (s.length - 1) : n;
+    return /* @__PURE__ */ a("div", { ref: b, className: _(c.root, k), ...v, children: [
+      m && /* @__PURE__ */ r("div", { className: c.legend, children: m }),
+      /* @__PURE__ */ a("div", { className: c.grid, children: [
+        /* @__PURE__ */ r("div", { className: c.yAxis, style: { height: o }, children: [...x].reverse().map((t, e) => /* @__PURE__ */ r("span", { className: c.yLabel, children: t >= 1e3 ? `${(t / 1e3).toFixed(t % 1e3 === 0 ? 0 : 1)}k` : t }, e)) }),
+        /* @__PURE__ */ a("div", { ref: W, className: c.chartArea, style: { height: o }, children: [
+          n > 0 && l && /* @__PURE__ */ a(
+            "svg",
+            {
+              width: n,
+              height: o,
+              viewBox: `0 0 ${n} ${o}`,
+              children: [
+                /* @__PURE__ */ a("defs", { children: [
+                  /* @__PURE__ */ a("linearGradient", { id: N, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                    /* @__PURE__ */ r(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: "var(--st-color-chart-1)",
+                        stopOpacity: "0.3"
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: "var(--st-color-chart-1-subtle)",
+                        stopOpacity: "0"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ a("linearGradient", { id: $, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                    /* @__PURE__ */ r(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: "var(--st-color-chart-2)",
+                        stopOpacity: "0.3"
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: "var(--st-color-chart-2-subtle)",
+                        stopOpacity: "0"
+                      }
+                    )
+                  ] })
+                ] }),
+                x.map((t, e) => {
+                  const u = o - e / (x.length - 1) * o;
+                  return /* @__PURE__ */ r(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: u,
+                      x2: n,
+                      y2: u,
+                      stroke: "var(--st-color-chart-grid)",
+                      strokeWidth: "1"
+                    },
+                    e
+                  );
+                }),
+                h && f && /* @__PURE__ */ r(
+                  "path",
+                  {
+                    d: R(
+                      h.path,
+                      o,
+                      h.points[0].x,
+                      h.points[h.points.length - 1].x
+                    ),
+                    fill: `url(#${$})`
+                  }
+                ),
+                h && /* @__PURE__ */ r(
+                  "path",
+                  {
+                    d: h.path,
+                    fill: "none",
+                    stroke: "var(--st-color-chart-2)",
+                    strokeWidth: "2",
+                    strokeLinecap: "round"
+                  }
+                ),
+                f && /* @__PURE__ */ r(
+                  "path",
+                  {
+                    d: R(
+                      l.path,
+                      o,
+                      l.points[0].x,
+                      l.points[l.points.length - 1].x
+                    ),
+                    fill: `url(#${N})`
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "path",
+                  {
+                    d: l.path,
+                    fill: "none",
+                    stroke: "var(--st-color-chart-1)",
+                    strokeWidth: "2",
+                    strokeLinecap: "round"
+                  }
+                ),
+                l.points.map((t, e) => /* @__PURE__ */ r(
+                  "circle",
+                  {
+                    cx: t.x,
+                    cy: t.y,
+                    r: d === e ? 5 : 3,
+                    fill: "var(--st-color-chart-1)",
+                    stroke: d === e ? "var(--st-color-surface)" : "none",
+                    strokeWidth: d === e ? 2 : 0
+                  },
+                  e
+                )),
+                d !== null && l.points[d] && /* @__PURE__ */ r(
+                  "line",
+                  {
+                    x1: l.points[d].x,
+                    y1: 0,
+                    x2: l.points[d].x,
+                    y2: o,
+                    stroke: "var(--st-color-chart-axis)",
+                    strokeWidth: "1",
+                    strokeDasharray: "4 3",
+                    opacity: "0.5"
+                  }
+                ),
+                s.map((t, e) => {
+                  var V, I;
+                  const u = ((V = l.points[e]) == null ? void 0 : V.x) ?? 0, S = ((I = l.points[e]) == null ? void 0 : I.y) ?? 0;
+                  return /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: u - w / 2,
+                      y: 0,
+                      width: w,
+                      height: o,
+                      fill: "transparent",
+                      onMouseEnter: () => {
+                        C(e);
+                        const z = i && t.compareValue != null ? /* @__PURE__ */ a("div", { children: [
+                          /* @__PURE__ */ r("div", { style: { fontWeight: 600, marginBottom: 2 }, children: t.label }),
+                          /* @__PURE__ */ r("div", { children: t.value }),
+                          /* @__PURE__ */ r("div", { children: t.compareValue })
+                        ] }) : /* @__PURE__ */ a("div", { children: [
+                          /* @__PURE__ */ r("div", { style: { fontWeight: 600, marginBottom: 2 }, children: t.label }),
+                          /* @__PURE__ */ r("div", { children: t.value })
+                        ] });
+                        P(u, S, z);
+                      },
+                      onMouseLeave: () => {
+                        C(null), g();
+                      }
+                    },
+                    `hit-${e}`
+                  );
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(K, { hover: B })
+        ] }),
+        /* @__PURE__ */ r("div", {}),
+        /* @__PURE__ */ r("div", { className: c.xAxis, children: s.map((t, e) => /* @__PURE__ */ r("span", { className: c.xLabel, children: t.label }, e)) })
+      ] })
+    ] });
+  }
+);
+Q.displayName = "LineChart";
+export {
+  Q as LineChart
+};

package/dist/components/Chart/LineChart.module.css

@@ -0,0 +1 @@
+._root_17h7m_1{display:flex;flex-direction:column;gap:var(--st-space-3);font-family:var(--st-font-family)}._legend_17h7m_8{display:flex;justify-content:flex-end}._grid_17h7m_13{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:var(--st-space-2)}._yAxis_17h7m_20{display:flex;flex-direction:column;justify-content:space-between;text-align:right;padding-right:var(--st-space-2)}._yLabel_17h7m_28{font-size:var(--st-font-size-xs);color:var(--st-color-chart-axis);line-height:1}._chartArea_17h7m_34{position:relative;width:100%}._chartArea_17h7m_34 svg{display:block;width:100%}._xAxis_17h7m_44{display:flex;justify-content:space-between;padding-top:var(--st-space-2)}._xLabel_17h7m_50{font-size:var(--st-font-size-xs);color:var(--st-color-chart-axis);text-align:center}

package/dist/components/Chart/LineChart.module.css.js

@@ -0,0 +1,21 @@
+import './LineChart.module.css';const _ = "_root_17h7m_1", e = "_legend_17h7m_8", s = "_grid_17h7m_13", t = "_yAxis_17h7m_20", o = "_yLabel_17h7m_28", a = "_chartArea_17h7m_34", r = "_xAxis_17h7m_44", x = "_xLabel_17h7m_50", c = {
+  root: _,
+  legend: e,
+  grid: s,
+  yAxis: t,
+  yLabel: o,
+  chartArea: a,
+  xAxis: r,
+  xLabel: x
+};
+export {
+  a as chartArea,
+  c as default,
+  s as grid,
+  e as legend,
+  _ as root,
+  r as xAxis,
+  x as xLabel,
+  t as yAxis,
+  o as yLabel
+};

package/dist/components/Chart/LineChart.types.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface LineChartDataPoint {
+    label: string;
+    value: number;
+    compareValue?: number;
+}
+export interface LineChartProps extends HTMLAttributes<HTMLDivElement> {
+    /** Chart data */
+    data: LineChartDataPoint[];
+    /** Show comparison line */
+    comparison?: boolean;
+    /** Use smooth curves (Catmull-Rom) */
+    smooth?: boolean;
+    /** Fill area under the line */
+    areaFill?: boolean;
+    /** Chart height in px */
+    height?: number;
+    /** Legend element */
+    legend?: ReactNode;
+}
+//# sourceMappingURL=LineChart.types.d.ts.map

package/dist/components/Chart/LineChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/LineChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,iBAAiB;IACjB,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB"}

package/dist/components/Chart/ProgressChart.d.ts

@@ -0,0 +1,3 @@
+import { ProgressChartProps } from './ProgressChart.types';
+export declare const ProgressChart: import('react').ForwardRefExoticComponent<ProgressChartProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressChart.d.ts.map

package/dist/components/Chart/ProgressChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressChart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/ProgressChart.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,eAAO,MAAM,aAAa,+GAqDzB,CAAC"}

package/dist/components/Chart/ProgressChart.js

@@ -0,0 +1,61 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { cn as n } from "../../utils/cn.js";
+import { normalizeSegments as R } from "./chart.utils.js";
+import { useChartHover as $ } from "./useChartHover.js";
+import { HoverTooltip as w } from "./HoverTooltip.js";
+import e from "./ProgressChart.module.css.js";
+const T = N(
+  ({
+    segments: a,
+    radius: c = 4,
+    color: l = "primary",
+    barHeight: p = 8,
+    className: d,
+    style: f,
+    ...g
+  }, h) => {
+    const u = R(a.map((r) => r.value)), { hover: v, show: x, hide: y } = $();
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: h,
+        className: n(e.root, e[l], d),
+        style: {
+          "--pc-height": `${p}px`,
+          "--pc-radius": `${c}px`,
+          ...f
+        },
+        role: "meter",
+        ...g,
+        children: [
+          /* @__PURE__ */ t("div", { className: e.bar, children: u.map((r, o) => /* @__PURE__ */ t(
+            "div",
+            {
+              className: n(e.segment, e[`seg${o + 1}`]),
+              style: { flex: r },
+              onMouseEnter: (s) => {
+                const i = s.currentTarget.getBoundingClientRect(), C = s.currentTarget.closest(`.${e.root}`).getBoundingClientRect();
+                x(
+                  i.left - C.left + i.width / 2,
+                  -4,
+                  /* @__PURE__ */ m("div", { children: [
+                    (r * 100).toFixed(1),
+                    "%"
+                  ] })
+                );
+              },
+              onMouseLeave: y
+            },
+            o
+          )) }),
+          /* @__PURE__ */ t(w, { hover: v })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "ProgressChart";
+export {
+  T as ProgressChart
+};

package/dist/components/Chart/ProgressChart.module.css

@@ -0,0 +1 @@
+._root_17kjy_1{position:relative;width:100%}._bar_17kjy_6{display:flex;width:100%;height:var(--pc-height, 8px);border-radius:var(--pc-radius, 4px);overflow:hidden;gap:2px}._segment_17kjy_15{min-width:2px;cursor:default}._primary_17kjy_22 ._seg1_17kjy_22{background-color:var(--st-color-chart-1)}._primary_17kjy_22 ._seg2_17kjy_26{background-color:var(--st-color-chart-1-muted)}._primary_17kjy_22 ._seg3_17kjy_30{background-color:var(--st-color-chart-1-faded)}._primary_17kjy_22 ._seg4_17kjy_34{background-color:var(--st-color-chart-1-subtle)}._secondary_17kjy_40 ._seg1_17kjy_22{background-color:var(--st-color-chart-2)}._secondary_17kjy_40 ._seg2_17kjy_26{background-color:var(--st-color-chart-2-muted)}._secondary_17kjy_40 ._seg3_17kjy_30{background-color:var(--st-color-chart-2-faded)}._secondary_17kjy_40 ._seg4_17kjy_34{background-color:var(--st-color-chart-2-subtle)}