@robr0/design-system 0.1.0

package/components/Chart/RadarChart.d.ts

@@ -0,0 +1,34 @@
+import { ChartSummaryItem } from './BarChart';
+export interface RadarSeriesConfig {
+    /** Key in data for this series */
+    dataKey: string;
+    /** Display name (shown in tooltip and legend) */
+    label: string;
+    /** Fill / stroke colour — CSS value */
+    color?: string;
+    /** Fill opacity (0–1) */
+    fillOpacity?: number;
+}
+export interface RadarChartProps {
+    /** Array of data objects — each should have a category key and one or more value keys */
+    data: Record<string, unknown>[];
+    /** Key in data for the category labels on each axis */
+    categoryKey?: string;
+    /** One or more radar series to render */
+    series: RadarSeriesConfig[];
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Chart area height in pixels */
+    height?: number;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Radar chart built on Recharts with design-system tokens.
+ * Renders one or more data series as filled polygons on a polar grid.
+ */
+export declare const RadarChart: ({ data, categoryKey, series, title, subtitle, summaryItems, height, className, }: RadarChartProps) => import("react").JSX.Element;

package/components/Chart/RadarChart.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Tooltip, Radar, Legend } from "recharts";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function RadarTooltip({ active, payload, label }) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-dot", style: { backgroundColor: entry.color } }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: entry.name }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] }, i))
+  ] });
+}
+const RadarChart = ({
+  data,
+  categoryKey = "subject",
+  series,
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+  const gridColor = getCSSVar("--color-divider", "#232323");
+  const defaultColor = getCSSVar("--color-action-primary-bg", "#118AB2");
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "70%", children: [
+      /* @__PURE__ */ jsx(PolarGrid, { stroke: gridColor }),
+      /* @__PURE__ */ jsx(
+        PolarAngleAxis,
+        {
+          dataKey: categoryKey,
+          tick: { fill: textSecondary, fontSize: 12 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PolarRadiusAxis,
+        {
+          tick: { fill: textSecondary, fontSize: 10 },
+          axisLine: false,
+          tickCount: 5
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Radar,
+        {
+          name: s.label,
+          dataKey: s.dataKey,
+          stroke: s.color || defaultColor,
+          fill: s.color || defaultColor,
+          fillOpacity: s.fillOpacity ?? 0.3
+        },
+        s.dataKey
+      )),
+      series.length > 1 && /* @__PURE__ */ jsx(
+        Legend,
+        {
+          wrapperStyle: { color: textSecondary, fontSize: 12 }
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  RadarChart
+};

package/components/Chart/RadialChart.d.ts

@@ -0,0 +1,37 @@
+import { ChartSummaryItem } from './BarChart';
+export interface RadialDataItem {
+    /** Display name */
+    name: string;
+    /** Numeric value */
+    value: number;
+    /** Ring fill colour */
+    color?: string;
+}
+export interface RadialChartProps {
+    /** Array of data items — each renders as a concentric ring */
+    data: RadialDataItem[];
+    /** Maximum value for the radial scale (100 = percentage) */
+    maxValue?: number;
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Chart area height in pixels */
+    height?: number;
+    /** Inner radius of the innermost ring */
+    innerRadius?: number;
+    /** Outer radius of the outermost ring */
+    outerRadius?: number;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Radial bar chart built on Recharts with design-system tokens.
+ * Each data item renders as a concentric ring — great for
+ * progress indicators and comparative gauges.
+ */
+export declare const RadialChart: ({ data, maxValue, title, subtitle, summaryItems, height, innerRadius, outerRadius, showLegend, className, }: RadialChartProps) => import("react").JSX.Element;

package/components/Chart/RadialChart.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip, Legend } from "recharts";
+import "./Chart.css";
+function getDefaultColors() {
+  if (typeof window === "undefined") {
+    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+  }
+  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
+  return [
+    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-core-accent-mint", "#06D6A0"),
+    get("--color-core-accent-gold", "#FFD166"),
+    get("--color-core-accent-coral", "#EF476F"),
+    get("--color-core-accent-violet", "#9E47EF"),
+    get("--color-core-accent-amber", "#EF8247")
+  ];
+}
+function getCSSVar(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function RadialTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  return /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip", children: /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ds-chart__tooltip-dot",
+        style: { backgroundColor: entry.payload?.fill }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: entry.payload?.name }),
+    /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+  ] }) });
+}
+const RadialChart = ({
+  data,
+  maxValue = 100,
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  innerRadius = 40,
+  outerRadius = 140,
+  showLegend = true,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const defaultColors = getDefaultColors();
+  const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+  const bgColor = getCSSVar("--color-bg-container-primary", "#0E0E0E");
+  const chartData = data.map((item, i) => ({
+    ...item,
+    fill: item.color || defaultColors[i % defaultColors.length]
+  }));
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(RadialTooltip, { ...props }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+      RadialBarChart,
+      {
+        cx: "50%",
+        cy: "50%",
+        innerRadius,
+        outerRadius,
+        data: chartData,
+        startAngle: 90,
+        endAngle: -270,
+        barSize: 16,
+        children: [
+          /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, maxValue], tick: false }),
+          /* @__PURE__ */ jsx(
+            RadialBar,
+            {
+              background: { fill: bgColor },
+              dataKey: "value",
+              cornerRadius: 8
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+          showLegend && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: "bottom",
+              iconType: "circle",
+              iconSize: 8,
+              ...{ payload: chartData.map((d) => ({
+                value: d.name,
+                type: "circle",
+                color: d.fill
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+              })) },
+              formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: textSecondary, fontSize: 12 }, children: value })
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+};
+export {
+  RadialChart
+};

package/components/Chart/ScatterChart.d.ts

@@ -0,0 +1,36 @@
+import { ChartSummaryItem } from './BarChart';
+export interface ScatterDatasetConfig {
+    /** Display name for this dataset (shown in tooltip and legend) */
+    name: string;
+    /** Array of data points */
+    data: Record<string, unknown>[];
+    /** Fill colour */
+    color?: string;
+}
+export interface ScatterChartProps {
+    /** One or more scatter datasets to plot */
+    datasets: ScatterDatasetConfig[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** Key in data for y-axis values */
+    yKey?: string;
+    /** Display label for x-axis */
+    xLabel?: string;
+    /** Display label for y-axis */
+    yLabel?: string;
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Chart area height in pixels */
+    height?: number;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Scatter chart built on Recharts with design-system tokens.
+ * Plots one or more datasets as point clouds on an X/Y grid.
+ */
+export declare const ScatterChart: ({ datasets, xKey, yKey, xLabel, yLabel, title, subtitle, summaryItems, height, className, }: ScatterChartProps) => import("react").JSX.Element;

package/components/Chart/ScatterChart.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter, Legend } from "recharts";
+import "./Chart.css";
+const PALETTE = [
+  "#118AB2",
+  // teal-07
+  "#06D6A0",
+  // green-07
+  "#EF476F",
+  // red-07
+  "#FFD166",
+  // yellow-07
+  "#9E47EF"
+  // purple-07
+];
+function getCSSVar(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function ScatterTooltip({ active, payload, xLabel, yLabel }) {
+  if (!active || !payload?.length) return null;
+  const xEntry = payload.find((p) => p.dataKey === payload[0]?.dataKey);
+  const yEntry = payload.find((p) => p.name === yLabel) || payload[1];
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: xLabel }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: xEntry?.value?.toLocaleString() })
+    ] }),
+    yEntry && /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: yLabel }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: yEntry.value?.toLocaleString() })
+    ] })
+  ] });
+}
+const ScatterChart = ({
+  datasets,
+  xKey = "x",
+  yKey = "y",
+  xLabel = "X",
+  yLabel = "Y",
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+  const gridColor = getCSSVar("--color-divider", "#232323");
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(ScatterTooltip, { ...props, xLabel, yLabel }),
+    [xLabel, yLabel]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { stroke: gridColor }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          type: "number",
+          dataKey: xKey,
+          name: xLabel,
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: { stroke: gridColor }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          type: "number",
+          dataKey: yKey,
+          name: yLabel,
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(ZAxis, { range: [48, 48] }),
+      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+      datasets.map((ds, i) => /* @__PURE__ */ jsx(
+        Scatter,
+        {
+          name: ds.name,
+          data: ds.data,
+          fill: ds.color || PALETTE[i % PALETTE.length]
+        },
+        ds.name
+      )),
+      datasets.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+    ] }) }) })
+  ] });
+};
+export {
+  ScatterChart
+};

package/components/Chart/StackedBarChart.d.ts

@@ -0,0 +1,34 @@
+import { ChartSummaryItem } from './BarChart';
+export interface BarSeriesConfig {
+    /** Key in data for this series */
+    dataKey: string;
+    /** Display name (shown in tooltip & legend) */
+    label: string;
+    /** Bar fill colour */
+    color?: string;
+}
+export interface StackedBarChartProps {
+    /** Array of data objects */
+    data: Record<string, unknown>[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** One or more bar series to render (stacked) */
+    series: BarSeriesConfig[];
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Chart area height in pixels */
+    height?: number;
+    /** Y-axis tick formatter */
+    yAxisFormatter?: (value: number) => string;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Stacked bar chart built on Recharts with design-system tokens.
+ * Supports multiple series stacked on top of each other.
+ */
+export declare const StackedBarChart: ({ data, xKey, series, title, subtitle, summaryItems, height, yAxisFormatter, className, }: StackedBarChartProps) => import("react").JSX.Element;

package/components/Chart/StackedBarChart.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function getDefaultColors() {
+  if (typeof window === "undefined") {
+    return ["#118AB2", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
+  }
+  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
+  return [
+    get("--color-action-primary-bg", "#118AB2"),
+    get("--color-core-accent-mint", "#06D6A0"),
+    get("--color-core-accent-gold", "#FFD166"),
+    get("--color-core-accent-coral", "#EF476F"),
+    get("--color-core-accent-violet", "#9E47EF"),
+    get("--color-core-accent-amber", "#EF8247")
+  ];
+}
+function StackedTooltip({ active, payload, label }) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-dot", style: { backgroundColor: entry.color } }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: entry.name }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] }, i))
+  ] });
+}
+const StackedBarChart = ({
+  data,
+  xKey = "label",
+  series,
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  yAxisFormatter,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+  const gridColor = getCSSVar("--color-divider", "#232323");
+  const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");
+  const defaultColors = getDefaultColors();
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(StackedTooltip, { ...props }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
+      ] }),
+      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xKey,
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: { stroke: gridColor }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: textSecondary, fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: yAxisFormatter
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: renderTooltip,
+          cursor: { fill: cursorColor, opacity: 0.4 }
+        }
+      ),
+      series.map((s, i) => /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: s.dataKey,
+          name: s.label,
+          fill: s.color || defaultColors[i % defaultColors.length],
+          stackId: "stack",
+          radius: i === series.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0],
+          maxBarSize: 32
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+};
+export {
+  StackedBarChart
+};

package/components/Chart/Treemap.d.ts

@@ -0,0 +1,33 @@
+import { ChartSummaryItem } from './BarChart';
+export interface TreemapDataItem {
+    /** Display name for the node */
+    name: string;
+    /** Numeric size — determines rectangle area */
+    size: number;
+    /** Optional fill colour */
+    color?: string;
+    /** Nested children for hierarchical data */
+    children?: TreemapDataItem[];
+    [key: string]: unknown;
+}
+export interface TreemapProps {
+    /** Hierarchical data — each item needs `name` and `size` (or `children`) */
+    data: TreemapDataItem[];
+    /** Key used for sizing rectangles */
+    dataKey?: string;
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Chart area height in pixels */
+    height?: number;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Treemap chart built on Recharts with design-system tokens.
+ * Displays hierarchical data as nested coloured rectangles sized by value.
+ */
+export declare const Treemap: ({ data, dataKey, title, subtitle, summaryItems, height, className, }: TreemapProps) => import("react").JSX.Element;