@robr0/design-system 0.10.0 → 0.12.0

package/components/Chart/ComboChart.d.ts

@@ -0,0 +1,40 @@
+import { ChartSummaryItem } from './BarChart';
+export interface ComboChartProps {
+    /** Array of data objects */
+    data: Record<string, unknown>[];
+    /** Key in data for x-axis values */
+    xKey?: string;
+    /** Key in data for the bar series */
+    barKey: string;
+    /** Display name for the bar series, shown in the tooltip; defaults to the key */
+    barLabel?: string;
+    /** Key in data for the line series */
+    lineKey: string;
+    /** Display name for the line series, shown in the tooltip; defaults to the key */
+    lineLabel?: string;
+    /** Bar fill colour (CSS value or token reference) */
+    barColor?: string;
+    /** Line stroke colour (CSS value or token reference) */
+    lineColor?: string;
+    /** Plot the line on its own right-hand y-axis, for series in different units */
+    secondaryAxis?: boolean;
+    /** 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;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes on the wrapper */
+    className?: string;
+}
+/**
+ * Combo chart built on Recharts with design-system tokens: one bar series
+ * with an overlaid line series, optionally on a second y-axis, for pairs
+ * like monthly spend (bars) against ROAS (line). Part of the Chart component
+ * family, sharing wrapper, header, tooltip, and summary-stat styles.
+ */
+export declare const ComboChart: ({ data, xKey, barKey, barLabel, lineKey, lineLabel, barColor, lineColor, secondaryAxis, title, subtitle, summaryItems, height, bare, className, }: ComboChartProps) => import("react").JSX.Element;

package/components/Chart/ComboChart.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ResponsiveContainer, ComposedChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Line } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
+import "./Chart.css";
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function ComboTooltip({ 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 || entry.fill }
+        }
+      ),
+      /* @__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 ComboChart = ({
+  data,
+  xKey = "label",
+  barKey,
+  barLabel,
+  lineKey,
+  lineLabel,
+  barColor,
+  lineColor,
+  secondaryAxis = true,
+  title,
+  subtitle,
+  summaryItems,
+  height = 350,
+  bare = false,
+  className = ""
+}) => {
+  const baseClass = "ds-chart";
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const seriesColors = getChartSeriesColors();
+  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const resolvedLineColor = lineColor || seriesColors[1];
+  const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+  const gridColor = getCSSVar("--color-divider", "#232323");
+  const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");
+  const resolvedBarLabel = barLabel || barKey;
+  const resolvedLineLabel = lineLabel || lineKey;
+  const renderTooltip = useCallback(
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    (props) => /* @__PURE__ */ jsx(ComboTooltip, { ...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(
+      ComposedChart,
+      {
+        data,
+        margin: { top: 8, right: secondaryAxis ? -12 : 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,
+            {
+              yAxisId: "bar",
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          secondaryAxis && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              yAxisId: "line",
+              orientation: "right",
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: renderTooltip,
+              cursor: { fill: cursorColor, opacity: 0.4 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              yAxisId: "bar",
+              dataKey: barKey,
+              name: resolvedBarLabel,
+              fill: resolvedBarColor,
+              radius: [3, 3, 0, 0],
+              maxBarSize: 32
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Line,
+            {
+              yAxisId: secondaryAxis ? "line" : "bar",
+              type: "monotone",
+              dataKey: lineKey,
+              name: resolvedLineLabel,
+              stroke: resolvedLineColor,
+              strokeWidth: 2,
+              dot: false,
+              activeDot: { r: 4, strokeWidth: 0 }
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+};
+export {
+  ComboChart
+};

package/components/Chart/LineChart.d.ts

@@ -24,6 +24,8 @@ export interface LineChartProps {
     summaryItems?: ChartSummaryItem[];
     /** Chart area height in pixels */
     height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -31,4 +33,4 @@ export interface LineChartProps {
  * 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;
+export declare const LineChart: ({ data, xKey, series, title, subtitle, summaryItems, height, bare, className, }: LineChartProps) => import("react").JSX.Element;

package/components/Chart/LineChart.js

@@ -1,10 +1,10 @@
 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 { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function LineChartTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
@@ -25,13 +25,14 @@ const LineChart = ({
   subtitle,
   summaryItems,
   height = 350,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(LineChartTooltip, { ...props }),
@@ -68,13 +69,13 @@ const LineChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Line,
         {
           type: "monotone",
           dataKey: s.dataKey,
           name: s.label,
-          stroke: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
           strokeWidth: 2,
           strokeDasharray: s.strokeDasharray,
           dot: false,

package/components/Chart/PieChart.d.ts

@@ -24,6 +24,8 @@ export interface PieChartProps {
     outerRadius?: number;
     /** Show legend */
     showLegend?: boolean;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -31,4 +33,4 @@ export interface PieChartProps {
  * 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;
+export declare const PieChart: ({ data, title, subtitle, summaryItems, height, innerRadius, outerRadius, showLegend, bare, className, }: PieChartProps) => import("react").JSX.Element;

package/components/Chart/PieChart.js

@@ -1,24 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#0E6E8F"),
-    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;
+  return `var(${name}, ${fallback})`;
 }
 function PieChartTooltip({ active, payload }) {
   if (!active || !payload?.length) return null;
@@ -44,11 +30,12 @@ const PieChart = ({
   innerRadius = 0,
   outerRadius = 140,
   showLegend = true,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
-  const defaultColors = getDefaultColors();
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const defaultColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/components/Chart/RadarChart.d.ts

@@ -24,6 +24,8 @@ export interface RadarChartProps {
     summaryItems?: ChartSummaryItem[];
     /** Chart area height in pixels */
     height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -31,4 +33,4 @@ export interface RadarChartProps {
  * 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;
+export declare const RadarChart: ({ data, categoryKey, series, title, subtitle, summaryItems, height, bare, className, }: RadarChartProps) => import("react").JSX.Element;

package/components/Chart/RadarChart.js

@@ -1,10 +1,10 @@
 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 { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
-  if (typeof window === "undefined") return fallback;
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return `var(${name}, ${fallback})`;
 }
 function RadarTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
@@ -25,13 +25,14 @@ const RadarChart = ({
   subtitle,
   summaryItems,
   height = 350,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),
@@ -66,13 +67,13 @@ const RadarChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Radar,
         {
           name: s.label,
           dataKey: s.dataKey,
-          stroke: s.color || defaultColor,
-          fill: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
+          fill: s.color || seriesColors[i % seriesColors.length],
           fillOpacity: s.fillOpacity ?? 0.3
         },
         s.dataKey

package/components/Chart/RadialChart.d.ts

@@ -26,6 +26,12 @@ export interface RadialChartProps {
     outerRadius?: number;
     /** Show legend */
     showLegend?: boolean;
+    /** Headline printed in the donut hole, e.g. "46%"; pairs best with showLegend false, since the legend shifts the rings above centre */
+    centerLabel?: string;
+    /** Small caption under the centre headline */
+    centerSublabel?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -34,4 +40,4 @@ export interface RadialChartProps {
  * 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;
+export declare const RadialChart: ({ data, maxValue, title, subtitle, summaryItems, height, innerRadius, outerRadius, showLegend, centerLabel, centerSublabel, bare, className, }: RadialChartProps) => import("react").JSX.Element;

package/components/Chart/RadialChart.js

@@ -1,24 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#0E6E8F"),
-    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;
+  return `var(${name}, ${fallback})`;
 }
 function RadialTooltip({ active, payload }) {
   if (!active || !payload?.length) return null;
@@ -45,11 +31,14 @@ const RadialChart = ({
   innerRadius = 40,
   outerRadius = 140,
   showLegend = true,
+  centerLabel,
+  centerSublabel,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
-  const defaultColors = getDefaultColors();
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const defaultColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const bgColor = getCSSVar("--color-bg-container-primary", "#0E0E0E");
   const chartData = data.map((item, i) => ({
@@ -72,46 +61,52 @@ const RadialChart = ({
         /* @__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 })
-            }
-          )
-        ]
-      }
-    ) }) })
+    /* @__PURE__ */ jsxs("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 })
+              }
+            )
+          ]
+        }
+      ) }),
+      centerLabel && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__radial-center`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__radial-center-value`, children: centerLabel }),
+        centerSublabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__radial-center-sub`, children: centerSublabel })
+      ] })
+    ] })
   ] });
 };
 export {

package/components/Chart/ScatterChart.d.ts

@@ -26,6 +26,8 @@ export interface ScatterChartProps {
     summaryItems?: ChartSummaryItem[];
     /** Chart area height in pixels */
     height?: number;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -33,4 +35,4 @@ export interface ScatterChartProps {
  * 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;
+export declare const ScatterChart: ({ datasets, xKey, yKey, xLabel, yLabel, title, subtitle, summaryItems, height, bare, className, }: ScatterChartProps) => import("react").JSX.Element;

package/components/Chart/ScatterChart.js

@@ -1,22 +1,10 @@
 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 { getChartSeriesColors } from "./palette.js";
 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;
+  return `var(${name}, ${fallback})`;
 }
 function ScatterTooltip({ active, payload, xLabel, yLabel }) {
   if (!active || !payload?.length) return null;
@@ -43,10 +31,12 @@ const ScatterChart = ({
   subtitle,
   summaryItems,
   height = 350,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
+  const seriesColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const renderTooltip = useCallback(
@@ -96,7 +86,7 @@ const ScatterChart = ({
         {
           name: ds.name,
           data: ds.data,
-          fill: ds.color || PALETTE[i % PALETTE.length]
+          fill: ds.color || seriesColors[i % seriesColors.length]
         },
         ds.name
       )),

package/components/Chart/StackedBarChart.d.ts

@@ -24,6 +24,8 @@ export interface StackedBarChartProps {
     height?: number;
     /** Y-axis tick formatter */
     yAxisFormatter?: (value: number) => string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Additional CSS classes on the wrapper */
     className?: string;
 }
@@ -31,4 +33,4 @@ export interface StackedBarChartProps {
  * 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;
+export declare const StackedBarChart: ({ data, xKey, series, title, subtitle, summaryItems, height, yAxisFormatter, bare, className, }: StackedBarChartProps) => import("react").JSX.Element;

package/components/Chart/StackedBarChart.js

@@ -1,24 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 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 ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#0E6E8F"),
-    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")
-  ];
+  return `var(${name}, ${fallback})`;
 }
 function StackedTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
@@ -40,14 +26,15 @@ const StackedBarChart = ({
   summaryItems,
   height = 350,
   yAxisFormatter,
+  bare = false,
   className = ""
 }) => {
   const baseClass = "ds-chart";
-  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const classes = [baseClass, bare ? `${baseClass}--bare` : "", 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 defaultColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(StackedTooltip, { ...props }),