rift-ds 1.0.0

package/components/Button/Button.css

@@ -0,0 +1,473 @@
+/* ============================================
+   BUTTON COMPONENT
+   Figma design system button component
+   ============================================ */
+
+.ds-button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-200); /* Figma: --radius/sm (8px) */
+
+  /* Spacing */
+  padding: var(--padding-200) var(--padding-500); /* Figma: --padding/sm (8px) & --radius/lg (16px) */
+
+  /* Border radius */
+  border-radius: var(--radius-pill); /* Figma: --radius/full (999px) */
+
+  /* Typography - Using paragraph em (medium weight) for clickable controls */
+  font-family: var(--font-paragraph-emphasis-family);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  font-size: var(--font-paragraph-emphasis-size);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+  text-align: center;
+  /* A pill's label never wraps — a squeezed layout shortens around the
+     button, it doesn't fold the silhouette into two lines. */
+  white-space: nowrap;
+
+  /* Transitions */
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Reset */
+  cursor: pointer;
+  border: none;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* ============================================
+   SIZE — DEFAULT (no overrides needed, base styles apply)
+   ============================================ */
+
+.ds-button--default {
+  /* Base padding & typography inherited from .ds-button */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-button--compact {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+  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-button--compact .ds-button__icon {
+  /* Figma: compact icons are 20px (vs 24px default). */
+  --icon-size: var(--ds-button-icon-size, var(--icon-size-500));
+}
+
+/* ============================================
+   PRIMARY BUTTON (SOLID)
+   ============================================ */
+
+.ds-button--primary {
+  background-color: var(--color-action-primary-bg);
+  border: none;
+}
+
+.ds-button--primary .ds-button__text {
+  color: var(--color-action-primary-text);
+}
+
+.ds-button--primary.ds-button--hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--primary.ds-button--hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary.ds-button--active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-button--primary.ds-button--active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary.ds-button--disabled {
+  background-color: var(--color-action-primary-bg);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SECONDARY BUTTON (OUTLINED)
+   ============================================ */
+
+.ds-button--secondary {
+  /* Figma: --action/primary/border/primary - 1px border */
+  border: var(--border-025) solid var(--color-action-primary-border);
+  background-color: transparent;
+}
+
+.ds-button--secondary .ds-button__text {
+  /* Figma: --text/primary */
+  color: var(--color-text-primary);
+}
+
+.ds-button--secondary.ds-button--default {
+  border: var(--border-025) solid var(--color-action-primary-border);
+  background-color: transparent;
+}
+
+.ds-button--secondary.ds-button--hover {
+  /* Figma: hover state - 1px border */
+  border: var(--border-025) solid var(--color-action-primary-border);
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--secondary.ds-button--hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary.ds-button--active {
+  /* Figma: --action/primary/background/active - 1px border */
+  background-color: var(--color-action-primary-bg-active);
+  border: var(--border-025) solid var(--color-action-primary-border);
+}
+
+.ds-button--secondary.ds-button--active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary.ds-button--disabled {
+  border: var(--border-025) solid var(--color-action-primary-border);
+  background-color: transparent;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   TERTIARY BUTTON (PASSIVE / GHOST)
+   ============================================ */
+
+.ds-button--tertiary {
+  /* Figma: --action/passive/background/primary (rgba(241, 241, 241, 0.01)) */
+  background-color: var(--color-action-passive-bg);
+  border: none;
+}
+
+.ds-button--tertiary .ds-button__text {
+  /* Figma: --action/passive/text/primary (#050505) */
+  color: var(--color-action-passive-text);
+}
+
+.ds-button--tertiary.ds-button--default {
+  background-color: var(--color-action-passive-bg);
+}
+
+.ds-button--tertiary.ds-button--hover {
+  /* Figma: hover background (#d6d6d6) */
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-button--tertiary.ds-button--active {
+  /* Figma: --action/passive/background/active (#bcbcbc) */
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-button--tertiary.ds-button--disabled {
+  background-color: var(--color-action-passive-bg);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   NEUTRAL BUTTON (SOLID GREY)
+   Filled like primary but in the neutral greys —
+   unlike tertiary, the background is always shown.
+   ============================================ */
+
+.ds-button--neutral {
+  background-color: var(--color-action-neutral-bg);
+  border: none;
+}
+
+.ds-button--neutral .ds-button__text {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-button--neutral.ds-button--hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-button--neutral.ds-button--active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+.ds-button--neutral.ds-button--disabled {
+  background-color: var(--color-action-neutral-bg);
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   DESTRUCTIVE BUTTON
+   For dangerous actions: delete, remove, etc.
+   Uses accent-coral as the border / fill colour.
+   ============================================ */
+
+.ds-button--destructive {
+  border: var(--border-025) solid var(--color-core-accent-coral);
+  background-color: transparent;
+}
+
+.ds-button--destructive .ds-button__text {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--default {
+  border: var(--border-025) solid var(--color-core-accent-coral);
+  background-color: transparent;
+}
+
+.ds-button--destructive.ds-button--hover {
+  border: var(--border-025) solid var(--color-core-accent-coral);
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--hover .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive.ds-button--active {
+  border: var(--border-025) solid var(--color-core-accent-coral);
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--active .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive.ds-button--disabled {
+  border: var(--border-025) solid var(--color-core-accent-coral);
+  background-color: transparent;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-button__icon {
+  flex-shrink: 0;
+  /* The slot's own step, overridable per instance through
+     `--ds-button-icon-size`: the slot declares `--icon-size` on itself, so
+     a value inherited from the button would lose to this declaration and a
+     caller would have no way in. Figma: default icons are 24px. */
+  --icon-size: var(--ds-button-icon-size, var(--icon-size-600));
+  line-height: 1;
+}
+
+/* Scale any child SVG to fit the icon slot. It reads the slot's own
+   `--icon-size` rather than restating a pixel value, for two reasons: the
+   size then follows the button's variant on its own (compact sets the
+   smaller step, so no second rule is needed), and a consumer passing a
+   ReactNode icon can size it through `--ds-button-icon-size`. Hardcoded
+   here, this two-class rule silently beat every single-class override a
+   caller wrote: the sign-in template asked its brand marks for 20px and
+   got 24px.
+
+   Solid marks need that hook. A filled brand glyph reads heavier than an
+   outlined Material Symbol at the same box, so it wants a step down to sit
+   level with the label beside it. */
+.ds-button__icon svg {
+  width: var(--icon-size, var(--icon-size-600));
+  height: var(--icon-size, var(--icon-size-600));
+}
+
+/* A trailing icon nudges right on hover — a small confirmation that the
+   button leads somewhere. Never on disabled or loading buttons (loading
+   disables the element without the disabled class); the reduced-motion
+   guard collapses the transition with every other duration. */
+.ds-button__icon--right {
+  transition: transform var(--motion-duration-fast) var(--motion-ease-entrance);
+}
+
+.ds-button:not(.ds-button--disabled):not(.ds-button--loading):hover .ds-button__icon--right {
+  transform: translateX(2px);
+}
+
+.ds-button--primary .ds-button__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-button--primary.ds-button--active .ds-button__icon,
+.ds-button--primary.ds-button--hover .ds-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary .ds-button__icon {
+  color: var(--color-action-icon-default);
+}
+
+.ds-button--secondary.ds-button--active .ds-button__icon,
+.ds-button--secondary.ds-button--hover .ds-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-button--tertiary .ds-button__icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-button--neutral .ds-button__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-button--destructive .ds-button__icon {
+  color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive.ds-button--hover .ds-button__icon,
+.ds-button--destructive.ds-button--active .ds-button__icon {
+  color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   TEXT
+   ============================================ */
+
+.ds-button__text {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   HOVER STATES (for interactive use)
+   ============================================ */
+
+.ds-button--primary:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--primary:not(.ds-button--disabled):hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary:not(.ds-button--disabled):hover .ds-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):hover .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):hover .ds-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-button--tertiary:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-button--neutral:not(.ds-button--disabled):hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):hover {
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):hover .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):hover .ds-button__icon {
+  color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   ACTIVE STATES (for interactive use)
+   ============================================ */
+
+.ds-button--primary:not(.ds-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-button--primary:not(.ds-button--disabled):active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--primary:not(.ds-button--disabled):active .ds-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):active .ds-button__text {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-button--secondary:not(.ds-button--disabled):active .ds-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-button--tertiary:not(.ds-button--disabled):active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-button--neutral:not(.ds-button--disabled):active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):active {
+  background-color: var(--color-core-accent-coral);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):active .ds-button__text {
+  color: var(--color-status-error-bg);
+}
+
+.ds-button--destructive:not(.ds-button--disabled):active .ds-button__icon {
+  color: var(--color-status-error-bg);
+}
+
+/* ============================================
+   LOADING
+   Keeps the variant's full-colour appearance (no disabled dim);
+   the spinner occupies the left icon slot and inherits its colour.
+   ============================================ */
+
+.ds-button--loading {
+  cursor: progress;
+  pointer-events: none;
+}
+
+/* The spinner is a box, not a glyph: left inline in the icon slot, it sits
+   on the text baseline and the strut's descender pushes it above centre.
+   Flex centres it geometrically — the same fix as CircularButton's loading
+   icon. */
+.ds-button--loading .ds-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The generic icon-slot svg sizing must not distort the spinner —
+   it sizes itself from the Spinner size prop */
+.ds-button .ds-button__icon .ds-spinner__circle {
+  width: 100%;
+  height: 100%;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/Button/Button.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+/** Props owned by Button itself — everything else falls through to the DOM node. */
+type ButtonOwnProps = {
+    /** Button text content */
+    label?: string;
+    /** Icon for left side — Material Symbol name (string) or custom element (ReactNode) */
+    iconLeft?: string | React.ReactNode;
+    /** Icon for right side — Material Symbol name (string) or custom element (ReactNode) */
+    iconRight?: string | React.ReactNode;
+    /** Visual treatment */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'destructive';
+    /** Button size */
+    size?: 'default' | 'compact';
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /**
+     * Shows a spinner in the left icon slot and blocks interaction while an
+     * async action runs. Keeps the variant's full-colour appearance (unlike
+     * `disabled`) and sets `aria-busy` on the rendered element.
+     */
+    loading?: boolean;
+    /** Optional href — renders as <a> instead of <button> */
+    href?: string;
+    /** Optional target attribute for links */
+    target?: string;
+    /** Optional rel attribute for links */
+    rel?: string;
+    /** Marks this link as the current page (adds aria-current="page") */
+    ariaCurrent?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
+    /**
+     * Documentation-only interaction state.
+     *
+     * @deprecated Use `disabled` for the disabled state.
+     *
+     * Documentation-only affordance for rendering a *static* interaction state in
+     * Storybook and the showcase site. Real hover/active styling comes from CSS
+     * pseudo-classes and needs no prop — for docs, prefer `className="ds-button--hover"`.
+     */
+    state?: 'default' | 'hover' | 'active' | 'disabled';
+    /**
+     * Legacy alias for `iconLeft` — Material Symbol name (string) or custom element (ReactNode).
+     *
+     * @deprecated Use `iconLeft` instead.
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * Legacy toggle for showing the text label.
+     *
+     * @deprecated Will be removed once `label` loses its default in the next major;
+     * an icon-only button will simply omit `label`.
+     */
+    text?: boolean;
+};
+export interface ButtonProps extends ButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ButtonOwnProps | 'type'> {
+}
+/**
+ * Button component from Figma design system.
+ * Supports primary, secondary, tertiary, neutral and destructive variants.
+ * Icons can be placed on the left and/or right side of the text.
+ *
+ * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref to
+ * whichever element it renders, and spreads unrecognised props onto it.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/components/Button/Button.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./Button.css";
+import "../../fonts/material-symbols.css";
+const Button = React.forwardRef(
+  ({
+    label = "Button",
+    iconLeft,
+    iconRight,
+    variant,
+    size = "default",
+    disabled,
+    loading,
+    href,
+    target,
+    rel,
+    ariaCurrent,
+    className = "",
+    priority,
+    state,
+    icon,
+    text = true,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-button";
+    const resolvedVariant = variant ?? priority ?? "primary";
+    const isDisabled = disabled ?? state === "disabled";
+    const resolvedState = state ?? (isDisabled ? "disabled" : "default");
+    const isLoading = Boolean(loading);
+    const classes = [
+      baseClass,
+      `${baseClass}--${resolvedVariant}`,
+      `${baseClass}--${resolvedState}`,
+      `${baseClass}--${size}`,
+      isLoading && `${baseClass}--loading`,
+      className
+    ].filter(Boolean).join(" ");
+    const iconClass = "material-symbols-rounded";
+    const spinnerSize = size === "compact" ? "sm" : "md";
+    const leftIcon = isLoading ? /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, variant: "inherit" }) : iconLeft || icon;
+    const renderIcon = (iconProp, position) => {
+      const positionClass = position === "right" ? ` ${baseClass}__icon--right` : "";
+      if (typeof iconProp === "string") {
+        return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon${positionClass} ${iconClass}`, "aria-hidden": "true", children: iconProp });
+      }
+      return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon${positionClass}`, "aria-hidden": "true", children: iconProp });
+    };
+    const needsAccessibleName = !text || !label;
+    const fallbackAriaLabel = needsAccessibleName && label && !rest["aria-label"] ? label : void 0;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && renderIcon(leftIcon),
+      text && /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label }),
+      iconRight && renderIcon(iconRight, "right")
+    ] });
+    if (href && !isDisabled && !isLoading) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          href,
+          target,
+          rel,
+          "aria-current": ariaCurrent ? "page" : void 0,
+          "aria-label": fallbackAriaLabel ?? rest["aria-label"],
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        disabled: isDisabled || isLoading,
+        "aria-busy": isLoading || void 0,
+        "aria-label": fallbackAriaLabel ?? rest["aria-label"],
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,39 @@
+/* ============================================
+   BUTTON GROUP COMPONENT
+   Container for grouped buttons in nav/subnav
+   ============================================ */
+
+.ds-button-group {
+  /* Layout */
+  display: inline-flex; /* Hug content instead of stretch */
+  width: auto; /* Don't stretch to full width */
+  overflow: hidden;
+}
+
+/* ============================================
+   HORIZONTAL ORIENTATION
+   Default for top navigation
+   ============================================ */
+
+.ds-button-group--horizontal {
+  flex-direction: row;
+  gap: var(--gap-500); /* Figma: --gap/lg (20px) */
+  align-items: flex-start;
+}
+
+/* ============================================
+   VERTICAL ORIENTATION
+   For subnav/mobile navigation
+   ============================================ */
+
+.ds-button-group--vertical {
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+  align-items: flex-start; /* Left-aligned, hug content */
+}
+
+/* Vertical buttons hug their content by default */
+.ds-button-group--vertical .ds-button {
+  width: auto; /* Hug content instead of stretch */
+  display: inline-flex; /* Hug content */
+}

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button/Button';
+export interface ButtonGroupProps {
+    /** Orientation of the button group */
+    orientation?: 'horizontal' | 'vertical';
+    /** Array of button configurations */
+    buttons: Array<ButtonProps>;
+    /** Accessible label for the group */
+    ariaLabel?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;