sdaia-ui 1.0.1

package/src/components/Table/Table.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import {
+  ROOT,
+  HEADER_BAND,
+  HEADER_BAND_MOBILE,
+  HEADER_TEXT_COL,
+  HEADER_TITLE,
+  HEADER_DESCRIPTION,
+  HEADER_ACTIONS,
+  TABLE_SCROLL,
+  TABLE_EL,
+  THEAD_ROW,
+  TH_CELL_BASE,
+  TH_ALIGN,
+  TH_SORT_BUTTON_ALIGN,
+  TD_CELL_BASE,
+  TD_ALIGN,
+  TD_CONTENT_WRAP,
+  TD_CONTENT_WRAP_ALIGN,
+  TD_LABEL,
+  TD_HELPER,
+  ROW_BORDER_BOTTOM,
+  COL_BORDER_END,
+  PAGINATION_BAR,
+  PAGINATION_TEXT,
+} from './Table.variants';
+import type {
+  TableCellData,
+  TableColumnAlign,
+  TableProps,
+  TableSortDirection,
+} from './Table.types';
+
+function MoreVerticalIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <circle cx="10" cy="4.5" r="1.5" fill="currentColor" />
+      <circle cx="10" cy="10" r="1.5" fill="currentColor" />
+      <circle cx="10" cy="15.5" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function SortIcon({ direction }: { direction?: TableSortDirection }) {
+  const upActive = direction === 'asc';
+  const downActive = direction === 'desc';
+  const active = 'currentColor';
+  const inactive = 'currentColor';
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 3L11 6.5H5L8 3Z"
+        fill={active}
+        opacity={upActive ? 1 : downActive ? 0.3 : 0.5}
+      />
+      <path
+        d="M8 13L5 9.5H11L8 13Z"
+        fill={inactive}
+        opacity={downActive ? 1 : upActive ? 0.3 : 0.5}
+      />
+    </svg>
+  );
+}
+
+function ChevronLeft() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M12.5 15L7.5 10L12.5 5"
+        stroke="currentColor"
+        strokeWidth="1.67"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRight() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M7.5 5L12.5 10L7.5 15"
+        stroke="currentColor"
+        strokeWidth="1.67"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function isCellDataObject(value: unknown): value is TableCellData {
+  if (typeof value !== 'object' || value === null) return false;
+  return 'label' in value || 'helperText' in value;
+}
+
+export const Table = forwardRef<HTMLDivElement, TableProps>(function Table(
+  {
+    title,
+    description,
+    headerActions,
+    showMoreIcon,
+    onMoreClick,
+    hideHeader = false,
+    columns,
+    rows,
+    divider = 'none',
+    sortKey,
+    sortDirection,
+    onSort,
+    showPagination = false,
+    page = 1,
+    totalPages = 1,
+    onPageChange,
+    mobile = false,
+    className,
+    ...rest
+  },
+  ref
+) {
+  const hasHorizontal = divider === 'horizontal' || divider === 'both';
+  const hasVertical = divider === 'vertical' || divider === 'both';
+
+  const handleSort = (key: string) => {
+    if (!onSort) return;
+    const nextDir: TableSortDirection =
+      sortKey === key && sortDirection === 'asc' ? 'desc' : 'asc';
+    onSort(key, nextDir);
+  };
+
+  const headerBandClass = mobile ? HEADER_BAND_MOBILE : HEADER_BAND;
+
+  const renderCellContent = (value: ReactNode | TableCellData, align: TableColumnAlign) => {
+    if (isCellDataObject(value)) {
+      return (
+        <div className={cn(TD_CONTENT_WRAP, TD_CONTENT_WRAP_ALIGN[align])}>
+          {value.label !== undefined && value.label !== null && (
+            <span className={TD_LABEL}>{value.label}</span>
+          )}
+          {value.helperText !== undefined && value.helperText !== null && (
+            <span className={TD_HELPER}>{value.helperText}</span>
+          )}
+        </div>
+      );
+    }
+    return (
+      <div className={cn(TD_CONTENT_WRAP, TD_CONTENT_WRAP_ALIGN[align])}>
+        <span className={TD_LABEL}>{value as ReactNode}</span>
+      </div>
+    );
+  };
+
+  const showHeaderBand =
+    !hideHeader && (title || description || headerActions || showMoreIcon);
+
+  return (
+    <div
+      ref={ref}
+      data-slot="table"
+      data-divider={divider}
+      data-mobile={mobile ? 'true' : 'false'}
+      className={cn(ROOT, className)}
+      {...rest}
+    >
+      {showHeaderBand && (
+        <div data-slot="table-header" className={headerBandClass}>
+          <div className={HEADER_TEXT_COL}>
+            {title && <span className={HEADER_TITLE}>{title}</span>}
+            {description && (
+              <span className={HEADER_DESCRIPTION}>{description}</span>
+            )}
+          </div>
+          {(headerActions || showMoreIcon) && (
+            <div className={HEADER_ACTIONS}>
+              {headerActions}
+              {showMoreIcon && (
+                <Button
+                  variant="transparent"
+                  size="md"
+                  iconOnly
+                  aria-label="More actions"
+                  leadingIcon={<MoreVerticalIcon />}
+                  onClick={onMoreClick}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className={TABLE_SCROLL}>
+        <table
+          data-slot="table-grid"
+          className={cn(
+            TABLE_EL,
+            showHeaderBand && ROW_BORDER_BOTTOM.replace('border-b', 'border-t')
+          )}
+        >
+          <thead>
+            <tr className={cn(THEAD_ROW, hasHorizontal && ROW_BORDER_BOTTOM)}>
+              {columns.map((col, colIdx) => {
+                const align: TableColumnAlign = col.align ?? 'start';
+                const isSorted = sortKey === col.key;
+                const widthStyle =
+                  col.width !== undefined
+                    ? {
+                        width:
+                          typeof col.width === 'number'
+                            ? `${col.width}px`
+                            : col.width,
+                      }
+                    : undefined;
+                return (
+                  <th
+                    key={col.key}
+                    scope="col"
+                    aria-sort={
+                      col.sortable && isSorted
+                        ? sortDirection === 'asc'
+                          ? 'ascending'
+                          : 'descending'
+                        : undefined
+                    }
+                    style={widthStyle}
+                    className={cn(
+                      TH_CELL_BASE,
+                      TH_ALIGN[align],
+                      hasVertical && colIdx < columns.length - 1 && COL_BORDER_END
+                    )}
+                  >
+                    {col.sortable ? (
+                      <Button
+                        variant="transparent"
+                        size="sm"
+                        trailingIcon={
+                          <SortIcon
+                            direction={isSorted ? sortDirection : undefined}
+                          />
+                        }
+                        className={cn(
+                          'w-full !font-[500] !text-[rgba(56,66,80,1)] dark:!text-[rgba(229,231,235,1)]',
+                          TH_SORT_BUTTON_ALIGN[align]
+                        )}
+                        onClick={() => handleSort(col.key)}
+                      >
+                        {col.label}
+                      </Button>
+                    ) : (
+                      col.label
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, rowIdx) => {
+              const isLastRow = rowIdx === rows.length - 1;
+              return (
+                <tr
+                  key={row.id}
+                  data-slot="table-row"
+                  className={cn(hasHorizontal && !isLastRow && ROW_BORDER_BOTTOM)}
+                >
+                  {columns.map((col, colIdx) => {
+                    const align: TableColumnAlign = col.align ?? 'start';
+                    const cellValue = row.cells[col.key];
+                    return (
+                      <td
+                        key={col.key}
+                        data-slot="table-cell"
+                        className={cn(
+                          TD_CELL_BASE,
+                          TD_ALIGN[align],
+                          hasVertical &&
+                            colIdx < columns.length - 1 &&
+                            COL_BORDER_END
+                        )}
+                      >
+                        {renderCellContent(cellValue as ReactNode | TableCellData, align)}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {showPagination && (
+        <div data-slot="table-pagination" className={PAGINATION_BAR}>
+          <Button
+            variant="neutral"
+            size="md"
+            leadingIcon={<span className="rtl:scale-x-[-1] inline-flex"><ChevronLeft /></span>}
+            disabled={page <= 1}
+            onClick={() => onPageChange?.(Math.max(1, page - 1))}
+          >
+            Previous
+          </Button>
+          <span className={PAGINATION_TEXT}>
+            Page {page} of {totalPages}
+          </span>
+          <Button
+            variant="neutral"
+            size="md"
+            trailingIcon={<span className="rtl:scale-x-[-1] inline-flex"><ChevronRight /></span>}
+            disabled={page >= totalPages}
+            onClick={() => onPageChange?.(Math.min(totalPages, page + 1))}
+          >
+            Next
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+});
+
+Table.displayName = 'Table';

package/src/components/Table/Table.types.ts

@@ -0,0 +1,80 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type TableDivider = 'none' | 'horizontal' | 'vertical' | 'both';
+
+export type TableSortDirection = 'asc' | 'desc';
+
+export type TableColumnAlign = 'start' | 'center' | 'end';
+
+export interface TableColumn {
+  /** Unique key used to address cells in row data */
+  key: string;
+  /** Header label. If omitted, header cell renders empty (useful for action columns) */
+  label?: ReactNode;
+  /** Shows the sort indicator and makes the header cell interactive */
+  sortable?: boolean;
+  /** Optional explicit width: number (px) or any CSS length */
+  width?: number | string;
+  /** Horizontal alignment for the column content */
+  align?: TableColumnAlign;
+}
+
+export interface TableCellData {
+  /** Primary cell content */
+  label?: ReactNode;
+  /** Secondary helper text under the primary content */
+  helperText?: ReactNode;
+}
+
+export interface TableRowData {
+  /** Stable identity for the row */
+  id: string | number;
+  /**
+   * Map of column key → cell contents.
+   * A value may be a full `{ label, helperText }` object, or any ReactNode that
+   * will be rendered directly as the cell body.
+   */
+  cells: Record<string, TableCellData | ReactNode>;
+}
+
+export interface TableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Title shown in the table header band */
+  title?: ReactNode;
+  /** Optional description shown beneath the title */
+  description?: ReactNode;
+  /** Custom slot for action content (e.g. `<Button/>`s) on the trailing side of the header */
+  headerActions?: ReactNode;
+  /** Shows the inline more (3-dot) icon button after the header actions */
+  showMoreIcon?: boolean;
+  /** Click handler for the more icon. If omitted the icon is not rendered */
+  onMoreClick?: () => void;
+  /** Hides the entire top header band (title/description/actions) */
+  hideHeader?: boolean;
+
+  /** Column definitions */
+  columns: TableColumn[];
+  /** Row data */
+  rows: TableRowData[];
+
+  /** Divider style between rows/columns */
+  divider?: TableDivider;
+
+  /** Controlled sort key */
+  sortKey?: string;
+  /** Controlled sort direction */
+  sortDirection?: TableSortDirection;
+  /** Fired when a sortable header cell is clicked */
+  onSort?: (key: string, direction: TableSortDirection) => void;
+
+  /** Shows the pagination footer */
+  showPagination?: boolean;
+  /** Current page number (1-based) */
+  page?: number;
+  /** Total page count */
+  totalPages?: number;
+  /** Fired when prev/next is clicked */
+  onPageChange?: (page: number) => void;
+
+  /** Forces the mobile layout regardless of viewport */
+  mobile?: boolean;
+}

package/src/components/Table/Table.variants.ts

@@ -0,0 +1,110 @@
+/**
+ * Tailwind class groups for the Table component.
+ * All colors & sizes come from global tokens (spacing-*, text-text-*, etc.)
+ * or from exact Figma rgba values. Light and dark mode classes are colocated.
+ */
+
+export const ROOT =
+  'flex flex-col items-start w-full ' +
+  'bg-white dark:bg-[rgba(17,24,39,1)] ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)] ' +
+  'rounded-[16px] overflow-hidden';
+
+// Header band (title / description / actions)
+export const HEADER_BAND =
+  'flex flex-row items-center gap-spacing-xl w-full ' +
+  'px-spacing-2xl py-spacing-xl shrink-0';
+
+export const HEADER_BAND_MOBILE =
+  'flex flex-col items-start gap-spacing-md w-full ' +
+  'px-spacing-xl py-spacing-xl shrink-0';
+
+export const HEADER_TEXT_COL =
+  'flex flex-col items-start gap-spacing-xs flex-1 min-w-0';
+
+export const HEADER_TITLE =
+  'text-text-lg font-[500] leading-[28px] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)] ' +
+  'overflow-hidden text-ellipsis whitespace-nowrap w-full';
+
+export const HEADER_DESCRIPTION =
+  'text-text-md font-[400] leading-[24px] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'w-full';
+
+export const HEADER_ACTIONS =
+  'flex flex-row items-center gap-spacing-md shrink-0';
+
+// Table grid
+export const TABLE_SCROLL = 'w-full overflow-x-auto';
+
+export const TABLE_EL = 'w-full border-collapse';
+
+// Header row
+export const THEAD_ROW = 'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]';
+
+export const TH_CELL_BASE =
+  'h-[48px] min-h-[48px] px-spacing-2xl ' +
+  'text-text-sm font-[500] leading-[20px] ' +
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'whitespace-nowrap align-middle';
+
+export const TH_ALIGN: Record<'start' | 'center' | 'end', string> = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+};
+
+export const TH_SORT_BUTTON_ALIGN: Record<'start' | 'center' | 'end', string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+};
+
+// Body row/cell
+export const TBODY_ROW = '';
+
+export const TD_CELL_BASE =
+  'h-[64px] min-h-[64px] px-spacing-2xl align-middle';
+
+export const TD_ALIGN: Record<'start' | 'center' | 'end', string> = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+};
+
+export const TD_CONTENT_WRAP =
+  'flex flex-col items-start gap-spacing-xs min-w-0';
+
+export const TD_CONTENT_WRAP_ALIGN: Record<'start' | 'center' | 'end', string> = {
+  start: 'items-start text-start',
+  center: 'items-center text-center',
+  end: 'items-end text-end',
+};
+
+export const TD_LABEL =
+  'text-text-md font-[400] leading-[24px] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)] ' +
+  'truncate max-w-full';
+
+export const TD_HELPER =
+  'text-text-sm font-[400] leading-[20px] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'truncate max-w-full';
+
+// Dividers (applied via border utility classes)
+export const ROW_BORDER_BOTTOM =
+  'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
+
+export const COL_BORDER_END =
+  'border-e border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
+
+// Pagination footer
+export const PAGINATION_BAR =
+  'flex flex-row items-center justify-between w-full shrink-0 ' +
+  'px-spacing-2xl py-spacing-lg h-[64px] ' +
+  'border-t border-[rgba(210,214,219,1)] dark:border-[rgba(55,65,81,1)]';
+
+export const PAGINATION_TEXT =
+  'text-text-sm font-[400] leading-[20px] ' +
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]';

package/src/components/Table/index.ts

@@ -0,0 +1,10 @@
+export { Table } from './Table';
+export type {
+  TableProps,
+  TableColumn,
+  TableColumnAlign,
+  TableRowData,
+  TableCellData,
+  TableDivider,
+  TableSortDirection,
+} from './Table.types';

package/src/components/TableOfContent/TableOfContent.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { TableOfContentList } from '../TableOfContentList';
+import type { TableOfContentProps } from './TableOfContent.types';
+import { HEADER, LABEL, LISTS, PAGE_NAME, ROOT } from './TableOfContent.variants';
+
+export const TableOfContent = forwardRef<HTMLElement, TableOfContentProps>(function TableOfContent(
+  { label = 'On this page', pageName, lists, className, ...rest },
+  ref,
+) {
+  return (
+    <nav ref={ref} data-slot="table-of-content" className={cn(ROOT, className)} {...rest}>
+      <div data-slot="header" className={HEADER}>
+        <div data-slot="label" className={LABEL}>
+          {label}
+        </div>
+        <div data-slot="page-name" className={PAGE_NAME}>
+          {pageName}
+        </div>
+      </div>
+
+      <div data-slot="lists" className={LISTS}>
+        {lists.map((items, idx) => (
+          <div key={idx} data-slot="list">
+            <TableOfContentList items={items} />
+          </div>
+        ))}
+      </div>
+    </nav>
+  );
+});

package/src/components/TableOfContent/TableOfContent.types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import type { TableOfContentListItem } from '../TableOfContentList';
+
+export interface TableOfContentProps extends HTMLAttributes<HTMLElement> {
+  /** Small header label above the page name. */
+  label?: ReactNode;
+  /** The current page title displayed in the header. */
+  pageName: ReactNode;
+  /**
+   * Lists of TOC items (each list is a separate group).
+   * Matches Figma where multiple lists can appear stacked.
+   */
+  lists: TableOfContentListItem[][];
+}

package/src/components/TableOfContent/TableOfContent.variants.ts

@@ -0,0 +1,27 @@
+/** Figma: `Table of Content` — node `5125:65376` */
+
+export const ROOT = [
+  'flex w-[200px] flex-col items-start gap-spacing-md',
+  'rtl:items-end',
+].join(' ');
+
+export const HEADER = [
+  'flex w-full flex-col items-start gap-spacing-md',
+  'rtl:items-end',
+  'text-start rtl:text-end',
+].join(' ');
+
+export const LABEL = [
+  'w-full text-text-sm font-[500] leading-[var(--ds-typo-text-sm-leading)]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+  'rtl:text-right',
+].join(' ');
+
+export const PAGE_NAME = [
+  'w-full text-text-xl font-[600] leading-[var(--ds-typo-text-xl-leading)]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(249,250,251,1)]',
+  'rtl:text-right',
+].join(' ');
+
+export const LISTS = 'flex w-full flex-col items-start rtl:items-end';
+

package/src/components/TableOfContent/index.ts

@@ -0,0 +1,2 @@
+export { TableOfContent } from './TableOfContent';
+export type { TableOfContentProps } from './TableOfContent.types';