@robr0/design-system 0.1.0

package/components/Chart/AreaChart.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Area, 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 AreaTooltip({ 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 AreaChart = ({
+  data,
+  xKey = "label",
+  series,
+  stacked = false,
+  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(AreaTooltip, { ...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(AreaChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+      /* @__PURE__ */ jsx("defs", { children: series.map((s) => {
+        const color = s.color || defaultColor;
+        return /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+        ] }, `grad-${s.dataKey}`);
+      }) }),
+      /* @__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
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.label,
+          stroke: s.color || defaultColor,
+          strokeWidth: 2,
+          fill: `url(#area-gradient-${s.dataKey})`,
+          fillOpacity: s.fillOpacity ?? 1,
+          stackId: stacked ? "stack" : void 0
+        },
+        s.dataKey
+      )),
+      series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+    ] }) }) })
+  ] });
+};
+export {
+  AreaChart
+};

package/components/Chart/BarChart.d.ts

@@ -0,0 +1,34 @@
+export interface ChartSummaryItem {
+    /** Label shown above the value */
+    label: string;
+    /** Formatted value to display */
+    value: string | number;
+}
+export interface BarChartProps {
+    /** Array of data objects */
+    data: Record<string, unknown>[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** Key in data for y-axis values */
+    yKey?: string;
+    /** Display name for the data series (shown in tooltip) */
+    dataLabel?: string;
+    /** Chart title */
+    title?: string;
+    /** Description text below the title */
+    subtitle?: string;
+    /** Summary stats displayed in the header */
+    summaryItems?: ChartSummaryItem[];
+    /** Bar fill colour — CSS value or token reference */
+    barColor?: string;
+    /** Chart area height in pixels */
+    height?: number;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Bar chart built on Recharts with design-system tokens.
+ * Part of the Chart component family — shares wrapper, header,
+ * tooltip, and summary-stat styles with future chart types.
+ */
+export declare const BarChart: ({ data, xKey, yKey, dataLabel, title, subtitle, summaryItems, barColor, height, className, }: BarChartProps) => import("react").JSX.Element;

package/components/Chart/BarChart.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, BarChart as BarChart$1, 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 ChartTooltip({
+  active,
+  payload,
+  label,
+  barColor,
+  dataLabel
+}) {
+  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: barColor } }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: dataLabel }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+    ] }, i))
+  ] });
+}
+const BarChart = ({
+  data,
+  xKey = "label",
+  yKey = "value",
+  dataLabel = "Value",
+  title,
+  subtitle,
+  summaryItems,
+  barColor,
+  height = 350,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#118AB2");
+  const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+  const gridColor = getCSSVar("--color-divider", "#232323");
+  const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(ChartTooltip, { ...props, barColor: resolvedBarColor, dataLabel }),
+    [resolvedBarColor, dataLabel]
+  );
+  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$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          vertical: false,
+          stroke: gridColor,
+          strokeDasharray: ""
+        }
+      ),
+      /* @__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
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: renderTooltip,
+          cursor: { fill: cursorColor, opacity: 0.4 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: yKey,
+          fill: resolvedBarColor,
+          radius: [3, 3, 0, 0],
+          maxBarSize: 32
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  BarChart
+};

package/components/Chart/Chart.css

@@ -0,0 +1,176 @@
+/* ============================================
+   CHART COMPONENT — shared styles
+   Wrapper, header, tooltip, and summary stats
+   used across all chart types (bar, line, pie…).
+   ============================================ */
+
+/* ============================================
+   WRAPPER
+   ============================================ */
+
+.ds-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg); /* 20px */
+  width: 100%;
+  padding: var(--padding-lg); /* 24px */
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-lg); /* 16px */
+  background-color: var(--color-bg-container-primary);
+}
+
+/* ============================================
+   HEADER — title / subtitle + summary stats
+   ============================================ */
+
+.ds-chart__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-lg);
+}
+
+.ds-chart__header-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 4px */
+}
+
+.ds-chart__title {
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-chart__subtitle {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   SUMMARY STATS — top-right key values
+   ============================================ */
+
+.ds-chart__summary {
+  display: flex;
+  gap: var(--gap-lg);
+  flex-shrink: 0;
+}
+
+.ds-chart__summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--gap-xxs);
+  padding: var(--padding-xs) var(--padding-md);
+  border-left: var(--border-xs) solid var(--color-bg-container-border);
+}
+
+.ds-chart__summary-label {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+}
+
+.ds-chart__summary-value {
+  font-family: var(--font-heading-1-family);
+  font-size: var(--font-heading-1-size);
+  font-weight: var(--font-heading-1-weight);
+  line-height: var(--font-heading-1-line-height);
+  letter-spacing: var(--font-heading-1-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   BODY — the chart area
+   ============================================ */
+
+.ds-chart__body {
+  width: 100%;
+}
+
+/* ============================================
+   CUSTOM TOOLTIP
+   ============================================ */
+
+.ds-chart__tooltip {
+  padding: var(--padding-sm) var(--padding-md);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-sm); /* 8px */
+  box-shadow: var(--shadow-floating);
+}
+
+.ds-chart__tooltip-label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  color: var(--color-text-primary);
+  margin-bottom: var(--gap-xxs);
+}
+
+.ds-chart__tooltip-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.ds-chart__tooltip-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.ds-chart__tooltip-name {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+}
+
+.ds-chart__tooltip-value {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  color: var(--color-text-primary);
+  margin-left: auto;
+}
+
+/* ============================================
+   RESPONSIVE — stack header on small screens
+   ============================================ */
+
+@media (max-width: 599px) {
+  .ds-chart {
+    padding: var(--padding-md);
+  }
+
+  .ds-chart__header {
+    flex-direction: column;
+  }
+
+  .ds-chart__summary {
+    width: 100%;
+  }
+
+  .ds-chart__summary-item {
+    align-items: flex-start;
+    flex: 1;
+    border-left: none;
+    border-top: var(--border-xs) solid var(--color-bg-container-border);
+    padding: var(--padding-xs) 0;
+  }
+}

package/components/Chart/LineChart.d.ts

@@ -0,0 +1,34 @@
+import { ChartSummaryItem } from './BarChart';
+export interface LineSeriesConfig {
+    /** Key in data for this series */
+    dataKey: string;
+    /** Display name (shown in tooltip) */
+    label: string;
+    /** Line colour — CSS value */
+    color?: string;
+    /** Dashed line */
+    strokeDasharray?: string;
+}
+export interface LineChartProps {
+    /** Array of data objects */
+    data: Record<string, unknown>[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** One or more line series to render */
+    series: LineSeriesConfig[];
+    /** 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;
+}
+/**
+ * Line chart built on Recharts with design-system tokens.
+ * Supports multiple series with individual colours.
+ */
+export declare const LineChart: ({ data, xKey, series, title, subtitle, summaryItems, height, className, }: LineChartProps) => import("react").JSX.Element;

package/components/Chart/LineChart.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Line } from "recharts";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function LineChartTooltip({ 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 LineChart = ({
+  data,
+  xKey = "label",
+  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(LineChartTooltip, { ...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(LineChart$1, { 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
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.label,
+          stroke: s.color || defaultColor,
+          strokeWidth: 2,
+          strokeDasharray: s.strokeDasharray,
+          dot: false,
+          activeDot: { r: 4, strokeWidth: 0 }
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+};
+export {
+  LineChart
+};

package/components/Chart/PieChart.d.ts

@@ -0,0 +1,34 @@
+import { ChartSummaryItem } from './BarChart';
+export interface PieSlice {
+    /** Display name */
+    name: string;
+    /** Numeric value */
+    value: number;
+    /** Slice fill colour */
+    color?: string;
+}
+export interface PieChartProps {
+    /** Array of slices */
+    data: PieSlice[];
+    /** 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 for donut style (0 = solid pie) */
+    innerRadius?: number;
+    /** Outer radius */
+    outerRadius?: number;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Pie / donut chart built on Recharts with design-system tokens.
+ * Set innerRadius > 0 for a donut variant.
+ */
+export declare const PieChart: ({ data, title, subtitle, summaryItems, height, innerRadius, outerRadius, showLegend, className, }: PieChartProps) => import("react").JSX.Element;

package/components/Chart/PieChart.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, 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 PieChartTooltip({ 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.name }),
+    /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: entry.value?.toLocaleString() })
+  ] }) });
+}
+const PieChart = ({
+  data,
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  innerRadius = 0,
+  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 renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(PieChartTooltip, { ...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(PieChart$1, { children: [
+      /* @__PURE__ */ jsx(
+        Pie,
+        {
+          data,
+          dataKey: "value",
+          nameKey: "name",
+          cx: "50%",
+          cy: "50%",
+          innerRadius,
+          outerRadius,
+          strokeWidth: 2,
+          stroke: "var(--color-bg-container-primary)",
+          children: data.map((slice, i) => /* @__PURE__ */ jsx(
+            Cell,
+            {
+              fill: slice.color || defaultColors[i % defaultColors.length]
+            },
+            slice.name
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+      showLegend && /* @__PURE__ */ jsx(
+        Legend,
+        {
+          verticalAlign: "bottom",
+          iconType: "circle",
+          iconSize: 8,
+          formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: textSecondary, fontSize: 12 }, children: value })
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  PieChart
+};