impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/card.js

@@ -1,62 +1,62 @@
 import { jsx as d } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as t } from "../../lib/utils.js";
-const s = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+import * as t from "react";
+import { cn as o } from "../../lib/utils.js";
+const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
     "data-component": "card",
-    className: t(
-      "rounded-xl border bg-card text-card-foreground shadow",
+    className: o(
+      "rounded-xl border bg-canvas-elevated text-canvas-elevated-foreground shadow",
       a
     ),
     ...e
   }
 ));
 s.displayName = "Card";
-const i = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+const n = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("flex flex-col space-y-1.5 p-6", a),
+    className: o("flex flex-col space-y-1.5 p-6", a),
     ...e
   }
 ));
-i.displayName = "CardHeader";
-const c = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+n.displayName = "CardHeader";
+const i = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("font-semibold leading-none tracking-tight", a),
+    className: o("font-semibold leading-none tracking-tight", a),
     ...e
   }
 ));
-c.displayName = "CardTitle";
-const n = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+i.displayName = "CardTitle";
+const c = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("text-sm text-muted-foreground", a),
+    className: o("text-sm text-content-muted", a),
     ...e
   }
 ));
-n.displayName = "CardDescription";
-const m = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", a), ...e }));
-m.displayName = "CardContent";
-const f = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+c.displayName = "CardDescription";
+const l = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: o("p-6 pt-0", a), ...e }));
+l.displayName = "CardContent";
+const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("flex items-center p-6 pt-0", a),
+    className: o("flex items-center p-6 pt-0", a),
     ...e
   }
 ));
-f.displayName = "CardFooter";
+m.displayName = "CardFooter";
 export {
   s as Card,
-  m as CardContent,
-  n as CardDescription,
-  f as CardFooter,
-  i as CardHeader,
-  c as CardTitle
+  l as CardContent,
+  c as CardDescription,
+  m as CardFooter,
+  n as CardHeader,
+  i as CardTitle
 };

package/dist/components/ui/chart/chart.js

@@ -1,4 +1,4 @@
-import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { jsx as s, jsxs as F } from "react/jsx-runtime";
 import * as n from "react";
 import * as l from "highcharts";
 import H from "highcharts-react-official";
@@ -23,14 +23,14 @@ const c = (e, r) => {
   typeof e == "function" ? e(r) : typeof e == "object" && e.default && typeof e.default == "function" && e.default(r);
 };
 typeof l == "object" && (c(B, l), c(M, l), c(T, l), c(P, l), c(D, l), c(O, l), c(G, l), c(J, l), c(K, l), c(V, l), c(Q, l));
-const F = n.createContext(null), k = () => {
-  const e = n.useContext(F);
+const b = n.createContext(null), k = () => {
+  const e = n.useContext(b);
   if (!e)
     throw new Error("Chart components must be used within a ChartContainer");
   return e;
 }, z = n.forwardRef(
   ({ className: e, children: r, isLoading: i = !1, ...o }, f) => {
-    const a = n.useRef(null), u = n.useRef(null), [m, h] = n.useState(!1), [x, p] = n.useState(!1);
+    const a = n.useRef(null), m = n.useRef(null), [u, h] = n.useState(!1), [x, p] = n.useState(!1);
     n.useImperativeHandle(f, () => a.current);
     const w = () => {
       const t = a.current;
@@ -43,7 +43,7 @@ const F = n.createContext(null), k = () => {
         document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), h(!1), t.classList.remove("fullscreen-animating-out");
       }, 200));
     }, q = () => {
-      m ? C() : w();
+      u ? C() : w();
     };
     return n.useEffect(() => {
       const t = () => {
@@ -56,11 +56,11 @@ const F = n.createContext(null), k = () => {
         );
       };
     }, []), n.useEffect(() => {
-      if (!u?.current?.chart) return;
-      const t = u.current.chart;
+      if (!m?.current?.chart) return;
+      const t = m.current.chart;
       let d = null;
       const E = () => {
-        m && a.current ? (d && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+        u && a.current ? (d && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
           const v = a.current;
           if (!v) return;
           const R = v.getBoundingClientRect(), N = v.querySelector('[class*="ChartContent"]');
@@ -75,15 +75,15 @@ const F = n.createContext(null), k = () => {
       return window.addEventListener("resize", E), () => {
         d && cancelAnimationFrame(d), window.removeEventListener("resize", E);
       };
-    }, [m]), /* @__PURE__ */ s(
-      F.Provider,
+    }, [u]), /* @__PURE__ */ s(
+      b.Provider,
       {
         value: {
-          isExpanded: m,
+          isExpanded: u,
           toggleFullscreen: q,
           isLoading: i,
           containerRef: a,
-          chartComponentRef: u
+          chartComponentRef: m
         },
         children: /* @__PURE__ */ s(
           "div",
@@ -91,8 +91,8 @@ const F = n.createContext(null), k = () => {
             ref: a,
             className: g(
               e,
-              "w-full relative bg-card transition-all duration-200 ease-in-out",
-              m && "fixed inset-0 z-50 h-screen w-screen p-4 bg-background flex flex-col",
+              "w-full relative bg-canvas-elevated transition-all duration-200 ease-in-out",
+              u && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
               x && "overflow-hidden"
             ),
             ...o,
@@ -118,8 +118,8 @@ const Z = n.forwardRef(
 Z.displayName = "ChartActions";
 const _ = n.forwardRef(
   ({ className: e, ...r }, i) => {
-    const { t: o } = W(), { toggleFullscreen: f, isExpanded: a } = k(), u = o("aria.toggleFullscreen");
-    return /* @__PURE__ */ b(
+    const { t: o } = W(), { toggleFullscreen: f, isExpanded: a } = k(), m = o("aria.toggleFullscreen");
+    return /* @__PURE__ */ F(
       I,
       {
         variant: "ghost",
@@ -127,11 +127,11 @@ const _ = n.forwardRef(
         onClick: f,
         ref: i,
         className: g("h-8 w-8", e),
-        "aria-label": u,
+        "aria-label": m,
         ...r,
         children: [
           a ? /* @__PURE__ */ s(A, { className: "h-4 w-4" }) : /* @__PURE__ */ s(j, { className: "h-4 w-4" }),
-          /* @__PURE__ */ s("span", { className: "sr-only", children: u })
+          /* @__PURE__ */ s("span", { className: "sr-only", children: m })
         ]
       }
     );
@@ -140,13 +140,13 @@ const _ = n.forwardRef(
 _.displayName = "ChartFullScreen";
 const S = n.forwardRef(
   ({ className: e, children: r, loader: i, ...o }, f) => {
-    const { isLoading: a, chartComponentRef: u, isExpanded: m } = k();
-    return a && i ? /* @__PURE__ */ s("div", { ref: f, className: g(e, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", m && "min-h-0"), ...o, children: i }) : /* @__PURE__ */ b("div", { ref: f, className: g(e, "w-full relative flex-1 min-h-[300px]", m && "min-h-0"), ...o, children: [
-      a && /* @__PURE__ */ b("div", { className: "absolute inset-0 z-10 bg-background/50 flex flex-col gap-2 p-4", children: [
+    const { isLoading: a, chartComponentRef: m, isExpanded: u } = k();
+    return a && i ? /* @__PURE__ */ s("div", { ref: f, className: g(e, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", u && "min-h-0"), ...o, children: i }) : /* @__PURE__ */ F("div", { ref: f, className: g(e, "w-full relative flex-1 min-h-[300px]", u && "min-h-0"), ...o, children: [
+      a && /* @__PURE__ */ F("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
         /* @__PURE__ */ s(L, { className: "h-8 w-1/3" }),
         /* @__PURE__ */ s(L, { className: "flex-1 w-full" })
       ] }),
-      n.Children.map(r, (h) => n.isValidElement(h) ? n.cloneElement(h, { ref: u }) : h)
+      n.Children.map(r, (h) => n.isValidElement(h) ? n.cloneElement(h, { ref: m }) : h)
     ] });
   }
 );
@@ -158,12 +158,12 @@ const $ = n.forwardRef(
       width: o,
       className: f,
       isLoading: a,
-      loader: u,
-      title: m,
+      loader: m,
+      title: u,
       children: h,
       ...x
-    } = e, p = n.useContext(F), w = n.useMemo(() => {
-      const C = U({ title: m, ...x });
+    } = e, p = n.useContext(b), w = n.useMemo(() => {
+      const C = U({ title: u, ...x });
       return {
         ...C,
         chart: {
@@ -181,7 +181,7 @@ const $ = n.forwardRef(
         ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
-    ) : /* @__PURE__ */ s(z, { className: f, isLoading: a, children: /* @__PURE__ */ s(S, { loader: u, children: /* @__PURE__ */ s(
+    ) : /* @__PURE__ */ s(z, { className: f, isLoading: a, children: /* @__PURE__ */ s(S, { loader: m, children: /* @__PURE__ */ s(
       H,
       {
         highcharts: l,

package/dist/components/ui/chart/chart.utils.js

@@ -1,25 +1,25 @@
-const y = (r) => {
+const g = (i) => {
   const {
-    type: s = "column",
-    title: l,
-    subtitle: n,
-    xAxisCategories: a,
-    xAxisTitle: t,
+    type: l = "column",
+    title: n,
+    subtitle: a,
+    xAxisCategories: s,
+    xAxisTitle: e,
     yAxisTitle: p,
     series: d,
     options: o,
-    stacked: i,
-    is3D: f,
-    showLegend: x = !0,
-    showTooltip: h = !0
-  } = r, e = {
+    stacked: t,
+    is3D: c,
+    showLegend: f = !0,
+    showTooltip: y = !0
+  } = i, r = {
     chart: {
-      type: s,
+      type: l,
       backgroundColor: "transparent",
       style: {
         fontFamily: "Manrope, sans-serif"
       },
-      options3d: f ? {
+      options3d: c ? {
         enabled: !0,
         alpha: 15,
         beta: 15,
@@ -28,16 +28,16 @@ const y = (r) => {
       } : void 0
     },
     title: {
-      text: l ?? "",
+      text: n ?? "",
       align: "left",
       style: {
         fontSize: "18px",
         fontWeight: "600",
-        color: "hsl(var(--foreground))"
+        color: "var(--color-foreground)"
       }
     },
     subtitle: {
-      text: n,
+      text: a,
       align: "left"
     },
     credits: {
@@ -47,11 +47,11 @@ const y = (r) => {
       enabled: !1
     },
     xAxis: {
-      categories: a,
-      title: t ? {
-        text: t,
+      categories: s,
+      title: e ? {
+        text: e,
         style: {
-          color: "#60697d",
+          color: "var(--color-foreground-tertiary)",
           fontFamily: '"Manrope", sans-serif',
           fontSize: "14px",
           fontStyle: "normal",
@@ -60,11 +60,11 @@ const y = (r) => {
         }
       } : void 0,
       gridLineWidth: 0,
-      lineColor: "hsl(var(--border))",
-      tickColor: "hsl(var(--border))",
+      lineColor: "var(--color-border)",
+      tickColor: "var(--color-border)",
       labels: {
         style: {
-          color: "#60697d",
+          color: "var(--color-foreground-tertiary)",
           fontFamily: '"Manrope", sans-serif',
           fontSize: "12px",
           fontWeight: "500"
@@ -76,7 +76,7 @@ const y = (r) => {
         text: p,
         margin: 30,
         style: {
-          color: "#60697d",
+          color: "var(--color-foreground-tertiary)",
           fontFamily: '"Manrope", sans-serif',
           fontSize: "14px",
           fontStyle: "normal",
@@ -85,12 +85,12 @@ const y = (r) => {
         }
       },
       lineWidth: 1,
-      lineColor: "hsl(var(--border))",
-      gridLineColor: "hsl(var(--border))",
+      lineColor: "var(--color-border)",
+      gridLineColor: "var(--color-border)",
       gridLineDashStyle: "Dash",
       labels: {
         style: {
-          color: "#60697d",
+          color: "var(--color-foreground-tertiary)",
           fontFamily: '"Manrope", sans-serif',
           fontSize: "12px",
           fontWeight: "500"
@@ -98,38 +98,38 @@ const y = (r) => {
       }
     },
     legend: {
-      enabled: x,
+      enabled: f,
       symbolRadius: 2,
       itemStyle: {
-        color: "#60697d",
+        color: "var(--color-foreground-tertiary)",
         fontWeight: "500",
         fontSize: "12px"
       },
       itemHoverStyle: {
-        color: "hsl(var(--primary))"
+        color: "var(--color-primary)"
       }
     },
     tooltip: {
-      enabled: h,
-      backgroundColor: "hsl(var(--popover))",
-      borderColor: "hsl(var(--border))",
+      enabled: y,
+      backgroundColor: "var(--color-surface-floating)",
+      borderColor: "var(--color-border)",
       borderRadius: 8,
       style: {
-        color: "hsl(var(--popover-foreground))"
+        color: "var(--color-surface-floating-foreground)"
       },
       shadow: !0
     },
     plotOptions: {
       column: {
         borderRadius: 4,
-        stacking: i ? "normal" : void 0,
+        stacking: t ? "normal" : void 0,
         borderWidth: 0
       },
       bar: {
         borderRadius: 4,
-        stacking: i ? "normal" : void 0,
+        stacking: t ? "normal" : void 0,
         borderWidth: 1,
-        borderColor: "#ffffff"
+        borderColor: "var(--color-background)"
       },
       pie: {
         allowPointSelect: !0,
@@ -148,45 +148,45 @@ const y = (r) => {
     series: d
   };
   return {
-    ...e,
+    ...r,
     ...o,
     chart: {
-      ...e.chart,
+      ...r.chart,
       ...o?.chart
     },
     xAxis: {
-      ...e.xAxis,
+      ...r.xAxis,
       ...Array.isArray(o?.xAxis) ? {} : o?.xAxis
     },
-    yAxis: Array.isArray(o?.yAxis) ? o?.yAxis.map((b) => ({
-      ...e.yAxis,
-      ...b
+    yAxis: Array.isArray(o?.yAxis) ? o?.yAxis.map((x) => ({
+      ...r.yAxis,
+      ...x
     })) : {
-      ...e.yAxis,
+      ...r.yAxis,
       ...o?.yAxis
     },
     plotOptions: {
-      ...e.plotOptions,
+      ...r.plotOptions,
       ...o?.plotOptions,
       column: {
-        ...e.plotOptions?.column,
+        ...r.plotOptions?.column,
         ...o?.plotOptions?.column
       },
       bar: {
-        ...e.plotOptions?.bar,
+        ...r.plotOptions?.bar,
         ...o?.plotOptions?.bar
       },
       pie: {
-        ...e.plotOptions?.pie,
+        ...r.plotOptions?.pie,
         ...o?.plotOptions?.pie
       },
       series: {
-        ...e.plotOptions?.series,
+        ...r.plotOptions?.series,
         ...o?.plotOptions?.series
       }
     }
   };
 };
 export {
-  y as getBaseChartOptions
+  g as getBaseChartOptions
 };

package/dist/components/ui/checkbox.js

@@ -1,33 +1,33 @@
 import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import * as i from "react";
 import * as m from "@radix-ui/react-checkbox";
-import { Check as y, Minus as N } from "lucide-react";
+import { Check as N, Minus as w } from "lucide-react";
 import { cn as r } from "../../lib/utils.js";
-const w = i.forwardRef(({ className: f, label: s, helperText: c, isError: n, disabled: a, checked: e, defaultChecked: u, onCheckedChange: g, ...o }, p) => {
-  const k = i.useId(), h = o.id || k, [b, l] = i.useState(
+const y = i.forwardRef(({ className: x, label: s, helperText: c, isError: n, disabled: a, checked: e, defaultChecked: u, onCheckedChange: g, ...o }, k) => {
+  const v = i.useId(), b = o.id || v, [f, h] = i.useState(
     e !== void 0 ? e : u || !1
   );
   i.useEffect(() => {
-    e !== void 0 && l(e);
+    e !== void 0 && h(e);
   }, [e]);
-  const v = (x) => {
-    e === void 0 && l(x), g?.(x);
+  const p = (l) => {
+    e === void 0 && h(l), g?.(l);
   };
-  return /* @__PURE__ */ d("div", { className: "flex items-center", "data-component": "checkbox", "data-state": b === "indeterminate" ? "indeterminate" : b ? "checked" : "unchecked", "data-disabled": a || void 0, children: [
+  return /* @__PURE__ */ d("div", { className: "flex items-center", "data-component": "checkbox", "data-state": f === "indeterminate" ? "indeterminate" : f ? "checked" : "unchecked", "data-disabled": a || void 0, children: [
     /* @__PURE__ */ t(
       m.Root,
       {
-        ref: p,
-        id: h,
+        ref: k,
+        id: b,
         className: r(
-          "peer h-4 w-4 shrink-0 rounded-[4px] border border-tertiary-border bg-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:text-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-primary mr-[7px]",
+          "peer h-4 w-4 shrink-0 rounded-[4px] border border-stroke-field bg-canvas-elevated ring-offset-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand data-[state=checked]:bg-accent data-[state=checked]:text-brand data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-brand mr-[7px]",
           n && "border-destructive focus-visible:ring-destructive",
-          a && "border-border text-disabled-text data-[state=checked]:bg-disabled-secondary-bg data-[state=checked]:text-disabled-text",
-          f
+          a && "border-stroke text-disabled-foreground data-[state=checked]:bg-disabled-surface data-[state=checked]:text-disabled-foreground",
+          x
         ),
         checked: e,
         defaultChecked: u,
-        onCheckedChange: v,
+        onCheckedChange: p,
         disabled: a,
         ...o,
         children: /* @__PURE__ */ d(
@@ -36,22 +36,22 @@ const w = i.forwardRef(({ className: f, label: s, helperText: c, isError: n, dis
             "data-checkbox": "indicator",
             className: r("flex items-center justify-center text-current group"),
             children: [
-              /* @__PURE__ */ t(y, { className: "h-3 w-3 hidden group-data-[state=checked]:block", strokeWidth: 3 }),
-              /* @__PURE__ */ t(N, { className: "h-3 w-3 hidden group-data-[state=indeterminate]:block", strokeWidth: 3 })
+              /* @__PURE__ */ t(N, { className: "h-3 w-3 hidden group-data-[state=checked]:block", strokeWidth: 3 }),
+              /* @__PURE__ */ t(w, { className: "h-3 w-3 hidden group-data-[state=indeterminate]:block", strokeWidth: 3 })
             ]
           }
         )
       }
     ),
-    (s || c) && /* @__PURE__ */ d("div", { className: "grid gap-1.5 leading-none", children: [
+    (s || c) && /* @__PURE__ */ d("div", { className: "grid gap-[6px] leading-none", children: [
       s && /* @__PURE__ */ d(
         "label",
         {
-          htmlFor: h,
+          htmlFor: b,
           className: r(
-            "text-sm font-medium leading-[20px] text-secondary-foreground peer-data-[state=checked]:text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            "text-sm font-medium leading-[20px] text-secondary-foreground peer-data-[state=checked]:text-content peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
             n && "text-destructive",
-            a && "text-disabled-text"
+            a && "text-disabled-foreground"
           ),
           children: [
             s,
@@ -60,11 +60,11 @@ const w = i.forwardRef(({ className: f, label: s, helperText: c, isError: n, dis
           ]
         }
       ),
-      c && /* @__PURE__ */ t("p", { className: r("text-sm text-muted-foreground", n && "text-destructive"), children: c })
+      c && /* @__PURE__ */ t("p", { className: r("text-sm text-content-muted", n && "text-destructive"), children: c })
     ] })
   ] });
 });
-w.displayName = m.Root.displayName;
+y.displayName = m.Root.displayName;
 export {
-  w as Checkbox
+  y as Checkbox
 };

package/dist/components/ui/chips.d.ts

@@ -1,14 +1,30 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
+/**
+ * Chips — IA Design System v3.1 (Figma: Chips `14412:3358`).
+ * - 12px radius (`rounded-xl`), 12×6 padding, 14px / 20px Manrope Medium.
+ * - Neutral: white fill, `#D9DDE7` border, `#60697D` label; hover accent + `#3649C4` border/text.
+ * - Selected: `#4259EE` border + label (and check / radio per `selectionMode`).
+ * - `selectionMode`: default (text only), `single` (radio), `multi` (check); optional `trailing` for count.
+ */
 declare const chipVariants: (props?: {
-    variant?: "default" | "secondary" | "tertiary" | "destructive" | "outline";
-    size?: "sm" | "md" | "lg";
+    variant?: "default" | "primary" | "secondary" | "tertiary" | "destructive" | "outline" | "neutral";
     shape?: "rounded" | "pill";
+    size?: "sm" | "md" | "lg";
+    selected?: boolean;
 } & import('class-variance-authority/types').ClassProp) => string;
+export type ChipSelectionMode = "none" | "single" | "multi";
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chipVariants> {
     onRemove?: () => void;
     removable?: boolean;
     asChild?: boolean;
+    /** Single- vs multi-select affordance (Figma columns). */
+    selectionMode?: ChipSelectionMode;
+    /** Selected / pressed state (border + label #4259EE). */
+    selected?: boolean;
+    /** e.g. count for “Multi select + Number” */
+    trailing?: React.ReactNode;
+    disabled?: boolean;
 }
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
-export { Chip, chipVariants };
+export { Chip };