@robr0/design-system 0.1.0 → 0.2.0

package/components/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./Checkbox.css";
 const CheckIcon = () => /* @__PURE__ */ jsx(
   "svg",
@@ -31,94 +31,108 @@ const MinusIcon = () => /* @__PURE__ */ jsx(
     viewBox: "0 0 14 14",
     fill: "none",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx(
-      "path",
+    children: /* @__PURE__ */ jsx("path", { d: "M2 7H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  }
+);
+const Checkbox = React.forwardRef(
+  ({
+    label,
+    checked = false,
+    indeterminate = false,
+    disabled = false,
+    size = "default",
+    onCheckedChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name: _name,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-checkbox";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      checked ? `${baseClass}--checked` : "",
+      indeterminate && !checked ? `${baseClass}--indeterminate` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const toggle = () => {
+      if (disabled) return;
+      onCheckedChange?.(!checked);
+      onChange?.(!checked);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      toggle();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        d: "M2 7H12",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
+        ...rest,
+        ref,
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "checkbox",
+        "aria-checked": indeterminate && !checked ? "mixed" : checked,
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel || rest["aria-label"] || label,
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
       }
-    )
+    );
   }
 );
-const CheckboxGroup = ({
-  label,
-  items,
-  values = [],
-  direction = "vertical",
-  size = "default",
-  onChange,
-  className = ""
-}) => {
-  const baseClass = "ds-checkbox-group";
-  const directionClass = `${baseClass}--${direction}`;
-  const classes = [baseClass, directionClass, className].filter(Boolean).join(" ");
-  const handleToggle = (itemValue) => {
-    if (!onChange) return;
-    const next = values.includes(itemValue) ? values.filter((v) => v !== itemValue) : [...values, itemValue];
-    onChange(next);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes, role: "group", "aria-label": label, children: [
-    label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item) => /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        label: item.label,
-        checked: values.includes(item.value),
-        disabled: item.disabled,
-        size,
-        onChange: () => handleToggle(item.value)
-      },
-      item.value
-    )) })
-  ] });
-};
-const Checkbox = ({
-  label,
-  checked = false,
-  indeterminate = false,
-  disabled = false,
-  size = "default",
-  onChange,
-  className = "",
-  ariaLabel
-}) => {
-  const baseClass = "ds-checkbox";
-  const checkedClass = checked ? `${baseClass}--checked` : "";
-  const indeterminateClass = indeterminate && !checked ? `${baseClass}--indeterminate` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const classes = [baseClass, sizeClass, checkedClass, indeterminateClass, disabledClass, className].filter(Boolean).join(" ");
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(!checked);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      role: "checkbox",
-      "aria-checked": indeterminate && !checked ? "mixed" : checked,
-      "aria-disabled": disabled,
-      "aria-label": ariaLabel || label,
-      tabIndex: disabled ? -1 : 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
-        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-      ]
-    }
-  );
-};
+Checkbox.displayName = "Checkbox";
+const CheckboxGroup = React.forwardRef(
+  ({
+    label,
+    items,
+    values = [],
+    direction = "vertical",
+    size = "default",
+    onValuesChange,
+    onChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-checkbox-group";
+    const classes = [baseClass, `${baseClass}--${direction}`, className].filter(Boolean).join(" ");
+    const handleToggle = (itemValue) => {
+      const next = values.includes(itemValue) ? values.filter((v) => v !== itemValue) : [...values, itemValue];
+      onValuesChange?.(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "group", "aria-label": label, children: [
+      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: item.label,
+          checked: values.includes(item.value),
+          disabled: item.disabled,
+          size,
+          onCheckedChange: () => handleToggle(item.value)
+        },
+        item.value
+      )) })
+    ] });
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
 export {
   Checkbox,
   CheckboxGroup

package/components/Combobox/Combobox.d.ts

@@ -15,7 +15,8 @@ export interface ComboboxOptionGroup {
     /** Options within the group */
     options: ComboboxOption[];
 }
-export interface ComboboxProps {
+/** Props owned by Combobox itself — everything else falls through to the wrapper. */
+type ComboboxOwnProps = {
     /** Combobox label text */
     label?: string;
     /** Placeholder shown in the text field when nothing is selected */
@@ -51,23 +52,34 @@ export interface ComboboxProps {
      * Called with the new selection — a `string` in single mode,
      * `string[]` when `multiple` is set.
      */
-    onChange?: (value: string | string[]) => void;
+    onValueChange?: (value: string | string[]) => void;
     /** Called as the user types, for async/server-side filtering */
     onSearchChange?: (query: string) => void;
     /** Skip built-in filtering — use when options are filtered upstream */
     manualFiltering?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible name override */
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string | string[]) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML name attribute */
+    /**
+     * Used only as a fallback for deriving the element id (`id || name || generated`).
+     *
+     * Note: Combobox renders a `<div>` wrapper around a text input, not a native
+     * `<select>`, so `name` does **not** make the selection participate in native
+     * form submission.
+     */
     name?: string;
-    /** HTML id attribute */
-    id?: string;
+};
+export interface ComboboxProps extends ComboboxOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ComboboxOwnProps> {
 }
 /**
  * Combobox component — a text field combined with a filterable listbox.
  * Unlike Dropdown (a static select), it narrows options as the user types
  * and supports multi-select chips and async option loading.
+ *
+ * Forwards a ref to the wrapping element and spreads unrecognised props onto it.
  */
-export declare const Combobox: ({ label, placeholder, value, options, groups, multiple, size, disabled, required, error, helperText, loading, emptyMessage, clearable, onChange, onSearchChange, manualFiltering, className, ariaLabel, name, id, }: ComboboxProps) => React.JSX.Element;
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Combobox/Combobox.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
+import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
 import "./Combobox.css";
 import "../../fonts/material-symbols.css";
-const Combobox = ({
+const Combobox = React.forwardRef(({
   label,
   placeholder = "Search…",
   value,
@@ -17,14 +17,16 @@ const Combobox = ({
   loading = false,
   emptyMessage = "No results found",
   clearable = false,
+  onValueChange,
   onChange,
   onSearchChange,
   manualFiltering = false,
   className = "",
   ariaLabel,
   name,
-  id
-}) => {
+  id,
+  ...rest
+}, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -32,6 +34,11 @@ const Combobox = ({
   const inputRef = useRef(null);
   const listRef = useRef(null);
   const generatedId = useId();
+  const setRootRef = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
   const baseClass = "ds-combobox";
   const isGrouped = Boolean(groups && groups.length > 0);
   const inputId = id || name || generatedId;
@@ -75,8 +82,9 @@ const Combobox = ({
     setQuery("");
   };
   const emitChange = (next) => {
-    if (!onChange) return;
-    onChange(multiple ? next : next[0] ?? "");
+    const payload = multiple ? next : next[0] ?? "";
+    onValueChange?.(payload);
+    onChange?.(payload);
   };
   const handleSelect = (option) => {
     if (option.disabled) return;
@@ -215,7 +223,7 @@ const Combobox = ({
     );
   };
   const hasSelection = selectedValues.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: classes, ref: setRootRef, children: [
     label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
@@ -257,7 +265,7 @@ const Combobox = ({
             "aria-controls": listboxId,
             "aria-autocomplete": "list",
             "aria-activedescendant": activeOptionId,
-            "aria-label": ariaLabel || (!label ? placeholder : void 0),
+            "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
             "aria-describedby": helperText ? `${inputId}-helper` : void 0,
             "aria-invalid": error || void 0,
             "aria-required": required || void 0,
@@ -306,7 +314,8 @@ const Combobox = ({
     ] }),
     helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
   ] });
-};
+});
+Combobox.displayName = "Combobox";
 export {
   Combobox
 };

package/components/DateInput/DateInput.d.ts

@@ -1,17 +1,12 @@
 import { default as React } from 'react';
-export interface DateInputProps {
+/** Props owned by DateInput itself — everything else falls through to the <input>. */
+type DateInputOwnProps = {
     /** Input label text */
     label?: string;
     /** Current value (YYYY-MM-DD format) */
     value?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** 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 */
     error?: boolean;
     /** Helper or error message */
@@ -20,24 +15,26 @@ export interface DateInputProps {
     min?: string;
     /** Maximum selectable date (YYYY-MM-DD) */
     max?: 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 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 DateInputProps extends DateInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof DateInputOwnProps | 'type'> {
 }
 /**
  * Date input component with native date picker.
  * Uses the browser's built-in date input with custom styling,
  * calendar icon, label, and validation states.
+ *
+ * Forwards a ref to the underlying `<input type="date">` and spreads
+ * unrecognised props onto it.
  */
-export declare const DateInput: ({ label, value, placeholder, size, disabled, required, error, helperText, min, max, onChange, onFocus, onBlur, className, ariaLabel, name, id, }: DateInputProps) => React.JSX.Element;
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/DateInput/DateInput.js

@@ -1,69 +1,77 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./DateInput.css";
 import "../../fonts/material-symbols.css";
-const DateInput = ({
-  label,
-  value,
-  placeholder,
-  size = "default",
-  disabled = false,
-  required = false,
-  error = false,
-  helperText,
-  min,
-  max,
-  onChange,
-  onFocus,
-  onBlur,
-  className = "",
-  ariaLabel,
-  name,
-  id
-}) => {
-  const baseClass = "ds-date-input";
-  const errorClass = error ? `${baseClass}--error` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const sizeClass = `${baseClass}--${size}`;
-  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, "-");
-  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: [
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: "calendar_today" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          className: `${baseClass}__field`,
-          type: "date",
-          id: inputId,
-          name,
-          value,
-          placeholder,
-          disabled,
-          required,
-          min,
-          max,
-          "aria-label": ariaLabel || label,
-          "aria-invalid": error,
-          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-          onChange: handleChange,
-          onFocus,
-          onBlur
-        }
-      )
-    ] }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
-};
+const DateInput = React.forwardRef(
+  ({
+    label,
+    value,
+    placeholder,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    min,
+    max,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-date-input";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      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, "-");
+    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: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: "calendar_today" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            ref,
+            className: `${baseClass}__field`,
+            type: "date",
+            id: inputId,
+            name,
+            value,
+            placeholder,
+            disabled,
+            required,
+            min,
+            max,
+            "aria-label": ariaLabel || rest["aria-label"] || label,
+            "aria-invalid": error,
+            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+            onChange: handleChange
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+    ] });
+  }
+);
+DateInput.displayName = "DateInput";
 export {
   DateInput
 };

package/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,6 @@
-export interface DatePickerProps {
+import { default as React } from 'react';
+/** Props owned by DatePicker itself — everything else falls through to the wrapper. */
+type DatePickerOwnProps = {
     /** Currently selected date (YYYY-MM-DD) */
     value?: string;
     /** Component size */
@@ -13,10 +15,15 @@ export interface DatePickerProps {
     onDateSelect?: (date: string) => void;
     /** Additional CSS classes */
     className?: string;
+};
+export interface DatePickerProps extends DatePickerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DatePickerOwnProps> {
 }
 /**
  * Inline date picker calendar component.
  * Displays a full month grid with navigation,
  * day headers, and selectable date cells.
+ *
+ * Forwards a ref to the wrapping element and spreads unrecognised props onto it.
  */
-export declare const DatePicker: ({ value, size, disabled, min, max, onDateSelect, className, }: DatePickerProps) => import("react").JSX.Element;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};