impact-nova 2.0.9 → 2.1.0-alpha.2

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

@@ -0,0 +1,198 @@
+const g = (i) => {
+  const {
+    type: l = "column",
+    title: a,
+    subtitle: n,
+    xAxisCategories: s,
+    xAxisTitle: e,
+    yAxisTitle: d,
+    series: c,
+    options: o,
+    stacked: t,
+    is3D: p,
+    showLegend: f = !0,
+    showTooltip: y = !0
+  } = i, r = {
+    chart: {
+      type: l,
+      backgroundColor: "transparent",
+      style: {
+        fontFamily: "Manrope, sans-serif"
+      },
+      options3d: p ? {
+        enabled: !0,
+        alpha: 15,
+        beta: 15,
+        depth: 50,
+        viewDistance: 25
+      } : void 0
+    },
+    title: {
+      text: a ?? "",
+      align: "left",
+      style: {
+        fontSize: "18px",
+        fontWeight: "600",
+        color: "var(--color-foreground)"
+      }
+    },
+    subtitle: {
+      text: n,
+      align: "left"
+    },
+    credits: {
+      enabled: !1
+    },
+    exporting: {
+      enabled: !1
+    },
+    accessibility: {
+      enabled: !0,
+      screenReaderSection: {
+        beforeChartFormat: "<div>{chartTitle}</div><div>{typeDescription}</div><div>{chartSubtitle}</div><div>{chartLongdesc}</div>"
+      }
+    },
+    xAxis: {
+      categories: s,
+      title: e ? {
+        text: e,
+        style: {
+          color: "var(--color-foreground-tertiary)",
+          fontFamily: '"Manrope", sans-serif',
+          fontSize: "14px",
+          fontStyle: "normal",
+          fontWeight: "500",
+          lineHeight: "20px"
+        }
+      } : void 0,
+      gridLineWidth: 0,
+      lineColor: "var(--color-border)",
+      tickColor: "var(--color-border)",
+      labels: {
+        style: {
+          color: "var(--color-foreground-tertiary)",
+          fontFamily: '"Manrope", sans-serif',
+          fontSize: "12px",
+          fontWeight: "500"
+        }
+      }
+    },
+    yAxis: {
+      title: {
+        text: d,
+        margin: 30,
+        style: {
+          color: "var(--color-foreground-tertiary)",
+          fontFamily: '"Manrope", sans-serif',
+          fontSize: "14px",
+          fontStyle: "normal",
+          fontWeight: "500",
+          lineHeight: "20px"
+        }
+      },
+      lineWidth: 1,
+      lineColor: "var(--color-border)",
+      gridLineColor: "var(--color-border)",
+      gridLineDashStyle: "Dash",
+      labels: {
+        style: {
+          color: "var(--color-foreground-tertiary)",
+          fontFamily: '"Manrope", sans-serif',
+          fontSize: "12px",
+          fontWeight: "500"
+        }
+      }
+    },
+    legend: {
+      enabled: f,
+      symbolRadius: 2,
+      itemStyle: {
+        color: "var(--color-foreground-tertiary)",
+        fontWeight: "500",
+        fontSize: "12px"
+      },
+      itemHoverStyle: {
+        color: "var(--color-primary)"
+      }
+    },
+    tooltip: {
+      enabled: y,
+      backgroundColor: "var(--color-surface-floating)",
+      borderColor: "var(--color-border)",
+      borderRadius: 8,
+      style: {
+        color: "var(--color-surface-floating-foreground)"
+      },
+      shadow: !0
+    },
+    plotOptions: {
+      column: {
+        borderRadius: 4,
+        stacking: t ? "normal" : void 0,
+        borderWidth: 0
+      },
+      bar: {
+        borderRadius: 4,
+        stacking: t ? "normal" : void 0,
+        borderWidth: 1,
+        borderColor: "var(--color-background)"
+      },
+      pie: {
+        allowPointSelect: !0,
+        cursor: "pointer",
+        dataLabels: {
+          enabled: !0
+        },
+        showInLegend: !0
+      },
+      series: {
+        animation: {
+          duration: 1e3
+        }
+      }
+    },
+    series: c
+  };
+  return {
+    ...r,
+    ...o,
+    chart: {
+      ...r.chart,
+      ...o?.chart
+    },
+    xAxis: {
+      ...r.xAxis,
+      ...Array.isArray(o?.xAxis) ? {} : o?.xAxis
+    },
+    yAxis: Array.isArray(o?.yAxis) ? o?.yAxis.map((b) => ({
+      ...r.yAxis,
+      ...b
+    })) : {
+      ...r.yAxis,
+      ...o?.yAxis
+    },
+    plotOptions: {
+      ...r.plotOptions,
+      ...o?.plotOptions,
+      column: {
+        ...r.plotOptions?.column,
+        ...o?.plotOptions?.column
+      },
+      bar: {
+        ...r.plotOptions?.bar,
+        ...o?.plotOptions?.bar
+      },
+      pie: {
+        ...r.plotOptions?.pie,
+        ...o?.plotOptions?.pie
+      },
+      series: {
+        ...r.plotOptions?.series,
+        ...o?.plotOptions?.series
+      }
+    }
+  };
+};
+export {
+  g as getBaseChartOptions
+};

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

@@ -0,0 +1,3 @@
+export * from './chart';
+export * from './chart.types';
+export * from './chart.utils';

package/dist/components/data-display/separator/index.d.ts

@@ -0,0 +1,2 @@
+export { Separator } from './separator';
+export type { SeparatorProps } from './separator.types';

package/dist/components/data-display/separator/index.js

@@ -0,0 +1,4 @@
+import { Separator as a } from "./separator.js";
+export {
+  a as Separator
+};

package/dist/components/data-display/separator/separator.d.ts

@@ -0,0 +1,3 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: import('react').ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Separator };

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

@@ -0,0 +1,25 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-separator";
+import { createComponent as i } from "../../../lib/primitives/create-component.js";
+import { cn as l } from "../../../lib/utils.js";
+const f = i(
+  "Separator",
+  ({ className: o, orientation: r = "horizontal", decorative: a = !0, ...t }, e) => /* @__PURE__ */ p(
+    m.Root,
+    {
+      ref: e,
+      "data-component": "separator",
+      decorative: a,
+      orientation: r,
+      className: l(
+        "shrink-0 bg-[var(--color-border-hairline)]",
+        r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        o
+      ),
+      ...t
+    }
+  )
+);
+export {
+  f as Separator
+};

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

@@ -0,0 +1,3 @@
+import type * as React from "react";
+import type * as SeparatorPrimitive from "@radix-ui/react-separator";
+export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;

package/dist/components/data-display/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton.types';

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

@@ -0,0 +1,4 @@
+import { Skeleton as r } from "./skeleton.js";
+export {
+  r as Skeleton
+};

package/dist/components/data-display/skeleton/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { SkeletonProps } from './skeleton.types';
+declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Skeleton };

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

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

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

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/components/data-display/statistics-card/index.d.ts

@@ -0,0 +1,2 @@
+export { StatisticsCardRoot, StatisticsCardHeader, StatisticsCardTitle, StatisticsCardTitleIcon, StatisticsCardTitleText, StatisticsCardTitleTooltip, StatisticsCardChart, StatisticsCardLegend, StatisticsCardLegendItem, StatisticsCardSummary, StatisticsCardSummaryItem, } from './statistics-card';
+export type { StatisticsCardItem, StatisticsCardConfig, StatisticsCardChartConfig, StatisticsCardRootProps, StatisticsCardChartProps, StatisticsCardLegendItemProps, StatisticsCardSummaryItemProps, StatisticsCardTitleIconProps, StatisticsCardTitleTooltipProps, } from './statistics-card.types';

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

@@ -0,0 +1,14 @@
+import { StatisticsCardChart as a, StatisticsCardHeader as s, StatisticsCardLegend as r, StatisticsCardLegendItem as d, StatisticsCardRoot as e, StatisticsCardSummary as S, StatisticsCardSummaryItem as c, StatisticsCardTitle as C, StatisticsCardTitleIcon as m, StatisticsCardTitleText as o, StatisticsCardTitleTooltip as T } from "./statistics-card.js";
+export {
+  a as StatisticsCardChart,
+  s as StatisticsCardHeader,
+  r as StatisticsCardLegend,
+  d as StatisticsCardLegendItem,
+  e as StatisticsCardRoot,
+  S as StatisticsCardSummary,
+  c as StatisticsCardSummaryItem,
+  C as StatisticsCardTitle,
+  m as StatisticsCardTitleIcon,
+  o as StatisticsCardTitleText,
+  T as StatisticsCardTitleTooltip
+};

package/dist/components/data-display/statistics-card/statistics-card-context.d.ts

@@ -0,0 +1,10 @@
+import { StatisticsCardConfig, StatisticsCardItem } from './statistics-card.types';
+import * as React from "react";
+export type StatisticsCardContextValue = {
+    items: StatisticsCardItem[];
+    onItemToggle?: (index: number, checked: boolean) => void;
+    chartSize: number;
+    config?: StatisticsCardConfig;
+};
+export declare const StatisticsCardContext: React.Context<StatisticsCardContextValue | null>;
+export declare function useStatisticsCardContext(): StatisticsCardContextValue;

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

@@ -0,0 +1,12 @@
+import * as o from "react";
+const e = o.createContext(null);
+function s() {
+  const t = o.useContext(e);
+  if (!t)
+    throw new Error("StatisticsCard.* components must be used within a StatisticsCardRoot");
+  return t;
+}
+export {
+  e as StatisticsCardContext,
+  s as useStatisticsCardContext
+};

package/dist/components/data-display/statistics-card/statistics-card.d.ts

@@ -0,0 +1,14 @@
+import { StatisticsCardChartProps, StatisticsCardItem, StatisticsCardLegendItemProps, StatisticsCardRootProps, StatisticsCardSummaryItemProps, StatisticsCardTitleIconProps, StatisticsCardTitleTooltipProps } from './statistics-card.types';
+import * as React from "react";
+declare const StatisticsCardRoot: React.ForwardRefExoticComponent<StatisticsCardRootProps<StatisticsCardItem> & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardTitleIcon: React.ForwardRefExoticComponent<StatisticsCardTitleIconProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardTitleText: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const StatisticsCardTitleTooltip: React.ForwardRefExoticComponent<StatisticsCardTitleTooltipProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardChart: React.ForwardRefExoticComponent<StatisticsCardChartProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardLegend: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardLegendItem: React.ForwardRefExoticComponent<StatisticsCardLegendItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardSummary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardSummaryItem: React.ForwardRefExoticComponent<StatisticsCardSummaryItemProps & React.RefAttributes<HTMLDivElement>>;
+export { StatisticsCardRoot, StatisticsCardHeader, StatisticsCardTitle, StatisticsCardTitleIcon, StatisticsCardTitleText, StatisticsCardTitleTooltip, StatisticsCardChart, StatisticsCardLegend, StatisticsCardLegendItem, StatisticsCardSummary, StatisticsCardSummaryItem, };

package/dist/components/data-display/statistics-card/statistics-card.highcharts.d.ts

@@ -0,0 +1,4 @@
+import { default as Highcharts } from 'highcharts';
+import { StatisticsCardItem } from './statistics-card.types';
+export declare function statisticsTooltipFormatter(this: Highcharts.Point): string;
+export declare function createStatisticsSliceClickHandler(items: StatisticsCardItem[], onItemToggle?: (index: number, checked: boolean) => void, enableClick?: boolean): (this: Highcharts.Point) => void;

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

@@ -0,0 +1,18 @@
+function a() {
+  return `<div style="display:flex;align-items:center;gap:6px;padding:4px 8px;">
+          <span style="width:8px;height:8px;border-radius:50%;background:${typeof this.color == "string" ? this.color : "var(--color-foreground)"};flex-shrink:0;display:inline-block;"></span>
+          <span style="color:var(--color-foreground);font-weight:500;white-space:nowrap;">${this.key ?? this.name}</span>
+          <span style="color:var(--color-foreground);font-weight:700;margin-left:4px;">${this.y}</span>
+        </div>`;
+}
+function c(t, e, n = !0) {
+  return function() {
+    if (!n) return;
+    const o = this.name, i = t.findIndex((r) => r.label === o);
+    i !== -1 && e && e(i, !t[i].checked);
+  };
+}
+export {
+  c as createStatisticsSliceClickHandler,
+  a as statisticsTooltipFormatter
+};

package/dist/components/data-display/statistics-card/statistics-card.hooks.d.ts

@@ -0,0 +1,153 @@
+import { StatisticsCardChartConfig, StatisticsCardItem } from './statistics-card.types';
+import { statisticsTooltipFormatter } from './statistics-card.highcharts';
+/**
+ * Hook: useStatisticsChartData
+ * Extracts calculation logic for chart data
+ *
+ * Calculates:
+ * - Total sum of all items
+ * - Sum of checked items
+ * - Whether any items are checked
+ */
+export declare const useStatisticsChartData: (items: StatisticsCardItem[]) => {
+    total: number;
+    checkedTotal: number;
+    hasChecked: boolean;
+};
+/**
+ * Hook: useStatisticsChartSeries
+ * Extracts chart series generation logic
+ *
+ * Generates pie chart data with:
+ * - Item labels and values
+ * - Dynamic coloring based on checked state
+ * - Faded color (same color, lower opacity) for unchecked items when some are checked
+ */
+export declare const useStatisticsChartSeries: (items: StatisticsCardItem[], hasChecked: boolean) => {
+    type: "pie";
+    name: string;
+    innerSize: string;
+    data: {
+        name: string;
+        y: number;
+        color: string;
+    }[];
+}[];
+/**
+ * Hook: useStatisticsChartLabel
+ * Extracts chart center label logic
+ *
+ * Returns:
+ * - Custom label if provided
+ * - Checked total if any items are checked
+ * - Total otherwise
+ */
+export declare const useStatisticsChartLabel: (centerLabel: string | undefined, hasChecked: boolean, checkedTotal: number, total: number) => string;
+/**
+ * Hook: useStatisticsChartTooltip
+ * Extracts tooltip configuration logic
+ *
+ * Returns tooltip options for Highcharts with:
+ * - Custom HTML formatting
+ * - Color indicators
+ * - Proper styling
+ */
+export declare const useStatisticsChartTooltip: () => {
+    enabled: boolean;
+    useHTML: boolean;
+    outside: boolean;
+    backgroundColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    shadow: boolean;
+    style: {
+        fontFamily: string;
+        fontSize: string;
+    };
+    formatter: typeof statisticsTooltipFormatter;
+};
+/**
+ * Hook: useStatisticsChartPlotOptions
+ * Extracts chart plot options configuration
+ *
+ * Returns pie chart options with:
+ * - Border and styling (customizable via chartConfig)
+ * - Hover effects (customizable)
+ * - Click event handling for slice interaction (customizable)
+ */
+export declare const useStatisticsChartPlotOptions: (items: StatisticsCardItem[], onItemToggle?: (index: number, checked: boolean) => void, chartConfig?: StatisticsCardChartConfig) => {
+    pie: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        dataLabels: {
+            enabled: boolean;
+        };
+        showInLegend: boolean;
+        allowPointSelect: boolean;
+        states: {
+            hover: {
+                enabled: boolean;
+                brightness: number;
+            };
+        };
+        point: {
+            events: {
+                click: (this: Highcharts.Point) => void;
+            };
+        };
+    };
+};
+/**
+ * Hook: useStatisticsChartOptions
+ * Master hook that combines all chart configuration
+ *
+ * Returns complete Highcharts options object with:
+ * - Chart spacing and margins
+ * - Tooltip configuration
+ * - Plot options with click handling
+ * - Customizable chart behavior
+ */
+export declare const useStatisticsChartOptions: (items: StatisticsCardItem[], onItemToggle?: (index: number, checked: boolean) => void, chartConfig?: StatisticsCardChartConfig) => {
+    chart: {
+        margin: number[];
+        spacing: number[];
+    };
+    tooltip: {
+        enabled: boolean;
+        useHTML: boolean;
+        outside: boolean;
+        backgroundColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        shadow: boolean;
+        style: {
+            fontFamily: string;
+            fontSize: string;
+        };
+        formatter: typeof statisticsTooltipFormatter;
+    };
+    plotOptions: {
+        pie: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            dataLabels: {
+                enabled: boolean;
+            };
+            showInLegend: boolean;
+            allowPointSelect: boolean;
+            states: {
+                hover: {
+                    enabled: boolean;
+                    brightness: number;
+                };
+            };
+            point: {
+                events: {
+                    click: (this: Highcharts.Point) => void;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,94 @@
+import * as n from "react";
+import { statisticsTooltipFormatter as i, createStatisticsSliceClickHandler as d } from "./statistics-card.highcharts.js";
+const C = (t) => {
+  const r = n.useMemo(
+    () => t.reduce((o, a) => o + a.value, 0),
+    [t]
+  ), e = n.useMemo(
+    () => t.reduce((o, a) => o + (a.checked ? a.value : 0), 0),
+    [t]
+  ), s = t.some((o) => o.checked);
+  return { total: r, checkedTotal: e, hasChecked: s };
+}, b = (t, r = 0.4) => {
+  const e = t.replace("#", ""), s = parseInt(e.substring(0, 2), 16), o = parseInt(e.substring(2, 4), 16), a = parseInt(e.substring(4, 6), 16);
+  return `rgba(${s}, ${o}, ${a}, ${r})`;
+}, M = (t, r) => n.useMemo(
+  () => [
+    {
+      type: "pie",
+      name: "Statistics",
+      innerSize: "72%",
+      data: t.map((e) => ({
+        name: e.label,
+        y: e.value,
+        color: r ? e.checked ? e.borderColor : b(e.borderColor, 0.4) : e.borderColor
+      }))
+    }
+  ],
+  [t, r]
+), k = (t, r, e, s) => n.useMemo(
+  () => t ?? String(r ? e : s),
+  [t, r, e, s]
+), p = () => n.useMemo(
+  () => ({
+    enabled: !0,
+    useHTML: !0,
+    outside: !0,
+    backgroundColor: "var(--color-background)",
+    borderWidth: 0,
+    borderRadius: 8,
+    shadow: !0,
+    style: {
+      fontFamily: "Manrope, sans-serif",
+      fontSize: "12px"
+    },
+    formatter: i
+  }),
+  []
+), S = (t, r, e) => {
+  const s = e?.borderWidth ?? 2, o = e?.borderColor ?? "var(--color-disabled-surface)", a = e?.borderRadius ?? 4, c = e?.enableHover ?? !0, l = e?.enableClick ?? !0, u = n.useMemo(
+    () => d(t, r, l),
+    [t, r, l]
+  );
+  return n.useMemo(
+    () => ({
+      pie: {
+        borderWidth: s,
+        borderColor: o,
+        borderRadius: a,
+        dataLabels: { enabled: !1 },
+        showInLegend: !1,
+        allowPointSelect: !1,
+        // Disable pull-out effect on click
+        states: { hover: { enabled: c, brightness: 0.05 } },
+        point: {
+          events: {
+            click: u
+          }
+        }
+      }
+    }),
+    [u, s, o, a, c]
+  );
+}, v = (t, r, e) => {
+  const s = p(), o = S(t, r, e);
+  return n.useMemo(
+    () => ({
+      chart: {
+        margin: [0, 0, 0, 0],
+        spacing: [0, 0, 0, 0]
+      },
+      tooltip: s,
+      plotOptions: o
+    }),
+    [s, o]
+  );
+};
+export {
+  C as useStatisticsChartData,
+  k as useStatisticsChartLabel,
+  v as useStatisticsChartOptions,
+  S as useStatisticsChartPlotOptions,
+  M as useStatisticsChartSeries,
+  p as useStatisticsChartTooltip
+};