@robr0/design-system 0.1.0 → 0.3.0

package/components/Field/FieldContext.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+/**
+ * Everything a labelled form control needs to be announced correctly.
+ * Derived once by `Field`; read by a control via `useField()`.
+ *
+ * Lives in its own module so `Field.tsx` exports only a component — the
+ * react-refresh lint rule that keeps Fast Refresh working.
+ */
+export interface FieldContextValue {
+    /** id for the control itself — the label's `htmlFor` points at it */
+    controlId: string;
+    /**
+     * id of the rendered `<label>`, or undefined when there is no label.
+     *
+     * `htmlFor` only associates with *labelable* elements (input, select,
+     * textarea, button…). A composite widget built from a `div` — a
+     * `role="combobox"` trigger, for instance — is not labelable, so it must
+     * point `aria-labelledby` at this id instead.
+     */
+    labelId: string | undefined;
+    /** id of the helper/error text, or undefined when there is none */
+    describedBy: string | undefined;
+    /** whether the control should report itself invalid */
+    invalid: boolean;
+    /** whether the control is required */
+    required: boolean;
+    /** whether the control is disabled */
+    disabled: boolean;
+}
+export declare const FieldContext: React.Context<FieldContextValue | null>;
+/**
+ * Read the wiring `Field` derived.
+ *
+ * Returns `null` outside a `Field`, so a control that uses it still renders
+ * standalone — always optional-chain the result.
+ *
+ * ```tsx
+ * const field = useField();
+ * <input id={field?.controlId} aria-describedby={field?.describedBy} />
+ * ```
+ */
+export declare const useField: () => FieldContextValue | null;

package/components/Field/FieldContext.js

@@ -0,0 +1,7 @@
+import React from "react";
+const FieldContext = React.createContext(null);
+const useField = () => React.useContext(FieldContext);
+export {
+  FieldContext,
+  useField
+};

package/components/FileInput/FileInput.css

@@ -14,19 +14,6 @@
    LABEL
    ============================================ */
 
-.ds-file-input__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-file-input__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    DROPZONE
    ============================================ */
@@ -237,16 +224,6 @@
    HELPER TEXT
    ============================================ */
 
-.ds-file-input__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;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -255,18 +232,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-file-input--error .ds-file-input__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-file-input--disabled .ds-file-input__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-file-input--disabled .ds-file-input__dropzone {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -287,11 +256,6 @@
   padding: var(--padding-lg); /* 20px */
 }
 
-.ds-file-input--compact .ds-file-input__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}
-
 .ds-file-input--compact .ds-file-input__dropzone-icon {
   --icon-size: var(--icon-size-sm);
 }

package/components/FileInput/FileInput.d.ts

@@ -11,23 +11,16 @@ export interface FileInputFile {
     /** Per-file error message — replaces the size line */
     error?: string;
 }
-export interface FileInputProps {
+/** Props owned by FileInput itself — everything else falls through to the native <input type="file">. */
+type FileInputOwnProps = {
     /** Field label above the dropzone */
     label?: string;
     /** Instructional copy inside the dropzone */
     placeholder?: string;
-    /** Comma-separated accept list, e.g. 'image/*,.pdf' */
-    accept?: string;
-    /** Allow selecting more than one file */
-    multiple?: boolean;
     /** Files to list under the dropzone */
     files?: FileInputFile[];
-    /** 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 field */
@@ -36,19 +29,22 @@ export interface FileInputProps {
     onFilesSelected?: (files: File[]) => void;
     /** Called with the id of a file whose remove button was pressed */
     onFileRemove?: (id: string) => void;
-    /** Additional CSS classes */
+    /** 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 FileInputProps extends FileInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof FileInputOwnProps | 'type'> {
 }
 /**
  * FileInput component — a click-or-drop zone paired with a list of the
  * chosen files. The list is fully controlled: pass `files` and handle
  * `onFilesSelected` / `onFileRemove` so upload progress and per-file
  * errors stay owned by the host app.
+ *
+ * Forwards a ref to the underlying `<input type="file">` — useful for
+ * programmatically opening the picker or clearing the selection — and spreads
+ * unrecognised props onto it.
  */
-export declare const FileInput: ({ label, placeholder, accept, multiple, files, size, disabled, required, error, helperText, onFilesSelected, onFileRemove, className, ariaLabel, name, id, }: FileInputProps) => React.JSX.Element;
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/FileInput/FileInput.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId } from "react";
+import React, { useState, useRef, useId } from "react";
+import { Field } from "../Field/Field.js";
 import "./FileInput.css";
 import "../../fonts/material-symbols.css";
 const formatBytes = (bytes) => {
@@ -9,101 +10,126 @@ 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",
+      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();
+      }
+    };
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      isDragging ? `${baseClass}--dragging` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      Field,
       {
-        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,
+        className: classes,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
         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__ */ 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-invalid": error || 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,
+              ...rest,
+              ref: setInputRef,
               id: inputId,
               name,
               type: "file",
@@ -113,65 +139,66 @@ const FileInput = ({
               disabled,
               required,
               tabIndex: -1,
+              "aria-label": label ? void 0 : ariaLabel || rest["aria-label"] || placeholder,
               onChange: handleChange
             }
-          )
-        ]
-      }
-    ),
-    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(
+          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}__progress-fill`,
-                    style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
+                    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" })
                   }
                 )
-              }
-            )
-          ] }),
-          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
+          )) })
         ]
-      },
-      file.id
-    )) }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
-};
+      }
+    );
+  }
+);
+FileInput.displayName = "FileInput";
 export {
   FileInput
 };

package/components/Input/Input.css

@@ -10,23 +10,6 @@
   width: 100%;
 }
 
-/* ============================================
-   LABEL
-   ============================================ */
-
-.ds-input__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-input__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    FIELD WRAPPER
    ============================================ */
@@ -103,20 +86,6 @@
   padding-right: calc(var(--padding-md) + 24px + var(--gap-sm)); /* 16px + 24px icon + 8px gap */
 }
 
-/* ============================================
-   HELPER TEXT
-   ============================================ */
-
-.ds-input__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;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -129,18 +98,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-input--error .ds-input__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-input--disabled .ds-input__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-input--disabled .ds-input__field {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -187,7 +148,3 @@
   padding-right: calc(var(--padding-sm-md) + 20px + var(--gap-sm)); /* 12px + 20px icon + 8px gap */
 }
 
-.ds-input--compact .ds-input__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}

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 {};