sdaia-ui 1.0.1 → 1.0.2

package/src/components/Table/Table.tsx

@@ -1,353 +0,0 @@
-'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

@@ -1,80 +0,0 @@
-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

@@ -1,110 +0,0 @@
-/**
- * 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

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

package/src/components/TableOfContent/TableOfContent.tsx

@@ -1,33 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/** 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

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