@robr0/design-system 0.1.0 → 0.2.0

package/components/Dropdown/Dropdown.js

@@ -1,196 +1,236 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import "./Dropdown.css";
 import "../../fonts/material-symbols.css";
-const Dropdown = ({
-  label,
-  placeholder = "Select an option",
-  value,
-  options,
-  groups,
-  size = "default",
-  disabled = false,
-  required = false,
-  error = false,
-  helperText,
-  onChange,
-  className = "",
-  ariaLabel,
-  name,
-  id
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const dropdownRef = useRef(null);
-  const listRef = useRef(null);
-  const baseClass = "ds-dropdown";
-  const isGrouped = groups && groups.length > 0;
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const openClass = isOpen ? `${baseClass}--open` : "";
-  const errorClass = error ? `${baseClass}--error` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const classes = [baseClass, sizeClass, openClass, errorClass, disabledClass, className].filter(Boolean).join(" ");
-  const flatOptions = isGrouped ? groups.flatMap((g) => g.options) : options;
-  const selectedOption = flatOptions.find((opt) => opt.value === value);
-  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
-  const handleToggle = () => {
-    if (!disabled) {
-      setIsOpen((prev) => !prev);
-      setFocusedIndex(-1);
-    }
-  };
-  const handleSelect = (optionValue) => {
-    if (onChange) {
-      onChange(optionValue);
-    }
-    setIsOpen(false);
-  };
-  const handleClickOutside = useCallback((e) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+const Dropdown = React.forwardRef(
+  ({
+    label,
+    placeholder = "Select an option",
+    value,
+    options,
+    groups,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onValueChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const dropdownRef = useRef(null);
+    const listRef = useRef(null);
+    const setRootRef = (node) => {
+      dropdownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const baseClass = "ds-dropdown";
+    const isGrouped = groups && groups.length > 0;
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      isOpen ? `${baseClass}--open` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const flatOptions = isGrouped ? groups.flatMap((g) => g.options) : options;
+    const selectedOption = flatOptions.find((opt) => opt.value === value);
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const handleToggle = () => {
+      if (!disabled) {
+        setIsOpen((prev) => !prev);
+        setFocusedIndex(-1);
+      }
+    };
+    const handleSelect = (optionValue) => {
+      onValueChange?.(optionValue);
+      onChange?.(optionValue);
       setIsOpen(false);
-    }
-  }, []);
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [handleClickOutside]);
-  const handleKeyDown = (e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        if (isOpen && focusedIndex >= 0 && !flatOptions[focusedIndex]?.disabled) {
-          handleSelect(flatOptions[focusedIndex].value);
-        } else {
-          setIsOpen((prev) => !prev);
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-        } else {
-          setFocusedIndex((prev) => {
-            let next = prev + 1;
-            while (next < flatOptions.length && flatOptions[next].disabled) next++;
-            return next < flatOptions.length ? next : prev;
-          });
-        }
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (isOpen) {
-          setFocusedIndex((prev) => {
-            let next = prev - 1;
-            while (next >= 0 && flatOptions[next].disabled) next--;
-            return next >= 0 ? next : prev;
-          });
-        }
-        break;
-      case "Escape":
-        setIsOpen(false);
-        break;
-      case "Tab":
+    };
+    const handleClickOutside = useCallback((e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
-        break;
-    }
-  };
-  useEffect(() => {
-    if (isOpen && focusedIndex >= 0 && listRef.current) {
-      const focusedEl = listRef.current.children[focusedIndex];
-      focusedEl?.scrollIntoView({ block: "nearest" });
-    }
-  }, [focusedIndex, isOpen]);
-  return /* @__PURE__ */ jsxs("div", { className: classes, ref: dropdownRef, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, id: `${inputId}-label`, children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: " *" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${baseClass}__trigger`,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-labelledby": label ? `${inputId}-label` : void 0,
-        "aria-label": ariaLabel || (!label ? placeholder : void 0),
-        "aria-controls": `${inputId}-listbox`,
-        tabIndex: disabled ? -1 : 0,
-        onClick: handleToggle,
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`, children: selectedOption ? selectedOption.label : placeholder }),
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
-        ]
       }
-    ),
-    isOpen && /* @__PURE__ */ jsx(
-      "ul",
-      {
-        className: [
-          `${baseClass}__menu`,
-          isGrouped ? `${baseClass}__menu--grouped` : ""
-        ].filter(Boolean).join(" "),
-        role: "listbox",
-        id: `${inputId}-listbox`,
-        ref: listRef,
-        "aria-labelledby": label ? `${inputId}-label` : void 0,
-        children: isGrouped ? (() => {
-          let flatIndex = 0;
-          return groups.map((group, groupIdx) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: group.label }),
-            /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", "aria-label": group.label, children: group.options.map((option) => {
-              const myIndex = flatIndex++;
-              return /* @__PURE__ */ jsxs(
-                "li",
-                {
-                  className: [
-                    `${baseClass}__option`,
-                    option.value === value ? `${baseClass}__option--selected` : "",
-                    option.disabled ? `${baseClass}__option--disabled` : "",
-                    myIndex === focusedIndex ? `${baseClass}__option--focused` : ""
-                  ].filter(Boolean).join(" "),
-                  role: "option",
-                  "aria-selected": option.value === value,
-                  "aria-disabled": option.disabled,
-                  onClick: () => !option.disabled && handleSelect(option.value),
-                  children: [
-                    option.label,
-                    option.value === value && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
-                  ]
-                },
-                option.value
-              );
-            }) }),
-            groupIdx < groups.length - 1 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" })
-          ] }, `group-${groupIdx}`));
-        })() : options.map((option, index) => /* @__PURE__ */ jsxs(
-          "li",
-          {
-            className: [
-              `${baseClass}__option`,
-              option.value === value ? `${baseClass}__option--selected` : "",
-              option.disabled ? `${baseClass}__option--disabled` : "",
-              index === focusedIndex ? `${baseClass}__option--focused` : ""
-            ].filter(Boolean).join(" "),
-            role: "option",
-            "aria-selected": option.value === value,
-            "aria-disabled": option.disabled,
-            onClick: () => !option.disabled && handleSelect(option.value),
-            children: [
-              option.label,
-              option.value === value && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
-            ]
-          },
-          option.value
-        ))
+    }, []);
+    useEffect(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [handleClickOutside]);
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (isOpen && focusedIndex >= 0 && !flatOptions[focusedIndex]?.disabled) {
+            handleSelect(flatOptions[focusedIndex].value);
+          } else {
+            setIsOpen((prev) => !prev);
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) => {
+              let next = prev + 1;
+              while (next < flatOptions.length && flatOptions[next].disabled) next++;
+              return next < flatOptions.length ? next : prev;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => {
+              let next = prev - 1;
+              while (next >= 0 && flatOptions[next].disabled) next--;
+              return next >= 0 ? next : prev;
+            });
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+        case "Tab":
+          setIsOpen(false);
+          break;
       }
-    ),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
-};
+    };
+    useEffect(() => {
+      if (isOpen && focusedIndex >= 0 && listRef.current) {
+        const focusedEl = listRef.current.children[focusedIndex];
+        focusedEl?.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedIndex, isOpen]);
+    return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, ref: setRootRef, children: [
+      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, id: `${inputId}-label`, children: [
+        label,
+        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${baseClass}__trigger`,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-labelledby": label ? `${inputId}-label` : void 0,
+          "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
+          "aria-controls": `${inputId}-listbox`,
+          tabIndex: disabled ? -1 : 0,
+          onClick: handleToggle,
+          onKeyDown: handleKeyDown,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`,
+                children: selectedOption ? selectedOption.label : placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: [`${baseClass}__menu`, isGrouped ? `${baseClass}__menu--grouped` : ""].filter(Boolean).join(" "),
+          role: "listbox",
+          id: `${inputId}-listbox`,
+          ref: listRef,
+          "aria-labelledby": label ? `${inputId}-label` : void 0,
+          children: isGrouped ? (() => {
+            let flatIndex = 0;
+            return groups.map((group, groupIdx) => /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: group.label }),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: `${baseClass}__group-list`,
+                  role: "group",
+                  "aria-label": group.label,
+                  children: group.options.map((option) => {
+                    const myIndex = flatIndex++;
+                    return /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        className: [
+                          `${baseClass}__option`,
+                          option.value === value ? `${baseClass}__option--selected` : "",
+                          option.disabled ? `${baseClass}__option--disabled` : "",
+                          myIndex === focusedIndex ? `${baseClass}__option--focused` : ""
+                        ].filter(Boolean).join(" "),
+                        role: "option",
+                        "aria-selected": option.value === value,
+                        "aria-disabled": option.disabled,
+                        onClick: () => !option.disabled && handleSelect(option.value),
+                        children: [
+                          option.label,
+                          option.value === value && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: `${baseClass}__check material-symbols-rounded`,
+                              "aria-hidden": "true",
+                              children: "check"
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              ),
+              groupIdx < groups.length - 1 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" })
+            ] }, `group-${groupIdx}`));
+          })() : options.map((option, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: [
+                `${baseClass}__option`,
+                option.value === value ? `${baseClass}__option--selected` : "",
+                option.disabled ? `${baseClass}__option--disabled` : "",
+                index === focusedIndex ? `${baseClass}__option--focused` : ""
+              ].filter(Boolean).join(" "),
+              role: "option",
+              "aria-selected": option.value === value,
+              "aria-disabled": option.disabled,
+              onClick: () => !option.disabled && handleSelect(option.value),
+              children: [
+                option.label,
+                option.value === value && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__check material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "check"
+                  }
+                )
+              ]
+            },
+            option.value
+          ))
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+    ] });
+  }
+);
+Dropdown.displayName = "Dropdown";
 export {
   Dropdown
 };

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