rift-ds 1.0.0

package/components/MotionSwatch/MotionSwatch.css

@@ -0,0 +1,176 @@
+/* ============================================
+   MOTION SWATCH COMPONENT
+   Card that displays a motion token with a live
+   animation preview, token name, and value.
+   Click the preview to replay one-shot demos.
+   ============================================ */
+
+.ds-motion-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-200); /* 8px */
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 140px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary-semi);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600); /* 24px */
+  padding: var(--padding-500); /* 20px */
+}
+
+/* ============================================
+   PREVIEW AREA
+   A button so the demo can be replayed by click
+   or keyboard.
+   ============================================ */
+
+.ds-motion-swatch__preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  min-height: 60px;
+  margin-bottom: var(--gap-400); /* 12px */
+
+  /* Reset button chrome */
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+.ds-motion-swatch__preview:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-200);
+}
+
+.ds-motion-swatch__replay-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  --icon-size: var(--icon-size-500);
+  color: var(--color-text-tertiary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-motion-swatch__preview:hover .ds-motion-swatch__replay-icon,
+.ds-motion-swatch__preview:focus-visible .ds-motion-swatch__replay-icon {
+  opacity: 1;
+}
+
+/* ============================================
+   SLIDE DEMO
+   Dot travels the track using the token's
+   duration or easing.
+   ============================================ */
+
+.ds-motion-swatch__track {
+  display: block;
+  width: 120px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-motion-swatch__dot {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--color-core-accent-violet);
+  animation-name: ds-motion-swatch-slide;
+  animation-fill-mode: forwards;
+}
+
+@keyframes ds-motion-swatch-slide {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(104px); /* track width minus dot */
+  }
+}
+
+/* ============================================
+   SPIN DEMO
+   Continuous rotation loop (spinner timing).
+   ============================================ */
+
+.ds-motion-swatch__spinner {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-pill);
+  border: var(--border-050) solid var(--color-bg-container-secondary);
+  border-top-color: var(--color-core-accent-violet);
+  animation-name: ds-motion-swatch-spin;
+  animation-iteration-count: infinite;
+}
+
+@keyframes ds-motion-swatch-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================
+   SHIMMER DEMO
+   Continuous gradient sweep (skeleton timing).
+   ============================================ */
+
+.ds-motion-swatch__shimmer {
+  display: block;
+  width: 120px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-container-secondary) 25%,
+    var(--color-bg-container-tertiary) 50%,
+    var(--color-bg-container-secondary) 75%
+  );
+  background-size: 200% 100%;
+  animation-name: ds-motion-swatch-shimmer;
+  animation-iteration-count: infinite;
+}
+
+@keyframes ds-motion-swatch-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* ============================================
+   LABEL & VALUE
+   ============================================ */
+
+.ds-motion-swatch__label {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-primary);
+  text-align: center;
+}
+
+.ds-motion-swatch__value {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  text-align: center;
+  overflow-wrap: anywhere;
+}

package/components/MotionSwatch/MotionSwatch.d.ts

@@ -0,0 +1,25 @@
+export type MotionSwatchKind = 'duration' | 'easing';
+export type MotionSwatchDemo = 'slide' | 'spin' | 'shimmer';
+export interface MotionSwatchProps {
+    /** Token name label (e.g. "Fast", "Standard") */
+    label: string;
+    /** CSS custom property being demonstrated (e.g. "--motion-duration-fast") */
+    token: string;
+    /** Resolved value to display (e.g. "150ms", "ease") */
+    value: string;
+    /** Whether the token is a duration or an easing curve */
+    kind: MotionSwatchKind;
+    /** Which preview animation to render (default "slide") */
+    demo?: MotionSwatchDemo;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * MotionSwatch component.
+ * Displays a motion token card with a live animation preview,
+ * token name, and value. Duration swatches animate at the
+ * token's speed; easing swatches trace the token's curve at a
+ * fixed readable duration. Click the preview to replay.
+ * Loop demos (spin, shimmer) run continuously.
+ */
+export declare const MotionSwatch: ({ label, token, value, kind, demo, className, }: MotionSwatchProps) => import("react").JSX.Element;

package/components/MotionSwatch/MotionSwatch.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import "./MotionSwatch.css";
+const MotionSwatch = ({
+  label,
+  token,
+  value,
+  kind,
+  demo = "slide",
+  className = ""
+}) => {
+  const [playCount, setPlayCount] = useState(0);
+  const baseClass = "ds-motion-swatch";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const isLoop = demo === "spin" || demo === "shimmer";
+  const animationStyle = kind === "duration" ? {
+    animationDuration: `var(${token})`,
+    animationTimingFunction: isLoop ? "var(--motion-ease-linear)" : "var(--motion-ease-emphasized)"
+  } : {
+    animationDuration: "var(--motion-duration-slower)",
+    animationTimingFunction: `var(${token})`
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__preview`,
+        onClick: () => setPlayCount((count) => count + 1),
+        "aria-label": `Replay ${label} animation`,
+        children: [
+          demo === "slide" && /* @__PURE__ */ jsx("span", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__dot`,
+              style: animationStyle
+            },
+            playCount
+          ) }),
+          demo === "spin" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__spinner`,
+              style: animationStyle
+            },
+            playCount
+          ),
+          demo === "shimmer" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__shimmer`,
+              style: animationStyle
+            },
+            playCount
+          ),
+          !isLoop && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `material-symbols-rounded ${baseClass}__replay-icon`,
+              "aria-hidden": "true",
+              children: "replay"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: /* @__PURE__ */ jsx("code", { children: token }) }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value })
+  ] });
+};
+export {
+  MotionSwatch
+};

package/components/Nav/Nav.css

@@ -0,0 +1,51 @@
+/* ============================================
+   NAV COMPONENT
+   Top navigation bar using ButtonGroup
+   ============================================ */
+
+.ds-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1440px;
+  height: 78px;
+}
+
+/* ============================================
+   BRAND / LOGO
+   ============================================ */
+
+.ds-nav__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-500); /* 20px */
+  flex-shrink: 0;
+  text-decoration: none;
+  color: var(--color-text-primary);
+}
+
+.ds-nav__brand-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.ds-nav__brand-text {
+  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);
+}
+
+/* ============================================
+   RIGHT SECTION
+   ============================================ */
+
+.ds-nav__right {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-1000); /* 24px */
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}

package/components/Nav/Nav.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ButtonGroupProps } from '../ButtonGroup/ButtonGroup';
+export interface NavProps {
+    /** Brand/logo text */
+    brandText?: string;
+    /** Brand icon element (img, svg, etc.) */
+    brandIcon?: React.ReactNode;
+    /** Navigation buttons config — passed directly to ButtonGroup */
+    buttons: ButtonGroupProps['buttons'];
+    /** Additional elements rendered after the button group (e.g. ToggleSwitch) */
+    trailing?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Nav component from Figma design system
+ * Renders a horizontal navigation bar using ButtonGroup
+ */
+export declare const Nav: ({ brandText, brandIcon, buttons, trailing, className, }: NavProps) => React.JSX.Element;

package/components/Nav/Nav.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { ButtonGroup } from "../ButtonGroup/ButtonGroup.js";
+import "./Nav.css";
+const Nav = ({
+  brandText,
+  brandIcon,
+  buttons,
+  trailing,
+  className = ""
+}) => {
+  const baseClass = "ds-nav";
+  return /* @__PURE__ */ jsxs("nav", { className: `${baseClass} ${className}`, children: [
+    (brandText || brandIcon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__brand`, children: [
+      brandIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand-icon`, children: brandIcon }),
+      brandText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand-text`, children: brandText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__right`, children: [
+      /* @__PURE__ */ jsx(ButtonGroup, { orientation: "horizontal", buttons }),
+      trailing
+    ] })
+  ] });
+};
+export {
+  Nav
+};

package/components/NavList/NavList.css

@@ -0,0 +1,155 @@
+/* ============================================
+   NAV LIST COMPONENT
+   Vertical navigation link list for drawers and
+   side menus. Rows are tertiary Buttons — their
+   shape, sizing, and states live in Button.css;
+   this file owns only layout, the chevron
+   toggle, and the expand animation.
+   ============================================ */
+
+.ds-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Every row reserves the toggle's 40px height, so leaf rows (compact
+   Buttons, ~32px) and rows carrying a 40px chevron toggle sit on the same
+   vertical rhythm instead of producing uneven gaps down the list. */
+.ds-nav-list__item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 40px;
+}
+
+/* ============================================
+   ROWS
+   Full-width, left-aligned Buttons; long labels
+   truncate with an ellipsis.
+   ============================================ */
+
+.ds-nav-list .ds-button {
+  width: 100%;
+  max-width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.ds-nav-list .ds-button__text {
+  min-width: 0;
+  flex: 0 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A row with a toggle shares its width with the chevron button. */
+.ds-nav-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-050);
+  width: 100%;
+}
+
+.ds-nav-list__row .ds-button {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* ============================================
+   TOGGLE
+   Mirrors CircularButton's 40px tertiary recipe.
+   ============================================ */
+
+.ds-nav-list__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-action-passive-bg);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-nav-list__toggle:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-nav-list__toggle:active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-nav-list__toggle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-nav-list__chevron {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  line-height: 1;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-nav-list__toggle[aria-expanded='true'] .ds-nav-list__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL — collapsible sublist wrapper
+   Grid-rows height animation; reduced motion is
+   handled by the motion-token contract.
+   ============================================ */
+
+.ds-nav-list__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  margin-top: 0;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-emphasized),
+    margin-top var(--motion-duration-slow) var(--motion-ease-emphasized);
+}
+
+/* Open panels take the list's item gap above them, so the first child sits
+   the same distance from its parent row as any two siblings do. */
+.ds-nav-list__panel--open {
+  grid-template-rows: 1fr;
+  margin-top: var(--gap-050);
+}
+
+/* ============================================
+   SUBLIST — one indent step per nesting level
+   ============================================ */
+
+.ds-nav-list__sublist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  overflow: hidden;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--padding-1000);
+  list-style: none;
+}
+
+.ds-nav-list__sublist .ds-nav-list__sublist {
+  padding-left: var(--gap-500);
+}
+
+/* Permanent (non-collapsible) groups render their sublist directly under the
+   row, with no panel — give it the same item gap the panel carries when open. */
+.ds-nav-list__item > .ds-nav-list__sublist {
+  margin-top: var(--gap-050);
+}

package/components/NavList/NavList.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export interface NavListItem {
+    /** Row text. */
+    label: string;
+    /** Link destination — every row is a real link. */
+    href: string;
+    /** Stable identity for expansion state and aria wiring. Defaults to `href`. */
+    id?: string;
+    /** Child rows, indented one level. Nesting is supported three levels deep. */
+    items?: NavListItem[];
+    /**
+     * When false, an item with children renders no toggle and its children stay
+     * visible — a permanent group rather than a collapsible section.
+     */
+    collapsible?: boolean;
+    /**
+     * Forces the current-page treatment on this row regardless of the exact
+     * match against `currentHref` — for prefix-matched sections that should
+     * stay current on their child routes.
+     */
+    current?: boolean;
+}
+/** Props owned by NavList itself — everything else falls through to the list element. */
+type NavListOwnProps = {
+    /** Navigation tree to render. */
+    items: NavListItem[];
+    /** href of the current page — the exactly matching row gets `aria-current="page"` and the active treatment. */
+    currentHref?: string;
+    /** Controlled list of expanded item ids. */
+    expandedIds?: string[];
+    /** Initially expanded item ids (uncontrolled). */
+    defaultExpandedIds?: string[];
+    /** Fires with the full new list of expanded ids whenever a toggle is pressed, in both controlled and uncontrolled modes. */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /** Allow several sections expanded at once. Default false — expanding one collapses the rest. */
+    multiple?: boolean;
+    /** Fires when any link is clicked, alongside native navigation — e.g. to close the drawer that contains the list. */
+    onNavigate?: (item: NavListItem, event: React.MouseEvent<HTMLElement>) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface NavListProps extends NavListOwnProps, Omit<React.ComponentPropsWithoutRef<'ul'>, keyof NavListOwnProps> {
+}
+/**
+ * Vertical list of navigation links for drawers and side menus.
+ *
+ * Every row is a real link, rendered as a tertiary Button so shape, sizing,
+ * and interaction states stay identical to every other button in the system.
+ * An item with children gets a separate chevron toggle — tapping the label
+ * navigates, tapping the chevron expands — and collapsed sublists are `inert`,
+ * so they leave the tab order and the accessibility tree. Expansion is
+ * uncontrolled by default (`defaultExpandedIds`) or controlled via
+ * `expandedIds` + `onExpandedChange`.
+ */
+export declare const NavList: React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLUListElement>>;
+export {};

package/components/NavList/NavList.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId, useState } from "react";
+import { Button } from "../Button/Button.js";
+import "./NavList.css";
+import "../../fonts/material-symbols.css";
+const MAX_DEPTH = 3;
+const NavList = React.forwardRef(
+  ({
+    items,
+    currentHref,
+    expandedIds,
+    defaultExpandedIds,
+    onExpandedChange,
+    multiple = false,
+    onNavigate,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-nav-list";
+    const uid = useId();
+    const [internalExpanded, setInternalExpanded] = useState(
+      defaultExpandedIds ?? []
+    );
+    const expanded = expandedIds ?? internalExpanded;
+    const itemId = (item) => item.id ?? item.href;
+    const toggle = (id) => {
+      const next = expanded.includes(id) ? expanded.filter((entry) => entry !== id) : multiple ? [...expanded, id] : [id];
+      if (expandedIds === void 0) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    };
+    const renderItems = (level, levelItems) => levelItems.map((item) => {
+      const id = itemId(item);
+      const isCurrent = item.current ?? (currentHref !== void 0 && item.href === currentHref);
+      const children = level < MAX_DEPTH ? item.items : void 0;
+      const collapsible = item.collapsible ?? true;
+      const isOpen = expanded.includes(id);
+      const panelId = `${uid}-${id}`;
+      const link = /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: level === 1 ? "default" : "compact",
+          label: item.label,
+          href: item.href,
+          ariaCurrent: isCurrent,
+          className: isCurrent ? "ds-button--active" : void 0,
+          onClick: (event) => onNavigate?.(item, event)
+        }
+      );
+      if (!children || children.length === 0) {
+        return /* @__PURE__ */ jsx("li", { className: `${baseClass}__item`, children: link }, id);
+      }
+      if (!collapsible) {
+        return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
+          link,
+          /* @__PURE__ */ jsx("ul", { className: `${baseClass}__sublist`, children: renderItems(level + 1, children) })
+        ] }, id);
+      }
+      return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+          link,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__toggle`,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "aria-label": `${isOpen ? "Collapse" : "Expand"} ${item.label}`,
+              onClick: () => toggle(id),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `${baseClass}__chevron material-symbols-rounded`,
+                  "aria-hidden": "true",
+                  children: "expand_more"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            className: `${baseClass}__panel ${isOpen ? `${baseClass}__panel--open` : ""}`,
+            inert: !isOpen,
+            children: /* @__PURE__ */ jsx("ul", { className: `${baseClass}__sublist`, children: renderItems(level + 1, children) })
+          }
+        )
+      ] }, id);
+    });
+    return /* @__PURE__ */ jsx("ul", { ...rest, ref, className: `${baseClass} ${className}`.trim(), children: renderItems(1, items) });
+  }
+);
+NavList.displayName = "NavList";
+export {
+  NavList
+};