@robr0/design-system 0.2.0 → 0.4.0

package/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,350 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import "./ContextMenu.css";
+import "../../fonts/material-symbols.css";
+function collectItems(entries) {
+  const result = [];
+  for (const entry of entries) {
+    if (entry.type === "separator") continue;
+    if (entry.type === "group") {
+      result.push(...collectItems(entry.items));
+    } else {
+      result.push(entry);
+    }
+  }
+  return result;
+}
+const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
+  const [subOpen, setSubOpen] = useState(false);
+  const timeoutRef = useRef(null);
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setSubOpen(true);
+  };
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => setSubOpen(false), 150);
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (focused && item.children && item.children.length > 0) {
+      setSubOpen(true);
+    }
+  }, [focused, item.children]);
+  const classes = [
+    `${baseClass}__item`,
+    focused ? `${baseClass}__item--focused` : "",
+    item.disabled ? `${baseClass}__item--disabled` : "",
+    item.destructive ? `${baseClass}__item--destructive` : "",
+    `${baseClass}__item--has-submenu`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: classes,
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": subOpen,
+      "aria-disabled": item.disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (!item.disabled) setSubOpen((prev) => !prev);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__item-label`, children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: item.icon }),
+          item.label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__submenu-icon material-symbols-rounded`, "aria-hidden": "true", children: "chevron_right" }),
+        subOpen && item.children && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__panel ${baseClass}__submenu`, role: "menu", children: item.children.map((entry, index) => /* @__PURE__ */ jsx(
+          SubEntry,
+          {
+            entry,
+            baseClass,
+            size,
+            onActivate
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+const SubEntry = ({
+  entry,
+  baseClass,
+  size,
+  onActivate
+}) => {
+  if (entry.type === "separator") {
+    return /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" });
+  }
+  if (entry.type === "group") {
+    return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: entry.label }),
+      /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", "aria-label": entry.label, children: entry.items.map((subEntry, subIndex) => /* @__PURE__ */ jsx(
+        SubEntry,
+        {
+          entry: subEntry,
+          baseClass,
+          size,
+          onActivate
+        },
+        subIndex
+      )) })
+    ] });
+  }
+  if (entry.children && entry.children.length > 0) {
+    return /* @__PURE__ */ jsx(
+      SubMenuItem,
+      {
+        item: entry,
+        baseClass,
+        focused: false,
+        size,
+        onActivate
+      }
+    );
+  }
+  const itemClasses = [
+    `${baseClass}__item`,
+    entry.disabled ? `${baseClass}__item--disabled` : "",
+    entry.destructive ? `${baseClass}__item--destructive` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: itemClasses,
+      role: "menuitem",
+      "aria-disabled": entry.disabled || void 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (!entry.disabled) {
+          entry.onClick?.();
+          onActivate();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__item-label`, children: [
+          entry.icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }),
+          entry.label
+        ] }),
+        entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+      ]
+    }
+  );
+};
+const ContextMenu = React.forwardRef(
+  ({
+    items,
+    size = "default",
+    ariaLabel,
+    className = "",
+    children,
+    onContextMenu,
+    ...rest
+  }, ref) => {
+    const [position, setPosition] = useState(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const rootRef = useRef(null);
+    const panelRef = useRef(null);
+    const baseClass = "ds-context-menu";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const isOpen = position !== null;
+    const flatItems = collectItems(items);
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const handleClose = useCallback(() => {
+      setPosition(null);
+      setFocusedIndex(-1);
+    }, []);
+    const handleContextMenu = (e) => {
+      onContextMenu?.(e);
+      e.preventDefault();
+      let x = e.clientX;
+      let y = e.clientY;
+      if (x === 0 && y === 0 && rootRef.current) {
+        const rect = rootRef.current.getBoundingClientRect();
+        x = rect.left + rect.width / 2;
+        y = rect.top + rect.height / 2;
+      }
+      setPosition({ x, y });
+      setFocusedIndex(-1);
+    };
+    useEffect(() => {
+      if (!isOpen) return;
+      const handler = (e) => {
+        if (panelRef.current && !panelRef.current.contains(e.target)) {
+          handleClose();
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [isOpen, handleClose]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const handler = () => handleClose();
+      window.addEventListener("scroll", handler, true);
+      window.addEventListener("resize", handler);
+      return () => {
+        window.removeEventListener("scroll", handler, true);
+        window.removeEventListener("resize", handler);
+      };
+    }, [isOpen, handleClose]);
+    useLayoutEffect(() => {
+      if (!isOpen || !panelRef.current || !position) return;
+      const panel = panelRef.current;
+      const rect = panel.getBoundingClientRect();
+      const margin = 8;
+      let { x, y } = position;
+      if (x + rect.width + margin > window.innerWidth) {
+        x = Math.max(margin, window.innerWidth - rect.width - margin);
+      }
+      if (y + rect.height + margin > window.innerHeight) {
+        y = Math.max(margin, window.innerHeight - rect.height - margin);
+      }
+      if (x !== position.x || y !== position.y) {
+        setPosition({ x, y });
+        return;
+      }
+      panel.focus({ preventScroll: true });
+    }, [isOpen, position]);
+    const handleKeyDown = (e) => {
+      switch (e.key) {
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          if (focusedIndex >= 0) {
+            const item = flatItems[focusedIndex];
+            if (item && !item.disabled && !item.children) {
+              item.onClick?.();
+              handleClose();
+            }
+          }
+          break;
+        }
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = prev + 1;
+            while (next < flatItems.length && flatItems[next].disabled) next++;
+            return next < flatItems.length ? next : prev;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = prev < 0 ? flatItems.length - 1 : prev - 1;
+            while (next >= 0 && flatItems[next].disabled) next--;
+            return next >= 0 ? next : prev;
+          });
+          break;
+        case "Escape":
+        case "Tab":
+          e.preventDefault();
+          handleClose();
+          break;
+      }
+    };
+    const renderEntry = (entry, index, itemCounter2) => {
+      if (entry.type === "separator") {
+        return /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" }, `sep-${index}`);
+      }
+      if (entry.type === "group") {
+        return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: entry.label }),
+          /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", "aria-label": entry.label, children: entry.items.map(
+            (subEntry, subIndex) => renderEntry(subEntry, subIndex, itemCounter2)
+          ) })
+        ] }, `group-${index}`);
+      }
+      const myIndex = itemCounter2.count;
+      itemCounter2.count++;
+      const isFocused = myIndex === focusedIndex;
+      if (entry.children && entry.children.length > 0) {
+        return /* @__PURE__ */ jsx(
+          SubMenuItem,
+          {
+            item: entry,
+            baseClass,
+            focused: isFocused,
+            size,
+            onActivate: handleClose
+          },
+          `submenu-${index}`
+        );
+      }
+      const itemClasses = [
+        `${baseClass}__item`,
+        isFocused ? `${baseClass}__item--focused` : "",
+        entry.disabled ? `${baseClass}__item--disabled` : "",
+        entry.destructive ? `${baseClass}__item--destructive` : ""
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: itemClasses,
+          role: "menuitem",
+          "aria-disabled": entry.disabled || void 0,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (!entry.disabled) {
+              entry.onClick?.();
+              handleClose();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__item-label`, children: [
+              entry.icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${baseClass}__item-icon material-symbols-rounded`,
+                  "aria-hidden": "true",
+                  children: entry.icon
+                }
+              ),
+              entry.label
+            ] }),
+            entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+          ]
+        },
+        `item-${index}`
+      );
+    };
+    const panelClasses = [
+      `${baseClass}__panel`,
+      size === "compact" ? `${baseClass}__panel--compact` : ""
+    ].filter(Boolean).join(" ");
+    const itemCounter = { count: 0 };
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref: setRootRef, className: classes, onContextMenu: handleContextMenu, children: [
+      children,
+      isOpen && /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: panelClasses,
+          role: "menu",
+          "aria-label": ariaLabel,
+          tabIndex: -1,
+          ref: (el) => {
+            panelRef.current = el;
+          },
+          style: { left: position.x, top: position.y },
+          onKeyDown: handleKeyDown,
+          children: items.map((entry, index) => renderEntry(entry, index, itemCounter))
+        }
+      )
+    ] });
+  }
+);
+ContextMenu.displayName = "ContextMenu";
+export {
+  ContextMenu
+};

package/components/DateInput/DateInput.css

@@ -14,19 +14,6 @@
    LABEL
    ============================================ */
 
-.ds-date-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-date-input__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    FIELD WRAPPER
    ============================================ */
@@ -108,25 +95,10 @@
   --icon-size: var(--icon-size-sm);
 }
 
-.ds-date-input--compact .ds-date-input__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}
-
 /* ============================================
    HELPER TEXT
    ============================================ */
 
-.ds-date-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
    ============================================ */
@@ -139,18 +111,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-date-input--error .ds-date-input__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-date-input--disabled .ds-date-input__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-date-input--disabled .ds-date-input__field {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);

package/components/DateInput/DateInput.d.ts

@@ -23,7 +23,11 @@ type DateInputOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface DateInputProps extends DateInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof DateInputOwnProps | 'type'> {

package/components/DateInput/DateInput.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Field } from "../Field/Field.js";
 import "./DateInput.css";
 import "../../fonts/material-symbols.css";
 const DateInput = React.forwardRef(
@@ -35,40 +36,43 @@ const DateInput = React.forwardRef(
       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: [
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
         label,
-        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-          " ",
-          "*"
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        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
+            }
+          )
         ] })
-      ] }),
-      /* @__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";

package/components/DatePicker/DatePicker.js

@@ -125,40 +125,51 @@ const DatePicker = React.forwardRef(
           }
         )
       ] }),
-      /* @__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
-          );
-        })
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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
+              );
+            })
+          ]
+        }
+      )
     ] });
   }
 );

package/components/Dialog/Dialog.css

@@ -88,11 +88,11 @@
 }
 
 .ds-dialog__title {
-  font-family: var(--font-heading-6-family);
-  font-size: var(--font-heading-6-size);
-  font-weight: var(--font-heading-6-weight);
-  line-height: var(--font-heading-6-line-height);
-  letter-spacing: var(--font-heading-6-letter-spacing);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
   color: var(--color-text-primary);
   margin: 0;
 }

package/components/Dialog/Dialog.js

@@ -42,9 +42,7 @@ const Dialog = React.forwardRef(
       if (!open) return;
       const panel = panelRef.current;
       if (panel) {
-        const first = panel.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
+        const first = panel.querySelector("button, [href], input, select, textarea") ?? panel.querySelector('[tabindex]:not([tabindex="-1"])');
         (first ?? panel).focus();
       }
       const handleKeyDown = (e) => {
@@ -133,7 +131,10 @@ const Dialog = React.forwardRef(
                 }
               )
             ] }),
-            children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
+            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 })
           ]
         }

package/components/Drawer/Drawer.js

@@ -44,7 +44,9 @@ const Drawer = React.forwardRef(
       if (!open) return;
       const panel = panelRef.current;
       if (panel) {
-        const first = panel.querySelector(FOCUSABLE);
+        const first = panel.querySelector(
+          "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
+        ) ?? panel.querySelector(FOCUSABLE);
         (first ?? panel).focus();
       }
       const handleKeyDown = (e) => {
@@ -132,7 +134,10 @@ const Drawer = React.forwardRef(
                 }
               )
             ] }),
-            children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children }),
+            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 })
           ]
         }