impact-nova 2.1.0-alpha.3 → 2.1.0-alpha.5

package/dist/components/data-display/calendar/calendar-week-number-cell.js

@@ -1,69 +1,69 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as o } from "../../../lib/utils.js";
+import { cn as a } from "../../../lib/utils.js";
 function C({
-  week: m,
-  weekStartsOn: a,
+  week: y,
+  weekStartsOn: c,
   pickerType: h,
   weekNumberLabel: i,
   weekLabel: p,
-  onWeekSelect: y,
-  className: c,
+  onWeekSelect: m,
+  className: s,
   ...f
 }) {
-  const e = m.days.find((s) => !s.outside)?.date;
+  const e = y.days.find((o) => !o.outside)?.date;
   if (!e)
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ r(
       "td",
       {
         ...f,
-        className: o(
-          "select-none flex h-8 w-8 flex-shrink-0 items-center justify-center text-[11px] text-content-muted rdp-week_number",
-          c
+        className: a(
+          "select-none flex h-8 w-8 flex-shrink-0 items-center justify-center text-[11px] text-secondary-foreground rdp-week_number",
+          s
         ),
-        children: /* @__PURE__ */ n("div", { className: "flex size-[--cell-size] items-center justify-center text-center" })
+        children: /* @__PURE__ */ r("div", { className: "flex size-[--cell-size] items-center justify-center text-center" })
       }
     );
-  const l = e.getFullYear(), u = e.getMonth(), k = (new Date(l, u, 1).getDay() + 7 - a) % 7, D = new Date(l, u, 1 - k), d = new Date(e), w = (e.getDay() + 7 - a) % 7;
-  d.setDate(e.getDate() - w);
-  const r = Math.round(
-    (d.getTime() - D.getTime()) / (10080 * 60 * 1e3)
-  ) + 1, x = p(r);
+  const l = e.getFullYear(), d = e.getMonth(), k = (new Date(l, d, 1).getDay() + 7 - c) % 7, D = new Date(l, d, 1 - k), u = new Date(e), g = (e.getDay() + 7 - c) % 7;
+  u.setDate(e.getDate() - g);
+  const n = Math.round(
+    (u.getTime() - D.getTime()) / (10080 * 60 * 1e3)
+  ) + 1, x = p(n);
   if (h === "week") {
-    const s = () => y(e);
-    return /* @__PURE__ */ n(
+    const o = () => m(e);
+    return /* @__PURE__ */ r(
       "td",
       {
         "aria-label": x,
-        "data-week-index": r,
-        "data-week-number": r,
+        "data-week-index": n,
+        "data-week-number": n,
         tabIndex: 0,
         role: "button",
-        className: o(
+        className: a(
           "select-none flex h-[30px] w-[30px] flex-shrink-0 cursor-pointer items-center justify-center rounded-lg rdp-week_number transition-colors hover:bg-accent hover:text-accent-foreground group-hover/week:bg-accent group-hover/week:rounded-l-lg",
-          c
+          s
         ),
         onClick: (t) => {
-          t.preventDefault(), t.stopPropagation(), s();
+          t.preventDefault(), t.stopPropagation(), o();
         },
         onKeyDown: (t) => {
-          (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), s());
+          (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o());
         },
-        children: /* @__PURE__ */ n("div", { className: "flex h-8 w-full items-center justify-center text-center text-[11px] text-content-muted", children: i(r) })
+        children: /* @__PURE__ */ r("div", { className: "flex h-8 w-full items-center justify-center text-center text-[11px] text-secondary-foreground", children: i(n) })
       }
     );
   }
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(
     "th",
     {
       ...f,
       "aria-label": x,
-      className: o(
-        "select-none flex h-[30px] w-[30px] flex-shrink-0 items-center justify-center text-[11px] text-content-muted rdp-week_number",
-        c
+      className: a(
+        "select-none flex h-[30px] w-[30px] flex-shrink-0 items-center justify-center text-[11px] text-secondary-foreground rdp-week_number",
+        s
       ),
       scope: "row",
-      children: /* @__PURE__ */ n("div", { className: "flex h-8 w-full items-center justify-center text-center", children: i(r) })
+      children: /* @__PURE__ */ r("div", { className: "flex h-8 w-full items-center justify-center text-center", children: i(n) })
     }
   );
 }

package/dist/components/data-display/card/card.js

@@ -4,16 +4,16 @@ import { createCompoundPart as a } from "../../../lib/primitives/create-compound
 import { cn as s } from "../../../lib/utils.js";
 const i = d(
   "Card",
-  ({ className: e, ...t }, r) => /* @__PURE__ */ o(
+  ({ className: e, ...r }, t) => /* @__PURE__ */ o(
     "div",
     {
-      ref: r,
+      ref: t,
       "data-component": "card",
       className: s(
         "rounded-xl border bg-canvas-elevated text-canvas-elevated-foreground shadow",
         e
       ),
-      ...t
+      ...r
     }
   )
 ), l = a("card", {
@@ -24,11 +24,11 @@ const i = d(
   part: "title",
   displayName: "CardTitle",
   className: "font-semibold leading-none tracking-tight"
-}), N = a("card", {
+}), f = a("card", {
   part: "description",
   displayName: "CardDescription",
-  className: "text-sm text-content-muted"
-}), f = a("card", {
+  className: "text-sm text-secondary-foreground"
+}), N = a("card", {
   part: "content",
   displayName: "CardContent",
   className: "p-6 pt-0"
@@ -39,8 +39,8 @@ const i = d(
 });
 export {
   i as Card,
-  f as CardContent,
-  N as CardDescription,
+  N as CardContent,
+  f as CardDescription,
   x as CardFooter,
   l as CardHeader,
   C as CardTitle

package/dist/components/data-display/chart/chart.types.d.ts

@@ -1,6 +1,15 @@
 import type * as Highcharts from 'highcharts';
 export type ChartSeriesOptions = Highcharts.SeriesOptionsType;
 export type ChartType = ChartSeriesOptions['type'];
+/**
+ * Impact Nova chart props — a styled wrapper around Highcharts only.
+ *
+ * - `series` accepts native `Highcharts.SeriesOptionsType[]` (all Highcharts series types).
+ * - `options` accepts full `Highcharts.Options` and merges over design-system defaults.
+ * - Simplified props map common cases; use `options` for the rest of the Highcharts API.
+ *
+ * @see https://api.highcharts.com/highcharts/
+ */
 export interface ChartProps {
     type?: ChartType;
     series?: ChartSeriesOptions[];

package/dist/components/data-display/skeleton/skeleton.js

@@ -1,15 +1,15 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createComponent as m } from "../../../lib/primitives/create-component.js";
+import { jsx as m } from "react/jsx-runtime";
+import { createComponent as n } from "../../../lib/primitives/create-component.js";
 import { cn as r } from "../../../lib/utils.js";
-const s = m(
+const s = n(
   "Skeleton",
-  ({ className: o, ...e }, t) => /* @__PURE__ */ n(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ m(
     "div",
     {
       ref: t,
       "data-component": "skeleton",
-      className: r("animate-pulse rounded-md bg-brand/10", o),
-      ...e
+      className: r("animate-pulse rounded-md bg-muted", e),
+      ...o
     }
   )
 );

package/dist/components/data-display/statistics-card/statistics-card.js

@@ -1,4 +1,4 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
 import * as n from "react";
 import { cn as d } from "../../../lib/utils.js";
 import { Checkbox as k } from "../../forms/checkbox/checkbox.js";
@@ -12,7 +12,7 @@ const H = n.forwardRef(
     const f = n.useMemo(
       () => l ? e.map((N, T) => l(N, T)) : e,
       [e, l]
-    ), p = "var(--color-canvas-subtle, #f8f9fb)", x = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", u = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || p, b = o?.spacing?.rootPadding || x, w = o?.spacing?.rootGap || h, S = o?.spacing?.rootWidth || u, v = n.useMemo(
+    ), p = "var(--color-canvas-subtle, #f8f9fb)", x = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", g = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || p, b = o?.spacing?.rootPadding || x, w = o?.spacing?.rootGap || h, S = o?.spacing?.rootWidth || g, v = n.useMemo(
       () => ({ items: f, onItemToggle: a, chartSize: t, config: o }),
       [f, a, t, o]
     );
@@ -77,7 +77,7 @@ const q = n.forwardRef(
     "span",
     {
       ref: t,
-      className: d("font-semibold text-base leading-[1.5em] text-content-muted truncate line-clamp-1", s),
+      className: d("font-semibold text-base leading-[1.5em] text-secondary-foreground truncate line-clamp-1", s),
       ...a,
       children: e
     }
@@ -85,7 +85,7 @@ const q = n.forwardRef(
 );
 q.displayName = "StatisticsCardTitleText";
 const A = n.forwardRef(
-  ({ content: s, icon: e, ...a }, t) => /* @__PURE__ */ i("div", { ref: t, ...a, children: /* @__PURE__ */ g(R, { children: [
+  ({ content: s, icon: e, ...a }, t) => /* @__PURE__ */ i("div", { ref: t, ...a, children: /* @__PURE__ */ u(R, { children: [
     /* @__PURE__ */ i(I, { asChild: !0, children: e || /* @__PURE__ */ i(L, { size: "sm", className: "text-secondary-foreground cursor-pointer shrink-0" }) }),
     /* @__PURE__ */ i(j, { variant: "tertiary", side: "top", children: s })
   ] }) })
@@ -93,10 +93,10 @@ const A = n.forwardRef(
 A.displayName = "StatisticsCardTitleTooltip";
 const E = n.forwardRef(
   ({ className: s, centerLabel: e, chartConfig: a, chartSize: t = 104, ...o }, l) => {
-    const { items: c, onItemToggle: m } = y(), { total: r, checkedTotal: f, hasChecked: p } = W(c), x = G(e, p, f, r), h = $(c, p), u = B(c, m, a), C = {
-      ...u,
+    const { items: c, onItemToggle: m } = y(), { total: r, checkedTotal: f, hasChecked: p } = W(c), x = G(e, p, f, r), h = $(c, p), g = B(c, m, a), C = {
+      ...g,
       chart: {
-        ...u.chart,
+        ...g.chart,
         type: "pie",
         height: t,
         width: t,
@@ -110,7 +110,7 @@ const E = n.forwardRef(
       navigation: { buttonOptions: { enabled: !1 } },
       series: h
     };
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: l,
@@ -158,8 +158,8 @@ const J = n.forwardRef(
     const { items: l, onItemToggle: c, config: m } = y();
     let r = a, f = -1;
     if (!r && e !== void 0 ? (r = l[e], f = e) : r && (f = l.findIndex((w) => w === r)), !r || f === -1) return null;
-    const p = "bg-white", x = "px-3 py-1.5", h = "var(--color-foreground)", u = m?.colors?.background || p, C = m?.spacing?.itemPadding || x, b = m?.colors?.text || h;
-    return /* @__PURE__ */ g(
+    const p = "bg-white", x = "px-3 py-1.5", h = "var(--color-foreground)", g = m?.colors?.background || p, C = m?.spacing?.itemPadding || x, b = m?.colors?.text || h;
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: o,
@@ -167,7 +167,7 @@ const J = n.forwardRef(
         "aria-label": `${r.label}: ${r.value}`,
         className: d(
           "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all",
-          u,
+          g,
           C,
           s
         ),
@@ -178,7 +178,7 @@ const J = n.forwardRef(
         },
         ...t,
         children: [
-          /* @__PURE__ */ g("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
+          /* @__PURE__ */ u("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
             /* @__PURE__ */ i(
               k,
               {
@@ -223,7 +223,7 @@ const K = n.forwardRef(
 );
 K.displayName = "StatisticsCardSummary";
 const Q = n.forwardRef(
-  ({ className: s, label: e, count: a, color: t = "var(--color-secondary-foreground)", ...o }, l) => /* @__PURE__ */ g(
+  ({ className: s, label: e, count: a, color: t = "var(--color-secondary-foreground)", ...o }, l) => /* @__PURE__ */ u(
     "div",
     {
       ref: l,
@@ -237,7 +237,7 @@ const Q = n.forwardRef(
             className: "w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--summary-color)]"
           }
         ),
-        /* @__PURE__ */ g("span", { children: [
+        /* @__PURE__ */ u("span", { children: [
           e,
           ": ",
           a

package/dist/components/feedback/alert-dialog/alert-dialog.js

@@ -3,26 +3,26 @@ import * as i from "react";
 import * as t from "@radix-ui/react-alert-dialog";
 import { wrapRadixPart as n, createCompoundPart as d } from "../../../lib/primitives/create-compound.js";
 import { cn as r } from "../../../lib/utils.js";
-import { buttonVariants as m } from "../../primitives/button/button.variants.js";
-const w = (e) => /* @__PURE__ */ l(t.Root, { "data-component": "alert-dialog", ...e }), b = n(
+import { buttonVariants as c } from "../../primitives/button/button.variants.js";
+const w = (a) => /* @__PURE__ */ l(t.Root, { "data-component": "alert-dialog", ...a }), b = n(
   "alert-dialog",
   "trigger",
   "AlertDialogTrigger",
   t.Trigger
-), f = t.Portal, c = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+), f = t.Portal, m = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   t.Overlay,
   {
     className: r(
       "fixed inset-0 z-50 bg-scrim-deep data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none motion-reduce:transition-none",
-      e
+      a
     ),
-    ...a,
+    ...e,
     ref: o
   }
 ));
-c.displayName = t.Overlay.displayName;
-const u = i.forwardRef(({ className: e, onOpenAutoFocus: a, ...o }, p) => /* @__PURE__ */ g(f, { children: [
-  /* @__PURE__ */ l(c, {}),
+m.displayName = t.Overlay.displayName;
+const u = i.forwardRef(({ className: a, onOpenAutoFocus: e, ...o }, p) => /* @__PURE__ */ g(f, { children: [
+  /* @__PURE__ */ l(m, {}),
   /* @__PURE__ */ l(
     t.Content,
     {
@@ -30,11 +30,11 @@ const u = i.forwardRef(({ className: e, onOpenAutoFocus: a, ...o }, p) => /* @__
       "aria-describedby": void 0,
       "data-component": "alert-dialog-content",
       onOpenAutoFocus: (s) => {
-        s.preventDefault(), a?.(s);
+        s.preventDefault(), e?.(s);
       },
       className: r(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-canvas p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg motion-reduce:animate-none motion-reduce:transition-none",
-        e
+        a
       ),
       ...o
     }
@@ -60,28 +60,28 @@ const C = d("alert-dialog", {
   "description",
   "AlertDialogDescription",
   t.Description,
-  "text-sm text-content-muted"
-), A = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+  "text-sm text-content-secondary"
+), A = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   t.Action,
   {
     ref: o,
     "data-component": "alert-dialog-action",
-    className: r(m(), e),
-    ...a
+    className: r(c(), a),
+    ...e
   }
 ));
 A.displayName = t.Action.displayName;
-const D = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const D = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   t.Cancel,
   {
     ref: o,
     "data-component": "alert-dialog-cancel",
     className: r(
-      m({ variant: "outline" }),
+      c({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      e
+      a
     ),
-    ...a
+    ...e
   }
 ));
 D.displayName = t.Cancel.displayName;
@@ -93,7 +93,7 @@ export {
   P as AlertDialogDescription,
   R as AlertDialogFooter,
   C as AlertDialogHeader,
-  c as AlertDialogOverlay,
+  m as AlertDialogOverlay,
   f as AlertDialogPortal,
   T as AlertDialogTitle,
   b as AlertDialogTrigger

package/dist/components/feedback/dialog/dialog.js

@@ -54,7 +54,7 @@ const N = d.forwardRef(({ className: a, children: i, hideClose: n, onOpenAutoFoc
               variant: "ghost",
               size: "iconSm",
               "data-component": "dialog-close",
-              className: "absolute end-4 top-3.5 opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 data-[state=open]:bg-accent data-[state=open]:text-content-muted [&_svg]:!size-3 [&_svg]:block",
+              className: "absolute end-4 top-3.5 opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 data-[state=open]:bg-accent data-[state=open]:text-content-icon [&_svg]:!size-3 [&_svg]:block",
               "aria-label": x,
               children: /* @__PURE__ */ e(y, {})
             }

package/dist/components/feedback/drawer/drawer.js

@@ -2,11 +2,11 @@ import { jsx as r, jsxs as o } from "react/jsx-runtime";
 import * as c from "react";
 import { Drawer as e } from "vaul";
 import { Cross as g } from "impact-nova-icons";
-import { wrapRadixPart as s, createCompoundPart as l } from "../../../lib/primitives/create-compound.js";
+import { wrapRadixPart as n, createCompoundPart as l } from "../../../lib/primitives/create-compound.js";
 import { cn as d } from "../../../lib/utils.js";
 import { useImpactNovaI18n as D } from "../../../i18n/use-impact-nova-i18n.js";
-import { Tooltip as u, TooltipTrigger as x, TooltipContent as N } from "../tooltip/tooltip.js";
-const h = ({
+import { Tooltip as u, TooltipTrigger as x, TooltipContent as y } from "../tooltip/tooltip.js";
+const N = ({
   shouldScaleBackground: t = !0,
   ...a
 }) => /* @__PURE__ */ r(
@@ -17,29 +17,29 @@ const h = ({
     ...a
   }
 );
-h.displayName = "Drawer";
-const z = s(
+N.displayName = "Drawer";
+const z = n(
   "drawer",
   "trigger",
   "DrawerTrigger",
   e.Trigger
-), y = e.Portal, F = s(
+), h = e.Portal, F = n(
   "drawer",
   "close",
   "DrawerClose",
   e.Close
-), m = c.forwardRef(({ className: t, ...a }, n) => /* @__PURE__ */ r(
+), m = c.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ r(
   e.Overlay,
   {
-    ref: n,
+    ref: s,
     className: d("fixed inset-0 z-50 bg-scrim-deep", t),
     ...a
   }
 ));
 m.displayName = e.Overlay.displayName;
-const b = c.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) => {
+const b = c.forwardRef(({ className: t, children: a, hideClose: s, ...p }, w) => {
   const { t: f } = D(), i = f("aria.close");
-  return /* @__PURE__ */ o(y, { children: [
+  return /* @__PURE__ */ o(h, { children: [
     /* @__PURE__ */ r(m, {}),
     /* @__PURE__ */ o(
       e.Content,
@@ -54,11 +54,11 @@ const b = c.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) =>
         children: [
           /* @__PURE__ */ r("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
           a,
-          !n && /* @__PURE__ */ o(u, { children: [
+          !s && /* @__PURE__ */ o(u, { children: [
             /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ o(
               e.Close,
               {
-                className: "absolute end-4 top-4 rounded-sm opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-content-muted",
+                className: "absolute end-4 top-4 rounded-sm opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-content-icon",
                 "aria-label": i,
                 children: [
                   /* @__PURE__ */ r(g, { className: "!h-3 !w-3" }),
@@ -66,7 +66,7 @@ const b = c.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) =>
                 ]
               }
             ) }),
-            /* @__PURE__ */ r(N, { variant: "tertiary", side: "top", children: i })
+            /* @__PURE__ */ r(y, { variant: "tertiary", side: "top", children: i })
           ] })
         ]
       }
@@ -82,28 +82,28 @@ const H = l("drawer", {
   part: "footer",
   displayName: "DrawerFooter",
   className: "mt-auto flex flex-col gap-2 p-4"
-}), k = s(
+}), k = n(
   "drawer",
   "title",
   "DrawerTitle",
   e.Title,
   "text-lg font-semibold leading-none tracking-tight"
-), L = s(
+), L = n(
   "drawer",
   "description",
   "DrawerDescription",
   e.Description,
-  "text-sm text-content-muted"
+  "text-sm text-content-secondary"
 );
 export {
-  h as Drawer,
+  N as Drawer,
   F as DrawerClose,
   b as DrawerContent,
   L as DrawerDescription,
   I as DrawerFooter,
   H as DrawerHeader,
   m as DrawerOverlay,
-  y as DrawerPortal,
+  h as DrawerPortal,
   k as DrawerTitle,
   z as DrawerTrigger
 };