@robr0/design-system 0.1.0 → 0.2.0

package/components/RadioButton/RadioButton.js

@@ -1,76 +1,101 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./RadioButton.css";
-const RadioButton = ({
-  label,
-  checked = false,
-  disabled = false,
-  value = "",
-  onChange,
-  className = "",
-  ariaLabel
-}) => {
-  const baseClass = "ds-radio";
-  const checkedClass = checked ? `${baseClass}--checked` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const classes = [baseClass, checkedClass, disabledClass, className].filter(Boolean).join(" ");
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(value);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      role: "radio",
-      "aria-checked": checked,
-      "aria-disabled": disabled,
-      "aria-label": ariaLabel || label,
-      tabIndex: disabled ? -1 : 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__circle`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__dot` }) }),
-        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-      ]
-    }
-  );
-};
-const RadioGroup = ({
-  label,
-  value,
-  name,
-  options,
-  direction = "vertical",
-  onChange,
-  className = ""
-}) => {
-  const baseClass = "ds-radio-group";
-  const directionClass = `${baseClass}--${direction}`;
-  const classes = [baseClass, directionClass, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, role: "radiogroup", "aria-label": label, children: [
-    label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
-      RadioButton,
+const RadioButton = React.forwardRef(
+  ({
+    label,
+    checked = false,
+    disabled = false,
+    value = "",
+    onValueChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name: _name,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-radio";
+    const classes = [
+      baseClass,
+      checked ? `${baseClass}--checked` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const select = () => {
+      if (disabled) return;
+      onValueChange?.(value);
+      onChange?.(value);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      select();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        select();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        label: option.label,
-        value: option.value,
-        name,
-        checked: value === option.value,
-        disabled: option.disabled,
-        onChange
-      },
-      option.value
-    )) })
-  ] });
-};
+        ...rest,
+        ref,
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "radio",
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel || rest["aria-label"] || label,
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__circle`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__dot` }) }),
+          label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
+  }
+);
+RadioButton.displayName = "RadioButton";
+const RadioGroup = React.forwardRef(
+  ({
+    label,
+    value,
+    name: _name,
+    options,
+    direction = "vertical",
+    onValueChange,
+    onChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-radio-group";
+    const classes = [baseClass, `${baseClass}--${direction}`, className].filter(Boolean).join(" ");
+    const handleSelect = (next) => {
+      onValueChange?.(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "radiogroup", "aria-label": label, children: [
+      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
+        RadioButton,
+        {
+          label: option.label,
+          value: option.value,
+          checked: value === option.value,
+          disabled: option.disabled,
+          onValueChange: handleSelect
+        },
+        option.value
+      )) })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
 export {
   RadioButton,
   RadioGroup

package/components/SelectionCard/SelectionCard.d.ts

@@ -9,18 +9,24 @@ export interface SelectionCardOption {
     /** Whether this option is disabled */
     disabled?: boolean;
 }
-export interface SelectionCardProps {
+/** Props owned by SelectionCard itself — everything else falls through to the group. */
+type SelectionCardOwnProps = {
     /** Selection mode — radio (single), checkbox (multi), or toggle (each card is an on/off switch) */
     mode?: 'radio' | 'checkbox' | 'toggle';
     /** Available options */
     options: SelectionCardOption[];
     /** Currently selected value(s) — string for radio, string[] for checkbox */
     value?: string | string[];
-    /** Callback when selection changes — returns string for radio, string[] for checkbox */
-    onChange?: (value: string | string[]) => void;
+    /** Called with the next selection — a string in radio mode, an array otherwise */
+    onValueChange?: (value: string | string[]) => void;
     /** Group name (used for aria-label on the group) */
     name?: string;
     /** Additional CSS classes */
     className?: string;
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string | string[]) => void;
+};
+export interface SelectionCardProps extends SelectionCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SelectionCardOwnProps> {
 }
-export declare const SelectionCard: ({ mode, options, value, onChange, name, className, }: SelectionCardProps) => React.JSX.Element;
+export declare const SelectionCard: React.ForwardRefExoticComponent<SelectionCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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/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/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
         },
-        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
 };