rift-ds 1.0.0

package/components/Chip/Chip.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import "./Chip.css";
+import "../../fonts/material-symbols.css";
+const Chip = ({
+  label,
+  icon,
+  selected,
+  disabled = false,
+  size = "default",
+  onClick,
+  onRemove,
+  removeLabel = "Remove",
+  className = ""
+}) => {
+  const baseClass = "ds-chip";
+  const classes = [
+    baseClass,
+    `${baseClass}--${size}`,
+    selected && `${baseClass}--selected`,
+    disabled && `${baseClass}--disabled`,
+    onClick && !onRemove && `${baseClass}--clickable`,
+    onRemove && `${baseClass}--removable`,
+    className
+  ].filter(Boolean).join(" ");
+  const renderIcon = (iconProp) => {
+    if (typeof iconProp === "string") {
+      return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: iconProp });
+    }
+    return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: iconProp });
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && renderIcon(icon),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+  ] });
+  const ariaPressed = typeof selected === "boolean" ? selected : void 0;
+  if (onRemove) {
+    return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+      onClick ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__main`,
+          onClick,
+          disabled,
+          "aria-pressed": ariaPressed,
+          children: content
+        }
+      ) : content,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__remove`,
+          onClick: onRemove,
+          disabled,
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        onClick,
+        disabled,
+        "aria-pressed": ariaPressed,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: classes, children: content });
+};
+export {
+  Chip
+};

package/components/CircularButton/CircularButton.css

@@ -0,0 +1,263 @@
+/* ============================================
+   CIRCULAR BUTTON (ICON BUTTON)
+   Round button with a single icon
+   ============================================ */
+
+.ds-circular-button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Size — default */
+  width: 40px;
+  height: 40px;
+
+  /* Shape */
+  border-radius: var(--radius-pill); /* 999px — perfect circle */
+
+  /* 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;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* ============================================
+   SIZE — DEFAULT
+   ============================================ */
+
+.ds-circular-button--default {
+  width: 40px;
+  height: 40px;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-circular-button--compact {
+  width: 32px;
+  height: 32px;
+}
+
+.ds-circular-button--compact .ds-circular-button__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-circular-button__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+}
+
+/* ============================================
+   PRIMARY VARIANT (SOLID)
+   ============================================ */
+
+.ds-circular-button--primary {
+  background-color: var(--color-action-primary-bg);
+  border: none;
+}
+
+.ds-circular-button--primary .ds-circular-button__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-circular-button--primary.ds-circular-button--hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--primary.ds-circular-button--hover .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-circular-button--primary.ds-circular-button--active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--primary.ds-circular-button--active .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-circular-button--primary.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--primary:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--primary:not(.ds-circular-button--disabled):hover .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+.ds-circular-button--primary:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--primary:not(.ds-circular-button--disabled):active .ds-circular-button__icon {
+  color: var(--color-action-primary-text-active);
+}
+
+/* ============================================
+   SECONDARY VARIANT (OUTLINED)
+   ============================================ */
+
+.ds-circular-button--secondary {
+  border: var(--border-025) solid var(--color-action-primary-border);
+  background-color: transparent;
+}
+
+.ds-circular-button--secondary .ds-circular-button__icon {
+  color: var(--color-action-icon-default);
+}
+
+.ds-circular-button--secondary.ds-circular-button--hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--secondary.ds-circular-button--hover .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-circular-button--secondary.ds-circular-button--active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--secondary.ds-circular-button--active .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-circular-button--secondary.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):hover .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+.ds-circular-button--secondary:not(.ds-circular-button--disabled):active .ds-circular-button__icon {
+  color: var(--color-action-icon-active);
+}
+
+/* ============================================
+   TERTIARY VARIANT (PASSIVE / GHOST)
+   ============================================ */
+
+.ds-circular-button--tertiary {
+  background-color: var(--color-action-passive-bg);
+  border: none;
+}
+
+.ds-circular-button--tertiary .ds-circular-button__icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-circular-button--tertiary.ds-circular-button--hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-circular-button--tertiary.ds-circular-button--active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-circular-button--tertiary.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--tertiary:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-circular-button--tertiary:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* ============================================
+   NEUTRAL VARIANT (SOLID GREY)
+   Filled like primary but in the neutral greys —
+   unlike tertiary, the background is always shown.
+   ============================================ */
+
+.ds-circular-button--neutral {
+  background-color: var(--color-action-neutral-bg);
+  border: none;
+}
+
+.ds-circular-button--neutral .ds-circular-button__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-circular-button--neutral.ds-circular-button--hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-circular-button--neutral.ds-circular-button--active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+.ds-circular-button--neutral.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--neutral:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-circular-button--neutral:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+/* ============================================
+   LOADING
+   Keeps the variant's full-colour appearance (no disabled dim);
+   the spinner replaces the icon and inherits its colour.
+   ============================================ */
+
+.ds-circular-button--loading {
+  cursor: progress;
+  pointer-events: none;
+}
+
+/* The spinner is a box, not a glyph: left inline, it sits on the text
+   baseline and the strut's descender pushes it ~1px above the button's
+   centre. Flex centres it geometrically. */
+.ds-circular-button--loading .ds-circular-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-circular-button:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/CircularButton/CircularButton.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+/** Props owned by CircularButton itself — everything else falls through to the DOM node. */
+type CircularButtonOwnProps = {
+    /** The icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon: string | React.ReactNode;
+    /** Visual treatment */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /**
+     * 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-circular-button--hover"`.
+     */
+    state?: 'default' | 'hover' | 'active' | 'disabled';
+    /** Button size */
+    size?: 'default' | 'compact';
+    /**
+     * Shows a spinner in place of the icon and blocks interaction while an
+     * async action runs. Keeps the variant's full-colour appearance (unlike
+     * the disabled state) and sets `aria-busy` on the rendered element.
+     */
+    loading?: boolean;
+    /** Accessible label — required, because the button has no visible text */
+    ariaLabel: string;
+    /**
+     * The hover/focus tooltip. An icon-only control names itself: by default
+     * the button wears a Tooltip carrying `ariaLabel`. Pass a string to show
+     * different wording, or `false` to opt out — for a host that labels the
+     * control another way, or one that owns the button's box directly
+     * (SplitButton's trigger stretches to its sibling segment, which the
+     * tooltip wrapper would block).
+     */
+    tooltip?: string | false;
+    /** Which side the tooltip opens on. */
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Optional href — renders as <a> instead of <button> */
+    href?: string;
+    /** Optional target attribute for links */
+    target?: string;
+    /** Optional rel attribute for links */
+    rel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CircularButtonProps extends CircularButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof CircularButtonOwnProps | 'type'> {
+}
+/**
+ * Circular icon button component.
+ * A round button containing a single icon, available in
+ * primary, secondary, tertiary and neutral variants with default and compact sizes.
+ *
+ * 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 CircularButton: React.ForwardRefExoticComponent<CircularButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/components/CircularButton/CircularButton.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import "./CircularButton.css";
+import "../../fonts/material-symbols.css";
+const CircularButton = React.forwardRef(
+  ({
+    icon,
+    variant,
+    priority,
+    disabled,
+    state,
+    size = "default",
+    loading,
+    ariaLabel,
+    tooltip,
+    tooltipPosition = "top",
+    href,
+    target,
+    rel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-circular-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 children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon${typeof icon === "string" ? " material-symbols-rounded" : ""}`, "aria-hidden": "true", children: icon });
+    const control = href && !isDisabled && !isLoading ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        disabled: isDisabled || isLoading,
+        "aria-busy": isLoading || void 0,
+        "aria-label": ariaLabel,
+        children
+      }
+    );
+    const tooltipContent = tooltip === false ? null : tooltip ?? ariaLabel;
+    if (!tooltipContent) return control;
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, position: tooltipPosition, children: control });
+  }
+);
+CircularButton.displayName = "CircularButton";
+export {
+  CircularButton
+};

package/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,189 @@
+/* ============================================
+   CODE BLOCK COMPONENT
+   Monospace code with an optional header row
+   (filename, language) and a copy button.
+   Note: the system typeface is Nunito Sans;
+   code is the one sanctioned monospace context.
+   ============================================ */
+
+.ds-code-block {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+  max-height: var(--ds-code-block-max-height, none);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200);
+  padding: var(--padding-150) var(--padding-200) var(--padding-150) var(--padding-400);
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+  flex-shrink: 0;
+  transition: border-bottom-color var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* Collapsed: keep the header's height but hide its divider so it
+   doesn't double up with the root border */
+.ds-code-block--collapsed .ds-code-block__header {
+  border-bottom-color: transparent;
+}
+
+.ds-code-block__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+.ds-code-block__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: var(--padding-050);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: none;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-code-block__toggle .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-code-block--collapsed .ds-code-block__toggle .material-symbols-rounded {
+  transform: rotate(-90deg);
+}
+
+.ds-code-block__toggle:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-code-block__toggle:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-code-block__filename {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-code-block__language {
+  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);
+  text-transform: uppercase;
+  letter-spacing: var(--font-overline-letter-spacing);
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   COPY BUTTON
+   ============================================ */
+
+.ds-code-block__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100);
+  margin: 0;
+  padding: var(--padding-050) var(--padding-200);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: none;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-code-block__copy .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+}
+
+.ds-code-block__copy:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-code-block__copy:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   CODE AREA
+   ============================================ */
+
+/* Same collapse technique as Accordion: animate the grid track
+   between 0fr and 1fr so height animates without measuring */
+.ds-code-block__panel {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard);
+  min-height: 0;
+}
+
+.ds-code-block--collapsed .ds-code-block__panel {
+  grid-template-rows: 0fr;
+}
+
+.ds-code-block__panel-inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ds-code-block__pre {
+  margin: 0;
+  padding: var(--padding-400);
+  overflow: auto;
+  /* Allow the pre to shrink below its content height so a
+     max-height on the root scrolls here, not past the header */
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ds-code-block__code {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+  white-space: pre;
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-code-block .material-symbols-rounded {
+  color: inherit;
+}

package/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,23 @@
+export interface CodeBlockProps {
+    /** The code to display, as a plain string */
+    code: string;
+    /** Language tag shown in the header, e.g. "tsx", "css" */
+    language?: string;
+    /** Filename shown in the header, e.g. "tokens-light.css" */
+    filename?: string;
+    /** Show the copy-to-clipboard button */
+    showCopy?: boolean;
+    /** Max height of the block; code scrolls vertically inside while the header stays pinned. Numbers are px. */
+    maxHeight?: number | string;
+    /** Show a chevron beside the filename that collapses/expands the code area */
+    collapsible?: boolean;
+    /** Start collapsed (only applies when collapsible) */
+    defaultCollapsed?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * CodeBlock component — monospace code with an optional header row
+ * (filename, language tag) and a copy-to-clipboard button.
+ */
+export declare const CodeBlock: ({ code, language, filename, showCopy, maxHeight, collapsible, defaultCollapsed, className, }: CodeBlockProps) => import("react").JSX.Element;