rift-ds 1.0.0

package/components/Combobox/Combobox.js

@@ -0,0 +1,331 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+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 = React.forwardRef(({
+  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,
+  onValueChange,
+  onChange,
+  onSearchChange,
+  manualFiltering = false,
+  className = "",
+  ariaLabel,
+  name,
+  id,
+  ...rest
+}, ref) => {
+  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 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;
+  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) => {
+    const payload = multiple ? next : next[0] ?? "";
+    onValueChange?.(payload);
+    onChange?.(payload);
+  };
+  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(() => {
+    if (!isOpen) return;
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, 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(
+    Field,
+    {
+      ...rest,
+      className: classes,
+      ref: setRootRef,
+      label,
+      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}__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)))
+        ] })
+      ]
+    }
+  );
+});
+Combobox.displayName = "Combobox";
+export {
+  Combobox
+};

package/components/CommandPalette/CommandPalette.css

@@ -0,0 +1,342 @@
+/* ============================================
+   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-1000) var(--padding-400);
+  opacity: 0;
+  visibility: hidden; /* also removes the input from the tab order */
+  pointer-events: none;
+  /* Visibility waits out the fade only on close (duration token as delay);
+     on open it must flip instantly — the open effect focuses the input a
+     frame later, and focus() on a still-hidden element is a no-op, which
+     left the palette opening without its caret. */
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility 0s linear var(--motion-duration-fast);
+}
+
+.ds-command-palette--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility 0s;
+}
+
+/* ============================================
+   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-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600); /* 24px — the floating-surface shell */
+  background-color: var(--color-bg-glass);
+  box-shadow: var(--shadow-floating);
+  /* The glass token is deliberately translucent; this blur is what keeps
+     the page readable through the panel. */
+  backdrop-filter: blur(24px);
+  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-200); /* 8px */
+  padding: var(--padding-400) var(--padding-500); /* 16px 20px */
+  border-bottom: var(--border-025) solid var(--color-divider);
+  flex-shrink: 0;
+  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* The focused field marks the whole row with the active input border, the
+   same signal a focused Input gives its own edge. */
+.ds-command-palette__search:focus-within {
+  border-bottom-color: var(--color-input-border-selected);
+}
+
+.ds-command-palette__search-icon {
+  --icon-size: var(--icon-size-600);
+  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-pill);
+  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-500);
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-command-palette__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--padding-200);
+  /* Quiet scrollbar, ChatThread's recipe: thin and token-coloured instead
+     of the 15px native chrome rail a classic-scrollbar platform would draw
+     inside the panel. The stable gutter matters here because filtering
+     toggles overflow — without it every keystroke that crosses the
+     threshold reflows the rows sideways. */
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--color-divider) transparent;
+  /* The scroll lock lets wheel and touch through only inside this list, so
+     hitting its ends must not chain the leftover delta to the page. */
+  overscroll-behavior: contain;
+}
+
+.ds-command-palette__status {
+  padding: var(--padding-500);
+  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-100); /* 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-emphasis-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-150) var(--padding-300);
+  margin: 0;
+  user-select: none;
+}
+
+/* ============================================
+   COMMAND ROW
+   ============================================ */
+
+.ds-command-palette__command {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  padding: var(--padding-300); /* 12px — 8px list inset keeps the text edge on the search row's 20px */
+  border-radius: var(--radius-200);
+  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-500);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-command-palette__command-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-command-palette__command-label {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-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-050);
+  flex-shrink: 0;
+}
+
+/* Keycaps render through the Kbd component (compact size) */
+
+/* The trailing slot: an arbitrary badge or affordance at the row's right
+   edge, after any keycaps. The row's gap spaces it; it never shrinks, so
+   the label and description ellipsize first. */
+.ds-command-palette__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   FOOTER HINTS
+   ============================================ */
+
+.ds-command-palette__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-400);
+  padding: var(--padding-300) var(--padding-500);
+  border-top: var(--border-025) solid var(--color-divider);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.ds-command-palette__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+  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-400);
+    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;
+  }
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-command-palette .material-symbols-rounded {
+  color: inherit;
+}