impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/data-display/calendar/use-calendar-state.d.ts

@@ -0,0 +1,65 @@
+import { DateRange } from 'react-day-picker';
+import { FiscalMode, FiscalMonthPattern } from '../../../lib/fiscal-calendar';
+import { CalendarApplyValue, MonthRange, MonthSelection, WeekRange, WeekSelection } from './calendar.types';
+export interface UseCalendarStateOptions {
+    showFooter: boolean;
+    selected?: Date | Date[] | DateRange;
+    onSelect?: (date: Date | Date[] | DateRange | undefined) => void;
+    pickerType: "date" | "week" | "month";
+    weekMode: "single" | "multiple" | "range";
+    selectedWeeks?: WeekSelection | WeekSelection[] | WeekRange;
+    onWeekSelect?: (weeks: WeekSelection | WeekSelection[] | WeekRange | undefined) => void;
+    calendarType: "calendar" | "fiscal";
+    fiscalMode: FiscalMode;
+    selectionMode: "week" | "fiscalMonth";
+    resolvedFiscalPattern?: FiscalMonthPattern;
+    fiscalYearStartMonth: number;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    monthMode: "single" | "multiple" | "range";
+    selectedMonths?: MonthSelection | MonthSelection[] | MonthRange;
+    onMonthSelect?: (months: MonthSelection | MonthSelection[] | MonthRange | undefined) => void;
+    month?: Date;
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    resolvedStartMonth: Date;
+    resolvedEndMonth: Date;
+    disabled?: unknown;
+    onApply?: (value: CalendarApplyValue) => void;
+    onCancel?: () => void;
+    onClear?: () => void;
+}
+export declare function useCalendarState({ showFooter, selected, onSelect, pickerType, weekMode, selectedWeeks, onWeekSelect, calendarType, fiscalMode, selectionMode, resolvedFiscalPattern, fiscalYearStartMonth, weekStartsOn, monthMode, selectedMonths, onMonthSelect, month, defaultMonth, onMonthChange, resolvedStartMonth, resolvedEndMonth, disabled, onApply, onCancel, onClear, }: UseCalendarStateOptions): {
+    pendingSelection: Date | DateRange | Date[] | undefined;
+    currentMonth: Date;
+    pendingWeekSelection: WeekSelection | WeekRange | WeekSelection[] | undefined;
+    pendingMonthSelection: MonthSelection | MonthRange | MonthSelection[] | undefined;
+    monthPickerYear: number;
+    handleMonthChangeInternal: (newMonth: Date) => void;
+    resolveWeekFromInput: (weekOrDate: Date | {
+        days: Array<{
+            date: Date;
+            outside?: boolean;
+        }>;
+    }) => WeekSelection;
+    handleWeekClick: (week: WeekSelection) => void;
+    handleMonthClick: (year: number, monthIndex: number) => void;
+    availableYears: import('../../..').Option[];
+    selectedDaysFromWeeks: Date[] | undefined;
+    weekRangeModifiers: {
+        range_start: Date[];
+        range_middle: Date[];
+        range_end: Date[];
+    };
+    handleInternalSelect: (date: Date | Date[] | DateRange | undefined) => void;
+    handleApply: () => void;
+    handleCancel: () => void;
+    handleClear: () => void;
+    isMonthSelected: (year: number, monthIndex: number) => boolean;
+    getMonthRangeProps: (year: number, monthIndex: number) => {
+        isStart: boolean;
+        isEnd: boolean;
+        isMiddle: boolean;
+    };
+    isMonthDisabled: (year: number, monthIndex: number) => boolean;
+    isApplyDisabledInternal: boolean;
+};

package/dist/components/data-display/calendar/use-calendar-state.js

@@ -0,0 +1,197 @@
+import * as i from "react";
+import { isCalendarApplyDisabled as ln } from "./calendar-apply-validation.js";
+import { nextMonthSelection as y, getAvailableYears as gn, isMonthSelected as mn, getMonthRangeProps as Cn, isMonthDisabled as bn } from "./calendar-month-utils.js";
+import { calculateWeekSelection as Dn, nextWeekSelection as W, weekSelectionsToDates as cn, computeWeekRangeModifiers as vn } from "./calendar-week-utils.js";
+function Rn({
+  showFooter: a,
+  selected: t,
+  onSelect: C,
+  pickerType: r,
+  weekMode: c,
+  selectedWeeks: f,
+  onWeekSelect: l,
+  calendarType: B,
+  fiscalMode: G,
+  selectionMode: H,
+  resolvedFiscalPattern: J,
+  fiscalYearStartMonth: K,
+  weekStartsOn: L,
+  monthMode: P,
+  selectedMonths: g,
+  onMonthSelect: m,
+  month: v,
+  defaultMonth: N,
+  onMonthChange: O,
+  resolvedStartMonth: Q,
+  resolvedEndMonth: S,
+  disabled: x,
+  onApply: R,
+  onCancel: U,
+  onClear: V
+}) {
+  const [A, Y] = i.useState(t), [X, Z] = i.useState(() => {
+    if (v) return v;
+    if (N) return N;
+    if (t) {
+      if (Array.isArray(t))
+        return t[0] || /* @__PURE__ */ new Date();
+      if (t instanceof Date)
+        return t;
+      if ("from" in t && t.from)
+        return t.from;
+    }
+    return /* @__PURE__ */ new Date();
+  }), [s, I] = i.useState(f), [b, _] = i.useState(g), [h, M] = i.useState(
+    X.getFullYear()
+  );
+  i.useEffect(() => {
+    v && (Z(v), M(v.getFullYear()));
+  }, [v]), i.useEffect(() => {
+    Y(t), I(f), _(g);
+  }, [t, f, g]);
+  const F = i.useCallback(
+    (n) => {
+      Z(n), M(n.getFullYear()), O?.(n);
+    },
+    [O]
+  ), k = i.useMemo(
+    () => ({
+      calendarType: B,
+      fiscalMode: G,
+      selectionMode: H,
+      fiscalMonthPattern: J,
+      fiscalYearStartMonth: K,
+      weekStartsOn: L
+    }),
+    [
+      B,
+      G,
+      H,
+      J,
+      K,
+      L
+    ]
+  ), j = i.useCallback(
+    (n) => Dn(n, k),
+    [k]
+  ), q = i.useCallback(
+    (n) => {
+      if (a) {
+        I((E) => {
+          const D = W(n, E, c);
+          return l?.(D), D;
+        });
+        return;
+      }
+      const u = W(n, f, c);
+      l?.(
+        c === "multiple" ? Array.isArray(u) && u.length > 0 ? u : void 0 : u
+      );
+    },
+    [c, a, f, l]
+  ), w = i.useCallback(
+    (n, u) => {
+      const E = { year: n, month: u };
+      if (a) {
+        _((sn) => {
+          const o = y(E, sn, P);
+          return m?.(o), o;
+        });
+        return;
+      }
+      const D = y(E, g, P);
+      m?.(
+        P === "multiple" ? Array.isArray(D) && D.length > 0 ? D : void 0 : D
+      );
+    },
+    [P, a, g, m]
+  ), T = i.useMemo(
+    () => gn(Q, S),
+    [Q, S]
+  ), z = i.useMemo(() => r !== "week" ? void 0 : cn(a ? s : f), [r, a, s, f]), p = i.useMemo(() => r !== "week" ? { range_start: [], range_middle: [], range_end: [] } : vn(z, c, a ? s : f), [
+    r,
+    z,
+    c,
+    a,
+    s,
+    f
+  ]), d = i.useCallback(
+    (n) => {
+      if (r === "week" && n) {
+        const u = Array.isArray(n) ? n[n.length - 1] : n instanceof Date ? n : void 0;
+        if (u) {
+          q(j(u));
+          return;
+        }
+      }
+      a && Y(n), C?.(n);
+    },
+    [a, C, r, j, q]
+  ), e = i.useCallback(() => {
+    r === "week" ? (l?.(s), R?.(s)) : r === "month" ? (m?.(b), R?.(b)) : (C?.(A), R?.(A));
+  }, [
+    A,
+    s,
+    b,
+    C,
+    l,
+    m,
+    R,
+    r
+  ]), nn = i.useCallback(() => {
+    r === "week" ? I(f) : r === "month" ? _(g) : Y(t), U?.();
+  }, [t, f, g, U, r]), an = i.useCallback(() => {
+    r === "week" ? (I(void 0), a || l?.(void 0)) : r === "month" ? (_(void 0), a || m?.(void 0)) : (Y(void 0), a || C?.(void 0)), V?.();
+  }, [a, C, l, m, V, r]), $ = a ? b : g, rn = i.useCallback(
+    (n, u) => mn(n, u, $),
+    [$]
+  ), un = i.useCallback(
+    (n, u) => Cn(n, u, $),
+    [$]
+  ), tn = i.useCallback(
+    (n, u) => bn(n, u, x),
+    [x]
+  ), fn = i.useMemo(
+    () => ln({
+      showFooter: a,
+      pickerType: r,
+      disabled: x,
+      pendingSelection: A,
+      pendingWeekSelection: s,
+      pendingMonthSelection: b
+    }),
+    [
+      a,
+      r,
+      x,
+      A,
+      s,
+      b
+    ]
+  );
+  return {
+    pendingSelection: A,
+    currentMonth: X,
+    pendingWeekSelection: s,
+    pendingMonthSelection: b,
+    monthPickerYear: h,
+    handleMonthChangeInternal: F,
+    resolveWeekFromInput: j,
+    handleWeekClick: q,
+    handleMonthClick: w,
+    availableYears: T,
+    selectedDaysFromWeeks: z,
+    weekRangeModifiers: p,
+    handleInternalSelect: d,
+    handleApply: e,
+    handleCancel: nn,
+    handleClear: an,
+    isMonthSelected: rn,
+    getMonthRangeProps: un,
+    isMonthDisabled: tn,
+    isApplyDisabledInternal: fn
+  };
+}
+export {
+  Rn as useCalendarState
+};

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

@@ -0,0 +1,8 @@
+import { CardProps } from './card.types';
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardTitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardDescription: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardFooter: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

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

@@ -0,0 +1,47 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createComponent as d } from "../../../lib/primitives/create-component.js";
+import { createCompoundPart as a } from "../../../lib/primitives/create-compound.js";
+import { cn as s } from "../../../lib/utils.js";
+const i = d(
+  "Card",
+  ({ className: e, ...r }, t) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: t,
+      "data-component": "card",
+      className: s(
+        "rounded-xl border bg-canvas-elevated text-canvas-elevated-foreground shadow",
+        e
+      ),
+      ...r
+    }
+  )
+), l = a("card", {
+  part: "header",
+  displayName: "CardHeader",
+  className: "flex flex-col space-y-1.5 p-6"
+}), C = a("card", {
+  part: "title",
+  displayName: "CardTitle",
+  className: "font-semibold leading-none tracking-tight"
+}), f = a("card", {
+  part: "description",
+  displayName: "CardDescription",
+  className: "text-sm text-secondary-foreground"
+}), N = a("card", {
+  part: "content",
+  displayName: "CardContent",
+  className: "p-6 pt-0"
+}), x = a("card", {
+  part: "footer",
+  displayName: "CardFooter",
+  className: "flex items-center p-6 pt-0"
+});
+export {
+  i as Card,
+  N as CardContent,
+  f as CardDescription,
+  x as CardFooter,
+  l as CardHeader,
+  C as CardTitle
+};

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

@@ -0,0 +1,7 @@
+import type * as React from "react";
+export type CardProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardTitleProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, } from './card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from './card.types';

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

@@ -0,0 +1,9 @@
+import { Card as d, CardContent as e, CardDescription as C, CardFooter as o, CardHeader as t, CardTitle as i } from "./card.js";
+export {
+  d as Card,
+  e as CardContent,
+  C as CardDescription,
+  o as CardFooter,
+  t as CardHeader,
+  i as CardTitle
+};

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

@@ -0,0 +1,16 @@
+/** Canonical chart tokens from light.json — always palette slots 1–5. */
+export declare const CHART_CANONICAL_CSS_VARS: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)"];
+/**
+ * Full Highcharts palette: chart-1..5 first, then extended series 6–50.
+ * 50 distinct colors; series 51+ cycles.
+ */
+export declare const CHART_PALETTE_CSS_VARS: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)", ...string[]];
+/** Number of distinct series colors before Highcharts cycles the palette. */
+export declare const CHART_PALETTE_SIZE: number;
+/**
+ * Token for series index `i`.
+ * 0–4 → chart-1..5; 5–49 → chart-series-06..50; 50+ wraps.
+ */
+export declare function chartPaletteCssVar(index: number): string;
+/** Resolved palette for Highcharts `colors` (browser only). */
+export declare function resolveChartPalette(scope?: HTMLElement): string[];

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

@@ -0,0 +1,28 @@
+import c from "../../../theme/tokens/chart-series-palette.json.js";
+import { resolveDesignTokenColor as a } from "../../../lib/resolve-design-token-color.js";
+const n = [
+  "var(--color-chart-1)",
+  "var(--color-chart-2)",
+  "var(--color-chart-3)",
+  "var(--color-chart-4)",
+  "var(--color-chart-5)"
+], l = c.colors.map(
+  (r) => `var(${r.cssVar})`
+), e = [
+  ...n,
+  ...l
+], A = e.length;
+function S(r) {
+  const t = e, o = t.length;
+  return t[(r % o + o) % o];
+}
+function _(r = document.documentElement) {
+  return e.map((t) => a(t, r));
+}
+export {
+  n as CHART_CANONICAL_CSS_VARS,
+  e as CHART_PALETTE_CSS_VARS,
+  A as CHART_PALETTE_SIZE,
+  S as chartPaletteCssVar,
+  _ as resolveChartPalette
+};

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

@@ -0,0 +1,29 @@
+import { default as HighchartsReact } from 'highcharts-react-official';
+import { ChartProps } from './chart.types';
+import * as React from 'react';
+declare global {
+    interface Document {
+        webkitFullscreenElement?: Element;
+        webkitExitFullscreen?: () => Promise<void>;
+        msFullscreenElement?: Element;
+        msExitFullscreen?: () => Promise<void>;
+    }
+    interface HTMLElement {
+        webkitRequestFullscreen?: () => Promise<void>;
+        msRequestFullscreen?: () => Promise<void>;
+    }
+}
+interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    isLoading?: boolean;
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChartHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ChartActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartFullScreen: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+interface ChartContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    loader?: React.ReactNode;
+}
+declare const ChartContent: React.ForwardRefExoticComponent<ChartContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<HighchartsReact.RefObject>>;
+export { Chart, ChartContainer, ChartHeader, ChartTitle, ChartActions, ChartFullScreen, ChartContent };

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

@@ -0,0 +1,205 @@
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import * as t from "react";
+import N from "highcharts-react-official";
+import { cn as f } 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 = () => {
+  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) => {
+      a.current = e, h(e);
+    }, []);
+    t.useImperativeHandle(u, () => a.current);
+    const x = () => {
+      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");
+      }, 200));
+    }, v = () => {
+      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");
+      }, 200));
+    }, E = () => {
+      d ? v() : x();
+    };
+    return t.useEffect(() => {
+      const e = () => {
+        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || p(!1);
+      };
+      return document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
+        document.removeEventListener("fullscreenchange", e), document.removeEventListener(
+          "webkitfullscreenchange",
+          e
+        );
+      };
+    }, []), 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"]');
+          if (k) {
+            const z = k.getBoundingClientRect();
+            e.setSize(z.width, z.height, !1);
+          } else
+            e.setSize(y.width, y.height, !1);
+          i = null;
+        })) : (e.setSize(null, null, !1), e.reflow());
+      };
+      return window.addEventListener("resize", L), () => {
+        i && cancelAnimationFrame(i), window.removeEventListener("resize", L);
+      };
+    }, [d]), /* @__PURE__ */ s(
+      S.Provider,
+      {
+        value: {
+          isExpanded: d,
+          toggleFullscreen: E,
+          isLoading: l,
+          containerRef: a,
+          containerElement: m,
+          chartComponentRef: o
+        },
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ref: w,
+            "data-component": "chart",
+            className: f(
+              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"
+            ),
+            ...c,
+            children: r
+          }
+        )
+      }
+    );
+  }
+);
+H.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 })
+);
+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 })
+);
+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 })
+);
+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,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: u,
+        ref: l,
+        className: f("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" }),
+          /* @__PURE__ */ s("span", { className: "sr-only", children: o })
+        ]
+      }
+    );
+  }
+);
+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: [
+        /* @__PURE__ */ s(q, { className: "h-8 w-1/3" }),
+        /* @__PURE__ */ s(q, { className: "flex-1 w-full" })
+      ] }),
+      t.Children.map(r, (h) => t.isValidElement(h) ? t.cloneElement(h, { ref: o }) : h)
+    ] });
+  }
+);
+I.displayName = "ChartContent";
+const K = t.forwardRef(
+  (n, r) => {
+    const {
+      height: l,
+      width: c,
+      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 });
+      return {
+        ...i,
+        chart: {
+          ...i.chart,
+          height: l ?? null,
+          width: c ?? 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(
+      N,
+      {
+        highcharts: R,
+        options: e,
+        ref: r,
+        containerProps: { style: { height: "100%", width: "100%" } }
+      }
+    ) }) : g ? /* @__PURE__ */ s(
+      N,
+      {
+        highcharts: R,
+        options: e,
+        ref: r,
+        containerProps: { style: { height: "100%", width: "100%" } }
+      }
+    ) : /* @__PURE__ */ s(H, { className: u, isLoading: a, children: /* @__PURE__ */ s(I, { loader: o, children: /* @__PURE__ */ s(
+      N,
+      {
+        highcharts: R,
+        options: e,
+        ref: r,
+        containerProps: { style: { height: "100%", width: "100%" } }
+      }
+    ) }) });
+  }
+);
+K.displayName = "Chart";
+export {
+  K as Chart,
+  G as ChartActions,
+  H as ChartContainer,
+  I as ChartContent,
+  J as ChartFullScreen,
+  W as ChartHeader,
+  D as ChartTitle
+};

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

@@ -0,0 +1,33 @@
+import type * as Highcharts from 'highcharts';
+export type ChartSeriesOptions = Highcharts.SeriesOptionsType;
+export type ChartType = ChartSeriesOptions['type'];
+/**
+ * Impact Nova chart props — a styled wrapper around Highcharts only.
+ *
+ * - `series` accepts native `Highcharts.SeriesOptionsType[]` (all Highcharts series types).
+ * - `options` accepts full `Highcharts.Options` and merges over design-system defaults.
+ * - Simplified props map common cases; use `options` for the rest of the Highcharts API.
+ *
+ * @see https://api.highcharts.com/highcharts/
+ */
+export interface ChartProps {
+    type?: ChartType;
+    series?: ChartSeriesOptions[];
+    title?: string;
+    subtitle?: string;
+    xAxisCategories?: string[];
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    stacked?: boolean;
+    is3D?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    options?: Highcharts.Options;
+    height?: number | string;
+    width?: number | string;
+    className?: string;
+    isLoading?: boolean;
+    loader?: React.ReactNode;
+    children?: React.ReactNode;
+    noWrapper?: boolean;
+}

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

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