rift-ds 1.0.0

package/components/RichDropdown/RichDropdown.css

@@ -0,0 +1,239 @@
+/* ============================================
+   RICH DROPDOWN COMPONENT
+   Select whose options preview their own look
+   ============================================ */
+
+/* Base */
+
+.ds-rich-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+  width: 100%;
+  position: relative;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-rich-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-rich-dropdown__trigger:hover:not(:focus-visible) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-rich-dropdown__trigger:focus-visible {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-rich-dropdown--open .ds-rich-dropdown__trigger {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-rich-dropdown__placeholder {
+  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-input-text-placeholder);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================
+   CELL (shared by trigger and options)
+   ============================================ */
+
+.ds-rich-dropdown__cell {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300); /* 12px */
+  flex: 1;
+  min-width: 0;
+}
+
+/* Same geometry as Swatch's default tile: a fixed dot with a hairline
+   inset so very light colours stay visible on the input floor. The radius
+   is per-option runtime data — an option with sharp corners squares its
+   own swatch — with the full circle as the default. */
+.ds-rich-dropdown__swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ds-rich-dropdown-swatch-radius, var(--radius-pill));
+  background-color: var(--ds-rich-dropdown-color);
+  box-shadow: inset 0 0 0 var(--border-025) var(--color-bg-container-border);
+  flex-shrink: 0;
+}
+
+.ds-rich-dropdown__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+  min-width: 0;
+}
+
+/* The name wears the option's own heading face; the theme's heading role
+   is the fallback so an option with no fonts still reads as a title. */
+.ds-rich-dropdown__name {
+  font-family: var(--ds-rich-dropdown-heading-font, var(--font-family-heading));
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The detail line wears the option's body face. */
+.ds-rich-dropdown__detail {
+  font-family: var(--ds-rich-dropdown-body-font, var(--font-family-body));
+  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;
+}
+
+/* ============================================
+   CHEVRON
+   ============================================ */
+
+.ds-rich-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-rich-dropdown--open .ds-rich-dropdown__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   MENU
+   ============================================ */
+
+.ds-rich-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: 320px; /* taller cells than Dropdown's plain rows */
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--shadow-floating);
+
+  /* Animation */
+  animation: ds-rich-dropdown-appear var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+@keyframes ds-rich-dropdown-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   OPTION (with inset-gap hover)
+   ============================================ */
+
+.ds-rich-dropdown__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200); /* 8px */
+  padding: var(--padding-200) var(--padding-300); /* 8px 12px */
+  border-radius: var(--radius-200);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-rich-dropdown__option:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-rich-dropdown__option--focused {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-rich-dropdown__option--selected .ds-rich-dropdown__name {
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-rich-dropdown__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-rich-dropdown__option--disabled:hover {
+  background-color: transparent;
+}
+
+/* ============================================
+   CHECK ICON
+   ============================================ */
+
+.ds-rich-dropdown__check {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-action-primary-bg);
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.ds-rich-dropdown--error .ds-rich-dropdown__trigger {
+  border-color: var(--color-status-error-border);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-rich-dropdown--disabled .ds-rich-dropdown__trigger {
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+  cursor: not-allowed;
+}
+
+.ds-rich-dropdown--disabled .ds-rich-dropdown__name,
+.ds-rich-dropdown--disabled .ds-rich-dropdown__detail,
+.ds-rich-dropdown--disabled .ds-rich-dropdown__placeholder {
+  color: var(--color-input-text-disabled);
+}
+
+.ds-rich-dropdown--disabled .ds-rich-dropdown__chevron {
+  color: var(--color-input-text-disabled);
+}

package/components/RichDropdown/RichDropdown.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+export interface RichDropdownOption {
+    /** Display name of the option, rendered in its own heading face. */
+    label: string;
+    /** Stable identifier reported through `onValueChange`. */
+    value: string;
+    /**
+     * CSS font-family stack this option's headings use — the option name
+     * renders in it. Falls back to the theme's heading face when omitted.
+     */
+    headingFont?: string;
+    /**
+     * CSS font-family stack this option's body text uses — the detail line
+     * renders in it. Falls back to the theme's body face when omitted.
+     */
+    bodyFont?: string;
+    /** Key colour shown as the option's swatch dot — any valid CSS colour. */
+    color?: string;
+    /**
+     * Corner radius for the swatch, so the dot can carry the option's corner
+     * language too — a sharp-cornered look gets a square swatch. Any CSS
+     * radius value (`'0px'`, `'4px'`); the default is a full circle.
+     */
+    swatchRadius?: string;
+    /** One-line supporting text, typically the font pairing's names. */
+    description?: string;
+    /** Whether this option can be chosen. */
+    disabled?: boolean;
+}
+/** Props owned by RichDropdown itself — everything else falls through to the wrapper. */
+type RichDropdownOwnProps = {
+    /** Field label text */
+    label?: string;
+    /** Placeholder when no value selected */
+    placeholder?: string;
+    /** Selected option value for controlled use. Pair with `onValueChange`. */
+    value?: string;
+    /** Initially selected option value for uncontrolled use. */
+    defaultValue?: string;
+    /** The options on offer, in display order. */
+    options: RichDropdownOption[];
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether the picker is required */
+    required?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Helper or error message */
+    helperText?: string;
+    /** Fires with the newly selected option's value. */
+    onValueChange?: (value: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Used only as a fallback for deriving the element id (`id || name || label`).
+     *
+     * Note: RichDropdown renders a `<div role="combobox">`, not a native
+     * `<select>`, so `name` does **not** make it participate in native form
+     * submission.
+     */
+    name?: string;
+};
+export interface RichDropdownProps extends RichDropdownOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RichDropdownOwnProps> {
+}
+/**
+ * Dropdown's rich sibling: a select where every option is a self-portrait —
+ * the name set in the option's own heading face, a detail line in its body
+ * face, and a dot of its key colour. The closed trigger shows the selected
+ * option the same way. Built for theme and style presets, brand kits —
+ * anywhere the look being chosen can preview itself. When the label alone
+ * is enough (even in its own face), use Dropdown and its per-option `font`.
+ *
+ * Same combobox + listbox pattern as Dropdown, with full keyboard
+ * navigation. Forwards a ref to the wrapping element and spreads
+ * unrecognised props onto it.
+ */
+export declare const RichDropdown: React.ForwardRefExoticComponent<RichDropdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/RichDropdown/RichDropdown.js

@@ -0,0 +1,227 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Field } from "../Field/Field.js";
+import "./RichDropdown.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-rich-dropdown";
+const cellStyle = (option) => {
+  const style = {};
+  if (option.headingFont) style["--ds-rich-dropdown-heading-font"] = option.headingFont;
+  if (option.bodyFont) style["--ds-rich-dropdown-body-font"] = option.bodyFont;
+  if (option.color) style["--ds-rich-dropdown-color"] = option.color;
+  if (option.swatchRadius) style["--ds-rich-dropdown-swatch-radius"] = option.swatchRadius;
+  return style;
+};
+const OptionCell = ({ option }) => /* @__PURE__ */ jsxs("span", { className: `${baseClass}__cell`, style: cellStyle(option), children: [
+  option.color && /* @__PURE__ */ jsx("span", { className: `${baseClass}__swatch`, "aria-hidden": "true" }),
+  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: option.label }),
+    option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: option.description })
+  ] })
+] });
+const RichDropdown = React.forwardRef(
+  ({
+    label,
+    placeholder = "Select an option",
+    value,
+    defaultValue,
+    options,
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    onValueChange,
+    className = "",
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const rootRef = useRef(null);
+    const listRef = useRef(null);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const classes = [
+      baseClass,
+      isOpen ? `${baseClass}--open` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const selectedOption = options.find((opt) => opt.value === currentValue);
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const handleToggle = () => {
+      if (!disabled) {
+        setIsOpen((prev) => !prev);
+        setFocusedIndex(-1);
+      }
+    };
+    const handleSelect = (optionValue) => {
+      if (!isControlled) setUncontrolledValue(optionValue);
+      onValueChange?.(optionValue);
+      setIsOpen(false);
+    };
+    const handleClickOutside = useCallback((e) => {
+      if (rootRef.current && !rootRef.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 && !options[focusedIndex]?.disabled) {
+            handleSelect(options[focusedIndex].value);
+          } else {
+            setIsOpen((prev) => !prev);
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) => {
+              let next = prev + 1;
+              while (next < options.length && options[next].disabled) next++;
+              return next < options.length ? next : prev;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => {
+              let next = prev - 1;
+              while (next >= 0 && options[next].disabled) next--;
+              return next >= 0 ? next : prev;
+            });
+          }
+          break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            const first = options.findIndex((opt) => !opt.disabled);
+            if (first >= 0) setFocusedIndex(first);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            let last = options.length - 1;
+            while (last >= 0 && options[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 && options[focusedIndex] ? `${inputId}-option-${focusedIndex}` : void 0;
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        ...rest,
+        className: classes,
+        ref: setRootRef,
+        label,
+        helperText,
+        error,
+        required,
+        disabled,
+        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": 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: [
+                selectedOption ? /* @__PURE__ */ jsx(OptionCell, { option: selectedOption }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__placeholder`, children: placeholder }),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: `${baseClass}__menu`,
+              role: "listbox",
+              id: `${inputId}-listbox`,
+              ref: listRef,
+              "aria-labelledby": label ? `${inputId}-label` : void 0,
+              children: options.map((option, index) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  id: `${inputId}-option-${index}`,
+                  className: [
+                    `${baseClass}__option`,
+                    option.value === currentValue ? `${baseClass}__option--selected` : "",
+                    option.disabled ? `${baseClass}__option--disabled` : "",
+                    index === focusedIndex ? `${baseClass}__option--focused` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "option",
+                  "aria-selected": option.value === currentValue,
+                  "aria-disabled": option.disabled,
+                  onClick: () => !option.disabled && handleSelect(option.value),
+                  children: [
+                    /* @__PURE__ */ jsx(OptionCell, { option }),
+                    option.value === currentValue && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__check material-symbols-rounded`,
+                        "aria-hidden": "true",
+                        children: "check"
+                      }
+                    )
+                  ]
+                },
+                option.value
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RichDropdown.displayName = "RichDropdown";
+export {
+  RichDropdown
+};

package/components/SectionTitle/SectionTitle.css

@@ -0,0 +1,45 @@
+/* ============================================
+   SECTION TITLE COMPONENT
+   Heading with divider line, optional trailing content
+   ============================================ */
+
+.ds-section-title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-400);
+  border-bottom: var(--border-025) solid var(--color-divider);
+  padding-bottom: var(--padding-500);
+}
+
+/* Divider-less variant: for headings above content that draws its own
+   lines, where a second rule would double up. The generous clearance
+   the divider needed drops to a small breathing gap. */
+.ds-section-title--no-divider {
+  border-bottom: none;
+  padding-bottom: var(--padding-400);
+}
+
+/* ============================================
+   HEADING
+   ============================================ */
+
+.ds-section-title__heading {
+  font-family: var(--font-heading-2-family);
+  font-size: var(--font-heading-2-size);
+  font-weight: var(--font-heading-2-weight);
+  line-height: var(--font-heading-2-line-height);
+  letter-spacing: var(--font-heading-2-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TRAILING CONTENT (count, badge, metadata)
+   ============================================ */
+
+.ds-section-title__trailing {
+  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);
+  color: var(--color-text-tertiary);
+}

package/components/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface SectionTitleProps {
+    /** Section heading text */
+    title: string;
+    /** Optional trailing content (count, badge, metadata) */
+    trailing?: React.ReactNode;
+    /** Whether to draw the bottom divider line. Set false above content that draws its own lines (bordered tables, calendars), so the section separates by whitespace alone. */
+    divider?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function SectionTitle({ title, trailing, divider, className, }: SectionTitleProps): React.JSX.Element;

package/components/SectionTitle/SectionTitle.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./SectionTitle.css";
+function SectionTitle({
+  title,
+  trailing,
+  divider = true,
+  className
+}) {
+  const classes = [
+    "ds-section-title",
+    !divider && "ds-section-title--no-divider",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("h2", { className: "ds-section-title__heading", children: title }),
+    trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx("span", { className: "ds-section-title__trailing", children: trailing })
+  ] });
+}
+export {
+  SectionTitle
+};