@robr0/design-system 0.1.0 → 0.2.0

package/components/FileInput/FileInput.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId } from "react";
+import React, { useState, useRef, useId } from "react";
 import "./FileInput.css";
 import "../../fonts/material-symbols.css";
 const formatBytes = (bytes) => {
@@ -9,169 +9,188 @@ const formatBytes = (bytes) => {
   const value = bytes / Math.pow(1024, exponent);
   return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
 };
-const FileInput = ({
-  label,
-  placeholder = "Drag and drop, or click to browse",
-  accept,
-  multiple = false,
-  files = [],
-  size = "default",
-  disabled = false,
-  required = false,
-  error = false,
-  helperText,
-  onFilesSelected,
-  onFileRemove,
-  className = "",
-  ariaLabel,
-  name,
-  id
-}) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const inputRef = useRef(null);
-  const generatedId = useId();
-  const inputId = id || name || generatedId;
-  const baseClass = "ds-file-input";
-  const emitFiles = (fileList) => {
-    if (!fileList || fileList.length === 0) return;
-    onFilesSelected?.(Array.from(fileList));
-  };
-  const handleChange = (e) => {
-    emitFiles(e.target.files);
-    e.target.value = "";
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (disabled) return;
-    emitFiles(e.dataTransfer.files);
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    if (!disabled) setIsDragging(true);
-  };
-  const handleDragLeave = (e) => {
-    if (e.currentTarget.contains(e.relatedTarget)) return;
-    setIsDragging(false);
-  };
-  const openPicker = () => {
-    if (!disabled) inputRef.current?.click();
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
+const FileInput = React.forwardRef(
+  ({
+    label,
+    placeholder = "Drag and drop, or click to browse",
+    accept,
+    multiple = false,
+    files = [],
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onFilesSelected,
+    onFileRemove,
+    onChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const inputId = id || name || generatedId;
+    const baseClass = "ds-file-input";
+    const setInputRef = (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const emitFiles = (fileList) => {
+      if (!fileList || fileList.length === 0) return;
+      onFilesSelected?.(Array.from(fileList));
+    };
+    const handleChange = (e) => {
+      onChange?.(e);
+      emitFiles(e.target.files);
+      e.target.value = "";
+    };
+    const handleDrop = (e) => {
       e.preventDefault();
-      openPicker();
-    }
-  };
-  const classes = [
-    baseClass,
-    size === "compact" ? `${baseClass}--compact` : "",
-    error ? `${baseClass}--error` : "",
-    disabled ? `${baseClass}--disabled` : "",
-    isDragging ? `${baseClass}--dragging` : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
-      label,
-      required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-        " ",
-        "*"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${baseClass}__dropzone`,
-        role: "button",
-        tabIndex: disabled ? -1 : 0,
-        "aria-label": ariaLabel || placeholder,
-        "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-        "aria-disabled": disabled || void 0,
-        onClick: openPicker,
-        onKeyDown: handleKeyDown,
-        onDrop: handleDrop,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-icon material-symbols-rounded`, "aria-hidden": "true", children: "upload_file" }),
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-text`, children: placeholder }),
-          accept && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dropzone-hint`, children: [
-            "Accepts ",
-            accept
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              id: inputId,
-              name,
-              type: "file",
-              className: `${baseClass}__native`,
-              accept,
-              multiple,
-              disabled,
-              required,
-              tabIndex: -1,
-              onChange: handleChange
-            }
-          )
-        ]
+      setIsDragging(false);
+      if (disabled) return;
+      emitFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (!disabled) setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+      if (e.currentTarget.contains(e.relatedTarget)) return;
+      setIsDragging(false);
+    };
+    const openPicker = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        openPicker();
       }
-    ),
-    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: files.map((file) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: [`${baseClass}__file`, file.error ? `${baseClass}__file--error` : ""].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `${baseClass}__file-icon material-symbols-rounded`,
-              "aria-hidden": "true",
-              children: file.error ? "error" : "description"
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__file-details`, children: [
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-name`, children: file.name }),
-            file.error ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-error`, children: file.error }) : file.size !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-size`, children: formatBytes(file.size) }),
-            file.error === void 0 && file.progress !== void 0 && /* @__PURE__ */ jsx(
+    };
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      isDragging ? `${baseClass}--dragging` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+        label,
+        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${baseClass}__dropzone`,
+          role: "button",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": ariaLabel || rest["aria-label"] || placeholder,
+          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+          "aria-disabled": disabled || void 0,
+          onClick: openPicker,
+          onKeyDown: handleKeyDown,
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          children: [
+            /* @__PURE__ */ jsx(
               "span",
               {
-                className: `${baseClass}__progress`,
-                role: "progressbar",
-                "aria-valuenow": file.progress,
-                "aria-valuemin": 0,
-                "aria-valuemax": 100,
-                "aria-label": `Uploading ${file.name}`,
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `${baseClass}__progress-fill`,
-                    style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
-                  }
-                )
+                className: `${baseClass}__dropzone-icon material-symbols-rounded`,
+                "aria-hidden": "true",
+                children: "upload_file"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-text`, children: placeholder }),
+            accept && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dropzone-hint`, children: [
+              "Accepts ",
+              accept
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...rest,
+                ref: setInputRef,
+                id: inputId,
+                name,
+                type: "file",
+                className: `${baseClass}__native`,
+                accept,
+                multiple,
+                disabled,
+                required,
+                tabIndex: -1,
+                onChange: handleChange
               }
             )
-          ] }),
-          onFileRemove && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: `${baseClass}__file-remove`,
-              onClick: () => onFileRemove(file.id),
-              disabled,
-              "aria-label": `Remove ${file.name}`,
-              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
-            }
-          )
-        ]
-      },
-      file.id
-    )) }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
-};
+          ]
+        }
+      ),
+      files.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: files.map((file) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: [`${baseClass}__file`, file.error ? `${baseClass}__file--error` : ""].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__file-icon material-symbols-rounded`,
+                "aria-hidden": "true",
+                children: file.error ? "error" : "description"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__file-details`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-name`, children: file.name }),
+              file.error ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-error`, children: file.error }) : file.size !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-size`, children: formatBytes(file.size) }),
+              file.error === void 0 && file.progress !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${baseClass}__progress`,
+                  role: "progressbar",
+                  "aria-valuenow": file.progress,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-label": `Uploading ${file.name}`,
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__progress-fill`,
+                      style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
+                    }
+                  )
+                }
+              )
+            ] }),
+            onFileRemove && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__file-remove`,
+                onClick: () => onFileRemove(file.id),
+                disabled,
+                "aria-label": `Remove ${file.name}`,
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+              }
+            )
+          ]
+        },
+        file.id
+      )) }),
+      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+    ] });
+  }
+);
+FileInput.displayName = "FileInput";
 export {
   FileInput
 };

package/components/Input/Input.d.ts

@@ -1,19 +1,14 @@
 import { default as React } from 'react';
-export interface InputProps {
+/** Props owned by Input itself — everything else falls through to the <input>. */
+type InputOwnProps = {
     /** Input label text */
     label?: string;
-    /** Placeholder text */
-    placeholder?: string;
     /** Current value */
     value?: string;
-    /** Input type */
+    /** Input type — curated subset; use a dedicated component for checkbox/radio/file */
     type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
-    /** Component size */
+    /** Component size (not the native character-width `size` attribute) */
     size?: 'default' | 'compact';
-    /** Whether the input is disabled */
-    disabled?: boolean;
-    /** Whether the input is required */
-    required?: boolean;
     /** Error state — shows error styling and message */
     error?: boolean;
     /** Helper or error message displayed below the input */
@@ -22,19 +17,25 @@ export interface InputProps {
     iconLeft?: string;
     /** Material Symbol icon name on the right */
     iconRight?: string;
-    /** 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 (react-hook-form, Formik, TanStack Form) work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** Accessible name override */
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML name attribute */
-    name?: string;
-    /** HTML id attribute */
-    id?: string;
+};
+export interface InputProps extends InputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InputOwnProps> {
 }
-export declare const Input: ({ label, placeholder, value, type, size, disabled, required, error, helperText, iconLeft, iconRight, onChange, onFocus, onBlur, className, ariaLabel, name, id, }: InputProps) => React.JSX.Element;
+/**
+ * Text input with optional label, helper text, icons and error state.
+ *
+ * Forwards a ref to the underlying `<input>` and spreads unrecognised props onto
+ * it, so `autoComplete`, `maxLength`, `inputMode`, `data-*` and form-library
+ * registration all work.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/Input/Input.js

@@ -1,71 +1,93 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./Input.css";
 import "../../fonts/material-symbols.css";
-const Input = ({
-  label,
-  placeholder = "",
-  value,
-  type = "text",
-  size = "default",
-  disabled = false,
-  required = false,
-  error = false,
-  helperText,
-  iconLeft,
-  iconRight,
-  onChange,
-  onFocus,
-  onBlur,
-  className = "",
-  ariaLabel,
-  name,
-  id
-}) => {
-  const baseClass = "ds-input";
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const errorClass = error ? `${baseClass}--error` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const hasLeftIcon = iconLeft ? `${baseClass}--has-icon-left` : "";
-  const hasRightIcon = iconRight ? `${baseClass}--has-icon-right` : "";
-  const classes = [baseClass, sizeClass, errorClass, disabledClass, hasLeftIcon, hasRightIcon, className].filter(Boolean).join(" ");
-  const handleChange = (e) => {
-    if (onChange) {
-      onChange(e.target.value);
-    }
-  };
-  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
-  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__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
-      iconLeft && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon ${baseClass}__icon--left material-symbols-rounded`, "aria-hidden": "true", children: iconLeft }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          className: `${baseClass}__field`,
-          type,
-          id: inputId,
-          name,
-          value,
-          placeholder,
-          disabled,
-          required,
-          "aria-label": ariaLabel || label,
-          "aria-invalid": error,
-          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-          onChange: handleChange,
-          onFocus,
-          onBlur
-        }
-      ),
-      iconRight && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon ${baseClass}__icon--right material-symbols-rounded`, "aria-hidden": "true", children: iconRight })
-    ] }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
-};
+const Input = React.forwardRef(
+  ({
+    label,
+    placeholder = "",
+    value,
+    type = "text",
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    iconLeft,
+    iconRight,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-input";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      iconLeft ? `${baseClass}--has-icon-left` : "",
+      iconRight ? `${baseClass}--has-icon-right` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+        label,
+        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
+        iconLeft && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${baseClass}__icon ${baseClass}__icon--left material-symbols-rounded`,
+            "aria-hidden": "true",
+            children: iconLeft
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            ref,
+            className: `${baseClass}__field`,
+            type,
+            id: inputId,
+            name,
+            value,
+            placeholder,
+            disabled,
+            required,
+            "aria-label": ariaLabel || rest["aria-label"] || label,
+            "aria-invalid": error,
+            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+            onChange: handleChange
+          }
+        ),
+        iconRight && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${baseClass}__icon ${baseClass}__icon--right material-symbols-rounded`,
+            "aria-hidden": "true",
+            children: iconRight
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
 export {
   Input
 };

package/components/RadioButton/RadioButton.d.ts

@@ -1,26 +1,34 @@
 import { default as React } from 'react';
-export interface RadioButtonProps {
+/** Props owned by RadioButton itself — everything else falls through to the wrapper. */
+type RadioButtonOwnProps = {
     /** Label text */
     label?: string;
     /** Whether this radio is selected */
     checked?: boolean;
     /** Whether the radio is disabled */
     disabled?: boolean;
-    /** Radio group name — groups radios together */
-    name?: string;
     /** Value for this radio option */
     value?: string;
-    /** Callback when selected */
-    onChange?: (value: string) => void;
+    /** Called with this radio's value when selected */
+    onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible label override */
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML id attribute */
-    id?: string;
+    /**
+     * @deprecated No-op. This component renders a `<div role="radio">`, not a
+     * native `<input type="radio">`, so it does not group by name or participate
+     * in native form submission — `RadioGroup` handles grouping in React state.
+     * Declared only so the attribute is not forwarded to an element that rejects it.
+     */
+    name?: string;
+};
+export interface RadioButtonProps extends RadioButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioButtonOwnProps> {
 }
-export declare const RadioButton: ({ label, checked, disabled, value, onChange, className, ariaLabel, }: RadioButtonProps) => React.JSX.Element;
-export interface RadioGroupProps {
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
+type RadioGroupOwnProps = {
     /** Group label */
     label?: string;
     /** Currently selected value */
@@ -35,9 +43,14 @@ export interface RadioGroupProps {
     }[];
     /** Layout direction */
     direction?: 'vertical' | 'horizontal';
-    /** Callback when selection changes */
-    onChange?: (value: string) => void;
+    /** Called with the newly selected value */
+    onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string) => void;
+};
+export interface RadioGroupProps extends RadioGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps> {
 }
-export declare const RadioGroup: ({ label, value, name, options, direction, onChange, className, }: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};