@robr0/design-system 0.1.0

package/components/Stat/Stat.css

@@ -0,0 +1,78 @@
+/* ============================================
+   STAT COMPONENT
+   A single headline metric with label and an
+   optional trend delta. Compose in a row for
+   a metrics band.
+   ============================================ */
+
+.ds-stat {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-xxs);
+}
+
+/* ============================================
+   VALUE — display weight (300), per the
+   weight-contrast rule for display numerals
+   ============================================ */
+
+.ds-stat__value {
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-stat--large .ds-stat__value {
+  font-size: var(--font-display-2-size);
+  line-height: var(--font-display-2-line-height);
+  letter-spacing: var(--font-display-2-letter-spacing);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-stat__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-tertiary);
+}
+
+/* ============================================
+   DELTA — trend-coloured annotation
+   ============================================ */
+
+.ds-stat__delta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-stat__delta .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+}
+
+.ds-stat__delta--up {
+  color: var(--color-status-positive-text);
+}
+
+.ds-stat__delta--down {
+  color: var(--color-status-error-text);
+}
+
+.ds-stat__delta--neutral {
+  color: var(--color-text-tertiary);
+}

package/components/Stat/Stat.d.ts

@@ -0,0 +1,19 @@
+export interface StatProps {
+    /** The headline number, e.g. "~900%" or "3.8M" */
+    value: string;
+    /** What the number measures */
+    label: string;
+    /** Optional change annotation, e.g. "+42% vs last quarter" */
+    delta?: string;
+    /** Direction of the delta — colours it and adds an arrow */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Stat size */
+    size?: 'default' | 'large';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Stat component — a single headline metric with a label and an
+ * optional trend delta. Compose several in a row for a metrics band.
+ */
+export declare const Stat: ({ value, label, delta, trend, size, className, }: StatProps) => import("react").JSX.Element;

package/components/Stat/Stat.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./Stat.css";
+import "../../fonts/material-symbols.css";
+const TREND_ICONS = {
+  up: "arrow_upward",
+  down: "arrow_downward",
+  neutral: "remove"
+};
+const Stat = ({
+  value,
+  label,
+  delta,
+  trend = "neutral",
+  size = "default",
+  className = ""
+}) => {
+  const baseClass = "ds-stat";
+  const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: value }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+    delta && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__delta ${baseClass}__delta--${trend}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: TREND_ICONS[trend] }),
+      delta
+    ] })
+  ] });
+};
+export {
+  Stat
+};

package/components/Table/Table.css

@@ -0,0 +1,186 @@
+/* ============================================
+   TABLE COMPONENT
+   Data table with flexible cell content
+   ============================================ */
+
+.ds-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--radius-sm); /* 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-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-secondary);
+  text-align: left;
+  caption-side: top;
+  padding-bottom: var(--padding-sm); /* 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-xs) 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-sm) var(--padding-md); /* 8px 16px */
+  vertical-align: middle;
+
+  /* paragraph-em (500 weight / label style) */
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  color: var(--color-text-secondary);
+  text-align: left;
+}
+
+/* ============================================
+   DATA CELL
+   ============================================ */
+
+.ds-table__cell {
+  padding: var(--padding-sm) var(--padding-md); /* 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.
+   ============================================ */
+
+.ds-table__wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md); /* 12px */
+  background: var(--color-bg-page-primary);
+}
+
+/* When bordered, the table fills the wrapper — no radius needed on the table itself */
+.ds-table--bordered {
+  border-radius: 0;
+}
+
+/* Thead gets a tinted background to distinguish it from body rows */
+.ds-table--bordered .ds-table__head {
+  background: var(--color-bg-container-primary);
+}
+
+/* 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: 1px solid var(--color-divider);
+}
+
+/* Body cells: bottom divider */
+.ds-table--bordered .ds-table__cell {
+  border-bottom: 1px 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 */
+.ds-table--bordered .ds-table__body .ds-table__row:hover {
+  background-color: var(--color-bg-container-primary);
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-table--compact .ds-table__header-cell {
+  padding: var(--padding-xs) var(--padding-sm-md); /* 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-xs) var(--padding-sm-md); /* 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);
+}

package/components/Table/Table.d.ts

@@ -0,0 +1,45 @@
+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>;
+}
+export interface TableProps {
+    /** 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;
+}
+/**
+ * Table component from Figma design system.
+ * Data table with flexible cell content — supports text, icons,
+ * inputs, buttons, and any other React nodes inside cells.
+ */
+export declare const Table: ({ columns, rows, size, striped, bordered, caption, captionHidden, className, }: TableProps) => React.JSX.Element;

package/components/Table/Table.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./Table.css";
+const Table = ({
+  columns,
+  rows,
+  size = "default",
+  striped = false,
+  bordered = false,
+  caption,
+  captionHidden = false,
+  className = ""
+}) => {
+  const baseClass = "ds-table";
+  const sizeClass = `${baseClass}--${size}`;
+  const stripedClass = striped ? `${baseClass}--striped` : "";
+  const borderedClass = bordered ? `${baseClass}--bordered` : "";
+  const classes = [baseClass, sizeClass, stripedClass, borderedClass, className].filter(Boolean).join(" ");
+  const table = /* @__PURE__ */ jsxs("table", { 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
+      },
+      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;
+};
+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-xs) 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-sm); /* 8px */
+  padding: var(--padding-sm) var(--padding-md); /* 8px 16px */
+  border: none;
+  border-bottom: var(--border-md) solid transparent;
+  margin-bottom: calc(var(--border-xs) * -1); /* Overlap the container border */
+  background: none;
+  cursor: pointer;
+  position: relative;
+
+  /* Typography — paragraph em (medium weight) for clickable controls */
+  font-family: var(--font-paragraph-em-family);
+  font-size: var(--font-paragraph-em-size);
+  font-weight: var(--font-paragraph-em-weight);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-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-xs) var(--padding-sm-md); /* 6px 12px */
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-tabs--compact .ds-tabs__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* ============================================
+   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-md);
+  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-sm);
+}
+
+/* ============================================
+   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 Material Symbol icon name */
+    icon?: string;
+    /** 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,77 @@
+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 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: tab.icon }),
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: tab.label })
+        ]
+      },
+      tab.value
+    );
+  }) });
+};
+export {
+  Tabs
+};