rift-ds 1.0.0

package/components/Dropdown/Dropdown.css

@@ -0,0 +1,288 @@
+/* ============================================
+   DROPDOWN COMPONENT
+   Custom select with menu, keyboard navigation
+   ============================================ */
+
+.ds-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+  position: relative;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200); /* 8px */
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-input-bg-primary);
+  cursor: pointer;
+  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
+  outline: none;
+}
+
+.ds-dropdown__trigger:hover:not(:focus-visible) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-dropdown__trigger:focus-visible {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-dropdown--open .ds-dropdown__trigger {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   VALUE / PLACEHOLDER
+   ============================================ */
+
+/* The selected option's preview face (--ds-dropdown-font, set per option
+   from the `font` option field) wins over the theme face when present. */
+.ds-dropdown__value {
+  font-family: var(--ds-dropdown-font, 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-input-text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-dropdown__value--placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* An option's icon, on the closed trigger — inline with the text so the
+   value keeps its single-line ellipsis. */
+.ds-dropdown__value-icon {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  vertical-align: text-bottom;
+  margin-right: var(--gap-100);
+}
+
+/* ============================================
+   CHEVRON
+   ============================================ */
+
+.ds-dropdown__chevron {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-primary);
+  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
+  flex-shrink: 0;
+}
+
+.ds-dropdown--open .ds-dropdown__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   MENU
+   ============================================ */
+
+.ds-dropdown__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--gap-050); /* 2px */
+  padding: var(--padding-100); /* inset gap on all sides */
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--radius-300); /* 12px */
+  background-color: var(--color-bg-page-primary);
+  list-style: none;
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--shadow-floating);
+
+  /* Animation */
+  animation: ds-dropdown-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+@keyframes ds-dropdown-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   OPTION (with inset-gap hover)
+   ============================================ */
+
+.ds-dropdown__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-200) var(--padding-300); /* 8px 12px */
+  border-radius: var(--radius-200);
+  font-family: var(--ds-dropdown-font, 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);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-dropdown__option:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-dropdown__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-dropdown__option--selected {
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-dropdown__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-dropdown__option--disabled:hover {
+  background-color: transparent;
+}
+
+/* ============================================
+   GROUPED MODE
+   ============================================ */
+
+.ds-dropdown__group {
+  list-style: none;
+}
+
+.ds-dropdown__group-label {
+  display: block;
+  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);
+  user-select: none;
+}
+
+.ds-dropdown__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ds-dropdown__separator {
+  height: 1px;
+  background: var(--color-bg-container-border);
+  margin: var(--padding-100) var(--padding-200);
+  list-style: none;
+}
+
+/* ============================================
+   CHECK ICON
+   ============================================ */
+
+.ds-dropdown__check {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-action-primary-bg);
+}
+
+/* The option row's icon-and-label cluster, so the selected check keeps its
+   own end of the space-between row. */
+.ds-dropdown__option-content {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+.ds-dropdown__option-icon {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-dropdown--error .ds-dropdown__trigger {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-dropdown--disabled .ds-dropdown__trigger {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  cursor: not-allowed;
+}
+
+.ds-dropdown--disabled .ds-dropdown__value {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-dropdown--disabled .ds-dropdown__chevron {
+  color: var(--color-input-text-disabled);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-dropdown--compact .ds-dropdown__trigger {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+}
+
+.ds-dropdown--compact .ds-dropdown__value {
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+.ds-dropdown--compact .ds-dropdown__chevron {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-dropdown--compact .ds-dropdown__option {
+  padding: var(--padding-150) var(--padding-200); /* 6px 8px */
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+}
+
+/* Compact group labels keep the base --font-paragraph-sm-* type — the
+   scale has no smaller step. */
+
+.ds-dropdown--compact .ds-dropdown__check {
+  --icon-size: var(--icon-size-500);
+}

package/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,85 @@
+import { default as React } from 'react';
+export interface DropdownOption {
+    /** Display label */
+    label: string;
+    /** Option value */
+    value: string;
+    /**
+     * CSS font-family stack to render this option's label in, so a typeface
+     * can preview itself in a font picker. Applies to the option row and to
+     * the closed trigger while the option is selected; omitted, the label
+     * keeps the theme's own face.
+     */
+    font?: string;
+    /**
+     * Icon drawn before the label, in the option row and on the closed
+     * trigger while the option is selected — Material Symbol name (string)
+     * or custom element (ReactNode).
+     */
+    icon?: string | React.ReactNode;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+export interface DropdownOptionGroup {
+    /** Group heading */
+    label: string;
+    /** Options within the group */
+    options: DropdownOption[];
+}
+/** Props owned by Dropdown itself — everything else falls through to the wrapper. */
+type DropdownOwnProps = {
+    /** Dropdown label text */
+    label?: string;
+    /** Placeholder when no value selected */
+    placeholder?: string;
+    /** Currently selected value */
+    value?: string;
+    /** Available options (flat list) */
+    options: DropdownOption[];
+    /** Optional grouped options — when provided, renders groups with labels and separators */
+    groups?: DropdownOptionGroup[];
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Whether the dropdown is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown is required */
+    required?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Helper or error message */
+    helperText?: string;
+    /** Called with the newly selected value */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Used only as a fallback for deriving the element id (`id || name || label`).
+     *
+     * Note: Dropdown renders a `<div role="combobox">`, not a native `<select>`,
+     * so `name` does **not** make it participate in native form submission.
+     */
+    name?: string;
+};
+export interface DropdownProps extends DropdownOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DropdownOwnProps> {
+}
+/**
+ * Static single-select dropdown. Renders a `<div role="combobox">` paired with a
+ * `role="listbox"` menu; supports flat and grouped options with full keyboard
+ * navigation.
+ *
+ * Forwards a ref to the wrapping element and spreads unrecognised props onto it.
+ */
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Dropdown/Dropdown.js

@@ -0,0 +1,308 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Field } from "../Field/Field.js";
+import "./Dropdown.css";
+import "../../fonts/material-symbols.css";
+const fontStyle = (font) => font ? { "--ds-dropdown-font": font } : void 0;
+const Dropdown = React.forwardRef(
+  ({
+    label,
+    placeholder = "Select an option",
+    value,
+    options,
+    groups,
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onValueChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const dropdownRef = useRef(null);
+    const listRef = useRef(null);
+    const setRootRef = (node) => {
+      dropdownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const baseClass = "ds-dropdown";
+    const isGrouped = groups && groups.length > 0;
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      isOpen ? `${baseClass}--open` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const flatOptions = isGrouped ? groups.flatMap((g) => g.options) : options;
+    const selectedOption = flatOptions.find((opt) => opt.value === value);
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const handleToggle = () => {
+      if (!disabled) {
+        setIsOpen((prev) => !prev);
+        setFocusedIndex(-1);
+      }
+    };
+    const handleSelect = (optionValue) => {
+      onValueChange?.(optionValue);
+      onChange?.(optionValue);
+      setIsOpen(false);
+    };
+    const handleClickOutside = useCallback((e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }, []);
+    useEffect(() => {
+      if (!isOpen) return;
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, handleClickOutside]);
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (isOpen && focusedIndex >= 0 && !flatOptions[focusedIndex]?.disabled) {
+            handleSelect(flatOptions[focusedIndex].value);
+          } else {
+            setIsOpen((prev) => !prev);
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) => {
+              let next = prev + 1;
+              while (next < flatOptions.length && flatOptions[next].disabled) next++;
+              return next < flatOptions.length ? next : prev;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => {
+              let next = prev - 1;
+              while (next >= 0 && flatOptions[next].disabled) next--;
+              return next >= 0 ? next : prev;
+            });
+          }
+          break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            const first = flatOptions.findIndex((opt) => !opt.disabled);
+            if (first >= 0) setFocusedIndex(first);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            let last = flatOptions.length - 1;
+            while (last >= 0 && flatOptions[last].disabled) last--;
+            if (last >= 0) setFocusedIndex(last);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+        case "Tab":
+          setIsOpen(false);
+          break;
+      }
+    };
+    useEffect(() => {
+      if (isOpen && focusedIndex >= 0 && listRef.current) {
+        const focusedEl = document.getElementById(`${inputId}-option-${focusedIndex}`);
+        focusedEl?.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedIndex, isOpen, inputId]);
+    const activeOptionId = isOpen && focusedIndex >= 0 && flatOptions[focusedIndex] ? `${inputId}-option-${focusedIndex}` : void 0;
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ...rest,
+        className: classes,
+        ref: setRootRef,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${baseClass}__trigger`,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-labelledby": label ? `${inputId}-label` : void 0,
+              "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
+              "aria-controls": isOpen ? `${inputId}-listbox` : void 0,
+              "aria-activedescendant": activeOptionId,
+              "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
+              "aria-invalid": error || void 0,
+              tabIndex: disabled ? -1 : 0,
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`,
+                    style: fontStyle(selectedOption?.font),
+                    children: [
+                      selectedOption?.icon && (typeof selectedOption.icon === "string" ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__value-icon material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: selectedOption.icon
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-icon`, "aria-hidden": "true", children: selectedOption.icon })),
+                      selectedOption ? selectedOption.label : placeholder
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: [`${baseClass}__menu`, isGrouped ? `${baseClass}__menu--grouped` : ""].filter(Boolean).join(" "),
+              role: "listbox",
+              id: `${inputId}-listbox`,
+              ref: listRef,
+              "aria-labelledby": label ? `${inputId}-label` : void 0,
+              children: isGrouped ? (() => {
+                let flatIndex = 0;
+                return groups.map((group, groupIdx) => /* @__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) => {
+                        const myIndex = flatIndex++;
+                        return /* @__PURE__ */ jsxs(
+                          "li",
+                          {
+                            id: `${inputId}-option-${myIndex}`,
+                            className: [
+                              `${baseClass}__option`,
+                              option.value === value ? `${baseClass}__option--selected` : "",
+                              option.disabled ? `${baseClass}__option--disabled` : "",
+                              myIndex === focusedIndex ? `${baseClass}__option--focused` : ""
+                            ].filter(Boolean).join(" "),
+                            style: fontStyle(option.font),
+                            role: "option",
+                            "aria-selected": option.value === value,
+                            "aria-disabled": option.disabled,
+                            onClick: () => !option.disabled && handleSelect(option.value),
+                            children: [
+                              /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-content`, children: [
+                                option.icon && (typeof option.icon === "string" ? /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: `${baseClass}__option-icon material-symbols-rounded`,
+                                    "aria-hidden": "true",
+                                    children: option.icon
+                                  }
+                                ) : /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: `${baseClass}__option-icon`,
+                                    "aria-hidden": "true",
+                                    children: option.icon
+                                  }
+                                )),
+                                option.label
+                              ] }),
+                              option.value === value && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: `${baseClass}__check material-symbols-rounded`,
+                                  "aria-hidden": "true",
+                                  children: "check"
+                                }
+                              )
+                            ]
+                          },
+                          option.value
+                        );
+                      })
+                    }
+                  ),
+                  groupIdx < groups.length - 1 && /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" })
+                ] }, `group-${groupIdx}`));
+              })() : options.map((option, index) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  id: `${inputId}-option-${index}`,
+                  className: [
+                    `${baseClass}__option`,
+                    option.value === value ? `${baseClass}__option--selected` : "",
+                    option.disabled ? `${baseClass}__option--disabled` : "",
+                    index === focusedIndex ? `${baseClass}__option--focused` : ""
+                  ].filter(Boolean).join(" "),
+                  style: fontStyle(option.font),
+                  role: "option",
+                  "aria-selected": option.value === value,
+                  "aria-disabled": option.disabled,
+                  onClick: () => !option.disabled && handleSelect(option.value),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-content`, children: [
+                      option.icon && (typeof option.icon === "string" ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__option-icon material-symbols-rounded`,
+                          "aria-hidden": "true",
+                          children: option.icon
+                        }
+                      ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-icon`, "aria-hidden": "true", children: option.icon })),
+                      option.label
+                    ] }),
+                    option.value === value && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__check material-symbols-rounded`,
+                        "aria-hidden": "true",
+                        children: "check"
+                      }
+                    )
+                  ]
+                },
+                option.value
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Dropdown.displayName = "Dropdown";
+export {
+  Dropdown
+};