@robr0/design-system 0.1.0 → 0.3.0

package/components/Combobox/Combobox.js

@@ -1,8 +1,9 @@
 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 { Field } from "../Field/Field.js";
 import "./Combobox.css";
 import "../../fonts/material-symbols.css";
-const Combobox = ({
+const Combobox = React.forwardRef(({
   label,
   placeholder = "Search…",
   value,
@@ -17,14 +18,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 +35,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 +83,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,98 +224,106 @@ const Combobox = ({
     );
   };
   const hasSelection = selectedValues.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      ...rest,
+      className: classes,
+      ref: setRootRef,
       label,
-      required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-        " ",
-        "*"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__control`, onClick: () => inputRef.current?.focus(), children: [
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__search-icon material-symbols-rounded`, "aria-hidden": "true", children: "search" }),
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field`, children: [
-        multiple && selectedOptions.map((option) => /* @__PURE__ */ jsxs("span", { className: `${baseClass}__chip`, children: [
-          option.label,
-          /* @__PURE__ */ jsx(
+      helperText,
+      error,
+      required,
+      disabled,
+      size,
+      id: inputId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__control`, onClick: () => inputRef.current?.focus(), children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__search-icon material-symbols-rounded`, "aria-hidden": "true", children: "search" }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field`, children: [
+            multiple && selectedOptions.map((option) => /* @__PURE__ */ jsxs("span", { className: `${baseClass}__chip`, children: [
+              option.label,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__chip-remove`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleRemove(option.value);
+                  },
+                  disabled,
+                  "aria-label": `Remove ${option.label}`,
+                  children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                }
+              )
+            ] }, option.value)),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                name,
+                type: "text",
+                className: `${baseClass}__input`,
+                role: "combobox",
+                autoComplete: "off",
+                "aria-expanded": isOpen,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeOptionId,
+                "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,
+                placeholder: multiple && hasSelection ? "" : placeholder,
+                value: inputValue,
+                disabled,
+                onChange: (e) => handleQueryChange(e.target.value),
+                onFocus: openMenu,
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          clearable && hasSelection && !disabled && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `${baseClass}__chip-remove`,
+              className: `${baseClass}__clear`,
               onClick: (e) => {
                 e.stopPropagation();
-                handleRemove(option.value);
+                handleClear();
               },
-              disabled,
-              "aria-label": `Remove ${option.label}`,
+              "aria-label": "Clear selection",
               children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
             }
-          )
-        ] }, option.value)),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            id: inputId,
-            name,
-            type: "text",
-            className: `${baseClass}__input`,
-            role: "combobox",
-            autoComplete: "off",
-            "aria-expanded": isOpen,
-            "aria-controls": listboxId,
-            "aria-autocomplete": "list",
-            "aria-activedescendant": activeOptionId,
-            "aria-label": ariaLabel || (!label ? placeholder : void 0),
-            "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-            "aria-invalid": error || void 0,
-            "aria-required": required || void 0,
-            placeholder: multiple && hasSelection ? "" : placeholder,
-            value: inputValue,
-            disabled,
-            onChange: (e) => handleQueryChange(e.target.value),
-            onFocus: openMenu,
-            onKeyDown: handleKeyDown
-          }
-        )
-      ] }),
-      clearable && hasSelection && !disabled && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `${baseClass}__clear`,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleClear();
-          },
-          "aria-label": "Clear selection",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
-    ] }),
-    isOpen && /* @__PURE__ */ jsxs("ul", { className: `${baseClass}__menu`, role: "listbox", id: listboxId, ref: listRef, children: [
-      loading && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: "Loading…" }),
-      !loading && filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: emptyMessage }),
-      !loading && (isGrouped ? (() => {
-        let flatIndex = 0;
-        return filteredGroups.map((group) => /* @__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) => renderOption(option, flatIndex++))
-            }
-          )
-        ] }, group.label));
-      })() : filteredOptions.map((option, index) => renderOption(option, index)))
-    ] }),
-    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-  ] });
-};
+          ),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+        ] }),
+        isOpen && /* @__PURE__ */ jsxs("ul", { className: `${baseClass}__menu`, role: "listbox", id: listboxId, ref: listRef, children: [
+          loading && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: "Loading…" }),
+          !loading && filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__status`, role: "presentation", children: emptyMessage }),
+          !loading && (isGrouped ? (() => {
+            let flatIndex = 0;
+            return filteredGroups.map((group) => /* @__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) => renderOption(option, flatIndex++))
+                }
+              )
+            ] }, group.label));
+          })() : filteredOptions.map((option, index) => renderOption(option, index)))
+        ] })
+      ]
+    }
+  );
+});
+Combobox.displayName = "Combobox";
 export {
   Combobox
 };

package/components/CommandPalette/CommandPalette.css

@@ -241,21 +241,7 @@
   flex-shrink: 0;
 }
 
-.ds-command-palette__key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  padding: var(--padding-xxxs) var(--padding-xxs);
-  border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-xs);
-  background-color: var(--color-bg-container-primary);
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-em-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  color: var(--color-text-tertiary);
-}
+/* Keycaps render through the Kbd component (compact size) */
 
 /* ============================================
    FOOTER HINTS

package/components/CommandPalette/CommandPalette.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";
+import { Kbd } from "../Kbd/Kbd.js";
 import "./CommandPalette.css";
 import "../../fonts/material-symbols.css";
 const emptySubscribe = () => () => {
@@ -225,7 +226,7 @@ const CommandPalette = ({
                             /* @__PURE__ */ jsx("span", { className: `${baseClass}__command-label`, children: command.label }),
                             command.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__command-description`, children: command.description })
                           ] }),
-                          command.shortcut && command.shortcut.length > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: command.shortcut.map((key, i) => /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: key }, i)) })
+                          command.shortcut && command.shortcut.length > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: command.shortcut.map((key, i) => /* @__PURE__ */ jsx(Kbd, { size: "compact", children: key }, i)) })
                         ]
                       },
                       command.id
@@ -238,16 +239,16 @@ const CommandPalette = ({
           ] }),
           !hideFooter && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
             /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↑" }),
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↓" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "↑" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "↓" }),
               "to navigate"
             ] }),
             /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "↵" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "↵" }),
               "to select"
             ] }),
             /* @__PURE__ */ jsxs("span", { className: `${baseClass}__hint`, children: [
-              /* @__PURE__ */ jsx("kbd", { className: `${baseClass}__key`, children: "esc" }),
+              /* @__PURE__ */ jsx(Kbd, { size: "compact", children: "esc" }),
               "to close"
             ] })
           ] })

package/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,262 @@
+/* ============================================
+   CONTEXT MENU COMPONENT
+   Right-click menu anchored at the pointer.
+   Panel and item styling mirror DropdownMenu.
+   ============================================ */
+
+/* Base — a plain block wrapper around the right-clickable area
+   (a real box, so the keyboard-invocation fallback can measure it) */
+.ds-context-menu {
+  display: block;
+}
+
+/* ============================================
+   PANEL
+   Fixed-positioned at the pointer; left/top are
+   set inline from the contextmenu event coords.
+   ============================================ */
+
+.ds-context-menu__panel {
+  position: fixed;
+  z-index: 50;
+  min-width: 200px;
+
+  /* Appearance — same recipe as DropdownMenu */
+  background: var(--color-bg-page-primary);
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+
+  /* Inset gap */
+  padding: var(--padding-xxs);
+
+  /* Reset list */
+  list-style: none;
+  margin: 0;
+
+  outline: none;
+
+  /* Animation */
+  animation: ds-context-menu-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+/* Compact items: paragraph-sm-em, tighter padding, radius-sm */
+.ds-context-menu__panel--compact .ds-context-menu__item {
+  padding: var(--padding-xs) var(--padding-sm-md);
+  border-radius: var(--radius-sm);
+  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);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__item-icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__submenu-icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__group-label {
+  min-height: auto;
+  padding: var(--padding-xs) var(--padding-sm-md);
+  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);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__separator {
+  margin: var(--padding-xxs) var(--padding-sm-md);
+}
+
+.ds-context-menu__panel--compact .ds-context-menu__shortcut {
+  font-size: var(--font-caption-size);
+}
+
+/* ============================================
+   SUB-MENU PANEL
+   Positioned relative to its parent item.
+   ============================================ */
+
+.ds-context-menu__submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin-left: var(--gap-xxs);
+}
+
+/* ============================================
+   MENU ITEM
+   ============================================ */
+
+.ds-context-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  padding: var(--padding-sm) var(--padding-md);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  list-style: none;
+
+  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-context-menu__item:hover,
+.ds-context-menu__item--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* States — disabled */
+.ds-context-menu__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-context-menu__item--disabled:hover,
+.ds-context-menu__item--disabled.ds-context-menu__item--focused {
+  background-color: transparent;
+}
+
+/* ============================================
+   ITEM LABEL (text + optional icon)
+   ============================================ */
+
+.ds-context-menu__item-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  line-height: 1;
+}
+
+.ds-context-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-context-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
+   ============================================ */
+
+.ds-context-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;
+}
+
+.ds-context-menu__item--has-submenu {
+  padding-right: var(--padding-sm-md);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.ds-context-menu__separator {
+  height: 1px;
+  background: var(--color-input-border-primary);
+  margin: var(--padding-xxs) var(--padding-md);
+  list-style: none;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.ds-context-menu__group {
+  list-style: none;
+}
+
+.ds-context-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-context-menu__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   DESTRUCTIVE ITEM
+   ============================================ */
+
+.ds-context-menu__item--destructive {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-context-menu__item--destructive .ds-context-menu__item-icon {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-context-menu__item--destructive .ds-context-menu__shortcut {
+  color: var(--color-core-accent-coral);
+  opacity: 0.7;
+}
+
+.ds-context-menu__item--destructive:hover,
+.ds-context-menu__item--destructive.ds-context-menu__item--focused {
+  background-color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   APPEAR ANIMATION
+   ============================================ */
+
+@keyframes ds-context-menu-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { DropdownMenuEntry } from '../DropdownMenu/DropdownMenu';
+/** Props owned by ContextMenu itself — everything else falls through to the wrapper div. */
+type ContextMenuOwnProps = {
+    /** Menu entries — the same model as DropdownMenu (items, groups, separators) */
+    items: DropdownMenuEntry[];
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Accessible name for the menu */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** The right-clickable area the menu is attached to */
+    children: React.ReactNode;
+};
+export interface ContextMenuProps extends ContextMenuOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ContextMenuOwnProps> {
+}
+/**
+ * ContextMenu opens a floating menu at the pointer position when the wrapped
+ * area is right-clicked (or the keyboard ContextMenu / Shift+F10 key is used).
+ * Entries use the same model as DropdownMenu — items, groups, separators,
+ * icons, shortcut hints, destructive and disabled states, and one level of
+ * sub-menus.
+ */
+export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};