@robr0/design-system 0.1.0

package/components/DropdownMenu/DropdownMenu.css

@@ -0,0 +1,303 @@
+/* ============================================
+   DROPDOWN MENU COMPONENT
+   Contextual menu with sections, sub-menus,
+   keyboard shortcuts, and inset-gap hover.
+   Tokens aligned to Figma spec.
+   ============================================ */
+
+.ds-dropdown-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-dropdown-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ds-dropdown-menu__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   PANEL
+   The floating menu container
+   ============================================ */
+
+.ds-dropdown-menu__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 50;
+  min-width: 200px;
+  margin-top: var(--gap-xxs); /* 4px offset from trigger */
+
+  /* Appearance — Figma: page/primary bg, input/border/primary, radius/md */
+  background: var(--color-bg-page-primary);
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 12px */
+  box-shadow: var(--shadow-floating);
+
+  /* Inset gap — Figma: padding/xxs (4px) all sides */
+  padding: var(--padding-xxs);
+
+  /* Reset list */
+  list-style: none;
+  margin-block: 0;
+
+  /* Animation */
+  animation: ds-dropdown-menu-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+.ds-dropdown-menu__panel--align-end {
+  left: auto;
+  right: 0;
+}
+
+/* Compact items: paragraph-sm-em (14/20), padding xs sm-md (6px 12px), radius-sm (8px) */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__item {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 6px 12px */
+  border-radius: var(--radius-sm); /* 8px */
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+/* Compact icons: 20px (vs 24px default) */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__item-icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* Compact submenu chevron: 20px */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__submenu-icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* Compact group label: same padding as compact items so heights match */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__group-label {
+  min-height: auto;
+  padding: var(--padding-xs) var(--padding-sm-md); /* matches compact item padding */
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+/* Compact separator margin matches compact item padding */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__separator {
+  margin: var(--padding-xxs) var(--padding-sm-md);
+}
+
+/* Compact shortcuts */
+.ds-dropdown-menu__panel--compact .ds-dropdown-menu__shortcut {
+  font-size: var(--font-caption-size);
+}
+
+/* ============================================
+   SUB-MENU PANEL
+   ============================================ */
+
+.ds-dropdown-menu__submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin-left: var(--gap-xxs); /* 4px offset from parent */
+}
+
+/* ============================================
+   MENU ITEM
+   Figma: Button/secondary internally —
+   padding/sm (8px) vertical, padding/md (16px) horizontal,
+   radius/md (12px), paragraph-em typography.
+   ============================================ */
+
+.ds-dropdown-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md); /* 16px between label and shortcut */
+  padding: var(--padding-sm) var(--padding-md); /* Figma: 8px 16px */
+  border-radius: var(--radius-md); /* Figma: 12px */
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  list-style: none;
+
+  /* Typography — paragraph em (medium weight, matches Figma Button secondary) */
+  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-action-passive-text);
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-dropdown-menu__item:hover,
+.ds-dropdown-menu__item--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* ============================================
+   DISABLED ITEM
+   ============================================ */
+
+.ds-dropdown-menu__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-dropdown-menu__item--disabled:hover,
+.ds-dropdown-menu__item--disabled.ds-dropdown-menu__item--focused {
+  background-color: transparent;
+}
+
+/* ============================================
+   ITEM LABEL (text + optional icon)
+   ============================================ */
+
+.ds-dropdown-menu__item-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm); /* Figma: 8px between icon and text */
+  line-height: 1;
+}
+
+/* Figma: icons are 24px within menu items */
+.ds-dropdown-menu__item-icon {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-secondary);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* ============================================
+   KEYBOARD SHORTCUT
+   ============================================ */
+
+.ds-dropdown-menu__shortcut {
+  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-left: auto;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   SUB-MENU INDICATOR
+   Figma: 24px chevron icon
+   ============================================ */
+
+.ds-dropdown-menu__submenu-icon {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-text-tertiary);
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.ds-dropdown-menu__separator {
+  height: 1px;
+  background: var(--color-input-border-primary);
+  margin: var(--padding-xxs) var(--padding-md);
+  list-style: none;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.ds-dropdown-menu__group {
+  list-style: none;
+}
+
+/* Figma: section label is paragraph-em at text/tertiary,
+   40px height container, padding-left aligns with item text */
+.ds-dropdown-menu__group-label {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  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-tertiary);
+  padding-left: var(--padding-md);
+  padding-right: var(--padding-md);
+  user-select: none;
+}
+
+.ds-dropdown-menu__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   HAS-SUBMENU ITEM
+   ============================================ */
+
+.ds-dropdown-menu__item--has-submenu {
+  padding-right: var(--padding-sm-md); /* Slightly less right padding for chevron */
+}
+
+/* ============================================
+   DESTRUCTIVE ITEM
+   Red text/icon for dangerous actions (delete, remove…)
+   ============================================ */
+
+.ds-dropdown-menu__item--destructive {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-dropdown-menu__item--destructive .ds-dropdown-menu__item-icon {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-dropdown-menu__item--destructive .ds-dropdown-menu__shortcut {
+  color: var(--color-core-accent-coral);
+  opacity: 0.7;
+}
+
+.ds-dropdown-menu__item--destructive:hover,
+.ds-dropdown-menu__item--destructive.ds-dropdown-menu__item--focused {
+  background-color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   APPEAR ANIMATION
+   ============================================ */
+
+@keyframes ds-dropdown-menu-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export interface DropdownMenuItem {
+    type?: 'item';
+    /** Display label */
+    label: string;
+    /** Keyboard shortcut hint (e.g. "⇧ ⌘ P") */
+    shortcut?: string;
+    /** Material Symbol icon name */
+    icon?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Destructive / danger styling (red text) for delete, remove, etc. */
+    destructive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Nested sub-menu items */
+    children?: DropdownMenuEntry[];
+}
+export interface DropdownMenuSeparator {
+    type: 'separator';
+}
+export interface DropdownMenuGroup {
+    type: 'group';
+    /** Section heading */
+    label: string;
+    /** Items within the group */
+    items: DropdownMenuEntry[];
+}
+export type DropdownMenuEntry = DropdownMenuItem | DropdownMenuSeparator | DropdownMenuGroup;
+export interface DropdownMenuProps {
+    /** Trigger element that opens the menu */
+    trigger: React.ReactNode;
+    /** Menu entries (items, groups, separators) */
+    items: DropdownMenuEntry[];
+    /** Horizontal alignment of the panel */
+    align?: 'start' | 'end';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DropdownMenu: ({ trigger, items, align, size, className, }: DropdownMenuProps) => React.JSX.Element;

package/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,322 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import "./DropdownMenu.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(
+          MenuPanel,
+          {
+            entries: item.children,
+            baseClass,
+            size,
+            isSubmenu: true,
+            onItemActivate: onActivate
+          }
+        )
+      ]
+    }
+  );
+};
+const MenuPanel = ({
+  entries,
+  baseClass,
+  size,
+  isSubmenu = false,
+  onItemActivate
+}) => {
+  const panelClasses = [
+    `${baseClass}__panel`,
+    isSubmenu ? `${baseClass}__submenu` : "",
+    size === "compact" ? `${baseClass}__panel--compact` : ""
+  ].filter(Boolean).join(" ");
+  const renderEntry = (entry, index) => {
+    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: "group", "aria-label": entry.label, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, children: entry.label }),
+        /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", children: entry.items.map((subEntry, subIndex) => renderEntry(subEntry, subIndex)) })
+      ] }, `group-${index}`);
+    }
+    if (entry.children && entry.children.length > 0) {
+      return /* @__PURE__ */ jsx(
+        SubMenuItem,
+        {
+          item: entry,
+          baseClass,
+          focused: false,
+          size,
+          onActivate: onItemActivate
+        },
+        `submenu-${index}`
+      );
+    }
+    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?.();
+            onItemActivate();
+          }
+        },
+        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}`
+    );
+  };
+  return /* @__PURE__ */ jsx("ul", { className: panelClasses, role: "menu", children: entries.map((entry, index) => renderEntry(entry, index)) });
+};
+const DropdownMenu = ({
+  trigger,
+  items,
+  align = "start",
+  size = "default",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const panelRef = useRef(null);
+  const baseClass = "ds-dropdown-menu";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const flatItems = collectItems(items);
+  const handleToggle = () => {
+    setIsOpen((prev) => {
+      if (!prev) setFocusedIndex(-1);
+      return !prev;
+    });
+  };
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        handleClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [handleClose]);
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(0);
+        } else if (focusedIndex >= 0) {
+          const item = flatItems[focusedIndex];
+          if (item && !item.disabled && !item.children) {
+            item.onClick?.();
+            handleClose();
+          }
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(0);
+        } else {
+          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();
+        if (isOpen) {
+          setFocusedIndex((prev) => {
+            let next = prev - 1;
+            while (next >= 0 && flatItems[next].disabled) next--;
+            return next >= 0 ? next : prev;
+          });
+        }
+        break;
+      case "Escape":
+      case "Tab":
+        handleClose();
+        break;
+    }
+  };
+  useEffect(() => {
+    if (isOpen && focusedIndex >= 0 && panelRef.current) {
+      const allItems = panelRef.current.querySelectorAll(`[role="menuitem"]`);
+      const el = allItems[focusedIndex];
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIndex, isOpen]);
+  const renderPanelEntry = (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) => renderPanelEntry(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`,
+    align === "end" ? `${baseClass}__panel--align-end` : "",
+    size === "compact" ? `${baseClass}__panel--compact` : ""
+  ].filter(Boolean).join(" ");
+  const itemCounter = { count: 0 };
+  return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${baseClass}__trigger`,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: panelClasses,
+        role: "menu",
+        ref: (el) => {
+          panelRef.current = el;
+        },
+        children: items.map((entry, index) => renderPanelEntry(entry, index, itemCounter))
+      }
+    )
+  ] });
+};
+export {
+  DropdownMenu
+};