impact-nova 1.6.3 → 1.6.4

package/dist/components/ui/statistics-card.js

@@ -1,108 +1,108 @@
 import { jsxs as h, jsx as r } from "react/jsx-runtime";
 import * as n from "react";
-import { cn as d } from "../../lib/utils.js";
+import { cn as c } from "../../lib/utils.js";
 import { Checkbox as T } from "./checkbox.js";
 import { Tooltip as R, TooltipTrigger as I, TooltipContent as D } from "./tooltip.js";
-import { Info as B } from "../../icons/index.js";
-import * as P from "highcharts";
-import j from "highcharts-react-official";
-import { useStatisticsChartData as L, useStatisticsChartLabel as G, useStatisticsChartSeries as O, useStatisticsChartOptions as W } from "./statistics-card.hooks.js";
+import { Info as j } from "../../icons/index.js";
+import { Chart as B } from "./chart/chart.js";
+import { useStatisticsChartData as L, useStatisticsChartLabel as P, useStatisticsChartSeries as W, useStatisticsChartOptions as G } from "./statistics-card.hooks.js";
 const N = n.createContext(null), y = () => {
-  const e = n.useContext(N);
-  if (!e)
+  const a = n.useContext(N);
+  if (!a)
     throw new Error("StatisticsCard.* components must be used within a StatisticsCardRoot");
-  return e;
+  return a;
 }, $ = n.forwardRef(
-  ({ className: e, items: t, onItemToggle: s, chartSize: a = 110, config: o, mapItem: l, children: m, ...c }, i) => {
+  ({ className: a, items: e, onItemToggle: s, chartSize: t = 110, config: o, mapItem: l, children: m, ...d }, i) => {
     const p = n.useMemo(
-      () => l ? t.map((v, k) => l(v, k)) : t,
-      [t, l]
-    ), f = "#f8f9fb", x = "px-5 py-4", u = "gap-4 md:gap-6 lg:gap-8", w = "w-full min-w-0 max-w-[439px]", g = o?.colors?.background || f, b = o?.spacing?.rootPadding || x, S = o?.spacing?.rootGap || u, C = o?.spacing?.rootWidth || w;
-    return /* @__PURE__ */ r(N.Provider, { value: { items: p, onItemToggle: s, chartSize: a, config: o }, children: /* @__PURE__ */ r(
+      () => l ? e.map((v, k) => l(v, k)) : e,
+      [e, l]
+    ), f = "#f8f9fb", x = "px-5 py-4", g = "gap-4 md:gap-6 lg:gap-8", u = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || f, b = o?.spacing?.rootPadding || x, S = o?.spacing?.rootGap || g, w = o?.spacing?.rootWidth || u;
+    return /* @__PURE__ */ r(N.Provider, { value: { items: p, onItemToggle: s, chartSize: t, config: o }, children: /* @__PURE__ */ r(
       "div",
       {
         ref: i,
         role: "region",
         "aria-roledescription": "statistics card",
         "data-component": "statistics-card",
-        className: d(
+        className: c(
           "flex flex-row flex-wrap md:flex-nowrap items-center justify-between rounded-lg box-border min-w-0 overflow-hidden",
-          C,
+          w,
           b,
           S,
-          e
+          a
         ),
         style: {
-          backgroundColor: g
+          backgroundColor: C
         },
-        ...c,
+        ...d,
         children: m
       }
     ) });
   }
 );
 $.displayName = "StatisticsCardRoot";
-const E = n.forwardRef(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+const E = n.forwardRef(({ className: a, children: e, ...s }, t) => /* @__PURE__ */ r(
   "div",
   {
-    ref: a,
-    className: d("flex flex-col items-start gap-4 flex-shrink-0 min-w-0", e),
+    ref: t,
+    className: c("flex flex-col items-start gap-4 flex-shrink-0 min-w-0", a),
     ...s,
-    children: t
+    children: e
   }
 ));
 E.displayName = "StatisticsCardHeader";
-const F = n.forwardRef(
-  ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+const O = n.forwardRef(
+  ({ className: a, children: e, ...s }, t) => /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
-      className: d("flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]", e),
+      ref: t,
+      className: c("flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]", a),
       ...s,
-      children: t
+      children: e
     }
   )
 );
-F.displayName = "StatisticsCardTitle";
-const H = n.forwardRef(
-  ({ icon: e, className: t, ...s }, a) => /* @__PURE__ */ r(
+O.displayName = "StatisticsCardTitle";
+const F = n.forwardRef(
+  ({ icon: a, className: e, ...s }, t) => /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
-      className: d("flex items-center justify-center w-6 h-6 p-1.5 bg-[#ECEEFD] rounded-full shrink-0", t),
+      ref: t,
+      className: c("flex items-center justify-center w-6 h-6 p-1.5 bg-[#ECEEFD] rounded-full shrink-0", e),
       ...s,
-      children: e
+      children: a
     }
   )
 );
-H.displayName = "StatisticsCardTitleIcon";
-const M = n.forwardRef(
-  ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+F.displayName = "StatisticsCardTitleIcon";
+const H = n.forwardRef(
+  ({ className: a, children: e, ...s }, t) => /* @__PURE__ */ r(
     "span",
     {
-      ref: a,
-      className: d("font-semibold text-base leading-[1.5em] text-[#777980] truncate line-clamp-1", e),
+      ref: t,
+      className: c("font-semibold text-base leading-[1.5em] text-[#777980] truncate line-clamp-1", a),
       ...s,
-      children: t
+      children: e
     }
   )
 );
-M.displayName = "StatisticsCardTitleText";
-const q = n.forwardRef(
-  ({ content: e, icon: t, ...s }, a) => /* @__PURE__ */ r("div", { ref: a, ...s, children: /* @__PURE__ */ h(R, { children: [
-    /* @__PURE__ */ r(I, { asChild: !0, children: t || /* @__PURE__ */ r(B, { size: "sm", className: "text-[#60697D] cursor-pointer shrink-0" }) }),
-    /* @__PURE__ */ r(D, { variant: "tertiary", side: "top", children: e })
+H.displayName = "StatisticsCardTitleText";
+const M = n.forwardRef(
+  ({ content: a, icon: e, ...s }, t) => /* @__PURE__ */ r("div", { ref: t, ...s, children: /* @__PURE__ */ h(R, { children: [
+    /* @__PURE__ */ r(I, { asChild: !0, children: e || /* @__PURE__ */ r(j, { size: "sm", className: "text-[#60697D] cursor-pointer shrink-0" }) }),
+    /* @__PURE__ */ r(D, { variant: "tertiary", side: "top", children: a })
   ] }) })
 );
-q.displayName = "StatisticsCardTitleTooltip";
-const A = n.forwardRef(
-  ({ className: e, centerLabel: t, chartConfig: s, chartSize: a = 104, ...o }, l) => {
-    const { items: m, onItemToggle: c } = y(), { total: i, checkedTotal: p, hasChecked: f } = L(m), x = G(t, f, p, i), u = O(m, f), g = {
-      ...W(m, c, s),
+M.displayName = "StatisticsCardTitleTooltip";
+const q = n.forwardRef(
+  ({ className: a, centerLabel: e, chartConfig: s, chartSize: t = 104, ...o }, l) => {
+    const { items: m, onItemToggle: d } = y(), { total: i, checkedTotal: p, hasChecked: f } = L(m), x = P(e, f, p, i), g = W(m, f), u = G(m, d, s), C = {
+      ...u,
       chart: {
+        ...u.chart,
         type: "pie",
-        height: a,
-        width: a,
+        height: t,
+        width: t,
         margin: [0, 0, 0, 0],
         spacing: [0, 0, 0, 0],
         backgroundColor: "transparent"
@@ -111,22 +111,23 @@ const A = n.forwardRef(
       credits: { enabled: !1 },
       exporting: { enabled: !1 },
       navigation: { buttonOptions: { enabled: !1 } },
-      series: u
+      series: g
     };
     return /* @__PURE__ */ h(
       "div",
       {
         ref: l,
-        className: d("relative flex items-center justify-center flex-shrink-0", e),
-        style: { width: `${a}px`, height: `${a}px` },
+        className: c("relative flex items-center justify-center flex-shrink-0", a),
+        style: { width: `${t}px`, height: `${t}px` },
         ...o,
         children: [
           /* @__PURE__ */ r(
-            j,
+            B,
             {
-              highcharts: P,
-              options: g,
-              containerProps: { style: { width: "100%", height: "100%" } }
+              options: C,
+              height: t,
+              width: t,
+              noWrapper: !0
             }
           ),
           x && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ r("span", { className: "font-black text-[12px] leading-[9.536px] text-[#1F2B4D]", children: x }) })
@@ -135,59 +136,59 @@ const A = n.forwardRef(
     );
   }
 );
-A.displayName = "StatisticsCardChart";
-const J = n.forwardRef(({ className: e, children: t, ...s }, a) => {
-  const { config: o } = y(), l = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", m = "gap-2", c = o?.spacing?.legendWidth || l, i = o?.spacing?.itemGap || m;
+q.displayName = "StatisticsCardChart";
+const A = n.forwardRef(({ className: a, children: e, ...s }, t) => {
+  const { config: o } = y(), l = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", m = "gap-2", d = o?.spacing?.legendWidth || l, i = o?.spacing?.itemGap || m;
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
+      ref: t,
       role: "list",
-      className: d(
+      className: c(
         "flex flex-col justify-center min-w-0 flex-1 md:flex-none",
-        c,
+        d,
         i,
-        e
+        a
       ),
       ...s,
-      children: t
+      children: e
     }
   );
 });
-J.displayName = "StatisticsCardLegend";
-const K = n.forwardRef(
-  ({ className: e, index: t, item: s, ...a }, o) => {
-    const { items: l, onItemToggle: m, config: c } = y();
+A.displayName = "StatisticsCardLegend";
+const J = n.forwardRef(
+  ({ className: a, index: e, item: s, ...t }, o) => {
+    const { items: l, onItemToggle: m, config: d } = y();
     let i = s, p = -1;
-    if (!i && t !== void 0 ? (i = l[t], p = t) : i && (p = l.findIndex((C) => C === i)), !i || p === -1) return null;
-    const f = "bg-white", x = "px-3 py-1.5", u = "#E7CDF9", w = "#0D152C", g = c?.colors?.background || f, b = c?.spacing?.itemPadding || x;
-    c?.colors?.outlineChecked;
-    const S = c?.colors?.text || w;
+    if (!i && e !== void 0 ? (i = l[e], p = e) : i && (p = l.findIndex((w) => w === i)), !i || p === -1) return null;
+    const f = "bg-white", x = "px-3 py-1.5", g = "#E7CDF9", u = "#0D152C", C = d?.colors?.background || f, b = d?.spacing?.itemPadding || x;
+    d?.colors?.outlineChecked;
+    const S = d?.colors?.text || u;
     return /* @__PURE__ */ h(
       "div",
       {
         ref: o,
         role: "listitem",
         "aria-label": `${i.label}: ${i.value}`,
-        className: d(
+        className: c(
           "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all",
-          g,
+          C,
           b,
-          e
+          a
         ),
         style: {
           borderLeftColor: i.borderColor,
-          boxShadow: i.checked ? `0 0 0 2px ${i.borderColor}` : "0px 0px 4px 0px rgba(0,0,0,0.12)",
+          boxShadow: i.checked ? `0 0 0 3px ${i.borderColor}` : "0px 0px 4px 0px rgba(0,0,0,0.12)",
           "--item-color": i.borderColor
         },
-        ...a,
+        ...t,
         children: [
           /* @__PURE__ */ h("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
             /* @__PURE__ */ r(
               T,
               {
                 checked: i.checked ?? !1,
-                onCheckedChange: (C) => m?.(p, C === !0),
+                onCheckedChange: (w) => m?.(p, w === !0),
                 "aria-label": `Select ${i.label}`,
                 className: "shrink-0"
               }
@@ -206,26 +207,26 @@ const K = n.forwardRef(
     );
   }
 );
-K.displayName = "StatisticsCardLegendItem";
-const Q = n.forwardRef(
-  ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+J.displayName = "StatisticsCardLegendItem";
+const K = n.forwardRef(
+  ({ className: a, children: e, ...s }, t) => /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
-      className: d("flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-[#60697D]", e),
+      ref: t,
+      className: c("flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-[#60697D]", a),
       ...s,
-      children: t
+      children: e
     }
   )
 );
-Q.displayName = "StatisticsCardSummary";
-const U = n.forwardRef(
-  ({ className: e, label: t, count: s, color: a = "#60697D", ...o }, l) => /* @__PURE__ */ h(
+K.displayName = "StatisticsCardSummary";
+const Q = n.forwardRef(
+  ({ className: a, label: e, count: s, color: t = "#60697D", ...o }, l) => /* @__PURE__ */ h(
     "div",
     {
       ref: l,
-      className: d("flex items-center gap-1", e),
-      style: { "--summary-color": a },
+      className: c("flex items-center gap-1", a),
+      style: { "--summary-color": t },
       ...o,
       children: [
         /* @__PURE__ */ r(
@@ -235,7 +236,7 @@ const U = n.forwardRef(
           }
         ),
         /* @__PURE__ */ h("span", { children: [
-          t,
+          e,
           ": ",
           s
         ] })
@@ -243,17 +244,17 @@ const U = n.forwardRef(
     }
   )
 );
-U.displayName = "StatisticsCardSummaryItem";
+Q.displayName = "StatisticsCardSummaryItem";
 export {
-  A as StatisticsCardChart,
+  q as StatisticsCardChart,
   E as StatisticsCardHeader,
-  J as StatisticsCardLegend,
-  K as StatisticsCardLegendItem,
+  A as StatisticsCardLegend,
+  J as StatisticsCardLegendItem,
   $ as StatisticsCardRoot,
-  Q as StatisticsCardSummary,
-  U as StatisticsCardSummaryItem,
-  F as StatisticsCardTitle,
-  H as StatisticsCardTitleIcon,
-  M as StatisticsCardTitleText,
-  q as StatisticsCardTitleTooltip
+  K as StatisticsCardSummary,
+  Q as StatisticsCardSummaryItem,
+  O as StatisticsCardTitle,
+  F as StatisticsCardTitleIcon,
+  H as StatisticsCardTitleText,
+  M as StatisticsCardTitleTooltip
 };

package/dist/components/ui/types/chart.types.d.ts

@@ -20,4 +20,5 @@ export interface ChartProps {
     isLoading?: boolean;
     loader?: React.ReactNode;
     children?: React.ReactNode;
+    noWrapper?: boolean;
 }

package/dist/components/ui/types/statistics-card.types.d.ts

@@ -1 +1 @@
-export type { StatisticsCardItem, StatisticsCardConfig, StatisticsCardChartConfig, StatisticsCardRootProps, StatisticsCardTitleProps, StatisticsCardChartProps, StatisticsCardLegendItemProps, StatisticsCardSummaryProps, } from '../statistics-card';
+export type { StatisticsCardItem, StatisticsCardConfig, StatisticsCardChartConfig, StatisticsCardRootProps, StatisticsCardChartProps, StatisticsCardLegendItemProps, } from '../statistics-card';