@robr0/design-system 0.8.0 → 0.10.0

package/components/SectionTitle/SectionTitle.css

@@ -11,6 +11,14 @@
   padding-bottom: var(--padding-xl);
 }
 
+/* Divider-less variant: for headings above content that draws its own
+   lines, where a second rule would double up. The generous clearance
+   the divider needed drops to a small breathing gap. */
+.ds-section-title--no-divider {
+  border-bottom: none;
+  padding-bottom: var(--padding-md);
+}
+
 /* ============================================
    HEADING
    ============================================ */

package/components/SectionTitle/SectionTitle.d.ts

@@ -4,7 +4,9 @@ export interface SectionTitleProps {
     title: string;
     /** Optional trailing content (count, badge, metadata) */
     trailing?: React.ReactNode;
+    /** Whether to draw the bottom divider line. Set false above content that draws its own lines (bordered tables, calendars), so the section separates by whitespace alone. */
+    divider?: boolean;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function SectionTitle({ title, trailing, className, }: SectionTitleProps): React.JSX.Element;
+export declare function SectionTitle({ title, trailing, divider, className, }: SectionTitleProps): React.JSX.Element;

package/components/SectionTitle/SectionTitle.js

@@ -4,9 +4,14 @@ import "./SectionTitle.css";
 function SectionTitle({
   title,
   trailing,
+  divider = true,
   className
 }) {
-  const classes = ["ds-section-title", className].filter(Boolean).join(" ");
+  const classes = [
+    "ds-section-title",
+    !divider && "ds-section-title--no-divider",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     /* @__PURE__ */ jsx("h2", { className: "ds-section-title__heading", children: title }),
     trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx("span", { className: "ds-section-title__trailing", children: trailing })

package/components/SegmentedControl/SegmentedControl.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import "./SegmentedControl.css";

package/components/SelectionCard/SelectionCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import "./SelectionCard.css";

package/components/ShaderField/ShaderField.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React, { useRef, useMemo, useState, useEffect } from "react";
 import { DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS, useShaderField } from "./useShaderField.js";

package/components/ShaderField/useShaderField.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect } from "react";
 import { BLOB_COUNT, vertexSource, fragmentSource } from "./field.glsl.js";
 const DEFAULT_SHADER_PARAMS = {

package/components/Slider/Slider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Slider.css";

package/components/Sparkline/Sparkline.css

@@ -0,0 +1,52 @@
+/* ============================================
+   SPARKLINE COMPONENT
+   Inline trend line for stats and table cells.
+   Colour flows through `color` — the line, fill
+   and dot all draw with currentColor, so a tone
+   is one custom property swap.
+   ============================================ */
+
+/* Base */
+
+.ds-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: var(--color-action-primary-bg);
+}
+
+/* Parts */
+
+.ds-sparkline__line {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ds-sparkline__fill {
+  fill: currentColor;
+  opacity: 0.15;
+}
+
+.ds-sparkline__dot {
+  fill: currentColor;
+}
+
+/* Tones */
+
+.ds-sparkline--accent {
+  color: var(--color-action-primary-bg);
+}
+
+.ds-sparkline--positive {
+  color: var(--color-status-positive-text);
+}
+
+.ds-sparkline--negative {
+  color: var(--color-status-error-text);
+}
+
+.ds-sparkline--neutral {
+  color: var(--color-text-secondary);
+}

package/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+/** Props owned by Sparkline itself — everything else falls through to the SVG node. */
+type SparklineOwnProps = {
+    /** The series to plot, in order. Values are normalised into the viewBox. */
+    data: number[];
+    /** Rendering treatment — a bare line, or a line with a soft fill underneath. */
+    variant?: 'line' | 'area';
+    /**
+     * Colour role for the line and end dot. `accent` follows the chart palette's
+     * lead colour; `positive`/`negative` map to the status text tokens; `neutral`
+     * recedes to secondary text.
+     */
+    tone?: 'accent' | 'positive' | 'negative' | 'neutral';
+    /** Marks the final point with a small dot. */
+    showDot?: boolean;
+    /** Line thickness in viewBox units — an SVG geometry attribute, not a token. */
+    strokeWidth?: number;
+    /**
+     * ViewBox width. Also the default rendered width; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `width` attribute, which it sets.
+     */
+    width?: number;
+    /**
+     * ViewBox height. Also the default rendered height; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `height` attribute, which it sets.
+     */
+    height?: number;
+    /**
+     * Accessible description of the trend, e.g. "Revenue, trending up". When
+     * omitted the SVG is decorative and hidden from assistive technology.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SparklineProps extends SparklineOwnProps, Omit<React.ComponentPropsWithoutRef<'svg'>, keyof SparklineOwnProps | 'children'> {
+}
+/**
+ * Sparkline — an inline trend line for stats and table cells, drawn without
+ * axes or chrome. Pure SVG computed from props: no charting library, no hooks,
+ * no dependencies, so it renders from a Server Component and costs nothing in
+ * a dense table. Degenerate data never breaks the path: an all-equal series
+ * renders a horizontal midline, and fewer than two points render just the
+ * end dot, or nothing.
+ */
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/components/Sparkline/Sparkline.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Sparkline.css";
+const round = (n) => Math.round(n * 100) / 100;
+const Sparkline = React.forwardRef(
+  ({
+    data,
+    variant = "line",
+    tone = "accent",
+    showDot = true,
+    strokeWidth = 2,
+    width = 120,
+    height = 32,
+    label,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-sparkline";
+    const classes = [
+      baseClass,
+      `${baseClass}--${variant}`,
+      `${baseClass}--${tone}`,
+      className
+    ].filter(Boolean).join(" ");
+    const dotRadius = strokeWidth * 1.5;
+    const pad = dotRadius + strokeWidth / 2;
+    const innerWidth = Math.max(width - pad * 2, 0);
+    const innerHeight = Math.max(height - pad * 2, 0);
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min;
+    const points = data.map((value, i) => ({
+      x: round(
+        data.length < 2 ? pad + innerWidth : pad + i / (data.length - 1) * innerWidth
+      ),
+      // A flat series (range 0) draws a horizontal midline instead of dividing by zero.
+      y: round(
+        range === 0 ? pad + innerHeight / 2 : pad + (1 - (value - min) / range) * innerHeight
+      )
+    }));
+    const lastPoint = points.length > 0 ? points[points.length - 1] : void 0;
+    const hasLine = points.length >= 2;
+    const linePath = hasLine ? `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}` : void 0;
+    const baseline = round(height - pad);
+    const areaPath = hasLine && variant === "area" ? `${linePath} L ${points[points.length - 1].x} ${baseline} L ${points[0].x} ${baseline} Z` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        viewBox: `0 0 ${width} ${height}`,
+        width,
+        height,
+        xmlns: "http://www.w3.org/2000/svg",
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        children: [
+          areaPath && /* @__PURE__ */ jsx("path", { className: `${baseClass}__fill`, d: areaPath }),
+          linePath && /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: `${baseClass}__line`,
+              d: linePath,
+              strokeWidth
+            }
+          ),
+          showDot && lastPoint && /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: `${baseClass}__dot`,
+              cx: lastPoint.x,
+              cy: lastPoint.y,
+              r: dotRadius
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
+export {
+  Sparkline
+};

package/components/Stepper/Stepper.css

@@ -0,0 +1,207 @@
+/* ============================================
+   STEPPER COMPONENT
+   Step-by-step progress indicator for wizards
+   and multi-stage flows
+   ============================================ */
+
+/* Base */
+
+.ds-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.ds-stepper__step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+/* Shared inner layout — a <button> when the step is clickable,
+   a <span> otherwise */
+.ds-stepper__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  text-align: center;
+  color: inherit;
+  min-width: 0;
+}
+
+button.ds-stepper__content {
+  cursor: pointer;
+}
+
+button.ds-stepper__content:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   INDICATOR
+   32px circle — check for complete, number
+   for active and upcoming
+   ============================================ */
+
+.ds-stepper__indicator {
+  --icon-size: var(--icon-size-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: var(--border-xs) solid transparent;
+  border-radius: var(--radius-full);
+  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);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  transition:
+    background-color var(--motion-duration-base) var(--motion-ease-standard),
+    border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* States */
+
+.ds-stepper__step--complete .ds-stepper__indicator {
+  border-color: var(--color-action-primary-border-secondary);
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-stepper__step--active .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__indicator {
+  border-color: var(--color-bg-container-border);
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-stepper__step--active button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   LABEL + DESCRIPTION
+   ============================================ */
+
+.ds-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  min-width: 0;
+}
+
+.ds-stepper__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);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--active .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__label {
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__description {
+  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-tertiary);
+}
+
+/* ============================================
+   CONNECTOR
+   Drawn between an indicator and the next;
+   turns action-coloured behind completed steps
+   ============================================ */
+
+.ds-stepper__connector {
+  position: absolute;
+  top: 16px; /* vertical centre of the 32px indicator */
+  left: calc(50% + 24px);
+  right: calc(-50% + 24px);
+  height: var(--border-md);
+  transform: translateY(-50%);
+  background-color: var(--color-divider);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--complete .ds-stepper__connector {
+  background-color: var(--color-action-primary-border-secondary);
+}
+
+/* ============================================
+   VERTICAL
+   ============================================ */
+
+.ds-stepper--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ds-stepper--vertical .ds-stepper__step {
+  flex: none;
+  justify-content: flex-start;
+  padding-bottom: var(--gap-lg); /* 20px */
+}
+
+.ds-stepper--vertical .ds-stepper__step:last-child {
+  padding-bottom: 0;
+}
+
+.ds-stepper--vertical .ds-stepper__content {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--gap-sm-md); /* 12px */
+  text-align: left;
+}
+
+/* Centre the first label line on the 32px indicator */
+.ds-stepper--vertical .ds-stepper__text {
+  padding-top: calc((32px - var(--font-paragraph-sm-em-line-height)) / 2);
+}
+
+.ds-stepper--vertical .ds-stepper__connector {
+  top: calc(32px + var(--gap-xs));
+  bottom: var(--gap-xs);
+  left: 16px; /* horizontal centre of the 32px indicator */
+  right: auto;
+  width: var(--border-md);
+  height: auto;
+  transform: translateX(-50%);
+}

package/components/Stepper/Stepper.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** A single step in a Stepper flow. */
+export type StepperStep = {
+    /** Step label shown beside or below the indicator */
+    label: string;
+    /** Optional supporting line rendered under the label */
+    description?: string;
+};
+/** Props owned by Stepper itself — everything else falls through to the `<ol>`. */
+type StepperOwnProps = {
+    /** Ordered list of steps in the flow */
+    steps: StepperStep[];
+    /**
+     * Index of the active step. Steps before it render as complete (check
+     * icon), steps after it as upcoming (step number). Pass `steps.length`
+     * to mark the whole flow complete.
+     */
+    activeStep: number;
+    /**
+     * Callback with the clicked step's index. When provided, completed steps
+     * and the active step become buttons so the reader can revisit an earlier
+     * stage; upcoming steps stay non-interactive either way.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface StepperProps extends StepperOwnProps, Omit<React.ComponentPropsWithoutRef<'ol'>, keyof StepperOwnProps> {
+}
+/**
+ * Stepper component — step-by-step progress indicator for wizards and
+ * multi-stage flows. Renders an ordered list of steps with CSS-drawn
+ * connectors: completed steps show a check, the active step carries
+ * `aria-current="step"`, and upcoming steps show their number.
+ *
+ * Forwards a ref to the `<ol>` and spreads unrecognised props onto it.
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
+export {};

package/components/Stepper/Stepper.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./Stepper.css";
+import "../../fonts/material-symbols.css";
+const Stepper = React.forwardRef(
+  ({
+    steps,
+    activeStep,
+    onStepClick,
+    orientation = "horizontal",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-stepper";
+    const classes = [
+      baseClass,
+      orientation === "vertical" && `${baseClass}--vertical`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("ol", { ...rest, ref, className: classes, children: steps.map((step, index) => {
+      const status = index < activeStep ? "complete" : index === activeStep ? "active" : "upcoming";
+      const interactive = Boolean(onStepClick) && status !== "upcoming";
+      const indicator = /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "check" }) : index + 1 });
+      const text = /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: step.label }),
+        step.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: step.description })
+      ] });
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `${baseClass}__step ${baseClass}__step--${status}`,
+          "aria-current": status === "active" ? "step" : void 0,
+          children: [
+            interactive ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__content`,
+                onClick: () => onStepClick?.(index),
+                children: [
+                  indicator,
+                  text
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: `${baseClass}__content`, children: [
+              indicator,
+              text
+            ] }),
+            index < steps.length - 1 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__connector`, "aria-hidden": "true" })
+          ]
+        },
+        index
+      );
+    }) });
+  }
+);
+Stepper.displayName = "Stepper";
+export {
+  Stepper
+};

package/components/Tabs/Tabs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import "./Tabs.css";