@robr0/design-system 0.7.0 → 0.9.0

package/components/CodeDiff/CodeDiff.css

@@ -0,0 +1,175 @@
+/* ============================================
+   CODE DIFF COMPONENT
+   Unified diff view: added, removed, and context
+   lines with old/new line number gutters.
+   Note: the system typeface is Nunito Sans;
+   code is the one sanctioned monospace context.
+   ============================================ */
+
+.ds-codediff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER — filename + additions/deletions stats
+   ============================================ */
+
+.ds-codediff__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding: var(--padding-xs) var(--padding-md);
+  border-bottom: var(--border-xs) solid var(--color-bg-container-border);
+  flex-shrink: 0;
+}
+
+.ds-codediff__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-codediff__stats {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex-shrink: 0;
+  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);
+}
+
+.ds-codediff__stat--add {
+  color: var(--color-status-positive-text);
+}
+
+.ds-codediff__stat--remove {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   SCROLL CONTAINER
+   Long lines scroll horizontally inside the
+   component; the tab stop makes that scroll
+   keyboard-reachable.
+   ============================================ */
+
+.ds-codediff__scroll {
+  overflow-x: auto;
+}
+
+.ds-codediff__scroll:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   LINES
+   ============================================ */
+
+/* width: max-content + min-width: 100% so row tints
+   span the full width of the longest line, not just
+   the visible scrollport */
+.ds-codediff__lines {
+  list-style: none;
+  margin: 0;
+  padding: var(--padding-xs) 0;
+  width: max-content;
+  min-width: 100%;
+  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);
+}
+
+.ds-codediff__line {
+  display: flex;
+  align-items: baseline;
+  /* keeps blank diff lines from collapsing to zero height */
+  min-height: var(--font-paragraph-sm-line-height);
+}
+
+/* ============================================
+   GUTTERS & MARKER
+   Fixed-width columns in the monospace metric so
+   rows align; excluded from text selection so a
+   copied diff carries only the code.
+   ============================================ */
+
+.ds-codediff__gutter {
+  flex-shrink: 0;
+  min-width: 4ch;
+  padding: 0 var(--padding-xxs);
+  text-align: right;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+.ds-codediff__marker {
+  flex-shrink: 0;
+  width: 2ch;
+  text-align: center;
+  user-select: none;
+}
+
+.ds-codediff__content {
+  white-space: pre;
+  padding-right: var(--padding-md);
+}
+
+/* ============================================
+   LINE VARIANTS
+   Added rows tint with the positive status
+   background, removed with the error one.
+   ============================================ */
+
+.ds-codediff__line--add {
+  background-color: var(--color-status-positive-bg);
+}
+
+.ds-codediff__line--add .ds-codediff__marker {
+  color: var(--color-status-positive-text);
+}
+
+.ds-codediff__line--remove {
+  background-color: var(--color-status-error-bg);
+}
+
+.ds-codediff__line--remove .ds-codediff__marker {
+  color: var(--color-status-error-text);
+}
+
+.ds-codediff__line--hunk {
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   SCREEN-READER-ONLY TEXT
+   Announces the change type; the marker column
+   itself is decorative (aria-hidden).
+   ============================================ */
+
+.ds-codediff__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/CodeDiff/CodeDiff.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+/** The kind of line a parsed diff row represents. */
+export type CodeDiffLineType = 'add' | 'remove' | 'context' | 'hunk';
+export interface CodeDiffLine {
+    /** Whether the line is an addition, a removal, unchanged context, or a hunk header */
+    type: CodeDiffLineType;
+    /** The line's text with its diff marker stripped (hunk headers keep the full `@@` line) */
+    content: string;
+    /** Line number in the old file, or null for additions and hunk headers */
+    oldLine: number | null;
+    /** Line number in the new file, or null for removals and hunk headers */
+    newLine: number | null;
+}
+export interface ParsedCodeDiff {
+    /** The diff's rows in order, with per-side line numbers computed */
+    lines: CodeDiffLine[];
+    /** Count of added lines */
+    additions: number;
+    /** Count of removed lines */
+    deletions: number;
+}
+/**
+ * Parse a unified-format diff body into typed lines with old/new line
+ * numbers. Lines starting with `+` are additions, `-` removals, `@@ … @@`
+ * hunk headers, and everything else context. File header lines (`+++`,
+ * `---`) and no-newline markers (``) carry no
+ * content and are skipped. A diff with no hunk headers is treated as one
+ * hunk starting at line 1.
+ */
+export declare function parseUnifiedDiff(diff: string): ParsedCodeDiff;
+/** Props owned by CodeDiff itself — everything else falls through to the root div. */
+type CodeDiffOwnProps = {
+    /**
+     * A unified-format diff body. Lines starting with `+` render as additions,
+     * `-` as removals, `@@ … @@` as hunk headers, everything else as context;
+     * `+++`/`---` file header lines are ignored. Without hunk headers the
+     * whole string is treated as one hunk starting at line 1.
+     */
+    diff: string;
+    /** Filename shown in a header bar above the diff, with an additions/deletions summary */
+    filename?: string;
+    /** Show the old and new line number gutters */
+    showLineNumbers?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CodeDiffProps extends CodeDiffOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CodeDiffOwnProps> {
+}
+/**
+ * CodeDiff component — unified diff view for code changes. Added lines tint
+ * with the positive status background, removed lines with the error one, and
+ * two gutters track old and new line numbers. Purely presentational: parsing
+ * happens in the exported `parseUnifiedDiff`, long lines scroll horizontally
+ * inside the block, and the change type is announced through visually hidden
+ * text while the marker column stays decorative.
+ */
+export declare const CodeDiff: React.ForwardRefExoticComponent<CodeDiffProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/CodeDiff/CodeDiff.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./CodeDiff.css";
+const HUNK_HEADER = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/;
+function parseUnifiedDiff(diff) {
+  const rawLines = diff.replace(/\n$/, "").split("\n");
+  const lines = [];
+  let additions = 0;
+  let deletions = 0;
+  let oldLine = 1;
+  let newLine = 1;
+  for (const raw of rawLines) {
+    if (raw.startsWith("+++") || raw.startsWith("---") || raw.startsWith("\\")) {
+      continue;
+    }
+    const hunk = raw.match(HUNK_HEADER);
+    if (hunk) {
+      oldLine = parseInt(hunk[1], 10);
+      newLine = parseInt(hunk[2], 10);
+      lines.push({ type: "hunk", content: raw, oldLine: null, newLine: null });
+      continue;
+    }
+    if (raw.startsWith("+")) {
+      additions += 1;
+      lines.push({ type: "add", content: raw.slice(1), oldLine: null, newLine });
+      newLine += 1;
+      continue;
+    }
+    if (raw.startsWith("-")) {
+      deletions += 1;
+      lines.push({ type: "remove", content: raw.slice(1), oldLine, newLine: null });
+      oldLine += 1;
+      continue;
+    }
+    lines.push({
+      type: "context",
+      content: raw.startsWith(" ") ? raw.slice(1) : raw,
+      oldLine,
+      newLine
+    });
+    oldLine += 1;
+    newLine += 1;
+  }
+  return { lines, additions, deletions };
+}
+const CHANGE_LABELS = {
+  add: "Added line:",
+  remove: "Removed line:"
+};
+const CodeDiff = React.forwardRef(
+  ({ diff, filename, showLineNumbers = true, className = "", ...rest }, ref) => {
+    const baseClass = "ds-codediff";
+    const { lines, additions, deletions } = parseUnifiedDiff(diff);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      filename && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsx("code", { className: `${baseClass}__filename`, children: filename }),
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stats`, children: [
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stat ${baseClass}__stat--add`, children: [
+            "+",
+            additions,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " added" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stat ${baseClass}__stat--remove`, children: [
+            "-",
+            deletions,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " removed" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__scroll`,
+          tabIndex: 0,
+          role: "region",
+          "aria-label": filename ? `Code diff: ${filename}` : "Code diff",
+          children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__lines`, children: lines.map((line, index) => {
+            const changeLabel = CHANGE_LABELS[line.type];
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: [
+                  `${baseClass}__line`,
+                  line.type === "add" ? `${baseClass}__line--add` : "",
+                  line.type === "remove" ? `${baseClass}__line--remove` : "",
+                  line.type === "hunk" ? `${baseClass}__line--hunk` : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  showLineNumbers && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.oldLine ?? "" }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.newLine ?? "" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__marker`, "aria-hidden": "true", children: line.type === "add" ? "+" : line.type === "remove" ? "-" : "" }),
+                  changeLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__sr-only`, children: [
+                    changeLabel,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__content`, children: line.content })
+                ]
+              },
+              index
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+CodeDiff.displayName = "CodeDiff";
+export {
+  CodeDiff,
+  parseUnifiedDiff
+};

package/components/ColorPicker/ColorPicker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { Field } from "../Field/Field.js";

package/components/Combobox/Combobox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
 import { Field } from "../Field/Field.js";

package/components/CommandPalette/CommandPalette.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";

package/components/Composer/Composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useLayoutEffect } from "react";
 import { CircularButton } from "../CircularButton/CircularButton.js";

package/components/ContactCard/ContactCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import "./ContactCard.css";
 import "../../fonts/material-symbols.css";

package/components/ContextMenu/ContextMenu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from "react";
 import "./ContextMenu.css";

package/components/DataTable/DataTable.css

@@ -0,0 +1,105 @@
+/* ============================================
+   DATA TABLE COMPONENT
+   The wired table block: toolbar with search
+   and filter slot, sortable headers, selection,
+   pagination footer. Row and cell styling all
+   comes from the underlying Table — this file
+   only styles the chrome around it.
+   ============================================ */
+
+.ds-data-table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  width: 100%;
+}
+
+/* ============================================
+   TOOLBAR
+   ============================================ */
+
+.ds-data-table__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+.ds-data-table__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+/* The search field sits at the end of the toolbar even with no filters */
+.ds-data-table__search {
+  margin-left: auto;
+  max-width: 240px;
+}
+
+/* ============================================
+   SORTABLE HEADERS
+   The button fills the header cell so the whole
+   label is the click target.
+   ============================================ */
+
+.ds-data-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-data-table__sort:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-xxs);
+}
+
+.ds-data-table__sort-icon {
+  --icon-size: var(--icon-size-sm);
+
+  color: var(--color-icon-secondary);
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-data-table__sort:hover .ds-data-table__sort-icon,
+.ds-data-table__sort:focus-visible .ds-data-table__sort-icon,
+.ds-data-table__sort-icon--active {
+  opacity: 1;
+}
+
+.ds-data-table__sort-icon--active {
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.ds-data-table__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+.ds-data-table__count {
+  color: var(--color-text-tertiary);
+  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);
+  font-variant-numeric: tabular-nums;
+}

package/components/DataTable/DataTable.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+export interface DataTableColumn {
+    /** Unique column identifier, used as the key into each row's values. */
+    key: string;
+    /** Header label displayed in the column header. */
+    header: React.ReactNode;
+    /** Whether clicking this header sorts by the column. */
+    sortable?: boolean;
+    /** Optional column width (CSS value like '200px', '30%', 'auto'). */
+    width?: string;
+    /** Text alignment for cells in this column. */
+    align?: 'left' | 'center' | 'right';
+    /** Render the cell for a row; defaults to the row's raw value for this key. */
+    render?: (row: DataTableRow) => React.ReactNode;
+}
+export interface DataTableRow {
+    /** Unique row identifier. */
+    id: string;
+    /** Raw values keyed by column key — used for sorting, searching, and default rendering. */
+    values: Record<string, string | number | null | undefined>;
+}
+export interface DataTableSort {
+    /** The column being sorted. */
+    key: string;
+    /** Sort direction. */
+    direction: 'asc' | 'desc';
+}
+/** Props owned by DataTable itself — everything else falls through to the root element. */
+type DataTableOwnProps = {
+    /** Column definitions. */
+    columns: DataTableColumn[];
+    /** Row data, as raw values the table can sort and search. */
+    rows: DataTableRow[];
+    /** Rows per page. Setting this turns on the built-in pagination. */
+    pageSize?: number;
+    /** Adds a checkbox column with a select-all header. */
+    selectable?: boolean;
+    /** Selected row ids for controlled use. Pair with `onSelectionChange`. */
+    selectedIds?: string[];
+    /** Initially selected row ids for uncontrolled use. */
+    defaultSelectedIds?: string[];
+    /** Fires with the full list of selected row ids after every change. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Sort state for controlled use. Pair with `onSortChange`; `null` means unsorted. */
+    sort?: DataTableSort | null;
+    /** Initial sort state for uncontrolled use. */
+    defaultSort?: DataTableSort;
+    /** Fires with the new sort state — `null` when a third click clears the sort. */
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Shows the built-in search field, matching against every column's raw value. */
+    searchable?: boolean;
+    /** Placeholder for the search field. */
+    searchPlaceholder?: string;
+    /** Slot beside the search field for consumer-owned filter controls. */
+    toolbar?: React.ReactNode;
+    /** Visual size, passed through to the underlying Table. */
+    size?: 'default' | 'compact';
+    /** Alternating row backgrounds, passed through to the underlying Table. */
+    striped?: boolean;
+    /** Accessible caption for the underlying table (visually hidden). */
+    caption?: string;
+    /** What to render when no rows match — defaults to a built-in empty state. */
+    emptyState?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface DataTableProps extends DataTableOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DataTableOwnProps> {
+}
+/**
+ * DataTable is the wired version of Table: sorting on header click, a search
+ * field, row selection with a select-all header, client-side pagination, and
+ * an empty state — assembled from Table, Pagination, Checkbox, Input and
+ * EmptyState so a working data view is one component, not an afternoon of
+ * plumbing.
+ *
+ * Rows carry raw values rather than rendered nodes; a column's `render`
+ * turns them into cells when text isn't enough. For server-driven data,
+ * control `sort` and slot your own filters into `toolbar`.
+ */
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDivElement>>;
+export {};