impact-nova 2.0.9 → 2.1.0-alpha.10

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

@@ -0,0 +1,201 @@
+import { CHART_PALETTE_CSS_VARS as g } from "./chart-palette.js";
+const u = (i) => {
+  const {
+    type: l = "column",
+    title: a,
+    subtitle: s,
+    xAxisCategories: n,
+    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: s,
+      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: n,
+      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
+    },
+    colors: [...g],
+    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,
+    colors: o?.colors ?? r.colors,
+    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 {
+  u as getBaseChartOptions
+};

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

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

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

@@ -0,0 +1,18 @@
+import { Chart as C, ChartActions as e, ChartContainer as a, ChartContent as o, ChartFullScreen as h, ChartHeader as A, ChartTitle as S } from "./chart.js";
+import { getBaseChartOptions as _ } from "./chart.utils.js";
+import { CHART_CANONICAL_CSS_VARS as l, CHART_PALETTE_CSS_VARS as s, CHART_PALETTE_SIZE as E, chartPaletteCssVar as R, resolveChartPalette as i } from "./chart-palette.js";
+export {
+  l as CHART_CANONICAL_CSS_VARS,
+  s as CHART_PALETTE_CSS_VARS,
+  E as CHART_PALETTE_SIZE,
+  C as Chart,
+  e as ChartActions,
+  a as ChartContainer,
+  o as ChartContent,
+  h as ChartFullScreen,
+  A as ChartHeader,
+  S as ChartTitle,
+  R as chartPaletteCssVar,
+  _ as getBaseChartOptions,
+  i as resolveChartPalette
+};

package/dist/components/data-display/chart/resolve-highcharts-options.d.ts

@@ -0,0 +1,3 @@
+import { default as Highcharts } from 'highcharts';
+/** Deep-resolve design-token color strings before passing options to Highcharts. */
+export declare function resolveHighchartsOptions<T extends Highcharts.Options>(options: T, scope?: HTMLElement | null): T;

package/dist/components/data-display/chart/resolve-highcharts-options.js

@@ -0,0 +1,35 @@
+import { resolveDesignTokenColor as l } from "../../../lib/resolve-design-token-color.js";
+const s = /* @__PURE__ */ new Set([
+  "color",
+  "fillColor",
+  "lineColor",
+  "borderColor",
+  "backgroundColor",
+  "upColor",
+  "upLineColor",
+  "minColor",
+  "maxColor",
+  "negativeColor",
+  "medianColor"
+]);
+function C(o) {
+  return o === "colors" || o !== void 0 && s.has(o);
+}
+function t(o, r, i) {
+  if (typeof o == "string")
+    return C(i) ? l(o, r) : o;
+  if (Array.isArray(o))
+    return o.map((n) => t(n, r, i));
+  if (!o || typeof o != "object")
+    return o;
+  const e = {};
+  for (const [n, f] of Object.entries(o))
+    e[n] = t(f, r, n);
+  return e;
+}
+function d(o, r) {
+  return typeof document > "u" || !r ? o : t(o, r);
+}
+export {
+  d as resolveHighchartsOptions
+};

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 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 = n(
+  "Skeleton",
+  ({ className: e, ...o }, t) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: t,
+      "data-component": "skeleton",
+      className: r("animate-pulse rounded-md bg-muted", e),
+      ...o
+    }
+  )
+);
+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.color.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Fade a slice fill without shifting hue.
+ * Hex: legacy rgba(…, opacity) — unchanged visual for existing consumers.
+ * var(--color-*): color-mix — same apparent 40% wash on chart background.
+ */
+export declare function fadeSliceColor(color: string, opacity?: number): string;

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

@@ -0,0 +1,19 @@
+function c(a, n = 0.4) {
+  const t = a.trim();
+  if (t.startsWith("var(")) {
+    const r = Math.round(n * 100);
+    return `color-mix(in srgb, ${t} ${r}%, transparent)`;
+  }
+  if (t.startsWith("#")) {
+    let r = t.slice(1);
+    if (r.length === 3 && (r = r.split("").map((e) => e + e).join("")), r.length === 6) {
+      const e = Number.parseInt(r.slice(0, 2), 16), s = Number.parseInt(r.slice(2, 4), 16), i = Number.parseInt(r.slice(4, 6), 16);
+      if (!Number.isNaN(e) && !Number.isNaN(s) && !Number.isNaN(i))
+        return `rgba(${e}, ${s}, ${i}, ${n})`;
+    }
+  }
+  return t;
+}
+export {
+  c as fadeSliceColor
+};

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;
+                };
+            };
+        };
+    };
+};