impact-nova 2.5.17 → 2.6.0-alpha.0

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

@@ -1,41 +1,41 @@
-import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { jsx as s, jsxs as L } from "react/jsx-runtime";
 import * as t from "react";
 import N from "highcharts-react-official";
-import { cn as f } from "../../../lib/utils.js";
+import { cn as d } from "../../../lib/utils.js";
 import { Skeleton as q } from "../skeleton/skeleton.js";
-import { Collapse as j, Expand as B } from "impact-nova-icons";
-import { Button as P } from "../../primitives/button/button.js";
-import { getInitializedHighcharts as T } from "./initializeHighcharts.js";
-import { getBaseChartOptions as O } from "./chart.utils.js";
-import { resolveHighchartsOptions as M } from "./resolve-highcharts-options.js";
-import { useImpactNovaI18n as V } from "../../../i18n/use-impact-nova-i18n.js";
-const R = T(), S = t.createContext(null), A = () => {
+import { Collapse as B, Expand as P } from "impact-nova-icons";
+import { Button as T } from "../../primitives/button/button.js";
+import { getInitializedHighcharts as O } from "./initializeHighcharts.js";
+import { getBaseChartOptions as M } from "./chart.utils.js";
+import { resolveHighchartsOptions as V } from "./resolve-highcharts-options.js";
+import { useImpactNovaI18n as A } from "../../../i18n/use-impact-nova-i18n.js";
+const R = O(), S = t.createContext(null), H = () => {
   const n = t.useContext(S);
   if (!n)
     throw new Error("Chart components must be used within a ChartContainer");
   return n;
-}, H = t.forwardRef(
-  ({ className: n, children: r, isLoading: l = !1, ...c }, u) => {
-    const a = t.useRef(null), o = t.useRef(null), [m, h] = t.useState(null), [d, p] = t.useState(!1), [g, C] = t.useState(!1), w = t.useCallback((e) => {
+}, I = t.forwardRef(
+  ({ className: n, children: r, isLoading: l = !1, ...i }, u) => {
+    const a = t.useRef(null), o = t.useRef(null), [m, h] = t.useState(null), [p, g] = t.useState(!1), [C, w] = t.useState(!1), v = t.useCallback((e) => {
       a.current = e, h(e);
     }, []);
     t.useImperativeHandle(u, () => a.current);
-    const x = () => {
+    const E = () => {
       const e = a.current;
-      e && (C(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
-        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), p(!0), e.classList.remove("fullscreen-animating");
+      e && (w(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
+        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), g(!0), e.classList.remove("fullscreen-animating");
       }, 200));
-    }, v = () => {
+    }, x = () => {
       const e = a.current;
-      e && (C(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
-        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), p(!1), e.classList.remove("fullscreen-animating-out");
+      e && (w(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
+        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), g(!1), e.classList.remove("fullscreen-animating-out");
       }, 200));
-    }, E = () => {
-      d ? v() : x();
+    }, F = () => {
+      p ? x() : E();
     };
     return t.useEffect(() => {
       const e = () => {
-        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || p(!1);
+        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || g(!1);
       };
       return document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
         document.removeEventListener("fullscreenchange", e), document.removeEventListener(
@@ -46,29 +46,29 @@ const R = T(), S = t.createContext(null), A = () => {
     }, []), t.useEffect(() => {
       if (!o?.current?.chart) return;
       const e = o.current.chart;
-      let i = null;
-      const L = () => {
-        d && a.current ? (i && cancelAnimationFrame(i), i = requestAnimationFrame(() => {
-          const F = a.current;
-          if (!F) return;
-          const y = F.getBoundingClientRect(), k = F.querySelector('[class*="ChartContent"]');
+      let c = null;
+      const f = () => {
+        p && a.current ? (c && cancelAnimationFrame(c), c = requestAnimationFrame(() => {
+          const b = a.current;
+          if (!b) return;
+          const y = b.getBoundingClientRect(), k = b.querySelector('[class*="ChartContent"]');
           if (k) {
             const z = k.getBoundingClientRect();
             e.setSize(z.width, z.height, !1);
           } else
             e.setSize(y.width, y.height, !1);
-          i = null;
+          c = null;
         })) : (e.setSize(null, null, !1), e.reflow());
       };
-      return window.addEventListener("resize", L), () => {
-        i && cancelAnimationFrame(i), window.removeEventListener("resize", L);
+      return window.addEventListener("resize", f), () => {
+        c && cancelAnimationFrame(c), window.removeEventListener("resize", f);
       };
-    }, [d]), /* @__PURE__ */ s(
+    }, [p]), /* @__PURE__ */ s(
       S.Provider,
       {
         value: {
-          isExpanded: d,
-          toggleFullscreen: E,
+          isExpanded: p,
+          toggleFullscreen: F,
           isLoading: l,
           containerRef: a,
           containerElement: m,
@@ -77,15 +77,15 @@ const R = T(), S = t.createContext(null), A = () => {
         children: /* @__PURE__ */ s(
           "div",
           {
-            ref: w,
+            ref: v,
             "data-component": "chart",
-            className: f(
+            className: d(
               n,
               "w-full relative bg-canvas-elevated transition-all duration-200 ease-in-out",
-              d && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
-              g && "overflow-hidden"
+              p && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
+              C && "overflow-hidden"
             ),
-            ...c,
+            ...i,
             children: r
           }
         )
@@ -93,34 +93,34 @@ const R = T(), S = t.createContext(null), A = () => {
     );
   }
 );
-H.displayName = "ChartContainer";
+I.displayName = "ChartContainer";
 const W = t.forwardRef(
-  ({ className: n, children: r, ...l }, c) => /* @__PURE__ */ s("div", { ref: c, className: f("flex items-center justify-between mb-4", n), ...l, children: r })
+  ({ className: n, children: r, ...l }, i) => /* @__PURE__ */ s("div", { ref: i, className: d("flex items-center justify-between mb-4", n), ...l, children: r })
 );
 W.displayName = "ChartHeader";
 const D = t.forwardRef(
-  ({ className: n, ...r }, l) => /* @__PURE__ */ s("h3", { ref: l, className: f("text-lg font-semibold leading-none tracking-tight", n), ...r })
+  ({ className: n, ...r }, l) => /* @__PURE__ */ s("h3", { ref: l, className: d("text-lg font-semibold leading-none tracking-tight", n), ...r })
 );
 D.displayName = "ChartTitle";
 const G = t.forwardRef(
-  ({ className: n, ...r }, l) => /* @__PURE__ */ s("div", { ref: l, className: f("flex items-center gap-2", n), ...r })
+  ({ className: n, ...r }, l) => /* @__PURE__ */ s("div", { ref: l, className: d("flex items-center gap-2", n), ...r })
 );
 G.displayName = "ChartActions";
 const J = t.forwardRef(
   ({ className: n, ...r }, l) => {
-    const { t: c } = V(), { toggleFullscreen: u, isExpanded: a } = A(), o = c("aria.toggleFullscreen");
-    return /* @__PURE__ */ b(
-      P,
+    const { t: i } = A(), { toggleFullscreen: u, isExpanded: a } = H(), o = i("aria.toggleFullscreen");
+    return /* @__PURE__ */ L(
+      T,
       {
         variant: "ghost",
         size: "icon",
         onClick: u,
         ref: l,
-        className: f("h-8 w-8", n),
+        className: d("h-8 w-8", n),
         "aria-label": o,
         ...r,
         children: [
-          a ? /* @__PURE__ */ s(j, { className: "h-4 w-4" }) : /* @__PURE__ */ s(B, { className: "h-4 w-4" }),
+          a ? /* @__PURE__ */ s(B, { className: "h-4 w-4" }) : /* @__PURE__ */ s(P, { className: "h-4 w-4" }),
           /* @__PURE__ */ s("span", { className: "sr-only", children: o })
         ]
       }
@@ -128,11 +128,11 @@ const J = t.forwardRef(
   }
 );
 J.displayName = "ChartFullScreen";
-const I = t.forwardRef(
-  ({ className: n, children: r, loader: l, ...c }, u) => {
-    const { isLoading: a, chartComponentRef: o, isExpanded: m } = A();
-    return a && l ? /* @__PURE__ */ s("div", { ref: u, className: f(n, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", m && "min-h-0"), ...c, children: l }) : /* @__PURE__ */ b("div", { ref: u, className: f(n, "w-full relative flex-1 min-h-[300px]", m && "min-h-0"), ...c, children: [
-      a && /* @__PURE__ */ b("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
+const j = t.forwardRef(
+  ({ className: n, children: r, loader: l, ...i }, u) => {
+    const { isLoading: a, chartComponentRef: o, isExpanded: m } = H();
+    return a && l ? /* @__PURE__ */ s("div", { ref: u, className: d(n, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", m && "min-h-0"), ...i, children: l }) : /* @__PURE__ */ L("div", { ref: u, className: d(n, "w-full relative flex-1 min-h-[300px]", m && "min-h-0"), ...i, children: [
+      a && /* @__PURE__ */ L("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
         /* @__PURE__ */ s(q, { className: "h-8 w-1/3" }),
         /* @__PURE__ */ s(q, { className: "flex-1 w-full" })
       ] }),
@@ -140,53 +140,53 @@ const I = t.forwardRef(
     ] });
   }
 );
-I.displayName = "ChartContent";
+j.displayName = "ChartContent";
 const K = t.forwardRef(
   (n, r) => {
     const {
       height: l,
-      width: c,
+      width: i,
       className: u,
       isLoading: a,
       loader: o,
       title: m,
       noWrapper: h,
-      children: d,
-      ...p
-    } = n, g = t.useContext(S), [C, w] = t.useState(null), x = t.useCallback((i) => {
-      w(i);
-    }, []), v = t.useMemo(() => {
-      const i = O({ title: m, ...p });
+      children: p,
+      ...g
+    } = n, C = t.useContext(S), [w, v] = t.useState(null), E = t.useCallback((f) => {
+      v(f);
+    }, []), { numberLocale: x } = A(), F = t.useMemo(() => {
+      const f = M({ title: m, ...g }, x);
       return {
-        ...i,
+        ...f,
         chart: {
-          ...i.chart,
+          ...f.chart,
           height: l ?? null,
-          width: c ?? null
+          width: i ?? null
         }
       };
-    }, [m, l, c, p]), E = g?.containerElement ?? C, e = M(v, E);
-    return h ? /* @__PURE__ */ s("div", { ref: x, className: "h-full w-full", children: /* @__PURE__ */ s(
+    }, [m, l, i, g, x]), e = C?.containerElement ?? w, c = V(F, e);
+    return h ? /* @__PURE__ */ s("div", { ref: E, className: "h-full w-full", children: /* @__PURE__ */ s(
       N,
       {
         highcharts: R,
-        options: e,
+        options: c,
         ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
-    ) }) : g ? /* @__PURE__ */ s(
+    ) }) : C ? /* @__PURE__ */ s(
       N,
       {
         highcharts: R,
-        options: e,
+        options: c,
         ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
-    ) : /* @__PURE__ */ s(H, { className: u, isLoading: a, children: /* @__PURE__ */ s(I, { loader: o, children: /* @__PURE__ */ s(
+    ) : /* @__PURE__ */ s(I, { className: u, isLoading: a, children: /* @__PURE__ */ s(j, { loader: o, children: /* @__PURE__ */ s(
       N,
       {
         highcharts: R,
-        options: e,
+        options: c,
         ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
@@ -197,8 +197,8 @@ K.displayName = "Chart";
 export {
   K as Chart,
   G as ChartActions,
-  H as ChartContainer,
-  I as ChartContent,
+  I as ChartContainer,
+  j as ChartContent,
   J as ChartFullScreen,
   W as ChartHeader,
   D as ChartTitle

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

@@ -1,3 +1,3 @@
 import { ChartProps } from './chart.types';
 import type * as Highcharts from 'highcharts';
-export declare const getBaseChartOptions: (props: ChartProps) => Highcharts.Options;
+export declare const getBaseChartOptions: (props: ChartProps, numberLocale?: string) => Highcharts.Options;

package/dist/components/data-display/chart/chart.utils.js

@@ -1,26 +1,32 @@
-import { CHART_PALETTE_CSS_VARS as g } from "./chart-palette.js";
-const u = (i) => {
+import { CHART_PALETTE_CSS_VARS as x } from "./chart-palette.js";
+import { DEFAULT_LOCALE as m } from "../../../i18n/locale-config.js";
+import { getNumberSeparators as h, formatNumber as v } from "../../../i18n/format/format-number.js";
+const C = (a, e = m) => {
   const {
-    type: l = "column",
-    title: a,
-    subtitle: s,
-    xAxisCategories: n,
-    xAxisTitle: e,
-    yAxisTitle: d,
-    series: c,
+    type: s = "column",
+    title: n,
+    subtitle: d,
+    xAxisCategories: p,
+    xAxisTitle: t,
+    yAxisTitle: c,
+    series: f,
     options: o,
-    stacked: t,
-    is3D: p,
-    showLegend: f = !0,
-    showTooltip: y = !0
-  } = i, r = {
+    stacked: i,
+    is3D: u,
+    showLegend: b = !0,
+    showTooltip: g = !0
+  } = a, l = h(e), r = {
+    lang: {
+      decimalPoint: l.decimal,
+      thousandsSep: l.group
+    },
     chart: {
-      type: l,
+      type: s,
       backgroundColor: "transparent",
       style: {
         fontFamily: "Manrope, sans-serif"
       },
-      options3d: p ? {
+      options3d: u ? {
         enabled: !0,
         alpha: 15,
         beta: 15,
@@ -29,7 +35,7 @@ const u = (i) => {
       } : void 0
     },
     title: {
-      text: a ?? "",
+      text: n ?? "",
       align: "left",
       style: {
         fontSize: "18px",
@@ -38,7 +44,7 @@ const u = (i) => {
       }
     },
     subtitle: {
-      text: s,
+      text: d,
       align: "left"
     },
     credits: {
@@ -54,9 +60,9 @@ const u = (i) => {
       }
     },
     xAxis: {
-      categories: n,
-      title: e ? {
-        text: e,
+      categories: p,
+      title: t ? {
+        text: t,
         style: {
           color: "var(--color-foreground-tertiary)",
           fontFamily: '"Manrope", sans-serif',
@@ -80,7 +86,7 @@ const u = (i) => {
     },
     yAxis: {
       title: {
-        text: d,
+        text: c,
         margin: 30,
         style: {
           color: "var(--color-foreground-tertiary)",
@@ -96,6 +102,9 @@ const u = (i) => {
       gridLineColor: "var(--color-border)",
       gridLineDashStyle: "Dash",
       labels: {
+        formatter() {
+          return v(Number(this.value), e);
+        },
         style: {
           color: "var(--color-foreground-tertiary)",
           fontFamily: '"Manrope", sans-serif',
@@ -105,7 +114,7 @@ const u = (i) => {
       }
     },
     legend: {
-      enabled: f,
+      enabled: b,
       symbolRadius: 2,
       itemStyle: {
         color: "var(--color-foreground-tertiary)",
@@ -117,7 +126,7 @@ const u = (i) => {
       }
     },
     tooltip: {
-      enabled: y,
+      enabled: g,
       backgroundColor: "var(--color-surface-floating)",
       borderColor: "var(--color-border)",
       borderRadius: 8,
@@ -126,16 +135,16 @@ const u = (i) => {
       },
       shadow: !0
     },
-    colors: [...g],
+    colors: [...x],
     plotOptions: {
       column: {
         borderRadius: 4,
-        stacking: t ? "normal" : void 0,
+        stacking: i ? "normal" : void 0,
         borderWidth: 0
       },
       bar: {
         borderRadius: 4,
-        stacking: t ? "normal" : void 0,
+        stacking: i ? "normal" : void 0,
         borderWidth: 1,
         borderColor: "var(--color-background)"
       },
@@ -153,7 +162,7 @@ const u = (i) => {
         }
       }
     },
-    series: c
+    series: f
   };
   return {
     ...r,
@@ -167,9 +176,9 @@ const u = (i) => {
       ...r.xAxis,
       ...Array.isArray(o?.xAxis) ? {} : o?.xAxis
     },
-    yAxis: Array.isArray(o?.yAxis) ? o?.yAxis.map((b) => ({
+    yAxis: Array.isArray(o?.yAxis) ? o?.yAxis.map((y) => ({
       ...r.yAxis,
-      ...b
+      ...y
     })) : {
       ...r.yAxis,
       ...o?.yAxis
@@ -197,5 +206,5 @@ const u = (i) => {
   };
 };
 export {
-  u as getBaseChartOptions
+  C as getBaseChartOptions
 };

package/dist/components/feedback/sheet/sheet.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import * as p from "react";
 import * as a from "@radix-ui/react-dialog";
 import { ChevronRight as v, Cross as L } from "impact-nova-icons";
-import { createCompoundPart as b, wrapRadixPart as y } from "../../../lib/primitives/create-compound.js";
+import { wrapRadixPart as y, createCompoundPart as b } from "../../../lib/primitives/create-compound.js";
 import { cn as g } from "../../../lib/utils.js";
 import { useImpactNovaI18n as R } from "../../../i18n/use-impact-nova-i18n.js";
 import { Tooltip as N, TooltipTrigger as S, TooltipContent as C } from "../tooltip/tooltip.js";

package/dist/components/feedback/toast/toast.d.ts

@@ -6,7 +6,7 @@ declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitive
     position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 } & React.RefAttributes<HTMLOListElement>>;
 declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & import('class-variance-authority').VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "basic" | "unstyled" | "basic-success" | "basic-info" | "basic-warning" | "basic-error" | null | undefined;
+    variant?: "default" | "basic" | "destructive" | "unstyled" | "basic-success" | "basic-info" | "basic-warning" | "basic-error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
 declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/feedback/toast/toast.variants.d.ts

@@ -1,3 +1,3 @@
 export declare const toastVariants: (props?: ({
-    variant?: "default" | "destructive" | "basic" | "unstyled" | "basic-success" | "basic-info" | "basic-warning" | "basic-error" | null | undefined;
+    variant?: "default" | "basic" | "destructive" | "unstyled" | "basic-success" | "basic-info" | "basic-warning" | "basic-error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/flows/filter-panel/filter-panel.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { FilterPanelHeaderProps, FilterPanelProps, FilterPanelSidebarProps, FilterPanelFooterProps } from './filter-panel.types';
 declare const FilterPanelHeader: ({ title, children, className, }: FilterPanelHeaderProps) => import("react/jsx-runtime").JSX.Element;
-declare const FilterPanel: ({ open, onOpenChange, title, children, header, sidebar, className, preventClose, }: FilterPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const FilterPanel: ({ open, onOpenChange, title, description, children, header, sidebar, className, preventClose, }: FilterPanelProps) => import("react/jsx-runtime").JSX.Element;
 declare const FilterPanelSidebar: ({ items, activeTab, onTabChange, className, }: FilterPanelSidebarProps) => import("react/jsx-runtime").JSX.Element;
 declare const FilterPanelBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const FilterPanelFooter: ({ children, className, leftAction, }: FilterPanelFooterProps) => import("react/jsx-runtime").JSX.Element;