@robr0/design-system 0.11.0 → 0.12.0

package/components/FunnelChart/FunnelChart.css

@@ -0,0 +1,41 @@
+/* ============================================
+   FUNNEL CHART COMPONENT
+   Side-by-side vertical bars stepping down with
+   each stage's share of the first. Geometry and
+   colour arrive per stage as inline custom
+   properties (--funnel-stage-size, a clamped
+   percentage number; --funnel-stage-color, a
+   chart-series token), so the rules here stay
+   token-only.
+   ============================================ */
+
+/* Base */
+
+.ds-funnel-chart {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* Parts */
+
+.ds-funnel-chart__stage {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--funnel-stage-size) * 1%);
+  border-radius: var(--radius-sm);
+  background-color: var(--funnel-stage-color);
+  display: grid;
+  place-items: center;
+}
+
+.ds-funnel-chart__pct {
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-full);
+  padding: var(--padding-xxxs) var(--padding-xs);
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-caption-line-height);
+}

package/components/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** One stage of the funnel, ordered widest first. */
+export interface FunnelStage {
+    /** Stage name, read into the chart's accessible label. */
+    label: string;
+    /** Raw count for the stage — drives the bar's height as a share of the first stage. */
+    value: number;
+    /**
+     * Preformatted value ("96.4K") for the accessible label and any consumer
+     * legend. Falls back to the raw `value`, locale-formatted.
+     */
+    displayValue?: string;
+}
+/** Props owned by FunnelChart itself — everything else falls through to the root div. */
+type FunnelChartOwnProps = {
+    /** Ordered stages, first stage widest. Each later stage's height is its share of the first. */
+    data: FunnelStage[];
+    /** Chart height in pixels. */
+    height?: number;
+    /**
+     * Floor percentage for a stage's height, so steep drop-offs stay readable.
+     * Shares are clamped to the range from this floor up to 100.
+     */
+    minStageShare?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FunnelChartOwnProps | 'children'> {
+}
+/**
+ * FunnelChart — ordered stages as side-by-side vertical bars whose heights
+ * step down with each stage's share of the first, each carrying a centred
+ * percentage pill. Pure JSX and CSS computed from props: no recharts, no
+ * hooks, no browser APIs, so it deliberately omits 'use client' and renders
+ * from a Server Component. Degenerate data stays safe: an empty array
+ * renders an empty root, and a zero or negative first value draws every
+ * stage at the floor height.
+ */
+export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./FunnelChart.css";
+const SERIES_COUNT = 7;
+const FunnelChart = React.forwardRef(
+  ({ data, height = 190, minStageShare = 16, className = "", style, ...rest }, ref) => {
+    const baseClass = "ds-funnel-chart";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const firstValue = data.length > 0 ? data[0].value : 0;
+    const clampShare = (share) => Math.min(Math.max(share, minStageShare), 100);
+    const stages = data.map((stage, i) => ({
+      ...stage,
+      share: clampShare(firstValue > 0 ? stage.value / firstValue * 100 : 0),
+      color: `var(--color-chart-series-${i % SERIES_COUNT + 1})`
+    }));
+    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.label} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        style: { ...style, height },
+        role: "img",
+        "aria-label": ariaLabel,
+        children: stages.map((stage, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${baseClass}__stage`,
+            style: {
+              "--funnel-stage-size": stage.share,
+              "--funnel-stage-color": stage.color
+            },
+            children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pct`, children: [
+              Math.round(firstValue > 0 ? stage.value / firstValue * 100 : 0),
+              "%"
+            ] })
+          },
+          `${stage.label}-${i}`
+        ))
+      }
+    );
+  }
+);
+FunnelChart.displayName = "FunnelChart";
+export {
+  FunnelChart
+};

package/components/LegendTile/LegendTile.css

@@ -0,0 +1,60 @@
+/* ============================================
+   LEGEND TILE COMPONENT
+   The labelled value tile under a chart: an
+   inset surface one step below its panel, a
+   caption label with an optional series dot,
+   and the value beneath. The dot's colour
+   arrives per instance via the
+   --legend-tile-swatch custom property, set
+   inline by the component, so this file stays
+   token-only.
+   ============================================ */
+
+/* Base */
+
+.ds-legend-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+  background-color: var(--color-bg-page-primary);
+  border-radius: var(--radius-md);
+  padding: var(--padding-sm) var(--padding-sm-md);
+}
+
+/* Parts */
+
+.ds-legend-tile__label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  min-width: 0;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Fixed 8px series dot — same literal as the chart tooltip's dot in
+   Chart.css, which is the reference for this element. */
+.ds-legend-tile__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  background-color: var(--legend-tile-swatch, var(--color-text-secondary));
+}
+
+.ds-legend-tile__value {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-primary);
+}

package/components/LegendTile/LegendTile.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+/** Props owned by LegendTile itself — everything else falls through to the root div. */
+type LegendTileOwnProps = {
+    /** The series name shown above the value. Truncates with an ellipsis rather than wrapping. */
+    label: string;
+    /**
+     * The reading for this series. Numbers are formatted with `toLocaleString()`;
+     * pass a string when the value carries its own formatting or a unit.
+     */
+    value: string | number;
+    /**
+     * Any CSS colour for the series dot — consumers typically pass a chart
+     * palette token, e.g. `var(--color-chart-series-1)`. When omitted, no dot
+     * renders.
+     */
+    swatch?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface LegendTileProps extends LegendTileOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof LegendTileOwnProps> {
+}
+/**
+ * LegendTile — the labelled value tile that sits under a chart and ties a
+ * series to its number. An inset tile one surface step below its panel, with
+ * an optional series dot matching the chart's palette. Pure JSX and CSS: no
+ * charting library, no hooks, so it renders from a Server Component and a row
+ * of them costs nothing under a dense dashboard.
+ */
+export declare const LegendTile: React.ForwardRefExoticComponent<LegendTileProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/LegendTile/LegendTile.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./LegendTile.css";
+const LegendTile = React.forwardRef(
+  ({ label, value, swatch, className = "", style, ...rest }, ref) => {
+    const baseClass = "ds-legend-tile";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const mergedStyle = swatch ? { ...style, "--legend-tile-swatch": swatch } : style;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, style: mergedStyle, children: [
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
+        swatch && /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot`, "aria-hidden": "true" }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: typeof value === "number" ? value.toLocaleString() : value })
+    ] });
+  }
+);
+LegendTile.displayName = "LegendTile";
+export {
+  LegendTile
+};

package/components/Panel/Panel.css

@@ -0,0 +1,26 @@
+/* ============================================
+   PANEL COMPONENT
+   The plain dashboard surface
+   ============================================ */
+
+.ds-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  min-width: 0;
+  background-color: var(--color-bg-container-primary);
+  border-radius: var(--radius-xl);
+  padding: var(--padding-lg);
+}
+
+/* ============================================
+   PADDING VARIANTS
+   ============================================ */
+
+.ds-panel--compact {
+  padding: var(--padding-md);
+}
+
+.ds-panel--flush {
+  padding: 0;
+}

package/components/Panel/Panel.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+/** Props owned by Panel itself; everything else falls through to the <div>. */
+type PanelOwnProps = {
+    /** Interior padding: 'default' uses --padding-lg, 'compact' uses --padding-md, 'none' removes it */
+    padding?: 'default' | 'compact' | 'none';
+    /** Additional CSS classes */
+    className?: string;
+    /** Panel content */
+    children?: React.ReactNode;
+};
+export interface PanelProps extends PanelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof PanelOwnProps> {
+}
+/**
+ * Panel component: the plain dashboard surface.
+ * A rounded container on the primary container background with no border and
+ * no shadow: just the surface, ready for whatever a dashboard region holds.
+ * Content stacks vertically with a medium gap.
+ *
+ * Forwards a ref to the `<div>` element and spreads unrecognised props onto it.
+ */
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Panel/Panel.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Panel.css";
+const Panel = React.forwardRef(
+  ({ padding = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-panel";
+    const classes = [
+      baseClass,
+      padding === "compact" ? `${baseClass}--compact` : "",
+      padding === "none" ? `${baseClass}--flush` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children });
+  }
+);
+Panel.displayName = "Panel";
+export {
+  Panel
+};

package/components/Stat/Stat.css

@@ -65,18 +65,51 @@
   line-height: 1;
 }
 
+/* The trend tokens are theme-split for contrast: deep status inks on
+   light surfaces, the mint/coral accents on dark ones. */
 .ds-stat__delta--up {
-  color: var(--color-core-accent-mint);
+  color: var(--color-trend-up);
 }
 
 .ds-stat__delta--down {
-  color: var(--color-core-accent-coral);
+  color: var(--color-trend-down);
 }
 
 .ds-stat__delta--neutral {
   color: var(--color-text-tertiary);
 }
 
+/* ============================================
+   INLINE DELTA — delta to the right of the
+   value, bottom-aligned to its baseline
+   ============================================ */
+
+.ds-stat--delta-inline {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'value delta'
+    'label label';
+  column-gap: var(--gap-sm);
+  row-gap: var(--gap-xxs);
+}
+
+.ds-stat--delta-inline .ds-stat__value {
+  grid-area: value;
+}
+
+.ds-stat--delta-inline .ds-stat__label {
+  grid-area: label;
+}
+
+.ds-stat--delta-inline .ds-stat__delta {
+  grid-area: delta;
+  align-self: end;
+  justify-self: start;
+  /* Optical baseline: compensates the display value's half-leading. */
+  margin-bottom: var(--gap-xs);
+}
+
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/Stat/Stat.d.ts

@@ -7,6 +7,8 @@ export interface StatProps {
     delta?: string;
     /** Direction of the delta — colours it and adds an arrow */
     trend?: 'up' | 'down' | 'neutral';
+    /** Where the delta sits: stacked below the label, or inline to the right of the value, bottom-aligned */
+    deltaPlacement?: 'stacked' | 'inline';
     /** Stat size */
     size?: 'default' | 'large';
     /** Additional CSS classes */
@@ -16,4 +18,4 @@ export interface StatProps {
  * Stat component — a single headline metric with a label and an
  * optional trend delta. Compose several in a row for a metrics band.
  */
-export declare const Stat: ({ value, label, delta, trend, size, className, }: StatProps) => import("react").JSX.Element;
+export declare const Stat: ({ value, label, delta, trend, deltaPlacement, size, className, }: StatProps) => import("react").JSX.Element;

package/components/Stat/Stat.js

@@ -11,11 +11,17 @@ const Stat = ({
   label,
   delta,
   trend = "neutral",
+  deltaPlacement = "stacked",
   size = "default",
   className = ""
 }) => {
   const baseClass = "ds-stat";
-  const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    deltaPlacement === "inline" ? `${baseClass}--delta-inline` : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value }),
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),

package/components/registry.json

@@ -292,6 +292,15 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "ComboChart",
+      "label": "Combo chart",
+      "slug": "combo-chart",
+      "description": "Bar and line series in one chart, with an optional second y-axis for pairs in different units, like spend and ROAS.",
+      "category": "charts",
+      "client": false,
+      "folder": "Chart"
+    },
     {
       "name": "Combobox",
       "label": "Combobox",
@@ -460,6 +469,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "FunnelChart",
+      "label": "Funnel chart",
+      "slug": "funnel-chart",
+      "description": "Ordered funnel stages as stepped bars with conversion percentages, each sized by its share of the first stage.",
+      "category": "charts",
+      "client": false
+    },
     {
       "name": "Globe",
       "label": "Globe",
@@ -500,6 +517,14 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "LegendTile",
+      "label": "Legend tile",
+      "slug": "legend-tile",
+      "description": "The labelled value tile under a chart: a series dot, the series name, and its reading, on an inset fill.",
+      "category": "charts",
+      "client": false
+    },
     {
       "name": "LineChart",
       "label": "Line chart",
@@ -597,6 +622,14 @@
       "category": "navigation",
       "client": true
     },
+    {
+      "name": "Panel",
+      "label": "Panel",
+      "slug": "panel",
+      "description": "The plain dashboard surface: a rounded container with no border or shadow, just padding and a gap.",
+      "category": "layout",
+      "client": false
+    },
     {
       "name": "PieChart",
       "label": "Pie chart",

package/components/registry.json.d.ts

@@ -292,6 +292,15 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "ComboChart",
+      "label": "Combo chart",
+      "slug": "combo-chart",
+      "description": "Bar and line series in one chart, with an optional second y-axis for pairs in different units, like spend and ROAS.",
+      "category": "charts",
+      "client": false,
+      "folder": "Chart"
+    },
     {
       "name": "Combobox",
       "label": "Combobox",
@@ -460,6 +469,14 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "FunnelChart",
+      "label": "Funnel chart",
+      "slug": "funnel-chart",
+      "description": "Ordered funnel stages as stepped bars with conversion percentages, each sized by its share of the first stage.",
+      "category": "charts",
+      "client": false
+    },
     {
       "name": "Globe",
       "label": "Globe",
@@ -500,6 +517,14 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "LegendTile",
+      "label": "Legend tile",
+      "slug": "legend-tile",
+      "description": "The labelled value tile under a chart: a series dot, the series name, and its reading, on an inset fill.",
+      "category": "charts",
+      "client": false
+    },
     {
       "name": "LineChart",
       "label": "Line chart",
@@ -597,6 +622,14 @@ declare const _default: {
       "category": "navigation",
       "client": true
     },
+    {
+      "name": "Panel",
+      "label": "Panel",
+      "slug": "panel",
+      "description": "The plain dashboard surface: a rounded container with no border or shadow, just padding and a gap.",
+      "category": "layout",
+      "client": false
+    },
     {
       "name": "PieChart",
       "label": "Pie chart",