@robr0/design-system 0.1.0 → 0.3.0

package/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import "./DatePicker.css";
 import "../../fonts/material-symbols.css";
 const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -31,140 +31,149 @@ function formatDate(date) {
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
-const DatePicker = ({
-  value,
-  size = "default",
-  disabled = false,
-  min,
-  max,
-  onDateSelect,
-  className = ""
-}) => {
-  const selectedDate = parseDate(value);
-  const minDate = parseDate(min);
-  const maxDate = parseDate(max);
-  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-  const [viewMonth, setViewMonth] = useState(
-    selectedDate ? selectedDate.getMonth() : today.getMonth()
-  );
-  const [viewYear, setViewYear] = useState(
-    selectedDate ? selectedDate.getFullYear() : today.getFullYear()
-  );
-  const baseClass = "ds-date-picker";
-  const sizeClass = `${baseClass}--${size}`;
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const classes = [baseClass, sizeClass, disabledClass, className].filter(Boolean).join(" ");
-  const firstDay = new Date(viewYear, viewMonth, 1).getDay();
-  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
-  const daysInPrevMonth = new Date(viewYear, viewMonth, 0).getDate();
-  const cells = [];
-  for (let i = firstDay - 1; i >= 0; i--) {
-    const d = daysInPrevMonth - i;
-    cells.push({ day: d, inMonth: false, date: new Date(viewYear, viewMonth - 1, d) });
-  }
-  for (let d = 1; d <= daysInMonth; d++) {
-    cells.push({ day: d, inMonth: true, date: new Date(viewYear, viewMonth, d) });
-  }
-  const remaining = 42 - cells.length;
-  for (let d = 1; d <= remaining; d++) {
-    cells.push({ day: d, inMonth: false, date: new Date(viewYear, viewMonth + 1, d) });
-  }
-  const goToPrevMonth = () => {
-    if (viewMonth === 0) {
-      setViewMonth(11);
-      setViewYear(viewYear - 1);
-    } else {
-      setViewMonth(viewMonth - 1);
+const DatePicker = React.forwardRef(
+  ({ value, size = "default", disabled = false, min, max, onDateSelect, className = "", ...rest }, ref) => {
+    const selectedDate = parseDate(value);
+    const minDate = parseDate(min);
+    const maxDate = parseDate(max);
+    const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+    const [viewMonth, setViewMonth] = useState(
+      selectedDate ? selectedDate.getMonth() : today.getMonth()
+    );
+    const [viewYear, setViewYear] = useState(
+      selectedDate ? selectedDate.getFullYear() : today.getFullYear()
+    );
+    const baseClass = "ds-date-picker";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    const daysInPrevMonth = new Date(viewYear, viewMonth, 0).getDate();
+    const cells = [];
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const d = daysInPrevMonth - i;
+      cells.push({ day: d, inMonth: false, date: new Date(viewYear, viewMonth - 1, d) });
     }
-  };
-  const goToNextMonth = () => {
-    if (viewMonth === 11) {
-      setViewMonth(0);
-      setViewYear(viewYear + 1);
-    } else {
-      setViewMonth(viewMonth + 1);
+    for (let d = 1; d <= daysInMonth; d++) {
+      cells.push({ day: d, inMonth: true, date: new Date(viewYear, viewMonth, d) });
     }
-  };
-  const isDateDisabled = (date) => {
-    if (disabled) return true;
-    if (minDate && date < minDate) return true;
-    if (maxDate && date > maxDate) return true;
-    return false;
-  };
-  const handleSelect = (cell) => {
-    if (isDateDisabled(cell.date)) return;
-    if (!cell.inMonth) {
-      setViewMonth(cell.date.getMonth());
-      setViewYear(cell.date.getFullYear());
+    const remaining = 42 - cells.length;
+    for (let d = 1; d <= remaining; d++) {
+      cells.push({ day: d, inMonth: false, date: new Date(viewYear, viewMonth + 1, d) });
     }
-    onDateSelect?.(formatDate(cell.date));
-  };
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `${baseClass}__nav-btn material-symbols-rounded`,
-          onClick: goToPrevMonth,
-          disabled,
-          "aria-label": "Previous month",
-          children: "chevron_left"
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__month-year`, children: [
-        MONTHS[viewMonth],
-        " ",
-        viewYear
+    const goToPrevMonth = () => {
+      if (viewMonth === 0) {
+        setViewMonth(11);
+        setViewYear(viewYear - 1);
+      } else {
+        setViewMonth(viewMonth - 1);
+      }
+    };
+    const goToNextMonth = () => {
+      if (viewMonth === 11) {
+        setViewMonth(0);
+        setViewYear(viewYear + 1);
+      } else {
+        setViewMonth(viewMonth + 1);
+      }
+    };
+    const isDateDisabled = (date) => {
+      if (disabled) return true;
+      if (minDate && date < minDate) return true;
+      if (maxDate && date > maxDate) return true;
+      return false;
+    };
+    const handleSelect = (cell) => {
+      if (isDateDisabled(cell.date)) return;
+      if (!cell.inMonth) {
+        setViewMonth(cell.date.getMonth());
+        setViewYear(cell.date.getFullYear());
+      }
+      onDateSelect?.(formatDate(cell.date));
+    };
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${baseClass}__nav-btn material-symbols-rounded`,
+            onClick: goToPrevMonth,
+            disabled,
+            "aria-label": "Previous month",
+            children: "chevron_left"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__month-year`, children: [
+          MONTHS[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${baseClass}__nav-btn material-symbols-rounded`,
+            onClick: goToNextMonth,
+            disabled,
+            "aria-label": "Next month",
+            children: "chevron_right"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx(
-        "button",
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "button",
-          className: `${baseClass}__nav-btn material-symbols-rounded`,
-          onClick: goToNextMonth,
-          disabled,
-          "aria-label": "Next month",
-          children: "chevron_right"
+          className: `${baseClass}__grid`,
+          role: "group",
+          "aria-label": `${MONTHS[viewMonth]} ${viewYear}`,
+          children: [
+            DAYS.map((day) => (
+              // Each cell's aria-label already carries the full weekday name, so
+              // the visual column headers are redundant noise for a screen reader.
+              /* @__PURE__ */ jsx("div", { className: `${baseClass}__day-header`, "aria-hidden": "true", children: day }, day)
+            )),
+            cells.map((cell, idx) => {
+              const isSelected = selectedDate && isSameDay(cell.date, selectedDate);
+              const isToday = isSameDay(cell.date, today);
+              const isCellDisabled = isDateDisabled(cell.date);
+              const cellClasses = [
+                `${baseClass}__cell`,
+                !cell.inMonth ? `${baseClass}__cell--outside` : "",
+                isSelected ? `${baseClass}__cell--selected` : "",
+                isToday && !isSelected ? `${baseClass}__cell--today` : "",
+                isCellDisabled ? `${baseClass}__cell--disabled` : ""
+              ].filter(Boolean).join(" ");
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cellClasses,
+                  onClick: () => handleSelect(cell),
+                  disabled: isCellDisabled,
+                  "aria-label": `${cell.date.toLocaleDateString(void 0, {
+                    weekday: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric"
+                  })}${isSelected ? ", selected" : ""}`,
+                  "aria-current": isToday ? "date" : void 0,
+                  children: cell.day
+                },
+                idx
+              );
+            })
+          ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__grid`, role: "grid", children: [
-      DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: `${baseClass}__day-header`, role: "columnheader", children: day }, day)),
-      cells.map((cell, idx) => {
-        const isSelected = selectedDate && isSameDay(cell.date, selectedDate);
-        const isToday = isSameDay(cell.date, today);
-        const isCellDisabled = isDateDisabled(cell.date);
-        const cellClasses = [
-          `${baseClass}__cell`,
-          !cell.inMonth ? `${baseClass}__cell--outside` : "",
-          isSelected ? `${baseClass}__cell--selected` : "",
-          isToday && !isSelected ? `${baseClass}__cell--today` : "",
-          isCellDisabled ? `${baseClass}__cell--disabled` : ""
-        ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: cellClasses,
-            onClick: () => handleSelect(cell),
-            disabled: isCellDisabled,
-            "aria-label": cell.date.toLocaleDateString(void 0, {
-              weekday: "long",
-              year: "numeric",
-              month: "long",
-              day: "numeric"
-            }),
-            "aria-selected": isSelected || void 0,
-            role: "gridcell",
-            children: cell.day
-          },
-          idx
-        );
-      })
-    ] })
-  ] });
-};
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
 export {
   DatePicker
 };

package/components/Dialog/Dialog.d.ts

@@ -1,10 +1,14 @@
 import { default as React } from 'react';
-export interface DialogProps {
+/** Props owned by Dialog itself — everything else falls through to the panel. */
+type DialogOwnProps = {
     /** Whether the dialog is open */
     open: boolean;
     /** Callback when dialog requests to close */
     onOpenChange: (open: boolean) => void;
-    /** Dialog title */
+    /**
+     * Dialog title.
+     * Note: this shadows the native `title` tooltip attribute, which Dialog does not expose.
+     */
     title: string;
     /** Optional subtitle under the title */
     description?: string;
@@ -16,13 +20,20 @@ export interface DialogProps {
     size?: 'sm' | 'md' | 'lg';
     /** Whether ESC, backdrop click, and the close button can dismiss */
     dismissible?: boolean;
-    /** Additional CSS classes */
+    /** Additional CSS classes — applied to the portal container, not the panel */
     className?: string;
+};
+export interface DialogProps extends DialogOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DialogOwnProps> {
 }
 /**
  * Dialog component — a general-purpose modal with arbitrary
  * content and an optional footer. Traps focus, restores it on
  * close, locks body scroll, and supports ESC / backdrop / close
  * button dismissal. For confirm/cancel prompts use AlertDialog.
+ *
+ * Renders through a portal into `document.body`. The forwarded ref and any
+ * unrecognised props target the **panel** (the `role="dialog"` element), not the
+ * portal container — that is the element worth focusing or measuring.
  */
-export declare const Dialog: ({ open, onOpenChange, title, description, children, footer, size, dismissible, className, }: DialogProps) => React.ReactPortal | null;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Dialog/Dialog.js

@@ -1,132 +1,150 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
 import ReactDOM from "react-dom";
 import "./Dialog.css";
 import "../../fonts/material-symbols.css";
 const emptySubscribe = () => () => {
 };
-const Dialog = ({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  size = "md",
-  dismissible = true,
-  className = ""
-}) => {
-  const panelRef = useRef(null);
-  const previousFocusRef = useRef(null);
-  const titleId = useId();
-  const descId = useId();
-  const baseClass = "ds-dialog";
-  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
-  useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const panel = panelRef.current;
-    if (panel) {
-      const first = panel.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      (first ?? panel).focus();
-    }
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape" && dismissible) {
-        onOpenChange(false);
-        return;
+const Dialog = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    footer,
+    size = "md",
+    dismissible = true,
+    className = "",
+    ...rest
+  }, ref) => {
+    const panelRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const titleId = useId();
+    const descId = useId();
+    const baseClass = "ds-dialog";
+    const setPanelRef = (node) => {
+      panelRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const mounted = useSyncExternalStore(
+      emptySubscribe,
+      () => true,
+      () => false
+    );
+    useEffect(() => {
+      if (open) {
+        previousFocusRef.current = document.activeElement;
+      }
+    }, [open]);
+    useEffect(() => {
+      if (!open) return;
+      const panel = panelRef.current;
+      if (panel) {
+        const first = panel.querySelector("button, [href], input, select, textarea") ?? panel.querySelector('[tabindex]:not([tabindex="-1"])');
+        (first ?? panel).focus();
       }
-      if (e.key === "Tab" && panel) {
-        const focusable = panel.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && dismissible) {
+          onOpenChange(false);
+          return;
         }
+        if (e.key === "Tab" && panel) {
+          const focusable = panel.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (focusable.length === 0) return;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, dismissible, onOpenChange]);
+    useEffect(() => {
+      if (!open && previousFocusRef.current) {
+        previousFocusRef.current.focus();
+        previousFocusRef.current = null;
       }
+    }, [open]);
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+    const handleBackdropClick = () => {
+      if (dismissible) onOpenChange(false);
     };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, dismissible, onOpenChange]);
-  useEffect(() => {
-    if (!open && previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-  const handleBackdropClick = () => {
-    if (dismissible) onOpenChange(false);
-  };
-  const openClass = open ? `${baseClass}--open` : "";
-  const sizeClass = `${baseClass}--${size}`;
-  const containerClasses = [baseClass, sizeClass, openClass, className].filter(Boolean).join(" ");
-  const dialog = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleBackdropClick }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `${baseClass}__panel`,
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": titleId,
-        "aria-describedby": description ? descId : void 0,
-        tabIndex: -1,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
-              /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
-              description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
+    const containerClasses = [
+      baseClass,
+      `${baseClass}--${size}`,
+      open ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const dialog = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleBackdropClick }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          className: `${baseClass}__panel`,
+          ref: setPanelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": description ? descId : rest["aria-describedby"],
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+              /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+                /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
+              ] }),
+              dismissible && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__close`,
+                  onClick: () => onOpenChange(false),
+                  "aria-label": "Close dialog",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__close-icon material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "close"
+                    }
+                  )
+                }
+              )
             ] }),
-            dismissible && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: `${baseClass}__close`,
-                onClick: () => onOpenChange(false),
-                "aria-label": "Close dialog",
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `${baseClass}__close-icon material-symbols-rounded`,
-                    "aria-hidden": "true",
-                    children: "close"
-                  }
-                )
-              }
-            )
-          ] }),
-          children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
-          footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
-        ]
-      }
-    )
-  ] });
-  if (!mounted) return null;
-  return ReactDOM.createPortal(dialog, document.body);
-};
+            children && // Scrollable when content is long; without a tab stop a keyboard
+            // user cannot reach that scroll. The initial-focus query below
+            // still prefers a real control, so this does not steal focus.
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, tabIndex: 0, children }),
+            footer && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer`, children: footer })
+          ]
+        }
+      )
+    ] });
+    if (!mounted) return null;
+    return ReactDOM.createPortal(dialog, document.body);
+  }
+);
+Dialog.displayName = "Dialog";
 export {
   Dialog
 };

package/components/Drawer/Drawer.d.ts

@@ -1,10 +1,14 @@
 import { default as React } from 'react';
-export interface DrawerProps {
+/** Props owned by Drawer itself — everything else falls through to the panel. */
+type DrawerOwnProps = {
     /** Whether the drawer is open */
     open: boolean;
     /** Callback when the drawer requests to close */
     onOpenChange: (open: boolean) => void;
-    /** Drawer title */
+    /**
+     * Drawer title.
+     * Note: this shadows the native `title` tooltip attribute, which Drawer does not expose.
+     */
     title: string;
     /** Optional subtitle under the title */
     description?: string;
@@ -18,13 +22,20 @@ export interface DrawerProps {
     size?: 'sm' | 'md' | 'lg';
     /** Whether ESC, scrim click, and the close button can dismiss */
     dismissible?: boolean;
-    /** Additional CSS classes */
+    /** Additional CSS classes — applied to the portal container, not the panel */
     className?: string;
+};
+export interface DrawerProps extends DrawerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DrawerOwnProps> {
 }
 /**
  * Drawer component — an edge-anchored panel that slides in over the page.
  * Shares Dialog's modal semantics (focus trap, focus restore, scroll lock,
  * ESC/scrim dismissal) but is anchored to a viewport edge, which suits
  * filter panels, detail views, and mobile navigation.
+ *
+ * Renders through a portal into `document.body`. The forwarded ref and any
+ * unrecognised props target the **panel** (the `role="dialog"` element), not the
+ * portal container.
  */
-export declare const Drawer: ({ open, onOpenChange, title, description, children, footer, side, size, dismissible, className, }: DrawerProps) => React.ReactPortal | null;
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export {};