@robr0/design-system 0.1.0 → 0.3.0

package/components/Textarea/Textarea.css

@@ -14,19 +14,6 @@
    LABEL
    ============================================ */
 
-.ds-textarea__label {
-  font-family: var(--font-paragraph-em-family);
-  font-size: var(--font-paragraph-em-size);
-  font-weight: var(--font-paragraph-em-weight);
-  line-height: var(--font-paragraph-em-line-height);
-  letter-spacing: var(--font-paragraph-em-letter-spacing);
-  color: var(--color-text-primary);
-}
-
-.ds-textarea__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    FIELD
    ============================================ */
@@ -69,24 +56,6 @@
    FOOTER (helper + counter)
    ============================================ */
 
-.ds-textarea__footer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--gap-sm);
-}
-
-.ds-textarea__helper {
-  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);
-  margin: 0;
-  flex: 1;
-}
-
 .ds-textarea__counter {
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
@@ -108,10 +77,6 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-textarea--error .ds-textarea__helper {
-  color: var(--color-status-error-border);
-}
-
 .ds-textarea--error .ds-textarea__counter {
   color: var(--color-status-error-border);
 }
@@ -120,10 +85,6 @@
    DISABLED STATE
    ============================================ */
 
-.ds-textarea--disabled .ds-textarea__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-textarea--disabled .ds-textarea__field {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -146,7 +107,3 @@
   letter-spacing: var(--font-paragraph-sm-letter-spacing);
 }
 
-.ds-textarea--compact .ds-textarea__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}

package/components/Textarea/Textarea.d.ts

@@ -1,19 +1,12 @@
 import { default as React } from 'react';
-export interface TextareaProps {
+/** Props owned by Textarea itself — everything else falls through to the <textarea>. */
+type TextareaOwnProps = {
     /** Textarea label text */
     label?: string;
-    /** Placeholder text */
-    placeholder?: string;
     /** Current value */
     value?: string;
-    /** Number of visible rows */
-    rows?: number;
     /** Component size */
     size?: 'default' | 'compact';
-    /** Whether the textarea is disabled */
-    disabled?: boolean;
-    /** Whether the textarea is required */
-    required?: boolean;
     /** Error state — shows error styling and message */
     error?: boolean;
     /** Helper or error message displayed below */
@@ -22,19 +15,25 @@ export interface TextareaProps {
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     /** Max character count — shows counter when set */
     maxLength?: number;
-    /** Callback when value changes */
-    onChange?: (value: string) => void;
-    /** Callback on focus */
-    onFocus?: () => void;
-    /** Callback on blur */
-    onBlur?: () => void;
-    /** Additional CSS classes */
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <textarea> */
     className?: string;
-    /** Accessible label override */
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML name attribute */
-    name?: string;
-    /** HTML id attribute */
-    id?: string;
+};
+export interface TextareaProps extends TextareaOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof TextareaOwnProps> {
 }
-export declare const Textarea: ({ label, placeholder, value, rows, size, disabled, required, error, helperText, resize, maxLength, onChange, onFocus, onBlur, className, ariaLabel, name, id, }: TextareaProps) => React.JSX.Element;
+/**
+ * Multi-line text input with optional label, helper text, character counter
+ * and error state.
+ *
+ * Forwards a ref to the underlying `<textarea>` and spreads unrecognised props
+ * onto it.
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/Textarea/Textarea.js

@@ -1,74 +1,85 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Field } from "../Field/Field.js";
 import "./Textarea.css";
-const Textarea = ({
-  label,
-  placeholder = "",
-  value = "",
-  rows = 4,
-  size = "default",
-  disabled = false,
-  required = false,
-  error = false,
-  helperText,
-  resize = "vertical",
-  maxLength,
-  onChange,
-  onFocus,
-  onBlur,
-  className = "",
-  ariaLabel,
-  name,
-  id
-}) => {
-  const baseClass = "ds-textarea";
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const errorClass = error ? `${baseClass}--error` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const classes = [baseClass, sizeClass, errorClass, disabledClass, className].filter(Boolean).join(" ");
-  const handleChange = (e) => {
-    if (onChange) {
-      onChange(e.target.value);
-    }
-  };
-  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
-  const charCount = value?.length || 0;
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: " *" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "textarea",
+const Textarea = React.forwardRef(
+  ({
+    label,
+    placeholder = "",
+    value = "",
+    rows = 4,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    resize = "vertical",
+    maxLength,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-textarea";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const charCount = value?.length || 0;
+    return /* @__PURE__ */ jsx(
+      Field,
       {
-        className: `${baseClass}__field`,
-        id: inputId,
-        name,
-        value,
-        placeholder,
-        rows,
-        disabled,
+        className: classes,
+        label,
+        helperText,
+        error,
         required,
-        maxLength,
-        "aria-label": ariaLabel || label,
-        "aria-invalid": error,
-        "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        style: { resize }
+        disabled,
+        size,
+        id: inputId,
+        aside: maxLength ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__counter`, "aria-live": "polite", "aria-atomic": "true", children: [
+          charCount,
+          "/",
+          maxLength
+        ] }) : void 0,
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...rest,
+            ref,
+            className: `${baseClass}__field`,
+            id: inputId,
+            name,
+            value,
+            placeholder,
+            rows,
+            disabled,
+            required,
+            maxLength,
+            "aria-label": ariaLabel || rest["aria-label"] || label,
+            "aria-invalid": error,
+            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+            onChange: handleChange,
+            style: { resize, ...style }
+          }
+        )
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
-      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText }),
-      maxLength && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__counter`, "aria-live": "polite", "aria-atomic": "true", children: [
-        charCount,
-        "/",
-        maxLength
-      ] })
-    ] })
-  ] });
-};
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 export {
   Textarea
 };

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export interface ToggleGroupItem {
     /** Unique value */
     value: string;
@@ -6,25 +7,34 @@ export interface ToggleGroupItem {
     /** Use Material Symbol icon instead of text */
     icon?: boolean;
 }
-export interface ToggleGroupProps {
+/** Props owned by ToggleGroup itself — everything else falls through to the wrapper. */
+type ToggleGroupOwnProps = {
     /** Available items */
     items: ToggleGroupItem[];
     /** Currently active value(s) */
     value?: string | string[];
     /** Allow multiple selection */
     multiple?: boolean;
-    /** Size */
+    /** Component size */
     size?: 'default' | 'compact';
-    /** Disabled state */
+    /** Whether the whole group is disabled */
     disabled?: boolean;
-    /** Change handler */
-    onChange?: (value: string | string[]) => void;
-    /** Accessible label for the group */
-    ariaLabel?: string;
+    /** Called with the next selection — a string when single, an array when `multiple` */
+    onValueChange?: (value: string | string[]) => void;
     /** Additional CSS classes */
     className?: string;
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string | string[]) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
+    ariaLabel?: string;
+};
+export interface ToggleGroupProps extends ToggleGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToggleGroupOwnProps> {
 }
 /**
  * ToggleGroup is a set of two-state buttons that can be toggled on or off.
+ *
+ * Forwards a ref to the wrapping group element and spreads unrecognised props
+ * onto it.
  */
-export declare const ToggleGroup: ({ items, value, multiple, size, disabled, onChange, ariaLabel, className, }: ToggleGroupProps) => import("react").JSX.Element;
+export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ToggleGroup/ToggleGroup.js

@@ -1,53 +1,70 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import "./ToggleGroup.css";
-const ToggleGroup = ({
-  items,
-  value = [],
-  multiple = false,
-  size = "default",
-  disabled = false,
-  onChange,
-  ariaLabel,
-  className = ""
-}) => {
-  const baseClass = "ds-toggle-group";
-  const classes = [
-    baseClass,
-    `${baseClass}--${size}`,
-    disabled ? `${baseClass}--disabled` : "",
-    className
-  ].filter(Boolean).join(" ");
-  const activeValues = Array.isArray(value) ? value : [value];
-  const handleClick = (itemValue) => {
-    if (disabled) return;
-    if (multiple) {
-      const next = activeValues.includes(itemValue) ? activeValues.filter((v) => v !== itemValue) : [...activeValues, itemValue];
-      onChange?.(next);
-    } else {
-      onChange?.(itemValue);
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children: items.map((item) => {
-    const isActive = activeValues.includes(item.value);
-    const btnClass = [
-      `${baseClass}__item`,
-      isActive ? `${baseClass}__item--active` : ""
+const ToggleGroup = React.forwardRef(
+  ({
+    items,
+    value = [],
+    multiple = false,
+    size = "default",
+    disabled = false,
+    onValueChange,
+    onChange,
+    ariaLabel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-toggle-group";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled ? `${baseClass}--disabled` : "",
+      className
     ].filter(Boolean).join(" ");
+    const activeValues = Array.isArray(value) ? value : [value];
+    const emit = (next) => {
+      onValueChange?.(next);
+      onChange?.(next);
+    };
+    const handleClick = (itemValue) => {
+      if (disabled) return;
+      if (multiple) {
+        const next = activeValues.includes(itemValue) ? activeValues.filter((v) => v !== itemValue) : [...activeValues, itemValue];
+        emit(next);
+      } else {
+        emit(itemValue);
+      }
+    };
     return /* @__PURE__ */ jsx(
-      "button",
+      "div",
       {
-        className: btnClass,
-        onClick: () => handleClick(item.value),
-        "aria-pressed": isActive,
-        "aria-label": item.icon ? item.label : void 0,
-        disabled,
-        type: "button",
-        children: item.icon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: item.label }) : item.label
-      },
-      item.value
+        ...rest,
+        ref,
+        className: classes,
+        role: "group",
+        "aria-label": ariaLabel || rest["aria-label"],
+        children: items.map((item) => {
+          const isActive = activeValues.includes(item.value);
+          const btnClass = [`${baseClass}__item`, isActive ? `${baseClass}__item--active` : ""].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: btnClass,
+              onClick: () => handleClick(item.value),
+              "aria-pressed": isActive,
+              "aria-label": item.icon ? item.label : void 0,
+              disabled,
+              type: "button",
+              children: item.icon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: item.label }) : item.label
+            },
+            item.value
+          );
+        })
+      }
     );
-  }) });
-};
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
 export {
   ToggleGroup
 };

package/components/ToggleSwitch/ToggleSwitch.css

@@ -59,7 +59,10 @@
      Set via --icon-size (not font-size): .material-symbols-rounded derives
      font-size, width, and height from it together. Overriding font-size
      alone leaves the box at the 24px default, so the glyph hangs off-centre
-     inside the thumb. */
+     inside the thumb.
+
+     ds-allow(icon-size): 14px glyph inside the 20px thumb — the smallest
+     scale step would fill it edge to edge. */
   --icon-size: 14px;
   color: var(--color-action-primary-bg);
 }
@@ -123,7 +126,9 @@
 
 .ds-toggle-switch--compact .ds-toggle-switch__thumb-icon {
   /* Off-scale for the same reason as the default size — the compact thumb
-     is only 16x16. */
+     is only 16x16.
+
+     ds-allow(icon-size): 12px glyph inside the 16px compact thumb. */
   --icon-size: 12px;
 }
 

package/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,23 +1,31 @@
-export interface ToggleSwitchProps {
+import { default as React } from 'react';
+/** Props owned by ToggleSwitch itself — everything else falls through to the <button>. */
+type ToggleSwitchOwnProps = {
     /** Whether the toggle is on (checked) */
     checked?: boolean;
     /** Label text displayed next to the toggle */
     label?: string;
     /** Whether to show the label */
     showLabel?: boolean;
-    /** Whether the toggle is disabled */
-    disabled?: boolean;
     /** Component size */
     size?: 'default' | 'compact';
-    /** Callback when toggled */
-    onChange?: (checked: boolean) => void;
+    /** Called with the next checked state when toggled */
+    onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible label for the button */
+    /** @deprecated Use `onCheckedChange` instead. */
+    onChange?: (checked: boolean) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
+};
+export interface ToggleSwitchProps extends ToggleSwitchOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ToggleSwitchOwnProps | 'type'> {
 }
 /**
- * ToggleSwitch component from Figma design system
- * Used for binary on/off settings like theme switching
+ * ToggleSwitch component from Figma design system.
+ * Used for binary on/off settings like theme switching.
+ *
+ * Renders a `<button role="switch">`, forwards a ref to it, and spreads
+ * unrecognised props onto it.
  */
-export declare const ToggleSwitch: ({ checked, label, showLabel, disabled, size, onChange, className, ariaLabel, }: ToggleSwitchProps) => import("react").JSX.Element;
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/ToggleSwitch/ToggleSwitch.js

@@ -1,50 +1,63 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
 import "./ToggleSwitch.css";
 import "../../fonts/material-symbols.css";
-const ToggleSwitch = ({
-  checked = true,
-  label = "Toggle",
-  showLabel = true,
-  disabled = false,
-  size = "default",
-  onChange,
-  className = "",
-  ariaLabel
-}) => {
-  const baseClass = "ds-toggle-switch";
-  const stateClass = checked ? "" : `${baseClass}--off`;
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const classes = [baseClass, sizeClass, stateClass, disabledClass, className].filter(Boolean).join(" ");
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(!checked);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      className: classes,
-      onClick: handleClick,
-      disabled,
-      role: "switch",
-      "aria-checked": checked,
-      "aria-label": ariaLabel || label,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__thumb`, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `${baseClass}__thumb-icon material-symbols-rounded`,
-            "aria-hidden": "true",
-            children: "check"
-          }
-        ) }) }),
-        showLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-      ]
-    }
-  );
-};
+const ToggleSwitch = React.forwardRef(
+  ({
+    checked = true,
+    label = "Toggle",
+    showLabel = true,
+    disabled = false,
+    size = "default",
+    onCheckedChange,
+    onChange,
+    onClick,
+    className = "",
+    ariaLabel,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-toggle-switch";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      checked ? "" : `${baseClass}--off`,
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleClick = (e) => {
+      onClick?.(e);
+      if (disabled) return;
+      onCheckedChange?.(!checked);
+      onChange?.(!checked);
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        onClick: handleClick,
+        disabled,
+        role: "switch",
+        "aria-checked": checked,
+        "aria-label": ariaLabel || rest["aria-label"] || label,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__thumb`, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__thumb-icon material-symbols-rounded`,
+              "aria-hidden": "true",
+              children: "check"
+            }
+          ) }) }),
+          showLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
+  }
+);
+ToggleSwitch.displayName = "ToggleSwitch";
 export {
   ToggleSwitch
 };