rift-ds 1.0.0

package/components/Table/Table.css

@@ -0,0 +1,223 @@
+/* ============================================
+   TABLE COMPONENT
+   Data table with flexible cell content
+   ============================================ */
+
+.ds-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--radius-200); /* 8px */
+  overflow: hidden;
+
+  /* Typography */
+  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);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   CAPTION
+   ============================================ */
+
+.ds-table__caption {
+  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-text-secondary);
+  text-align: left;
+  caption-side: top;
+  padding-bottom: var(--padding-200); /* 8px */
+}
+
+.ds-table__caption--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   ROW
+   ============================================ */
+
+.ds-table__row {
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   HEADER CELL
+   ============================================ */
+
+.ds-table__header-cell {
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  vertical-align: middle;
+
+  /* paragraph-em (500 weight / label style) */
+  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-text-secondary);
+  text-align: left;
+}
+
+/* ============================================
+   DATA CELL
+   ============================================ */
+
+.ds-table__cell {
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  vertical-align: middle;
+  color: var(--color-text-primary);
+}
+
+/* Inner wrapper ensures all cell content is perfectly vertically centred */
+.ds-table__cell-content {
+  display: flex;
+  align-items: center;
+  min-height: 0;
+}
+
+/* ============================================
+   ROW HOVER (body rows only)
+   ============================================ */
+
+.ds-table__body .ds-table__row:hover {
+  background-color: var(--color-bg-container-primary-semi);
+}
+
+/* ============================================
+   STRIPED ROWS
+   ============================================ */
+
+.ds-table--striped .ds-table__body .ds-table__row:nth-child(even) {
+  background-color: var(--color-bg-container-primary-semi);
+}
+
+.ds-table--striped .ds-table__body .ds-table__row:nth-child(even):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* ============================================
+   SIZE — DEFAULT (base styles apply)
+   ============================================ */
+
+.ds-table--default {
+  /* Base padding & typography inherited from .ds-table */
+}
+
+/* ============================================
+   BORDERED VARIANT
+   Outer border box + tinted thead + divider row lines.
+   Matches the table style used on markdown content pages.
+   ============================================ */
+
+/* The bordered table is a container surface, not a window onto the page:
+   it sits on the same ramp step as the cards and panels around it, so a
+   table reads as an object standing off the page rather than a ruled
+   region of it. */
+.ds-table__wrapper {
+  overflow-x: auto;
+  border: var(--border-025) solid var(--color-divider);
+  border-radius: var(--radius-300); /* 12px */
+  background: var(--color-bg-container-primary);
+}
+
+/* Columns never reflow on a phone: the wrapper scrolls instead
+   (design.md's responsive contract). Natural column widths below the
+   mobile breakpoint force the overflow the wrapper exists to catch —
+   without this the table crushes to the viewport and cells clip. */
+@media (max-width: 768px) {
+  .ds-table__wrapper .ds-table {
+    min-width: max-content;
+  }
+}
+
+/* When bordered, the table fills the wrapper — no radius needed on the table itself */
+.ds-table--bordered {
+  border-radius: 0;
+}
+
+/* Thead steps one notch off the body surface, so the header band reads as
+   a header in both themes without a second border. */
+.ds-table--bordered .ds-table__head {
+  background: var(--color-bg-container-secondary);
+}
+
+/* Remove row-level border — border-collapse: separate ignores it */
+.ds-table--bordered .ds-table__row {
+  border-bottom: none;
+}
+
+/* Header cells: bottom divider */
+.ds-table--bordered .ds-table__header-cell {
+  border-bottom: var(--border-025) solid var(--color-divider);
+}
+
+/* Body cells: bottom divider */
+.ds-table--bordered .ds-table__cell {
+  border-bottom: var(--border-025) solid var(--color-divider);
+}
+
+/* Last body row: no bottom border (the wrapper border handles it) */
+.ds-table--bordered .ds-table__body .ds-table__row:last-child .ds-table__cell {
+  border-bottom: none;
+}
+
+/* Row hover on bordered variant: the body is now the container surface
+   itself, so the hover has to be a tint over it rather than that same
+   colour. The passive hover token is translucent and works over either
+   theme's body. */
+.ds-table--bordered .ds-table__body .ds-table__row:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-table--compact .ds-table__header-cell {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-table--compact .ds-table__cell {
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+/* ============================================
+   SCREEN-READER-ONLY
+   Fallback text for header cells with no visible
+   label (checkbox / actions columns) — an empty
+   <th> is unannounced.
+   ============================================ */
+
+.ds-table__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/Table/Table.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+export interface TableColumn {
+    /** Unique column identifier, used as the key into each row's cells */
+    key: string;
+    /** Header label displayed in the column header */
+    header: React.ReactNode;
+    /** Optional column width (CSS value like '200px', '30%', 'auto') */
+    width?: string;
+    /** Text alignment for cells in this column */
+    align?: 'left' | 'center' | 'right';
+}
+export interface TableRow {
+    /** Unique row identifier */
+    id: string;
+    /** Cell values keyed by column key — each accepts any React node */
+    cells: Record<string, React.ReactNode>;
+}
+/** Props owned by Table itself — everything else falls through to the <table>. */
+type TableOwnProps = {
+    /** Column definitions */
+    columns: TableColumn[];
+    /** Row data */
+    rows: TableRow[];
+    /** Visual size */
+    size?: 'default' | 'compact';
+    /** Alternating row background colours */
+    striped?: boolean;
+    /**
+     * Adds an outer border + border-radius container, a tinted thead background,
+     * and `--color-divider` row lines — matching the bordered table style used on
+     * markdown content pages.
+     */
+    bordered?: boolean;
+    /** Accessible caption for the table */
+    caption?: string;
+    /** Whether to visually hide the caption (still available to screen readers) */
+    captionHidden?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface TableProps extends TableOwnProps, Omit<React.ComponentPropsWithoutRef<'table'>, keyof TableOwnProps> {
+}
+/**
+ * Table component from Figma design system.
+ * Data table with flexible cell content — supports text, icons,
+ * inputs, buttons, and any other React nodes inside cells.
+ *
+ * Forwards a ref to the `<table>` element and spreads unrecognised props onto
+ * it. When `bordered`, the table is wrapped in a container div — the ref and
+ * spread props still target the inner `<table>`.
+ */
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export {};

package/components/Table/Table.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Table.css";
+const Table = React.forwardRef(
+  ({
+    columns,
+    rows,
+    size = "default",
+    striped = false,
+    bordered = false,
+    caption,
+    captionHidden = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-table";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      striped ? `${baseClass}--striped` : "",
+      bordered ? `${baseClass}--bordered` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const table = /* @__PURE__ */ jsxs("table", { ...rest, ref, className: classes, children: [
+      caption && /* @__PURE__ */ jsx(
+        "caption",
+        {
+          className: captionHidden ? `${baseClass}__caption--hidden` : `${baseClass}__caption`,
+          children: caption
+        }
+      ),
+      /* @__PURE__ */ jsx("thead", { className: `${baseClass}__head`, children: /* @__PURE__ */ jsx("tr", { className: `${baseClass}__row ${baseClass}__row--header`, children: columns.map((col) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: `${baseClass}__header-cell`,
+          scope: "col",
+          style: {
+            width: col.width,
+            textAlign: col.align || "left"
+          },
+          children: col.header || /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: col.key })
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { className: `${baseClass}__body`, children: rows.map((row) => /* @__PURE__ */ jsx("tr", { className: `${baseClass}__row`, children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: `${baseClass}__cell`, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__cell-content`,
+          style: {
+            justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
+          },
+          children: row.cells[col.key]
+        }
+      ) }, col.key)) }, row.id)) })
+    ] });
+    if (bordered) {
+      return /* @__PURE__ */ jsx("div", { className: `${baseClass}__wrapper`, children: table });
+    }
+    return table;
+  }
+);
+Table.displayName = "Table";
+export {
+  Table
+};

package/components/Tabs/Tabs.css

@@ -0,0 +1,140 @@
+/* ============================================
+   TABS COMPONENT
+   Horizontal tab navigation with underline
+   ============================================ */
+
+.ds-tabs {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+}
+
+/* ============================================
+   FULL WIDTH
+   ============================================ */
+
+.ds-tabs--full-width {
+  display: flex;
+  width: 100%;
+}
+
+.ds-tabs--full-width .ds-tabs__tab {
+  flex: 1;
+}
+
+/* ============================================
+   TAB BUTTON
+   ============================================ */
+
+.ds-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-200); /* 8px */
+  padding: var(--padding-200) var(--padding-400); /* 8px 16px */
+  border: none;
+  border-bottom: var(--border-050) solid transparent;
+  margin-bottom: calc(var(--border-025) * -1); /* Overlap the container border */
+  background: none;
+  cursor: pointer;
+  position: relative;
+
+  /* Typography — paragraph em (medium weight) for clickable controls */
+  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);
+
+  transition: color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-tabs--compact .ds-tabs__tab {
+  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-tabs--compact .ds-tabs__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-tabs__label {
+  color: var(--color-text-tertiary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-tabs__icon {
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   DEFAULT (inactive) TAB
+   ============================================ */
+
+.ds-tabs__tab:not(.ds-tabs__tab--disabled):hover .ds-tabs__label {
+  color: var(--color-text-primary);
+}
+
+.ds-tabs__tab:not(.ds-tabs__tab--disabled):hover .ds-tabs__icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-tabs__tab:not(.ds-tabs__tab--disabled):hover {
+  border-bottom-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   ACTIVE TAB
+   ============================================ */
+
+.ds-tabs__tab--active {
+  border-bottom-color: var(--color-action-primary-bg);
+}
+
+.ds-tabs__tab--active .ds-tabs__label {
+  color: var(--color-text-primary);
+}
+
+.ds-tabs__tab--active .ds-tabs__icon {
+  color: var(--color-action-primary-bg);
+}
+
+.ds-tabs__tab--active:not(.ds-tabs__tab--disabled):hover {
+  border-bottom-color: var(--color-action-primary-bg);
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-tabs__tab:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+  border-radius: var(--radius-200);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-tabs__tab--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface Tab {
+    /** Unique tab identifier */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Whether this tab is disabled */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /** Array of tab definitions */
+    tabs: Tab[];
+    /** Currently active tab value */
+    activeTab: string;
+    /** Callback when tab is selected */
+    onTabChange?: (value: string) => void;
+    /** Visual size */
+    size?: 'default' | 'compact';
+    /** Whether tabs fill the available width */
+    fullWidth?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessible label for the tab list */
+    ariaLabel?: string;
+}
+export declare const Tabs: ({ tabs, activeTab, onTabChange, size, fullWidth, className, ariaLabel, }: TabsProps) => React.JSX.Element;

package/components/Tabs/Tabs.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import "./Tabs.css";
+import "../../fonts/material-symbols.css";
+const Tabs = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  size = "default",
+  fullWidth = false,
+  className = "",
+  ariaLabel = "Tabs"
+}) => {
+  const baseClass = "ds-tabs";
+  const sizeClass = `${baseClass}--${size}`;
+  const fullWidthClass = fullWidth ? `${baseClass}--full-width` : "";
+  const classes = [baseClass, sizeClass, fullWidthClass, className].filter(Boolean).join(" ");
+  const handleKeyDown = (e, index) => {
+    const enabledTabs = tabs.filter((t) => !t.disabled);
+    const currentEnabledIndex = enabledTabs.findIndex((t) => t.value === tabs[index].value);
+    let targetTab;
+    switch (e.key) {
+      case "ArrowRight":
+        e.preventDefault();
+        targetTab = enabledTabs[(currentEnabledIndex + 1) % enabledTabs.length];
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        targetTab = enabledTabs[(currentEnabledIndex - 1 + enabledTabs.length) % enabledTabs.length];
+        break;
+      case "Home":
+        e.preventDefault();
+        targetTab = enabledTabs[0];
+        break;
+      case "End":
+        e.preventDefault();
+        targetTab = enabledTabs[enabledTabs.length - 1];
+        break;
+    }
+    if (targetTab && onTabChange) {
+      onTabChange(targetTab.value);
+      const tabList = e.target.parentElement;
+      const targetEl = tabList?.querySelector(`[data-tab-value="${targetTab.value}"]`);
+      targetEl?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "tablist", "aria-label": ariaLabel, children: tabs.map((tab, index) => {
+    const isActive = tab.value === activeTab;
+    const tabClass = [
+      `${baseClass}__tab`,
+      isActive ? `${baseClass}__tab--active` : "",
+      tab.disabled ? `${baseClass}__tab--disabled` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: tabClass,
+        role: "tab",
+        "aria-selected": isActive,
+        "aria-disabled": tab.disabled,
+        tabIndex: isActive ? 0 : -1,
+        "data-tab-value": tab.value,
+        onClick: () => !tab.disabled && onTabChange?.(tab.value),
+        onKeyDown: (e) => handleKeyDown(e, index),
+        children: [
+          tab.icon && (typeof tab.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: tab.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: tab.icon })),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: tab.label })
+        ]
+      },
+      tab.value
+    );
+  }) });
+};
+export {
+  Tabs
+};