@robr0/design-system 0.1.0

package/components/Dropdown/Dropdown.css

@@ -0,0 +1,300 @@
+/* ============================================
+   DROPDOWN COMPONENT
+   Custom select with menu, keyboard navigation
+   ============================================ */
+
+.ds-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm); /* 8px */
+  width: 100%;
+  position: relative;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-dropdown__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);
+}
+
+.ds-dropdown__required {
+  color: var(--color-core-accent-coral);
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm); /* 8px */
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 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
+   ============================================ */
+
+.ds-dropdown__value {
+  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-input-text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-dropdown__value--placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* ============================================
+   CHEVRON
+   ============================================ */
+
+.ds-dropdown__chevron {
+  --icon-size: var(--icon-size-md);
+  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-xxs); /* 2px */
+  padding: var(--padding-xxs); /* inset gap on all sides */
+  border: var(--border-xs) solid var(--color-input-border-primary);
+  border-radius: var(--radius-md); /* 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-sm) var(--padding-sm-md); /* 8px 12px */
+  border-radius: var(--radius-sm);
+  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);
+  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-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);
+  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-xxs) var(--padding-sm);
+  list-style: none;
+}
+
+/* ============================================
+   CHECK ICON
+   ============================================ */
+
+.ds-dropdown__check {
+  --icon-size: var(--icon-size-md);
+  color: var(--color-action-primary-bg);
+}
+
+/* ============================================
+   HELPER TEXT
+   ============================================ */
+
+.ds-dropdown__helper {
+  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;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-dropdown--error .ds-dropdown__trigger {
+  border-color: var(--color-status-error-border);
+}
+
+.ds-dropdown--error .ds-dropdown__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-dropdown--disabled .ds-dropdown__label {
+  color: var(--color-input-text-disabled);
+}
+
+.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-xs) var(--padding-sm-md); /* 6px 12px */
+}
+
+.ds-dropdown--compact .ds-dropdown__value {
+  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-dropdown--compact .ds-dropdown__chevron {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-dropdown--compact .ds-dropdown__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+}
+
+.ds-dropdown--compact .ds-dropdown__option {
+  padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
+  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-dropdown--compact .ds-dropdown__group-label {
+  font-size: var(--font-caption-size);
+  line-height: var(--font-caption-line-height);
+}
+
+.ds-dropdown--compact .ds-dropdown__check {
+  --icon-size: var(--icon-size-sm);
+}

package/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+export interface DropdownOption {
+    /** Display label */
+    label: string;
+    /** Option value */
+    value: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+export interface DropdownOptionGroup {
+    /** Group heading */
+    label: string;
+    /** Options within the group */
+    options: DropdownOption[];
+}
+export interface DropdownProps {
+    /** 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;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label override */
+    ariaLabel?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** HTML id attribute */
+    id?: string;
+}
+export declare const Dropdown: ({ label, placeholder, value, options, groups, size, disabled, required, error, helperText, onChange, className, ariaLabel, name, id, }: DropdownProps) => React.JSX.Element;

package/components/Dropdown/Dropdown.js

@@ -0,0 +1,196 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import "./Dropdown.css";
+import "../../fonts/material-symbols.css";
+const Dropdown = ({
+  label,
+  placeholder = "Select an option",
+  value,
+  options,
+  groups,
+  size = "default",
+  disabled = false,
+  required = false,
+  error = false,
+  helperText,
+  onChange,
+  className = "",
+  ariaLabel,
+  name,
+  id
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const listRef = useRef(null);
+  const baseClass = "ds-dropdown";
+  const isGrouped = groups && groups.length > 0;
+  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
+  const openClass = isOpen ? `${baseClass}--open` : "";
+  const errorClass = error ? `${baseClass}--error` : "";
+  const disabledClass = disabled ? `${baseClass}--disabled` : "";
+  const classes = [baseClass, sizeClass, openClass, errorClass, disabledClass, 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) => {
+    if (onChange) {
+      onChange(optionValue);
+    }
+    setIsOpen(false);
+  };
+  const handleClickOutside = useCallback((e) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setIsOpen(false);
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [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 "Escape":
+        setIsOpen(false);
+        break;
+      case "Tab":
+        setIsOpen(false);
+        break;
+    }
+  };
+  useEffect(() => {
+    if (isOpen && focusedIndex >= 0 && listRef.current) {
+      const focusedEl = listRef.current.children[focusedIndex];
+      focusedEl?.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIndex, isOpen]);
+  return /* @__PURE__ */ jsxs("div", { className: classes, ref: dropdownRef, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, id: `${inputId}-label`, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: `${baseClass}__required`, "aria-hidden": "true", 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 || (!label ? placeholder : void 0),
+        "aria-controls": `${inputId}-listbox`,
+        tabIndex: disabled ? -1 : 0,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__value ${!selectedOption ? `${baseClass}__value--placeholder` : ""}`, children: 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",
+                {
+                  className: [
+                    `${baseClass}__option`,
+                    option.value === value ? `${baseClass}__option--selected` : "",
+                    option.disabled ? `${baseClass}__option--disabled` : "",
+                    myIndex === focusedIndex ? `${baseClass}__option--focused` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "option",
+                  "aria-selected": option.value === value,
+                  "aria-disabled": option.disabled,
+                  onClick: () => !option.disabled && handleSelect(option.value),
+                  children: [
+                    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",
+          {
+            className: [
+              `${baseClass}__option`,
+              option.value === value ? `${baseClass}__option--selected` : "",
+              option.disabled ? `${baseClass}__option--disabled` : "",
+              index === focusedIndex ? `${baseClass}__option--focused` : ""
+            ].filter(Boolean).join(" "),
+            role: "option",
+            "aria-selected": option.value === value,
+            "aria-disabled": option.disabled,
+            onClick: () => !option.disabled && handleSelect(option.value),
+            children: [
+              option.label,
+              option.value === value && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
+            ]
+          },
+          option.value
+        ))
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
+  ] });
+};
+export {
+  Dropdown
+};