@robr0/design-system 0.11.0 → 0.13.0

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/Gauge/Gauge.css

@@ -0,0 +1,93 @@
+/* ============================================
+   GAUGE COMPONENT
+   Radial dial for a single bounded reading.
+   Colour flows through `color` — the value arc
+   and reading draw with currentColor, so a tone
+   is one custom property swap.
+   ============================================ */
+
+/* Base */
+
+.ds-gauge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-action-primary-bg);
+}
+
+.ds-gauge__svg {
+  display: block;
+}
+
+/* Parts */
+
+.ds-gauge__track {
+  fill: none;
+  stroke: var(--color-bg-container-tertiary);
+  stroke-linecap: round;
+}
+
+.ds-gauge__arc {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  transition: stroke-dasharray var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+.ds-gauge__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-xxs);
+  text-align: center;
+  pointer-events: none;
+}
+
+.ds-gauge__value {
+  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-gauge__label {
+  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);
+}
+
+/* Tones */
+
+.ds-gauge--accent {
+  color: var(--color-action-primary-bg);
+}
+
+/* The status hues come from the border tokens, not the text tokens: the
+   border set is stable across themes, while the dark-mode text tints are
+   near-white and would wash three tones into one. */
+
+.ds-gauge--positive {
+  color: var(--color-status-positive-border);
+}
+
+.ds-gauge--warning {
+  color: var(--color-status-warning-border);
+}
+
+.ds-gauge--error {
+  color: var(--color-status-error-border);
+}
+
+.ds-gauge--neutral {
+  color: var(--color-text-secondary);
+}

package/components/Gauge/Gauge.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+/** One colour switch point: at or above `value`, the dial takes `tone`. */
+export interface GaugeThreshold {
+    /** Reading at which this tone takes over. */
+    value: number;
+    /** Tone applied from this reading upward. */
+    tone: 'accent' | 'positive' | 'warning' | 'error' | 'neutral';
+}
+/** Props owned by Gauge itself — everything else falls through to the root div. */
+type GaugeOwnProps = {
+    /** Current reading. Clamped into the `min`–`max` range for drawing. */
+    value: number;
+    /** Lower bound of the dial. */
+    min?: number;
+    /** Upper bound of the dial. */
+    max?: number;
+    /**
+     * Colour role for the value arc and reading. Ignored while a threshold
+     * matches — thresholds exist so the dial recolours itself as the reading
+     * crosses them.
+     */
+    tone?: 'accent' | 'positive' | 'warning' | 'error' | 'neutral';
+    /**
+     * Colour switch points, e.g. warning at 70 and error at 90. The highest
+     * threshold at or below the current reading wins; below them all, the
+     * `tone` prop applies.
+     */
+    thresholds?: GaugeThreshold[];
+    /** Shows the reading in the centre of the dial. */
+    showValue?: boolean;
+    /** Formats the centre reading — for units, precision, or locale. */
+    formatValue?: (value: number) => string;
+    /**
+     * What the reading measures, shown as a caption under it and used as the
+     * accessible name, e.g. "CPU usage".
+     */
+    label?: string;
+    /** Rendered diameter in pixels. The arc geometry scales with it. */
+    size?: number;
+    /** Arc thickness in pixels. */
+    strokeWidth?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface GaugeProps extends GaugeOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof GaugeOwnProps | 'children'> {
+}
+/**
+ * Gauge — a radial dial for a single bounded reading: capacity, usage, a
+ * score against a target. Pure SVG computed from props — no charting library,
+ * no hooks — so it renders from a Server Component and drops straight into a
+ * Panel or Stat row. Thresholds recolour the dial through the status roles as
+ * the reading crosses them, and the arc animates between readings via a CSS
+ * transition. Announced as a `meter` with the label as its accessible name.
+ */
+export declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Gauge/Gauge.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Gauge.css";
+const SWEEP_UNITS = 75;
+const Gauge = React.forwardRef(
+  ({
+    value,
+    min = 0,
+    max = 100,
+    tone = "accent",
+    thresholds,
+    showValue = true,
+    formatValue,
+    label,
+    size = 120,
+    strokeWidth = 10,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-gauge";
+    const range = max - min;
+    const fraction = range > 0 ? Math.min(Math.max((value - min) / range, 0), 1) : 0;
+    const activeThreshold = thresholds?.filter((t) => value >= t.value).sort((a, b) => b.value - a.value)[0];
+    const resolvedTone = activeThreshold?.tone ?? tone;
+    const classes = [baseClass, `${baseClass}--${resolvedTone}`, className].filter(Boolean).join(" ");
+    const radius = (size - strokeWidth) / 2;
+    const center = size / 2;
+    const valueUnits = Math.round(SWEEP_UNITS * fraction * 100) / 100;
+    const displayValue = formatValue ? formatValue(value) : String(Math.round(value));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        style: { width: size, height: size, ...rest.style },
+        role: "meter",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuetext": displayValue,
+        "aria-label": label ?? rest["aria-label"],
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: `${baseClass}__svg`,
+              viewBox: `0 0 ${size} ${size}`,
+              width: size,
+              height: size,
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: `${baseClass}__track`,
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    pathLength: 100,
+                    strokeWidth,
+                    strokeDasharray: `${SWEEP_UNITS} ${100 - SWEEP_UNITS}`,
+                    transform: `rotate(135 ${center} ${center})`
+                  }
+                ),
+                valueUnits > 0 && /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: `${baseClass}__arc`,
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    pathLength: 100,
+                    strokeWidth,
+                    strokeDasharray: `${valueUnits} ${100 - valueUnits}`,
+                    transform: `rotate(135 ${center} ${center})`
+                  }
+                )
+              ]
+            }
+          ),
+          (showValue || label) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__center`, children: [
+            showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: displayValue }),
+            label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Gauge.displayName = "Gauge";
+export {
+  Gauge
+};

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/SplitPane/SplitPane.css

@@ -0,0 +1,106 @@
+/* ============================================
+   SPLIT PANE COMPONENT
+   Two resizable regions with a draggable
+   divider. The split rides a custom property
+   set from JS; everything visual is tokens.
+   ============================================ */
+
+/* Base */
+
+.ds-split-pane {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ds-split-pane--horizontal {
+  flex-direction: row;
+}
+
+.ds-split-pane--vertical {
+  flex-direction: column;
+}
+
+/* While dragging, suppress text selection everywhere in the container so a
+   fast drag doesn't paint selections through the panes. */
+.ds-split-pane--dragging {
+  user-select: none;
+}
+
+/* Panes clip; scrolling belongs to a consumer-owned container inside the
+   pane, which can then be focusable (a bare scrollable region fails the
+   axe scrollable-region-focusable rule, and a pane that is always a tab
+   stop would be worse). */
+
+.ds-split-pane__pane {
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ds-split-pane__pane--first {
+  flex: 0 0 var(--ds-split-pane-split, 50%);
+}
+
+.ds-split-pane__pane--second {
+  flex: 1 1 0;
+}
+
+/* Separator */
+
+.ds-split-pane__separator {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  touch-action: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-split-pane--horizontal .ds-split-pane__separator {
+  width: var(--gap-sm);
+  cursor: col-resize;
+}
+
+.ds-split-pane--vertical .ds-split-pane__separator {
+  height: var(--gap-sm);
+  cursor: row-resize;
+}
+
+.ds-split-pane__separator:hover,
+.ds-split-pane--dragging .ds-split-pane__separator {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-split-pane__separator:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: calc(var(--border-md) * -1);
+  border-radius: var(--radius-xxs);
+}
+
+/* Grip */
+
+.ds-split-pane__grip {
+  display: block;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-border);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-split-pane--horizontal .ds-split-pane__grip {
+  width: var(--gap-xxs);
+  height: var(--gap-xl);
+}
+
+.ds-split-pane--vertical .ds-split-pane__grip {
+  width: var(--gap-xl);
+  height: var(--gap-xxs);
+}
+
+.ds-split-pane__separator:hover .ds-split-pane__grip,
+.ds-split-pane--dragging .ds-split-pane__grip {
+  background-color: var(--color-icon-secondary);
+}

package/components/SplitPane/SplitPane.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by SplitPane itself — everything else falls through to the root div. */
+type SplitPaneOwnProps = {
+    /** The two panes, in order. Children beyond the first two are ignored. */
+    children: React.ReactNode;
+    /** Which way the panes sit: side by side, or stacked. */
+    direction?: 'horizontal' | 'vertical';
+    /** First pane's share as a percentage (controlled). Pair with `onSplitChange`. */
+    split?: number;
+    /** First pane's share as a percentage (uncontrolled initial value). */
+    defaultSplit?: number;
+    /** Smallest share the first pane can be dragged to, as a percentage. */
+    minSplit?: number;
+    /** Largest share the first pane can be dragged to, as a percentage. */
+    maxSplit?: number;
+    /** Fires with the new percentage on every drag step or keyboard resize. */
+    onSplitChange?: (split: number) => void;
+    /** Accessible name for the resize handle. */
+    separatorLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SplitPaneProps extends SplitPaneOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SplitPaneOwnProps> {
+}
+/**
+ * SplitPane — two resizable regions with a draggable divider: the sidebar
+ * and canvas, the list and detail, the editor and preview. The split is a
+ * percentage, so it survives container resizes. The divider is a real
+ * `separator`: focusable, arrow keys nudge it (Shift for big steps, Home/End
+ * to the limits), and pointer drags use capture so a fast drag can't escape
+ * it. Panes clip their content rather than growing the page; a region that
+ * should scroll brings its own focusable scroll container, so keyboard
+ * users can reach it.
+ */
+export declare const SplitPane: React.ForwardRefExoticComponent<SplitPaneProps & React.RefAttributes<HTMLDivElement>>;
+export {};