@robr0/design-system 0.1.0 → 0.3.0

package/components/SelectionCard/SelectionCard.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./SelectionCard.css";
 const CheckIcon = () => /* @__PURE__ */ jsx(
   "svg",
@@ -22,64 +22,80 @@ const CheckIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
-const SelectionCard = ({
-  mode = "radio",
-  options,
-  value,
-  onChange,
-  name,
-  className = ""
-}) => {
-  const baseClass = "ds-selection-card";
-  const selectedValues = Array.isArray(value) ? value : value !== void 0 ? [value] : [];
-  const isSelected = (optionValue) => selectedValues.includes(optionValue);
-  const handleSelect = (option) => {
-    if (option.disabled || !onChange) return;
-    if (mode === "radio") {
-      onChange(option.value);
-    } else {
-      const newValues = isSelected(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
-      onChange(newValues);
-    }
-  };
-  const handleKeyDown = (e, option) => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      handleSelect(option);
-    }
-  };
-  const groupRole = mode === "radio" ? "radiogroup" : "group";
-  const itemRole = mode === "radio" ? "radio" : mode === "toggle" ? "switch" : "checkbox";
-  const groupClasses = [`${baseClass}-group`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: groupClasses, role: groupRole, "aria-label": name, children: options.map((option) => {
-    const selected = isSelected(option.value);
-    const cardClasses = [
-      baseClass,
-      selected ? `${baseClass}--selected` : "",
-      option.disabled ? `${baseClass}--disabled` : ""
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs(
+const SelectionCard = React.forwardRef(
+  ({ mode = "radio", options, value, onValueChange, onChange, name, className = "", ...rest }, ref) => {
+    const baseClass = "ds-selection-card";
+    const selectedValues = Array.isArray(value) ? value : value !== void 0 ? [value] : [];
+    const isSelected = (optionValue) => selectedValues.includes(optionValue);
+    const handleSelect = (option) => {
+      if (option.disabled) return;
+      const next = mode === "radio" ? option.value : isSelected(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+      onValueChange?.(next);
+      onChange?.(next);
+    };
+    const handleKeyDown = (e, option) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        handleSelect(option);
+      }
+    };
+    const groupRole = mode === "radio" ? "radiogroup" : "group";
+    const itemRole = mode === "radio" ? "radio" : mode === "toggle" ? "switch" : "checkbox";
+    const groupClasses = [`${baseClass}-group`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: cardClasses,
-        role: itemRole,
-        "aria-checked": selected,
-        "aria-disabled": option.disabled,
-        tabIndex: option.disabled ? -1 : 0,
-        onClick: () => handleSelect(option),
-        onKeyDown: (e) => handleKeyDown(e, option),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: option.label }),
-            option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: option.description })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: `${baseClass}__indicator`, children: mode === "radio" ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio-dot` }) }) : mode === "toggle" ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__toggle ${selected ? "" : `${baseClass}__toggle--off`}`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__toggle-thumb`, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-selection-card__toggle-icon", "aria-hidden": "true", children: "check" }) }) }) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__checkbox`, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) })
-        ]
-      },
-      option.value
+        ...rest,
+        ref,
+        className: groupClasses,
+        role: groupRole,
+        "aria-label": name || rest["aria-label"],
+        children: options.map((option) => {
+          const selected = isSelected(option.value);
+          const cardClasses = [
+            baseClass,
+            selected ? `${baseClass}--selected` : "",
+            option.disabled ? `${baseClass}--disabled` : ""
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cardClasses,
+              role: itemRole,
+              "aria-checked": selected,
+              "aria-disabled": option.disabled,
+              tabIndex: option.disabled ? -1 : 0,
+              onClick: () => handleSelect(option),
+              onKeyDown: (e) => handleKeyDown(e, option),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: option.label }),
+                  option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: option.description })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: `${baseClass}__indicator`, children: mode === "radio" ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__radio-dot` }) }) : mode === "toggle" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `${baseClass}__toggle ${selected ? "" : `${baseClass}__toggle--off`}`,
+                    children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__toggle-thumb`, children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "material-symbols-rounded ds-selection-card__toggle-icon",
+                        "aria-hidden": "true",
+                        children: "check"
+                      }
+                    ) })
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__checkbox`, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
     );
-  }) });
-};
+  }
+);
+SelectionCard.displayName = "SelectionCard";
 export {
   SelectionCard
 };

package/components/Skeleton/Skeleton.css

@@ -22,6 +22,8 @@
     var(--color-bg-container-primary) 50%,
     transparent 100%
   );
+  /* ds-allow(motion): the shimmer needs a symmetric in-out curve and no
+     --motion-ease-* token provides one — the duration is tokenized. */
   animation: ds-skeleton-shimmer var(--motion-duration-loop-shimmer) ease-in-out infinite;
 }
 

package/components/Slider/Slider.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-export interface SliderProps {
+/** Props owned by Slider itself — everything else falls through to the <input type="range">. */
+type SliderOwnProps = {
     /** Current value */
     value?: number;
     /** Minimum value */
@@ -8,18 +9,26 @@ export interface SliderProps {
     max?: number;
     /** Step increment */
     step?: number;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Size */
+    /** Component size (not the native character-width `size` attribute) */
     size?: 'default' | 'compact';
-    /** Change handler */
-    onChange?: (value: number) => void;
-    /** Accessible label */
-    ariaLabel?: string;
-    /** Additional CSS classes */
+    /**
+     * Convenience callback receiving the numeric value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: number) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
+    ariaLabel?: string;
+};
+export interface SliderProps extends SliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof SliderOwnProps | 'type'> {
 }
 /**
  * Slider allows selecting a value from within a given range.
+ *
+ * Forwards a ref to the underlying `<input type="range">` and spreads
+ * unrecognised props onto it.
  */
-export declare const Slider: ({ value, min, max, step, disabled, size, onChange, ariaLabel, className, }: SliderProps) => React.JSX.Element;
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Slider/Slider.js

@@ -1,46 +1,56 @@
 import { jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./Slider.css";
-const Slider = ({
-  value = 50,
-  min = 0,
-  max = 100,
-  step = 1,
-  disabled = false,
-  size = "default",
-  onChange,
-  ariaLabel = "Slider",
-  className = ""
-}) => {
-  const baseClass = "ds-slider";
-  const classes = [
-    baseClass,
-    `${baseClass}--${size}`,
-    disabled ? `${baseClass}--disabled` : "",
-    className
-  ].filter(Boolean).join(" ");
-  const percentage = (value - min) / (max - min) * 100;
-  const handleChange = (e) => {
-    onChange?.(Number(e.target.value));
-  };
-  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "range",
-      className: `${baseClass}__input`,
-      value,
-      min,
-      max,
-      step,
-      disabled,
-      onChange: handleChange,
-      "aria-label": ariaLabel,
-      style: {
-        background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-secondary) ${percentage}%)`
+const Slider = React.forwardRef(
+  ({
+    value = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    size = "default",
+    onChange,
+    onValueChange,
+    ariaLabel = "Slider",
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-slider";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const percentage = (value - min) / (max - min) * 100;
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(Number(e.target.value));
+    };
+    return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        ref,
+        type: "range",
+        className: `${baseClass}__input`,
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        onChange: handleChange,
+        "aria-label": ariaLabel || rest["aria-label"],
+        style: {
+          background: `linear-gradient(to right, var(--color-action-primary-bg) ${percentage}%, var(--color-bg-container-secondary) ${percentage}%)`,
+          ...style
+        }
       }
-    }
-  ) });
-};
+    ) });
+  }
+);
+Slider.displayName = "Slider";
 export {
   Slider
 };

package/components/Spinner/Spinner.css

@@ -59,6 +59,17 @@
   stroke: var(--color-text-secondary);
 }
 
+/* Inherit — both circles draw in currentColor so the spinner matches the
+   text/icon colour of whatever control contains it (e.g. a loading Button) */
+.ds-spinner--inherit .ds-spinner__track {
+  stroke: currentColor;
+  opacity: 0.25;
+}
+
+.ds-spinner--inherit .ds-spinner__arc {
+  stroke: currentColor;
+}
+
 /* ============================================
    ANIMATION
    ============================================ */

package/components/Spinner/Spinner.d.ts

@@ -1,8 +1,8 @@
 export interface SpinnerProps {
     /** Size of the spinner */
     size?: 'sm' | 'md' | 'lg';
-    /** Visual variant */
-    variant?: 'primary' | 'neutral';
+    /** Visual variant — `inherit` draws the spinner in `currentColor`, for use inside coloured controls */
+    variant?: 'primary' | 'neutral' | 'inherit';
     /** Accessible label */
     label?: string;
     /** Additional CSS classes */

package/components/Swatch/Swatch.css

@@ -0,0 +1,52 @@
+/* ============================================
+   SWATCH COMPONENT
+   Clickable colour tile for palettes and pickers
+   ============================================ */
+
+/* Base */
+
+.ds-swatch {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: var(--ds-swatch-color);
+  /* A hairline inset keeps very light colours visible on the white floor */
+  box-shadow: inset 0 0 0 var(--border-xs) var(--color-bg-container-border);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: box-shadow var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Sizes */
+
+.ds-swatch--compact {
+  width: 20px;
+  height: 20px;
+}
+
+/* Shapes */
+
+.ds-swatch--square {
+  border-radius: var(--radius-sm);
+}
+
+/* States */
+
+.ds-swatch--selected {
+  box-shadow:
+    inset 0 0 0 var(--border-xs) var(--color-bg-container-border),
+    0 0 0 var(--border-md) var(--color-bg-page-primary),
+    0 0 0 calc(var(--border-md) * 2) var(--color-text-primary);
+}
+
+.ds-swatch:focus-visible {
+  outline: var(--border-md) solid var(--color-input-border-selected);
+  outline-offset: var(--border-md);
+}
+
+.ds-swatch--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/Swatch/Swatch.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+/** Props owned by Swatch itself — everything else falls through to the <button>. */
+type SwatchOwnProps = {
+    /** The colour this swatch shows — any valid CSS colour, typically a hex value */
+    value: string;
+    /**
+     * Accessible name for the swatch. Defaults to the colour value, which is
+     * meaningful but terse — prefer a human name ("Teal 07") when you have one.
+     */
+    label?: string;
+    /** Selected state — renders the selection ring and sets aria-pressed */
+    selected?: boolean;
+    /** Swatch size */
+    size?: 'default' | 'compact';
+    /** Corner treatment — circle matches the site's preset grids; square suits picker triggers */
+    shape?: 'circle' | 'square';
+    /** Whether the swatch is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SwatchProps extends SwatchOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof SwatchOwnProps | 'type'> {
+}
+/**
+ * A clickable colour tile — the building block for preset palettes and
+ * picker triggers. Renders a `<button>` whose background is the `value`
+ * colour; `selected` draws the theme-aware selection ring.
+ *
+ * Purely presentational (no hooks), so it can be rendered from a Server
+ * Component; interactivity arrives through the native `onClick` you pass.
+ * Forwards a ref to the `<button>` and spreads unrecognised props onto it.
+ */
+export declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/Swatch/Swatch.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Swatch.css";
+const Swatch = React.forwardRef(
+  ({
+    value,
+    label,
+    selected = false,
+    size = "default",
+    shape = "circle",
+    disabled = false,
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-swatch";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      shape === "square" ? `${baseClass}--square` : "",
+      selected ? `${baseClass}--selected` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const swatchStyle = { ...style, "--ds-swatch-color": value };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        style: swatchStyle,
+        disabled,
+        "aria-pressed": selected,
+        "aria-label": rest["aria-label"] ?? label ?? value
+      }
+    );
+  }
+);
+Swatch.displayName = "Swatch";
+export {
+  Swatch
+};

package/components/Table/Table.css

@@ -184,3 +184,22 @@
   line-height: var(--font-paragraph-sm-line-height);
   letter-spacing: var(--font-paragraph-sm-letter-spacing);
 }
+
+/* ============================================
+   SCREEN-READER-ONLY
+   Fallback text for header cells with no visible
+   label (checkbox / actions columns) — an empty
+   <th> is unannounced.
+   ============================================ */
+
+.ds-table__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/Table/Table.d.ts

@@ -15,7 +15,8 @@ export interface TableRow {
     /** Cell values keyed by column key — each accepts any React node */
     cells: Record<string, React.ReactNode>;
 }
-export interface TableProps {
+/** Props owned by Table itself — everything else falls through to the <table>. */
+type TableOwnProps = {
     /** Column definitions */
     columns: TableColumn[];
     /** Row data */
@@ -36,10 +37,17 @@ export interface TableProps {
     captionHidden?: boolean;
     /** Additional CSS classes */
     className?: string;
+};
+export interface TableProps extends TableOwnProps, Omit<React.ComponentPropsWithoutRef<'table'>, keyof TableOwnProps> {
 }
 /**
  * Table component from Figma design system.
  * Data table with flexible cell content — supports text, icons,
  * inputs, buttons, and any other React nodes inside cells.
+ *
+ * Forwards a ref to the `<table>` element and spreads unrecognised props onto
+ * it. When `bordered`, the table is wrapped in a container div — the ref and
+ * spread props still target the inner `<table>`.
  */
-export declare const Table: ({ columns, rows, size, striped, bordered, caption, captionHidden, className, }: TableProps) => React.JSX.Element;
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export {};

package/components/Table/Table.js

@@ -1,65 +1,65 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./Table.css";
-const Table = ({
-  columns,
-  rows,
-  size = "default",
-  striped = false,
-  bordered = false,
-  caption,
-  captionHidden = false,
-  className = ""
-}) => {
-  const baseClass = "ds-table";
-  const sizeClass = `${baseClass}--${size}`;
-  const stripedClass = striped ? `${baseClass}--striped` : "";
-  const borderedClass = bordered ? `${baseClass}--bordered` : "";
-  const classes = [baseClass, sizeClass, stripedClass, borderedClass, className].filter(Boolean).join(" ");
-  const table = /* @__PURE__ */ jsxs("table", { className: classes, children: [
-    caption && /* @__PURE__ */ jsx(
-      "caption",
-      {
-        className: captionHidden ? `${baseClass}__caption--hidden` : `${baseClass}__caption`,
-        children: caption
-      }
-    ),
-    /* @__PURE__ */ jsx("thead", { className: `${baseClass}__head`, children: /* @__PURE__ */ jsx("tr", { className: `${baseClass}__row ${baseClass}__row--header`, children: columns.map((col) => /* @__PURE__ */ jsx(
-      "th",
-      {
-        className: `${baseClass}__header-cell`,
-        scope: "col",
-        style: {
-          width: col.width,
-          textAlign: col.align || "left"
+const Table = React.forwardRef(
+  ({
+    columns,
+    rows,
+    size = "default",
+    striped = false,
+    bordered = false,
+    caption,
+    captionHidden = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-table";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      striped ? `${baseClass}--striped` : "",
+      bordered ? `${baseClass}--bordered` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const table = /* @__PURE__ */ jsxs("table", { ...rest, ref, className: classes, children: [
+      caption && /* @__PURE__ */ jsx(
+        "caption",
+        {
+          className: captionHidden ? `${baseClass}__caption--hidden` : `${baseClass}__caption`,
+          children: caption
+        }
+      ),
+      /* @__PURE__ */ jsx("thead", { className: `${baseClass}__head`, children: /* @__PURE__ */ jsx("tr", { className: `${baseClass}__row ${baseClass}__row--header`, children: columns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: `${baseClass}__header-cell`,
+          scope: "col",
+          style: {
+            width: col.width,
+            textAlign: col.align || "left"
+          },
+          children: col.header || /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: col.key })
         },
-        children: col.header
-      },
-      col.key
-    )) }) }),
-    /* @__PURE__ */ jsx("tbody", { className: `${baseClass}__body`, children: rows.map((row) => /* @__PURE__ */ jsx("tr", { className: `${baseClass}__row`, children: columns.map((col) => /* @__PURE__ */ jsx(
-      "td",
-      {
-        className: `${baseClass}__cell`,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${baseClass}__cell-content`,
-            style: {
-              justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
-            },
-            children: row.cells[col.key]
-          }
-        )
-      },
-      col.key
-    )) }, row.id)) })
-  ] });
-  if (bordered) {
-    return /* @__PURE__ */ jsx("div", { className: `${baseClass}__wrapper`, children: table });
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { className: `${baseClass}__body`, children: rows.map((row) => /* @__PURE__ */ jsx("tr", { className: `${baseClass}__row`, children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: `${baseClass}__cell`, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__cell-content`,
+          style: {
+            justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
+          },
+          children: row.cells[col.key]
+        }
+      ) }, col.key)) }, row.id)) })
+    ] });
+    if (bordered) {
+      return /* @__PURE__ */ jsx("div", { className: `${baseClass}__wrapper`, children: table });
+    }
+    return table;
   }
-  return table;
-};
+);
+Table.displayName = "Table";
 export {
   Table
 };