@robr0/design-system 0.1.0

package/components/Combobox/Combobox.js

@@ -0,0 +1,312 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
+import "./Combobox.css";
+import "../../fonts/material-symbols.css";
+const Combobox = ({
+  label,
+  placeholder = "Search…",
+  value,
+  options,
+  groups,
+  multiple = false,
+  size = "default",
+  disabled = false,
+  required = false,
+  error = false,
+  helperText,
+  loading = false,
+  emptyMessage = "No results found",
+  clearable = false,
+  onChange,
+  onSearchChange,
+  manualFiltering = false,
+  className = "",
+  ariaLabel,
+  name,
+  id
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const generatedId = useId();
+  const baseClass = "ds-combobox";
+  const isGrouped = Boolean(groups && groups.length > 0);
+  const inputId = id || name || generatedId;
+  const selectedValues = useMemo(() => {
+    if (value === void 0 || value === null) return [];
+    return Array.isArray(value) ? value : [value];
+  }, [value]);
+  const allOptions = useMemo(
+    () => isGrouped ? groups.flatMap((g) => g.options) : options,
+    [isGrouped, groups, options]
+  );
+  const matches = useCallback(
+    (option) => {
+      if (manualFiltering || query.trim() === "") return true;
+      return option.label.toLowerCase().includes(query.trim().toLowerCase());
+    },
+    [manualFiltering, query]
+  );
+  const filteredGroups = useMemo(() => {
+    if (!isGrouped) return [];
+    return groups.map((group) => ({ ...group, options: group.options.filter(matches) })).filter((group) => group.options.length > 0);
+  }, [isGrouped, groups, matches]);
+  const filteredOptions = useMemo(
+    () => isGrouped ? filteredGroups.flatMap((g) => g.options) : options.filter(matches),
+    [isGrouped, filteredGroups, options, matches]
+  );
+  const selectedOptions = useMemo(
+    () => selectedValues.map((v) => allOptions.find((opt) => opt.value === v)).filter((opt) => Boolean(opt)),
+    [selectedValues, allOptions]
+  );
+  const singleSelected = !multiple ? selectedOptions[0] : void 0;
+  const inputValue = isOpen || multiple ? query : singleSelected?.label ?? "";
+  const openMenu = () => {
+    if (disabled) return;
+    setIsOpen(true);
+    setFocusedIndex(-1);
+  };
+  const closeMenu = () => {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    setQuery("");
+  };
+  const emitChange = (next) => {
+    if (!onChange) return;
+    onChange(multiple ? next : next[0] ?? "");
+  };
+  const handleSelect = (option) => {
+    if (option.disabled) return;
+    if (multiple) {
+      const next = selectedValues.includes(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+      emitChange(next);
+      setQuery("");
+      setFocusedIndex(-1);
+      inputRef.current?.focus();
+    } else {
+      emitChange([option.value]);
+      closeMenu();
+      inputRef.current?.blur();
+    }
+  };
+  const handleRemove = (optionValue) => {
+    emitChange(selectedValues.filter((v) => v !== optionValue));
+    inputRef.current?.focus();
+  };
+  const handleClear = () => {
+    emitChange([]);
+    setQuery("");
+    inputRef.current?.focus();
+  };
+  const handleQueryChange = (next) => {
+    setQuery(next);
+    setFocusedIndex(-1);
+    if (!isOpen) setIsOpen(true);
+    onSearchChange?.(next);
+  };
+  const handleClickOutside = useCallback((e) => {
+    if (rootRef.current && !rootRef.current.contains(e.target)) {
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setQuery("");
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [handleClickOutside]);
+  const moveFocus = (direction) => {
+    setFocusedIndex((prev) => {
+      let next = prev + direction;
+      while (next >= 0 && next < filteredOptions.length && filteredOptions[next].disabled) {
+        next += direction;
+      }
+      if (next < 0 || next >= filteredOptions.length) return prev;
+      return next;
+    });
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          openMenu();
+        } else {
+          moveFocus(1);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (isOpen) moveFocus(-1);
+        break;
+      case "Enter":
+        if (isOpen && focusedIndex >= 0 && filteredOptions[focusedIndex]) {
+          e.preventDefault();
+          handleSelect(filteredOptions[focusedIndex]);
+        }
+        break;
+      case "Escape":
+        if (isOpen) {
+          e.preventDefault();
+          closeMenu();
+        }
+        break;
+      case "Backspace":
+        if (multiple && query === "" && selectedValues.length > 0) {
+          emitChange(selectedValues.slice(0, -1));
+        }
+        break;
+      case "Tab":
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        setQuery("");
+        break;
+    }
+  };
+  useEffect(() => {
+    if (!isOpen || focusedIndex < 0 || !listRef.current) return;
+    const active = listRef.current.querySelector(
+      `[data-option-index="${focusedIndex}"]`
+    );
+    active?.scrollIntoView({ block: "nearest" });
+  }, [focusedIndex, isOpen]);
+  const listboxId = `${inputId}-listbox`;
+  const activeOptionId = focusedIndex >= 0 && filteredOptions[focusedIndex] ? `${inputId}-option-${filteredOptions[focusedIndex].value}` : void 0;
+  const classes = [
+    baseClass,
+    size === "compact" ? `${baseClass}--compact` : "",
+    isOpen ? `${baseClass}--open` : "",
+    error ? `${baseClass}--error` : "",
+    disabled ? `${baseClass}--disabled` : "",
+    multiple ? `${baseClass}--multiple` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const renderOption = (option, index) => {
+    const isSelected = selectedValues.includes(option.value);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        id: `${inputId}-option-${option.value}`,
+        "data-option-index": index,
+        className: [
+          `${baseClass}__option`,
+          isSelected ? `${baseClass}__option--selected` : "",
+          option.disabled ? `${baseClass}__option--disabled` : "",
+          index === focusedIndex ? `${baseClass}__option--focused` : ""
+        ].filter(Boolean).join(" "),
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": option.disabled,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleSelect(option),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-text`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-label`, children: option.label }),
+            option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-description`, children: option.description })
+          ] }),
+          isSelected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
+        ]
+      },
+      option.value
+    );
+  };
+  const hasSelection = selectedValues.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__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 || (!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 })
+  ] });
+};
+export {
+  Combobox
+};

package/components/CommandPalette/CommandPalette.css

@@ -0,0 +1,310 @@
+/* ============================================
+   COMMAND PALETTE COMPONENT
+   Modal Cmd+K launcher over a grouped command list
+   ============================================ */
+
+.ds-command-palette {
+  position: fixed;
+  inset: 0;
+  z-index: 110; /* above Dialog and Drawer */
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--padding-xl) var(--padding-md);
+  opacity: 0;
+  visibility: hidden; /* also removes the input from the tab order */
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), visibility var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-command-palette--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.ds-command-palette__backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-scrim);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-command-palette__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 560px;
+  max-height: 60vh;
+  margin-top: 10vh;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-modal);
+  overflow: hidden;
+  transform: scale(0.98);
+  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-command-palette--open .ds-command-palette__panel {
+  transform: scale(1);
+}
+
+/* ============================================
+   SEARCH ROW
+   ============================================ */
+
+.ds-command-palette__search {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  padding: var(--padding-sm-md) var(--padding-md); /* 12px 16px */
+  border-bottom: var(--border-xs) solid var(--color-divider);
+  flex-shrink: 0;
+}
+
+.ds-command-palette__search-icon {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-command-palette__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-input-text-primary);
+}
+
+.ds-command-palette__input::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+.ds-command-palette__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-command-palette__close:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-command-palette__close:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-command-palette__close .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-command-palette__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--padding-xxs);
+}
+
+.ds-command-palette__status {
+  padding: var(--padding-lg);
+  text-align: center;
+  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;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.ds-command-palette__group + .ds-command-palette__group {
+  margin-top: var(--gap-xs); /* 4px */
+}
+
+.ds-command-palette__group-label {
+  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);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  padding: var(--padding-xs) var(--padding-sm-md);
+  margin: 0;
+  user-select: none;
+}
+
+/* ============================================
+   COMMAND ROW
+   ============================================ */
+
+.ds-command-palette__command {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm-md);
+  padding: var(--padding-sm) var(--padding-sm-md); /* 8px 12px */
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-command-palette__command--active {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-command-palette__command--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-command-palette__command-icon {
+  --icon-size: var(--icon-size-sm);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-command-palette__command-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-command-palette__command-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);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-command-palette__command-description {
+  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);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================
+   SHORTCUT KEYS
+   ============================================ */
+
+.ds-command-palette__shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  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);
+}
+
+/* ============================================
+   FOOTER HINTS
+   ============================================ */
+
+.ds-command-palette__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-md);
+  padding: var(--padding-sm) var(--padding-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.ds-command-palette__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  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);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
+@media (max-width: 480px) {
+  .ds-command-palette__panel {
+    margin-top: var(--gap-md);
+    max-height: 75vh;
+  }
+
+  .ds-command-palette__footer {
+    display: none;
+  }
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-command-palette,
+  .ds-command-palette__panel {
+    transition: none;
+  }
+}

package/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface CommandPaletteCommand {
+    /** Stable identifier */
+    id: string;
+    /** Display label — the primary text matched when filtering */
+    label: string;
+    /** Optional secondary line under the label */
+    description?: string;
+    /** Material Symbol icon name */
+    icon?: string;
+    /** Keyboard shortcut shown on the right, e.g. ['⌘', 'P'] */
+    shortcut?: string[];
+    /** Extra terms that should match this command when filtering */
+    keywords?: string[];
+    /** Whether the command is disabled */
+    disabled?: boolean;
+    /** Called when this command is chosen */
+    onSelect?: () => void;
+}
+export interface CommandPaletteGroup {
+    /** Group heading */
+    label: string;
+    /** Commands within the group */
+    commands: CommandPaletteCommand[];
+}
+export interface CommandPaletteProps {
+    /** Whether the palette is open */
+    open: boolean;
+    /** Callback when the palette requests to open or close */
+    onOpenChange: (open: boolean) => void;
+    /** Commands, grouped under headings */
+    groups: CommandPaletteGroup[];
+    /** Placeholder for the search field */
+    placeholder?: string;
+    /** Message shown when the query matches nothing */
+    emptyMessage?: string;
+    /** Show a loading affordance in place of results */
+    loading?: boolean;
+    /**
+     * Bind Cmd+K / Ctrl+K globally to toggle the palette. Set to false when the
+     * host app owns the shortcut.
+     */
+    hotkey?: boolean;
+    /** Called with the chosen command, after its own `onSelect` */
+    onSelect?: (command: CommandPaletteCommand) => void;
+    /** Called as the user types, for async/server-side search */
+    onSearchChange?: (query: string) => void;
+    /** Skip built-in filtering — use when commands are filtered upstream */
+    manualFiltering?: boolean;
+    /** Hide the hint row at the bottom of the panel */
+    hideFooter?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CommandPalette component — a modal Cmd+K launcher that searches a grouped
+ * command list. Filtering matches labels, descriptions, and keywords; the
+ * arrow keys move a highlight that stays in view, and Enter runs the command.
+ */
+export declare const CommandPalette: ({ open, onOpenChange, groups, placeholder, emptyMessage, loading, hotkey, onSelect, onSearchChange, manualFiltering, hideFooter, className, }: CommandPaletteProps) => React.ReactPortal | null;