@devalok/shilp-sutra 0.1.0

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

@@ -0,0 +1,131 @@
+import { jsxs as i, Fragment as k, jsx as r } from "react/jsx-runtime";
+import { useRef as q, useState as w, useEffect as D } from "react";
+import { pie as J, arc as j } from "d3-shape";
+import { cn as K } from "../lib/utils.js";
+import { Legend as Q } from "./_internal/legend.js";
+import { useChartTooltip as U, ChartTooltip as V } from "./_internal/tooltip.js";
+import { resolveColor as Z } from "./_internal/colors.js";
+import { useReducedMotion as _ } from "./_internal/animation.js";
+function ee({
+  data: c,
+  variant: v = "pie",
+  innerRadius: L = 0.6,
+  padAngle: z = 0,
+  cornerRadius: A = 0,
+  height: u = 300,
+  showTooltip: x = !0,
+  showLegend: F = !1,
+  showLabels: P = !1,
+  animate: te = !0,
+  className: B,
+  centerLabel: R
+}) {
+  const d = q(null), [l, E] = w(0), [H, b] = w(null), { tooltip: I, show: O, hide: S } = U();
+  _(), D(() => {
+    if (!d.current) return;
+    const e = new ResizeObserver((t) => {
+      const o = t[0];
+      o && E(o.contentRect.width);
+    });
+    return e.observe(d.current), () => e.disconnect();
+  }, []);
+  const m = (l > 0 ? Math.min(l, u) : u) / 2, n = v === "donut" ? m * L : 0, y = c.map((e, t) => Z(e.color, t)), s = c.reduce((e, t) => e + t.value, 0), g = J().value((e) => e.value).padAngle(z).sort(null)(c), M = j().innerRadius(n).outerRadius(m - 2).cornerRadius(A), $ = n + (m - 2 - n) * 0.7, T = j().innerRadius($).outerRadius($);
+  return /* @__PURE__ */ i("div", { ref: d, className: K("relative w-full", B), children: [
+    l > 0 && /* @__PURE__ */ i(k, { children: [
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          width: l,
+          height: u,
+          role: "img",
+          "aria-label": "Pie chart",
+          children: /* @__PURE__ */ i("g", { transform: `translate(${l / 2},${u / 2})`, children: [
+            g.map((e, t) => {
+              const o = M(e);
+              if (!o) return null;
+              const [f, p] = M.centroid(e), C = Math.atan2(p, f), W = Math.cos(C) * 4, X = Math.sin(C) * 4, Y = H === t;
+              return /* @__PURE__ */ r(
+                "path",
+                {
+                  d: o,
+                  fill: y[t],
+                  className: "cursor-pointer transition-transform",
+                  style: {
+                    transform: Y ? `translate(${W}px, ${X}px)` : void 0
+                  },
+                  onMouseEnter: () => b(t),
+                  onMouseMove: (h) => {
+                    var N;
+                    if (x) {
+                      const a = (N = h.currentTarget.closest("div")) == null ? void 0 : N.getBoundingClientRect(), G = s > 0 ? (e.data.value / s * 100).toFixed(1) : "0";
+                      O(
+                        h.clientX - ((a == null ? void 0 : a.left) ?? 0),
+                        h.clientY - ((a == null ? void 0 : a.top) ?? 0),
+                        /* @__PURE__ */ i("div", { children: [
+                          /* @__PURE__ */ r("div", { className: "font-medium", children: e.data.label }),
+                          /* @__PURE__ */ i("div", { children: [
+                            e.data.value.toLocaleString(),
+                            " (",
+                            G,
+                            "%)"
+                          ] })
+                        ] })
+                      );
+                    }
+                  },
+                  onMouseLeave: () => {
+                    b(null), S();
+                  }
+                },
+                `slice-${e.data.label}-${t}`
+              );
+            }),
+            P && g.map((e, t) => {
+              const [o, f] = T.centroid(e), p = s > 0 ? (e.data.value / s * 100).toFixed(0) : "0";
+              return s > 0 && e.data.value / s < 0.03 ? null : /* @__PURE__ */ i(
+                "text",
+                {
+                  x: o,
+                  y: f,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  className: "pointer-events-none fill-text-on-color text-ds-xs font-medium",
+                  children: [
+                    p,
+                    "%"
+                  ]
+                },
+                `label-${e.data.label}-${t}`
+              );
+            }),
+            v === "donut" && R && n > 0 && /* @__PURE__ */ r(
+              "foreignObject",
+              {
+                x: -n * 0.7,
+                y: -n * 0.7,
+                width: n * 1.4,
+                height: n * 1.4,
+                children: /* @__PURE__ */ r("div", { className: "flex h-full w-full items-center justify-center text-center text-text-primary", children: R })
+              }
+            )
+          ] })
+        }
+      ),
+      x && /* @__PURE__ */ r(V, { state: I })
+    ] }),
+    F && /* @__PURE__ */ r(
+      Q,
+      {
+        items: c.map((e, t) => ({
+          label: e.label,
+          color: y[t]
+        })),
+        className: "mt-ds-04"
+      }
+    )
+  ] });
+}
+ee.displayName = "PieChart";
+export {
+  ee as PieChart
+};

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

@@ -0,0 +1,34 @@
+export interface RadarChartProps {
+    /** Data array (one entry per data point / axis) */
+    data: Record<string, string | number>[];
+    /** Axis labels (3-8 axes) */
+    axes: string[];
+    /** Series to plot */
+    series: {
+        key: string;
+        label: string;
+        color?: string;
+    }[];
+    /** Max value (auto-detect if not set) */
+    maxValue?: number;
+    /** Number of concentric grid rings (default: 5) */
+    levels?: number;
+    /** Fill opacity for the data polygon (default: 0.25) */
+    fillOpacity?: number;
+    /** Show dots at vertices */
+    showDots?: boolean;
+    /** Chart height (default: 300) */
+    height?: number;
+    /** Show tooltip on hover */
+    showTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Animate on mount */
+    animate?: boolean;
+    className?: string;
+}
+export declare function RadarChart({ data, axes, series, maxValue: maxValueProp, levels, fillOpacity, showDots, height, showTooltip, showLegend, animate, className, }: RadarChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadarChart {
+    var displayName: string;
+}
+//# sourceMappingURL=radar-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/radar-chart.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,qBAAqB;IACrB,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EAAE,YAAY,EACtB,MAAU,EACV,WAAkB,EAClB,QAAgB,EAChB,MAAY,EACZ,WAAkB,EAClB,UAAkB,EAClB,OAAc,EACd,SAAS,GACV,EAAE,eAAe,2CAyQjB;yBAtRe,UAAU"}

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

@@ -0,0 +1,222 @@
+import { jsxs as i, Fragment as B, jsx as s } from "react/jsx-runtime";
+import { useRef as T, useState as X, useEffect as Y } from "react";
+import { lineRadial as D, curveLinearClosed as E } from "d3-shape";
+import { cn as F } from "../lib/utils.js";
+import { Legend as O } from "./_internal/legend.js";
+import { useChartTooltip as q, ChartTooltip as G } from "./_internal/tooltip.js";
+import { resolveColor as H } from "./_internal/colors.js";
+import { useReducedMotion as J } from "./_internal/animation.js";
+function K({
+  data: g,
+  axes: d,
+  series: u,
+  maxValue: R,
+  levels: h = 5,
+  fillOpacity: $ = 0.25,
+  showDots: C = !1,
+  height: M = 300,
+  showTooltip: k = !0,
+  showLegend: P = !1,
+  animate: Q = !0,
+  className: L
+}) {
+  const v = T(null), [p, S] = X(0), { tooltip: W, show: _, hide: w } = q();
+  J(), Y(() => {
+    if (!v.current) return;
+    const e = new ResizeObserver((t) => {
+      const r = t[0];
+      r && S(r.contentRect.width);
+    });
+    return e.observe(v.current), () => e.disconnect();
+  }, []);
+  const c = (p > 0 ? Math.min(p, M) : M) / 2 - 40, f = u.map((e, t) => H(e.color, t)), x = R ?? Math.max(
+    ...g.flatMap((e) => u.map((t) => Number(e[t.key]) || 0)),
+    1
+  ), m = 2 * Math.PI / d.length, I = D().radius((e) => c * e / x).angle((e, t) => t * m).curve(E), j = (e) => d.map((t, r) => {
+    var n;
+    return Number((n = g[r]) == null ? void 0 : n[e]) || 0;
+  }), A = (e, t) => {
+    const r = m * e - Math.PI / 2, n = c * t / x;
+    return {
+      x: n * Math.cos(r),
+      y: n * Math.sin(r)
+    };
+  };
+  return /* @__PURE__ */ i("div", { ref: v, className: F("relative w-full", L), children: [
+    p > 0 && /* @__PURE__ */ i(B, { children: [
+      /* @__PURE__ */ s(
+        "svg",
+        {
+          width: p,
+          height: M,
+          role: "img",
+          "aria-label": "Radar chart",
+          children: /* @__PURE__ */ i("g", { transform: `translate(${p / 2},${M / 2})`, children: [
+            Array.from({ length: h }, (e, t) => {
+              const r = c / h * (t + 1), n = d.map((l, a) => {
+                const o = m * a - Math.PI / 2;
+                return `${r * Math.cos(o)},${r * Math.sin(o)}`;
+              }).join(" ");
+              return /* @__PURE__ */ s(
+                "polygon",
+                {
+                  points: n,
+                  fill: "none",
+                  stroke: "var(--color-border-subtle)",
+                  strokeDasharray: "3,3",
+                  strokeWidth: 1
+                },
+                `grid-${t}`
+              );
+            }),
+            d.map((e, t) => {
+              const r = m * t - Math.PI / 2, n = c * Math.cos(r), l = c * Math.sin(r);
+              return /* @__PURE__ */ s(
+                "line",
+                {
+                  x1: 0,
+                  y1: 0,
+                  x2: n,
+                  y2: l,
+                  stroke: "var(--color-border-subtle)",
+                  strokeWidth: 1
+                },
+                `axis-${t}`
+              );
+            }),
+            d.map((e, t) => {
+              const r = m * t - Math.PI / 2, n = c + 18, l = n * Math.cos(r), a = n * Math.sin(r);
+              let o = "middle";
+              return Math.abs(Math.cos(r)) > 0.1 && (o = Math.cos(r) > 0 ? "start" : "end"), /* @__PURE__ */ s(
+                "text",
+                {
+                  x: l,
+                  y: a,
+                  textAnchor: o,
+                  dominantBaseline: "central",
+                  className: "fill-text-secondary text-ds-xs",
+                  children: e
+                },
+                `label-${t}`
+              );
+            }),
+            Array.from({ length: h }, (e, t) => {
+              const r = Math.round(x / h * (t + 1)), n = c / h * (t + 1), l = -Math.PI / 2, a = n * Math.cos(l) + 4, o = n * Math.sin(l);
+              return /* @__PURE__ */ s(
+                "text",
+                {
+                  x: a,
+                  y: o,
+                  textAnchor: "start",
+                  dominantBaseline: "auto",
+                  className: "fill-[var(--color-text-muted)] text-ds-xs",
+                  children: r
+                },
+                `level-label-${t}`
+              );
+            }),
+            u.map((e, t) => {
+              const r = j(e.key), n = I(r);
+              return n ? /* @__PURE__ */ i("g", { children: [
+                /* @__PURE__ */ s(
+                  "path",
+                  {
+                    d: n,
+                    fill: f[t],
+                    fillOpacity: $,
+                    stroke: f[t],
+                    strokeWidth: 2,
+                    strokeLinejoin: "round"
+                  }
+                ),
+                C && r.map((l, a) => {
+                  const { x: o, y } = A(a, l);
+                  return /* @__PURE__ */ s(
+                    "circle",
+                    {
+                      cx: o,
+                      cy: y,
+                      r: 4,
+                      fill: f[t],
+                      stroke: "var(--color-layer-01)",
+                      strokeWidth: 2,
+                      className: "transition-opacity"
+                    },
+                    `dot-${e.key}-${a}`
+                  );
+                })
+              ] }, e.key) : null;
+            }),
+            k && d.map((e, t) => {
+              const r = m * t - Math.PI / 2, n = c * Math.cos(r), l = c * Math.sin(r);
+              return /* @__PURE__ */ s(
+                "circle",
+                {
+                  cx: n,
+                  cy: l,
+                  r: 16,
+                  fill: "transparent",
+                  className: "cursor-pointer",
+                  onMouseMove: (a) => {
+                    var y;
+                    const o = (y = a.currentTarget.closest("div")) == null ? void 0 : y.getBoundingClientRect();
+                    _(
+                      a.clientX - ((o == null ? void 0 : o.left) ?? 0),
+                      a.clientY - ((o == null ? void 0 : o.top) ?? 0),
+                      /* @__PURE__ */ i("div", { children: [
+                        /* @__PURE__ */ s("div", { className: "font-medium", children: e }),
+                        u.map((b, V) => {
+                          var N;
+                          const z = Number((N = g[t]) == null ? void 0 : N[b.key]) || 0;
+                          return /* @__PURE__ */ i(
+                            "div",
+                            {
+                              className: "flex items-center gap-ds-02",
+                              children: [
+                                /* @__PURE__ */ s(
+                                  "span",
+                                  {
+                                    className: "inline-block h-2 w-2 rounded-ds-full",
+                                    style: { backgroundColor: f[V] }
+                                  }
+                                ),
+                                /* @__PURE__ */ i("span", { className: "text-text-secondary", children: [
+                                  b.label,
+                                  ":"
+                                ] }),
+                                " ",
+                                z.toLocaleString()
+                              ]
+                            },
+                            b.key
+                          );
+                        })
+                      ] })
+                    );
+                  },
+                  onMouseLeave: w
+                },
+                `hover-${t}`
+              );
+            })
+          ] })
+        }
+      ),
+      k && /* @__PURE__ */ s(G, { state: W })
+    ] }),
+    P && /* @__PURE__ */ s(
+      O,
+      {
+        items: u.map((e, t) => ({
+          label: e.label,
+          color: f[t]
+        })),
+        className: "mt-ds-04"
+      }
+    )
+  ] });
+}
+K.displayName = "RadarChart";
+export {
+  K as RadarChart
+};

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

@@ -0,0 +1,22 @@
+export interface SparklineProps {
+    /** Numeric data points */
+    data: number[];
+    /** Visual variant */
+    variant?: 'line' | 'bar' | 'area';
+    /** Width (default: 120) */
+    width?: number;
+    /** Height (default: 32) */
+    height?: number;
+    /** Color token or CSS color */
+    color?: string;
+    /** Show a dot on the last data point (line/area only) */
+    showLastDot?: boolean;
+    /** Line stroke width (line/area only, default: 1.5) */
+    strokeWidth?: number;
+    className?: string;
+}
+export declare function Sparkline({ data, variant, width, height, color, showLastDot, strokeWidth, className, }: SparklineProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Sparkline {
+    var displayName: string;
+}
+//# sourceMappingURL=sparkline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../src/ui/charts/sparkline.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAA;IACjC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAgB,EAChB,KAAW,EACX,MAAW,EACX,KAAK,EACL,WAAmB,EACnB,WAAiB,EACjB,SAAS,GACV,EAAE,cAAc,kDA8IhB;yBAvJe,SAAS"}

package/dist/ui/charts/sparkline.js

@@ -0,0 +1,123 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { area as q, curveMonotoneX as G, line as D } from "d3-shape";
+import { scaleLinear as X } from "d3-scale";
+import { cn as S } from "../lib/utils.js";
+import { resolveColor as z } from "./_internal/colors.js";
+function A({
+  data: n,
+  variant: f = "line",
+  width: p = 120,
+  height: g = 32,
+  color: Y,
+  showLastDot: j = !1,
+  strokeWidth: a = 1.5,
+  className: x
+}) {
+  const i = z(Y, 0);
+  if (!n.length) return null;
+  const e = f === "bar" ? 1 : a, L = p - e * 2, b = g - e * 2, t = X().domain([0, Math.max(n.length - 1, 1)]).range([e, e + L]), u = Math.min(...n), y = Math.max(...n), _ = u === y ? [u - 1, y + 1] : [u, y], c = X().domain(_).range([e + b, e]);
+  if (f === "bar") {
+    const r = Math.max(
+      1,
+      (L - 1 * (n.length - 1)) / n.length
+    ), k = e + b;
+    return /* @__PURE__ */ o(
+      "svg",
+      {
+        width: p,
+        height: g,
+        role: "img",
+        "aria-label": "Sparkline bar chart",
+        className: S("inline-block align-middle", x),
+        children: n.map((M, h) => {
+          const v = e + h * (r + 1), l = c(M), m = Math.max(1, k - l);
+          return /* @__PURE__ */ o(
+            "rect",
+            {
+              x: v,
+              y: l,
+              width: r,
+              height: m,
+              rx: Math.min(1, r / 2),
+              fill: i
+            },
+            h
+          );
+        })
+      }
+    );
+  }
+  if (f === "area") {
+    const s = q().curve(G).x((l, m) => t(m)).y0(e + b).y1((l) => c(l)), r = D().curve(G).x((l, m) => t(m)).y((l) => c(l)), k = s(n) ?? "", M = r(n) ?? "", h = t(n.length - 1), v = c(n[n.length - 1]);
+    return /* @__PURE__ */ d(
+      "svg",
+      {
+        width: p,
+        height: g,
+        role: "img",
+        "aria-label": "Sparkline area chart",
+        className: S("inline-block align-middle", x),
+        children: [
+          /* @__PURE__ */ o("path", { d: k, fill: i, opacity: 0.2 }),
+          /* @__PURE__ */ o(
+            "path",
+            {
+              d: M,
+              fill: "none",
+              stroke: i,
+              strokeWidth: a,
+              strokeLinejoin: "round",
+              strokeLinecap: "round"
+            }
+          ),
+          j && /* @__PURE__ */ o(
+            "circle",
+            {
+              cx: h,
+              cy: v,
+              r: a + 1,
+              fill: i
+            }
+          )
+        ]
+      }
+    );
+  }
+  const C = D().curve(G).x((s, r) => t(r)).y((s) => c(s))(n) ?? "", H = t(n.length - 1), N = c(n[n.length - 1]);
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      width: p,
+      height: g,
+      role: "img",
+      "aria-label": "Sparkline chart",
+      className: S("inline-block align-middle", x),
+      children: [
+        /* @__PURE__ */ o(
+          "path",
+          {
+            d: C,
+            fill: "none",
+            stroke: i,
+            strokeWidth: a,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        j && /* @__PURE__ */ o(
+          "circle",
+          {
+            cx: H,
+            cy: N,
+            r: a + 1,
+            fill: i
+          }
+        )
+      ]
+    }
+  );
+}
+A.displayName = "Sparkline";
+export {
+  A as Sparkline
+};

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,36 @@
+import * as CheckboxPrimitive from '@primitives/react-checkbox';
+import * as React from 'react';
+/**
+ * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and
+ * an indeterminate state for "select all" row controls.
+ *
+ * **Indeterminate:** Pass `indeterminate={true}` to show the "−" dash (overrides `checked`).
+ * This is correct for "select all" headers when only some rows are selected.
+ *
+ * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.
+ * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.
+ *
+ * @example
+ * // Basic controlled checkbox:
+ * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />
+ *
+ * @example
+ * // Error state when required checkbox is not checked:
+ * <Checkbox error={!termsAccepted} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />
+ *
+ * @example
+ * // "Select all" checkbox with indeterminate state:
+ * <Checkbox
+ *   indeterminate={someSelected && !allSelected}
+ *   checked={allSelected}
+ *   onCheckedChange={(v) => toggleAll(v === true)}
+ * />
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    error?: boolean;
+    indeterminate?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/ui/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAA;AAE/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC;IAClG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,QAAQ,yFAiCZ,CAAA;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/checkbox.js

@@ -0,0 +1,33 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Checkbox as r, CheckboxIndicator as n } from "../primitives/react-checkbox.js";
+import { IconMinus as m, IconCheck as l } from "@tabler/icons-react";
+import * as b from "react";
+import { cn as f } from "./lib/utils.js";
+const h = b.forwardRef(({ className: o, error: i, indeterminate: a, checked: c, ...s }, d) => {
+  const t = a ? "indeterminate" : c;
+  return /* @__PURE__ */ e(
+    r,
+    {
+      ref: d,
+      checked: t,
+      className: f(
+        "peer h-ico-md w-ico-md shrink-0 rounded-ds-sm",
+        "border border-border-strong",
+        "bg-field",
+        "transition-colors duration-fast-01",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-[0.38]",
+        "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive data-[state=checked]:text-text-on-color",
+        "data-[state=indeterminate]:bg-interactive data-[state=indeterminate]:border-interactive data-[state=indeterminate]:text-text-on-color",
+        i && "border-border-error",
+        o
+      ),
+      ...s,
+      children: /* @__PURE__ */ e(n, { className: "flex items-center justify-center text-current", children: t === "indeterminate" ? /* @__PURE__ */ e(m, { className: "h-ico-sm w-ico-sm" }) : /* @__PURE__ */ e(l, { className: "h-ico-sm w-ico-sm" }) })
+    }
+  );
+});
+h.displayName = r.displayName;
+export {
+  h as Checkbox
+};

package/dist/ui/chip.d.ts

@@ -0,0 +1,66 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const chipVariants: (props?: ({
+    variant?: "filled" | "outlined" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "primary" | "error" | "default" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "amber" | "slate" | "emerald" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ChipColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'teal' | 'amber' | 'slate' | 'indigo' | 'cyan' | 'orange' | 'emerald';
+/**
+ * Props for Chip — a compact label-tag component with a two-axis variant system.
+ *
+ * **Two axes:**
+ * - `variant` controls **shape**: `"filled"` (solid background, default) | `"outlined"` (border only)
+ * - `color` controls **intent/category**: `"default"` | `"primary"` | `"success"` | `"error"` |
+ *   `"warning"` | `"info"` | `"teal"` | `"amber"` | `"slate"` | `"indigo"` | `"cyan"` | `"orange"` | `"emerald"`
+ *
+ * **Comparison with Badge:** Badge uses `variant=` for intent (e.g. `variant="success"`).
+ * Chip uses `color=` for intent. They are different — don't mix them up.
+ *
+ * **Important:** Use the `label` prop, NOT `children`. Chip does not render children.
+ *
+ * @example
+ * // Basic label chip:
+ * <Chip label="In Progress" />
+ *
+ * // With intent color (use color=, not variant=):
+ * <Chip label="High Priority" color="warning" />
+ * <Chip label="Done" color="success" variant="outlined" />
+ *
+ * // Dismissible chip (e.g. in a filter bar):
+ * <Chip label="React" color="info" onDelete={() => removeFilter('react')} />
+ *
+ * // Clickable chip (renders as <button>):
+ * <Chip label="View details" color="primary" onClick={() => openPanel(id)} />
+ *
+ * // WRONG — children are not rendered (TypeScript error in strict mode):
+ * // <Chip>High Priority</Chip>
+ *
+ * // Badge comparison:
+ * // <Badge variant="success">Done</Badge>  ← Badge uses variant= for intent
+ * // <Chip label="Done" color="success" />  ← Chip uses color= for intent
+ */
+type ChipProps = Omit<VariantProps<typeof chipVariants>, 'color'> & {
+    label: string;
+    color?: ChipColor;
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler;
+    onDelete?: () => void;
+    disabled?: boolean;
+    className?: string;
+};
+declare const Chip: React.ForwardRefExoticComponent<Omit<VariantProps<(props?: ({
+    variant?: "filled" | "outlined" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "primary" | "error" | "default" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "amber" | "slate" | "emerald" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "color"> & {
+    label: string;
+    color?: ChipColor;
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler;
+    onDelete?: () => void;
+    disabled?: boolean;
+    className?: string;
+} & React.RefAttributes<HTMLElement>>;
+export { Chip, chipVariants, type ChipProps };
+//# sourceMappingURL=chip.d.ts.map