impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/skeleton.js

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

package/dist/components/ui/slider.js

@@ -1,50 +1,50 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import * as s from "react";
 import * as e from "@radix-ui/react-slider";
-import { cn as t } from "../../lib/utils.js";
-const d = s.forwardRef(({ className: a, ...o }, i) => /* @__PURE__ */ n(
+import { cn as d } from "../../lib/utils.js";
+const t = s.forwardRef(({ className: r, ...o }, l) => /* @__PURE__ */ n(
   e.Root,
   {
-    ref: i,
-    className: t(
+    ref: l,
+    className: d(
       "relative flex w-full touch-none select-none items-center",
-      a
+      r
     ),
     "data-component": "slider-root",
     ...o,
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         e.Track,
         {
-          className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20",
+          className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-brand/20",
           "data-component": "slider-track",
-          children: /* @__PURE__ */ r(
+          children: /* @__PURE__ */ a(
             e.Range,
             {
-              className: "absolute h-full bg-primary",
+              className: "absolute h-full bg-brand",
               "data-component": "slider-range"
             }
           )
         }
       ),
-      Array.isArray(o.value || o.defaultValue) ? (o.value || o.defaultValue || []).map((c, l) => /* @__PURE__ */ r(
+      Array.isArray(o.value || o.defaultValue) ? (o.value || o.defaultValue || []).map((c, i) => /* @__PURE__ */ a(
         e.Thumb,
         {
-          className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          className: "block h-4 w-4 rounded-full border border-brand/50 bg-canvas shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50",
           "data-component": "slider-thumb"
         },
-        l
-      )) : /* @__PURE__ */ r(
+        i
+      )) : /* @__PURE__ */ a(
         e.Thumb,
         {
-          className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          className: "block h-4 w-4 rounded-full border border-brand/50 bg-canvas shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50",
           "data-component": "slider-thumb"
         }
       )
     ]
   }
 ));
-d.displayName = e.Root.displayName;
+t.displayName = e.Root.displayName;
 export {
-  d as Slider
+  t as Slider
 };

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+export interface StatisticsCardItem {
+    label: string;
+    value: number;
+    borderColor: string;
+    checked?: boolean;
+}
+export interface StatisticsCardConfig {
+    colors?: {
+        background?: string;
+        text?: string;
+        border?: string;
+        outlineChecked?: string;
+        unchecked?: string;
+        tooltipBg?: string;
+        tooltipBorder?: string;
+    };
+    spacing?: {
+        rootWidth?: string;
+        rootPadding?: string;
+        rootGap?: string;
+        legendWidth?: string;
+        itemPadding?: string;
+        itemGap?: string;
+    };
+}
+interface StatisticsCardRootProps<T = StatisticsCardItem> extends React.HTMLAttributes<HTMLDivElement> {
+    items: T[];
+    onItemToggle?: (index: number, checked: boolean) => void;
+    chartSize?: number;
+    config?: StatisticsCardConfig;
+    mapItem?: (item: T, index: number) => StatisticsCardItem;
+}
+declare const StatisticsCardRoot: React.ForwardRefExoticComponent<StatisticsCardRootProps<StatisticsCardItem> & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface StatisticsCardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const StatisticsCardTitle: React.ForwardRefExoticComponent<StatisticsCardTitleProps & React.RefAttributes<HTMLDivElement>>;
+interface StatisticsCardTitleIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon: React.ReactNode;
+    className?: string;
+}
+declare const StatisticsCardTitleIcon: React.ForwardRefExoticComponent<StatisticsCardTitleIconProps & React.RefAttributes<HTMLDivElement>>;
+interface StatisticsCardTitleTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const StatisticsCardTitleText: React.ForwardRefExoticComponent<StatisticsCardTitleTextProps & React.RefAttributes<HTMLSpanElement>>;
+interface StatisticsCardTitleTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    icon?: React.ReactNode;
+}
+declare const StatisticsCardTitleTooltip: React.ForwardRefExoticComponent<StatisticsCardTitleTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export interface StatisticsCardChartConfig {
+    type?: "pie" | "donut";
+    name?: string;
+    innerSize?: string | number;
+    uncheckedColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    borderRadius?: number;
+    enableHover?: boolean;
+    enableClick?: boolean;
+}
+interface StatisticsCardChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    centerLabel?: string;
+    chartConfig?: StatisticsCardChartConfig;
+    chartSize?: number;
+    className?: string;
+}
+declare const StatisticsCardChart: React.ForwardRefExoticComponent<StatisticsCardChartProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardLegend: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface StatisticsCardLegendItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    index?: number;
+    item?: StatisticsCardItem;
+}
+declare const StatisticsCardLegendItem: React.ForwardRefExoticComponent<StatisticsCardLegendItemProps & React.RefAttributes<HTMLDivElement>>;
+interface StatisticsCardSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const StatisticsCardSummary: React.ForwardRefExoticComponent<StatisticsCardSummaryProps & React.RefAttributes<HTMLDivElement>>;
+interface StatisticsCardSummaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    count: number | string | React.ReactNode;
+    color?: string;
+}
+declare const StatisticsCardSummaryItem: React.ForwardRefExoticComponent<StatisticsCardSummaryItemProps & React.RefAttributes<HTMLDivElement>>;
+export { StatisticsCardRoot, StatisticsCardHeader, StatisticsCardTitle, StatisticsCardTitleIcon, StatisticsCardTitleText, StatisticsCardTitleTooltip, StatisticsCardChart, StatisticsCardLegend, StatisticsCardLegendItem, StatisticsCardSummary, StatisticsCardSummaryItem, };
+export type { StatisticsCardRootProps, StatisticsCardTitleProps, StatisticsCardTitleIconProps, StatisticsCardTitleTextProps, StatisticsCardTitleTooltipProps, StatisticsCardChartProps, StatisticsCardLegendItemProps, StatisticsCardSummaryProps, StatisticsCardSummaryItemProps };

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

@@ -0,0 +1,150 @@
+import { StatisticsCardItem, StatisticsCardChartConfig } from './statistics-card';
+/**
+ * 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: () => string;
+};
+/**
+ * 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;
+        states: {
+            hover: {
+                enabled: boolean;
+                brightness: number;
+            };
+        };
+        point: {
+            events: {
+                click: (this: any) => 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: () => string;
+    };
+    plotOptions: {
+        pie: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            dataLabels: {
+                enabled: boolean;
+            };
+            showInLegend: boolean;
+            states: {
+                hover: {
+                    enabled: boolean;
+                    brightness: number;
+                };
+            };
+            point: {
+                events: {
+                    click: (this: any) => void;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,100 @@
+import * as a from "react";
+const f = (e) => {
+  const s = a.useMemo(
+    () => e.reduce((o, n) => o + n.value, 0),
+    [e]
+  ), t = a.useMemo(
+    () => e.reduce((o, n) => o + (n.checked ? n.value : 0), 0),
+    [e]
+  ), r = e.some((o) => o.checked);
+  return { total: s, checkedTotal: t, hasChecked: r };
+}, p = (e, s = 0.4) => {
+  const t = e.replace("#", ""), r = parseInt(t.substring(0, 2), 16), o = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
+  return `rgba(${r}, ${o}, ${n}, ${s})`;
+}, x = (e, s) => a.useMemo(
+  () => [
+    {
+      type: "pie",
+      name: "Statistics",
+      innerSize: "72%",
+      data: e.map((t) => ({
+        name: t.label,
+        y: t.value,
+        color: s ? t.checked ? t.borderColor : p(t.borderColor, 0.4) : t.borderColor
+      }))
+    }
+  ],
+  [e, s]
+), y = (e, s, t, r) => a.useMemo(
+  () => e ?? String(s ? t : r),
+  [e, s, t, r]
+), b = () => a.useMemo(
+  () => ({
+    enabled: !0,
+    useHTML: !0,
+    outside: !0,
+    backgroundColor: "#FFFFFF",
+    borderWidth: 0,
+    borderRadius: 8,
+    shadow: !0,
+    style: {
+      fontFamily: "Manrope, sans-serif",
+      fontSize: "12px"
+    },
+    formatter: function() {
+      const e = this;
+      return `<div style="display:flex;align-items:center;gap:6px;padding:4px 8px;">
+          <span style="width:8px;height:8px;border-radius:50%;background:${e.color ?? "#000"};flex-shrink:0;display:inline-block;"></span>
+          <span style="color:#0D152C;font-weight:500;white-space:nowrap;">${e.key ?? e.name}</span>
+          <span style="color:#1F2B4D;font-weight:700;margin-left:4px;">${e.y}</span>
+        </div>`;
+    }
+  }),
+  []
+), h = (e, s, t) => {
+  const r = t?.borderWidth ?? 2, o = t?.borderColor ?? "#F8F9FB", n = t?.borderRadius ?? 4, i = t?.enableHover ?? !0, l = t?.enableClick ?? !0;
+  return a.useMemo(
+    () => ({
+      pie: {
+        borderWidth: r,
+        borderColor: o,
+        borderRadius: n,
+        dataLabels: { enabled: !1 },
+        showInLegend: !1,
+        states: { hover: { enabled: i, brightness: 0.05 } },
+        // Handle slice click to toggle corresponding legend item
+        point: {
+          events: {
+            click: function() {
+              if (!l) return;
+              const u = this.name, c = e.findIndex((d) => d.label === u);
+              c !== -1 && s && s(c, !e[c].checked);
+            }
+          }
+        }
+      }
+    }),
+    [e, s, r, o, n, i, l]
+  );
+}, g = (e, s, t) => {
+  const r = b(), o = h(e, s, t);
+  return a.useMemo(
+    () => ({
+      chart: {
+        margin: [0, 0, 0, 0],
+        spacing: [0, 0, 0, 0]
+      },
+      tooltip: r,
+      plotOptions: o
+    }),
+    [r, o]
+  );
+};
+export {
+  f as useStatisticsChartData,
+  y as useStatisticsChartLabel,
+  g as useStatisticsChartOptions,
+  h as useStatisticsChartPlotOptions,
+  x as useStatisticsChartSeries,
+  b as useStatisticsChartTooltip
+};

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

@@ -0,0 +1,259 @@
+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 { 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";
+const N = n.createContext(null), y = () => {
+  const e = n.useContext(N);
+  if (!e)
+    throw new Error("StatisticsCard.* components must be used within a StatisticsCardRoot");
+  return e;
+}, $ = n.forwardRef(
+  ({ className: e, items: t, onItemToggle: s, chartSize: a = 110, config: o, mapItem: l, children: m, ...c }, 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(
+      "div",
+      {
+        ref: i,
+        role: "region",
+        "aria-roledescription": "statistics card",
+        "data-component": "statistics-card",
+        className: d(
+          "flex flex-row flex-wrap md:flex-nowrap items-center justify-between rounded-lg box-border min-w-0 overflow-hidden",
+          C,
+          b,
+          S,
+          e
+        ),
+        style: {
+          backgroundColor: g
+        },
+        ...c,
+        children: m
+      }
+    ) });
+  }
+);
+$.displayName = "StatisticsCardRoot";
+const E = n.forwardRef(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: a,
+    className: d("flex flex-col items-start gap-4 flex-shrink-0 min-w-0", e),
+    ...s,
+    children: t
+  }
+));
+E.displayName = "StatisticsCardHeader";
+const F = n.forwardRef(
+  ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: d("flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]", e),
+      ...s,
+      children: t
+    }
+  )
+);
+F.displayName = "StatisticsCardTitle";
+const H = n.forwardRef(
+  ({ icon: e, className: t, ...s }, a) => /* @__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),
+      ...s,
+      children: e
+    }
+  )
+);
+H.displayName = "StatisticsCardTitleIcon";
+const M = n.forwardRef(
+  ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+    "span",
+    {
+      ref: a,
+      className: d("font-semibold text-base leading-[1.5em] text-[#777980] truncate line-clamp-1", e),
+      ...s,
+      children: t
+    }
+  )
+);
+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 })
+  ] }) })
+);
+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),
+      chart: {
+        type: "pie",
+        height: a,
+        width: a,
+        margin: [0, 0, 0, 0],
+        spacing: [0, 0, 0, 0],
+        backgroundColor: "transparent"
+      },
+      title: { text: "" },
+      credits: { enabled: !1 },
+      exporting: { enabled: !1 },
+      navigation: { buttonOptions: { enabled: !1 } },
+      series: u
+    };
+    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` },
+        ...o,
+        children: [
+          /* @__PURE__ */ r(
+            j,
+            {
+              highcharts: P,
+              options: g,
+              containerProps: { style: { width: "100%", height: "100%" } }
+            }
+          ),
+          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 }) })
+        ]
+      }
+    );
+  }
+);
+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;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      role: "list",
+      className: d(
+        "flex flex-col justify-center min-w-0 flex-1 md:flex-none",
+        c,
+        i,
+        e
+      ),
+      ...s,
+      children: t
+    }
+  );
+});
+J.displayName = "StatisticsCardLegend";
+const K = n.forwardRef(
+  ({ className: e, index: t, item: s, ...a }, o) => {
+    const { items: l, onItemToggle: m, config: c } = 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;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: o,
+        role: "listitem",
+        "aria-label": `${i.label}: ${i.value}`,
+        className: d(
+          "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all",
+          g,
+          b,
+          e
+        ),
+        style: {
+          borderLeftColor: i.borderColor,
+          boxShadow: i.checked ? `0 0 0 2px ${i.borderColor}` : "0px 0px 4px 0px rgba(0,0,0,0.12)",
+          "--item-color": i.borderColor
+        },
+        ...a,
+        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),
+                "aria-label": `Select ${i.label}`,
+                className: "shrink-0"
+              }
+            ),
+            /* @__PURE__ */ r("span", { className: "flex-1 font-medium text-xs leading-[1.25em] truncate", style: { color: S }, children: i.label })
+          ] }),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: "shrink-0 font-semibold text-sm leading-[1.5em] text-right min-w-[27px] text-[#1F2B4D]",
+              children: i.value
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+K.displayName = "StatisticsCardLegendItem";
+const Q = n.forwardRef(
+  ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: d("flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-[#60697D]", e),
+      ...s,
+      children: t
+    }
+  )
+);
+Q.displayName = "StatisticsCardSummary";
+const U = n.forwardRef(
+  ({ className: e, label: t, count: s, color: a = "#60697D", ...o }, l) => /* @__PURE__ */ h(
+    "div",
+    {
+      ref: l,
+      className: d("flex items-center gap-1", e),
+      style: { "--summary-color": a },
+      ...o,
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: "w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--summary-color)]"
+          }
+        ),
+        /* @__PURE__ */ h("span", { children: [
+          t,
+          ": ",
+          s
+        ] })
+      ]
+    }
+  )
+);
+U.displayName = "StatisticsCardSummaryItem";
+export {
+  A as StatisticsCardChart,
+  E as StatisticsCardHeader,
+  J as StatisticsCardLegend,
+  K as StatisticsCardLegendItem,
+  $ as StatisticsCardRoot,
+  Q as StatisticsCardSummary,
+  U as StatisticsCardSummaryItem,
+  F as StatisticsCardTitle,
+  H as StatisticsCardTitleIcon,
+  M as StatisticsCardTitleText,
+  q as StatisticsCardTitleTooltip
+};