rift-ds 1.0.0

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface TooltipProps {
+    /** Trigger element */
+    children?: ReactNode;
+    /** Tooltip text content */
+    content: string;
+    /** Preferred position */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Delay before showing (in ms) */
+    showDelay?: number;
+    /** Delay before hiding (in ms) */
+    hideDelay?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Tooltip component for contextual text labels.
+ * Appears on hover or focus with a short delay.
+ * Rides the system's floating surface — page background, hairline border,
+ * floating shadow — so the bubble stays light in light theme and dark in dark.
+ */
+export declare const Tooltip: ({ children, content, position, showDelay, hideDelay, className, }: TooltipProps) => import("react").JSX.Element;

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useId, useEffect, isValidElement, cloneElement } from "react";
+import "./Tooltip.css";
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+const Tooltip = ({
+  children,
+  content,
+  position = "top",
+  showDelay = MOTION_HOVER_SHOW_DELAY_MS,
+  hideDelay = MOTION_HOVER_HIDE_DELAY_MS,
+  className = ""
+}) => {
+  const [visible, setVisible] = useState(false);
+  const showTimeoutRef = useRef(void 0);
+  const hideTimeoutRef = useRef(void 0);
+  const tooltipId = useId();
+  const baseClass = "ds-tooltip";
+  const show = () => {
+    clearTimeout(hideTimeoutRef.current);
+    showTimeoutRef.current = setTimeout(() => setVisible(true), showDelay);
+  };
+  const hide = () => {
+    clearTimeout(showTimeoutRef.current);
+    hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
+  };
+  useEffect(() => {
+    return () => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (!visible) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+        setVisible(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [visible]);
+  const trigger = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": tooltipId
+  }) : children;
+  const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+  const panelClasses = [
+    `${baseClass}__panel`,
+    `${baseClass}__panel--${position}`,
+    visible ? `${baseClass}__panel--visible` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: containerClasses,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        trigger,
+        /* @__PURE__ */ jsxs("span", { className: panelClasses, role: "tooltip", id: tooltipId, children: [
+          content,
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Tooltip
+};

package/components/TreeView/TreeView.css

@@ -0,0 +1,119 @@
+/* ============================================
+   TREEVIEW COMPONENT
+   Collapsible hierarchy for files, folders,
+   and nested structures
+   ============================================ */
+
+/* Base */
+
+.ds-treeview {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ============================================
+   ITEM — the focusable treeitem (roving tabindex)
+   ============================================ */
+
+.ds-treeview__item {
+  outline: none;
+}
+
+/* The focus ring draws on the item's own row, never on the subtree */
+.ds-treeview__item:focus-visible > .ds-treeview__row {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   ROW — one line of the tree
+   Indentation steps per depth via a custom
+   property the component sets inline.
+   ============================================ */
+
+.ds-treeview__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  padding: var(--padding-100) var(--padding-200);
+  padding-left: calc(var(--padding-200) + var(--ds-treeview-depth, 0) * var(--gap-400));
+  border-radius: var(--radius-200);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* States */
+
+.ds-treeview__row:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-treeview__row--selected {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-treeview__row--selected .ds-treeview__label {
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+}
+
+/* ============================================
+   CHEVRON — rotates a quarter turn on expand
+   ============================================ */
+
+.ds-treeview__chevron {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-treeview__item[aria-expanded='true'] > .ds-treeview__row .ds-treeview__chevron {
+  transform: rotate(90deg);
+}
+
+/* Leaves keep the chevron column so labels align across depths */
+.ds-treeview__chevron--spacer {
+  display: inline-block;
+  width: var(--icon-size-500);
+  height: var(--icon-size-500);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-treeview__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-treeview__label {
+  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-primary);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ============================================
+   GROUP — nested children
+   ============================================ */
+
+.ds-treeview__group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/components/TreeView/TreeView.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export interface TreeViewNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Text shown on the row */
+    label: string;
+    /** Icon on the row — Material Symbol name (string) or custom element (ReactNode); defaults to `folder` for branches and `draft` for leaves */
+    icon?: string | React.ReactNode;
+    /** Child nodes; a non-empty list makes the node an expandable branch */
+    children?: TreeViewNode[];
+}
+/** Props owned by TreeView itself — everything else falls through to the root <ul>. */
+type TreeViewOwnProps = {
+    /** Tree data to render */
+    nodes: TreeViewNode[];
+    /** IDs of initially expanded branches (uncontrolled) */
+    defaultExpandedIds?: string[];
+    /** Expanded branch IDs (controlled) — pair with `onExpandedChange` */
+    expandedIds?: string[];
+    /** Called with the full list of expanded branch IDs whenever a branch toggles */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Selected node ID (controlled) — pair with `onSelect` */
+    selectedId?: string;
+    /** ID of the initially selected node (uncontrolled) */
+    defaultSelectedId?: string;
+    /**
+     * Called with the node's ID when a row is selected via click, Enter, or
+     * Space. Intentionally shadows the native `select` event handler, which
+     * has no meaning on a tree widget.
+     */
+    onSelect?: (id: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface TreeViewProps extends TreeViewOwnProps, Omit<React.ComponentPropsWithoutRef<'ul'>, keyof TreeViewOwnProps> {
+}
+/**
+ * TreeView renders a collapsible hierarchy — files, folders, and other
+ * nested structures — as a WAI-ARIA tree. Branches expand and collapse,
+ * one node can be selected, and a roving tabindex gives the whole tree a
+ * single tab stop with full arrow-key navigation. Expansion and selection
+ * each work controlled or uncontrolled.
+ */
+export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>>;
+export {};

package/components/TreeView/TreeView.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo, useRef, useCallback } from "react";
+import "./TreeView.css";
+import "../../fonts/material-symbols.css";
+const isBranchNode = (node) => Array.isArray(node.children) && node.children.length > 0;
+const TreeView = React.forwardRef(
+  ({
+    nodes,
+    defaultExpandedIds = [],
+    expandedIds,
+    onExpandedChange,
+    selectedId,
+    defaultSelectedId,
+    onSelect,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-treeview";
+    const baseId = React.useId();
+    const [internalExpanded, setInternalExpanded] = useState(
+      () => new Set(defaultExpandedIds)
+    );
+    const [internalSelected, setInternalSelected] = useState(
+      defaultSelectedId
+    );
+    const [focusedId, setFocusedId] = useState(void 0);
+    const expandedSet = useMemo(
+      () => expandedIds !== void 0 ? new Set(expandedIds) : internalExpanded,
+      [expandedIds, internalExpanded]
+    );
+    const selected = selectedId !== void 0 ? selectedId : internalSelected;
+    const itemRefs = useRef(/* @__PURE__ */ new Map());
+    const indexById = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      let i = 0;
+      const walk = (list) => {
+        for (const node of list) {
+          map.set(node.id, i);
+          i += 1;
+          if (node.children) walk(node.children);
+        }
+      };
+      walk(nodes);
+      return map;
+    }, [nodes]);
+    const parentById = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      const walk = (list, parent) => {
+        for (const node of list) {
+          map.set(node.id, parent);
+          if (node.children) walk(node.children, node.id);
+        }
+      };
+      walk(nodes);
+      return map;
+    }, [nodes]);
+    const visibleNodes = useMemo(() => {
+      const out = [];
+      const walk = (list) => {
+        for (const node of list) {
+          out.push(node);
+          if (isBranchNode(node) && expandedSet.has(node.id)) walk(node.children);
+        }
+      };
+      walk(nodes);
+      return out;
+    }, [nodes, expandedSet]);
+    const visibleIds = useMemo(
+      () => new Set(visibleNodes.map((node) => node.id)),
+      [visibleNodes]
+    );
+    const tabbableId = focusedId !== void 0 && visibleIds.has(focusedId) ? focusedId : selected !== void 0 && visibleIds.has(selected) ? selected : visibleNodes[0]?.id;
+    const commitExpanded = useCallback(
+      (next) => {
+        if (expandedIds === void 0) setInternalExpanded(next);
+        onExpandedChange?.(Array.from(next));
+      },
+      [expandedIds, onExpandedChange]
+    );
+    const toggleBranch = useCallback(
+      (id) => {
+        const next = new Set(expandedSet);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        commitExpanded(next);
+      },
+      [expandedSet, commitExpanded]
+    );
+    const selectNode = useCallback(
+      (id) => {
+        if (selectedId === void 0) setInternalSelected(id);
+        onSelect?.(id);
+      },
+      [selectedId, onSelect]
+    );
+    const focusNode = useCallback((id) => {
+      if (id === void 0) return;
+      setFocusedId(id);
+      itemRefs.current.get(id)?.focus();
+    }, []);
+    const handleKeyDown = (event, node) => {
+      const branch = isBranchNode(node);
+      const expanded = expandedSet.has(node.id);
+      const index = visibleNodes.findIndex((n) => n.id === node.id);
+      let handled = true;
+      switch (event.key) {
+        case "ArrowDown":
+          focusNode(visibleNodes[index + 1]?.id);
+          break;
+        case "ArrowUp":
+          focusNode(visibleNodes[index - 1]?.id);
+          break;
+        case "ArrowRight":
+          if (branch && !expanded) {
+            toggleBranch(node.id);
+          } else if (branch && expanded) {
+            focusNode(node.children[0]?.id);
+          }
+          break;
+        case "ArrowLeft":
+          if (branch && expanded) {
+            toggleBranch(node.id);
+          } else {
+            focusNode(parentById.get(node.id));
+          }
+          break;
+        case "Home":
+          focusNode(visibleNodes[0]?.id);
+          break;
+        case "End":
+          focusNode(visibleNodes[visibleNodes.length - 1]?.id);
+          break;
+        case "Enter":
+        case " ":
+          selectNode(node.id);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    const renderNode = (node, depth) => {
+      const branch = isBranchNode(node);
+      const expanded = branch && expandedSet.has(node.id);
+      const isSelected = selected === node.id;
+      const labelId = `${baseId}-label-${indexById.get(node.id)}`;
+      const icon = node.icon ?? (branch ? "folder" : "draft");
+      const rowClasses = [
+        `${baseClass}__row`,
+        isSelected && `${baseClass}__row--selected`
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          role: "treeitem",
+          "aria-expanded": branch ? expanded : void 0,
+          "aria-selected": isSelected,
+          "aria-labelledby": labelId,
+          tabIndex: node.id === tabbableId ? 0 : -1,
+          className: `${baseClass}__item`,
+          ref: (el) => {
+            if (el) {
+              itemRefs.current.set(node.id, el);
+            } else {
+              itemRefs.current.delete(node.id);
+            }
+          },
+          onKeyDown: (event) => handleKeyDown(event, node),
+          onFocus: (event) => {
+            event.stopPropagation();
+            setFocusedId(node.id);
+          },
+          onClick: (event) => {
+            event.stopPropagation();
+            if (branch) toggleBranch(node.id);
+            selectNode(node.id);
+            focusNode(node.id);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: rowClasses,
+                style: { "--ds-treeview-depth": depth },
+                children: [
+                  branch ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__chevron material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "chevron_right"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__chevron ${baseClass}__chevron--spacer`,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__icon${typeof icon === "string" ? " material-symbols-rounded" : ""}`,
+                      "aria-hidden": "true",
+                      children: icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { id: labelId, className: `${baseClass}__label`, children: node.label })
+                ]
+              }
+            ),
+            expanded && /* @__PURE__ */ jsx("ul", { role: "group", className: `${baseClass}__group`, children: node.children.map((child) => renderNode(child, depth + 1)) })
+          ]
+        },
+        node.id
+      );
+    };
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("ul", { ...rest, ref, role: "tree", className: classes, children: nodes.map((node) => renderNode(node, 0)) });
+  }
+);
+TreeView.displayName = "TreeView";
+export {
+  TreeView
+};

package/components/TypographySwatch/TypographySwatch.css

@@ -0,0 +1,81 @@
+/* ============================================
+   TYPOGRAPHY SWATCH COMPONENT
+   Card that displays a type style with a live
+   preview and four value columns.
+   ============================================ */
+
+.ds-typography-swatch {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-1000); /* 40px */
+
+  /* Sizing */
+  width: 100%;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600); /* 24px */
+  padding: var(--padding-1000) var(--padding-500) var(--padding-500); /* 40px top, 20px sides/bottom */
+  overflow: hidden;
+}
+
+/* ============================================
+   PREVIEW TEXT
+   Rendered at the actual font properties via
+   inline style — inherits colour from tokens.
+   ============================================ */
+
+.ds-typography-swatch__preview {
+  color: var(--color-text-primary);
+  word-break: break-word;
+}
+
+/* ============================================
+   DIVIDER
+   ============================================ */
+
+.ds-typography-swatch__divider {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--color-bg-container-border);
+  margin: 0;
+}
+
+/* ============================================
+   VALUES ROW
+   Four equal columns showing the metrics.
+   ============================================ */
+
+.ds-typography-swatch__values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 100%;
+}
+
+.ds-typography-swatch__value-item {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.ds-typography-swatch__value-number {
+  font-family: var(--font-title-body-family);
+  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);
+}
+
+.ds-typography-swatch__value-label {
+  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-secondary);
+}

package/components/TypographySwatch/TypographySwatch.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface TypographySwatchProps {
+    /** Display name rendered as the preview text (e.g. "Mega 1") */
+    name: string;
+    /** Font weight label (e.g. "Light", "SemiBold", "Regular") */
+    weight: string;
+    /** Font size value (e.g. "132", "16") */
+    size: string;
+    /** Line height value (e.g. "85%", "44px") */
+    lineHeight: string;
+    /** Letter spacing value (e.g. "2%", "-1%", "0") */
+    letterSpacing: string;
+    /** Inline style object applied to the preview text for live rendering */
+    previewStyle?: React.CSSProperties;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TypographySwatch component from Figma design system.
+ * Displays a typography style in a card with a live preview
+ * of the text and four value columns showing font weight,
+ * size, line height, and letter spacing.
+ */
+export declare const TypographySwatch: ({ name, weight, size, lineHeight, letterSpacing, previewStyle, className, }: TypographySwatchProps) => React.JSX.Element;

package/components/TypographySwatch/TypographySwatch.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./TypographySwatch.css";
+const TypographySwatch = ({
+  name,
+  weight,
+  size,
+  lineHeight,
+  letterSpacing,
+  previewStyle,
+  className = ""
+}) => {
+  const baseClass = "ds-typography-swatch";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview`, style: previewStyle, children: name }),
+    /* @__PURE__ */ jsx("hr", { className: `${baseClass}__divider` }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__values`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: weight }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Font weight" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: size }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Font size" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: lineHeight }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Line height" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__value-item`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-number`, children: letterSpacing }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__value-label`, children: "Letter spacing" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  TypographySwatch
+};

package/components/UsageCard/UsageCard.css

@@ -0,0 +1,30 @@
+/* ============================================
+   USAGE CARD COMPONENT
+   An agent's budgets at a glance — meter rows
+   with reset captions, in the chart card chrome
+   ============================================ */
+
+/* Base — the card chrome itself comes from ds-chart */
+
+.ds-usage-card__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-500);
+}
+
+.ds-usage-card__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+}
+
+/* Reset caption — sits under the bar's trailing edge */
+
+.ds-usage-card__reset {
+  align-self: flex-end;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+}