@fragments-sdk/ui 0.9.4 → 0.9.6

package/src/components/Table/index.tsx

@@ -6,418 +6,149 @@ import '../../styles/globals.scss';
 import styles from './Table.module.scss';
 
 // ============================================
-// Types (self-owned — no external dependency for types)
+// Types
 // ============================================
 
-/** Column definition compatible with @tanstack/react-table */
-export type ColumnDef<TData = unknown, TValue = unknown> = {
-  id?: string;
-  accessorKey?: string;
-  accessorFn?: (row: TData) => TValue;
-  header?: string | ((context: any) => React.ReactNode);
-  cell?: string | ((context: any) => React.ReactNode);
-  size?: number;
-  minSize?: number;
-  maxSize?: number;
-  enableSorting?: boolean;
-  [key: string]: unknown;
-};
-
-export type SortingState = Array<{ id: string; desc: boolean }>;
-export type RowSelectionState = Record<string, boolean>;
-type OnChangeFn<T> = ((updaterOrValue: T | ((prev: T) => T)) => void);
-
-export type TableColumn<T> = ColumnDef<T, unknown>;
-
-// ============================================
-// Lazy-loaded dependency (@tanstack/react-table)
-// ============================================
-
-let _useReactTable: any = null;
-let _getCoreRowModel: any = null;
-let _getSortedRowModel: any = null;
-let _flexRender: any = null;
-let _tableLoaded = false;
-let _tableFailed = false;
-
-function loadTableDeps() {
-  if (_tableLoaded) return;
-  _tableLoaded = true;
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const rt = require('@tanstack/react-table');
-    _useReactTable = rt.useReactTable;
-    _getCoreRowModel = rt.getCoreRowModel;
-    _getSortedRowModel = rt.getSortedRowModel;
-    _flexRender = rt.flexRender;
-  } catch {
-    _tableFailed = true;
-  }
-}
-
-export interface TableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'onClick'> {
-  /** Column definitions */
-  columns: TableColumn<T>[];
-  /** Data array */
-  data: T[];
-  /** Unique key extractor for each row */
-  getRowId?: (row: T) => string;
-  /** Enable sorting */
-  sortable?: boolean;
-  /** Controlled sorting state */
-  sorting?: SortingState;
-  /** Sorting change handler */
-  onSortingChange?: OnChangeFn<SortingState>;
-  /** Enable row selection */
-  selectable?: boolean;
-  /** Controlled selection state */
-  rowSelection?: RowSelectionState;
-  /** Selection change handler */
-  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
-  /** Row click handler */
-  onRowClick?: (row: T) => void;
-  /** Empty state message */
-  emptyMessage?: string;
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   /** Size variant */
   size?: 'sm' | 'md';
-  /** Visible caption for the table (recommended for accessibility) */
-  caption?: string;
-  /** Hide the caption visually but keep it for screen readers */
-  captionHidden?: boolean;
   /** Show alternating row backgrounds */
   striped?: boolean;
   /** Wrap table in a bordered container */
   bordered?: boolean;
+  children?: React.ReactNode;
 }
 
-function TableRoot<T>({
-  columns,
-  data,
-  getRowId,
-  sortable = false,
-  sorting: controlledSorting,
-  onSortingChange,
-  selectable = false,
-  rowSelection: controlledRowSelection,
-  onRowSelectionChange,
-  onRowClick,
-  emptyMessage = 'No data available',
-  size = 'md',
-  className,
-  caption,
-  captionHidden = false,
-  striped = false,
-  bordered = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  ...htmlProps
-}: TableProps<T>) {
-  loadTableDeps();
-
-  // Internal sorting state when uncontrolled
-  const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);
-  const sorting = controlledSorting ?? internalSorting;
-  const handleSortingChange = onSortingChange ?? setInternalSorting;
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** Mark row as selected */
+  selected?: boolean;
+  children?: React.ReactNode;
+}
 
-  // Internal selection state when uncontrolled
-  const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({});
-  const rowSelection = controlledRowSelection ?? internalRowSelection;
-  const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  children?: React.ReactNode;
+}
 
-  if (_tableFailed || !_useReactTable) {
-    if (_tableFailed && process.env.NODE_ENV === 'development') {
-      console.warn(
-        '[@fragments-sdk/ui] Table: @tanstack/react-table is not installed. ' +
-        'Install it with: npm install @tanstack/react-table'
-      );
-    }
-    return null;
-  }
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** Scope for the header cell */
+  scope?: string;
+  children?: React.ReactNode;
+}
 
-  const table = _useReactTable({
-    data,
-    columns,
-    getRowId,
-    getCoreRowModel: _getCoreRowModel(),
-    getSortedRowModel: sortable ? _getSortedRowModel() : undefined,
-    state: {
-      sorting: sortable ? sorting : undefined,
-      rowSelection: selectable ? rowSelection : undefined,
-    },
-    onSortingChange: sortable ? handleSortingChange : undefined,
-    onRowSelectionChange: selectable ? handleRowSelectionChange : undefined,
-    enableRowSelection: selectable,
-    enableSorting: sortable,
-  });
+export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+  /** Visually hide the caption (screen readers only) */
+  hidden?: boolean;
+  children?: React.ReactNode;
+}
 
-  const isEmpty = data.length === 0;
+// ============================================
+// Sub-components
+// ============================================
 
-  const hasExplicitColumnSizing = React.useMemo(
-    () =>
-      columns.some((column) =>
-        column.size !== undefined ||
-        column.minSize !== undefined ||
-        column.maxSize !== undefined
-      ),
-    [columns]
+function TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead className={[styles.thead, className].filter(Boolean).join(' ')} {...props}>
+      {children}
+    </thead>
   );
+}
 
-  const rootClasses = [
-    styles.table,
-    hasExplicitColumnSizing && styles.fixedLayout,
-    styles[size],
-    striped && styles.striped,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const getColumnSizeStyle = (
-    column: {
-      getSize: () => number;
-      columnDef: { size?: number; minSize?: number; maxSize?: number };
-    }
-  ): React.CSSProperties | undefined => {
-    const { size, minSize, maxSize } = column.columnDef;
-    const hasExplicitSize = size !== undefined || minSize !== undefined || maxSize !== undefined;
-
-    if (!hasExplicitSize) {
-      return undefined;
-    }
-
-    const resolvedSize = column.getSize();
-
-    return {
-      width: resolvedSize,
-      minWidth: minSize ?? resolvedSize,
-      maxWidth: maxSize ?? resolvedSize,
-    };
-  };
-
-  if (isEmpty) {
-    return (
-      <div className={styles.emptyState}>
-        <span className={styles.emptyMessage}>{emptyMessage}</span>
-      </div>
-    );
-  }
-
-  const isInteractiveTarget = (
-    target: EventTarget | null,
-    currentTarget: HTMLTableRowElement
-  ) => {
-    if (!(target instanceof Element)) return false;
-
-    const interactiveElement = target.closest(
-      'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
-    );
-
-    return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
-  };
-
+function TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
   return (
-    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
-      <table
-        {...htmlProps}
-        className={rootClasses}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-      >
-        {caption && (
-          <caption className={captionHidden ? styles.captionHidden : styles.caption}>
-            {caption}
-          </caption>
-        )}
-        <thead className={styles.thead}>
-          {table.getHeaderGroups().map((headerGroup: any) => (
-            <tr key={headerGroup.id} className={styles.headerRow}>
-              {headerGroup.headers.map((header: any) => {
-                const canSort = sortable && header.column.getCanSort();
-                const sortDirection = header.column.getIsSorted();
-                const toggleSorting = canSort ? header.column.getToggleSortingHandler() : undefined;
-
-                return (
-                  <th
-                    key={header.id}
-                    className={[styles.th, canSort && styles.thSortable].filter(Boolean).join(' ')}
-                    style={getColumnSizeStyle(header.column)}
-                    scope="col"
-                    aria-sort={
-                      sortDirection
-                        ? sortDirection === 'asc'
-                          ? 'ascending'
-                          : 'descending'
-                        : canSort
-                        ? 'none'
-                        : undefined
-                    }
-                  >
-                    {canSort ? (
-                      <button
-                        type="button"
-                        className={styles.sortButton}
-                        onClick={toggleSorting}
-                      >
-                        <span className={styles.headerContent}>
-                          {header.isPlaceholder
-                            ? null
-                            : _flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </span>
-                        <span className={styles.sortIndicator} aria-hidden="true">
-                          {sortDirection === 'asc' ? (
-                            <SortAscIcon />
-                          ) : sortDirection === 'desc' ? (
-                            <SortDescIcon />
-                          ) : (
-                            <SortIcon />
-                          )}
-                        </span>
-                      </button>
-                    ) : (
-                      <div className={styles.headerContent}>
-                        {header.isPlaceholder
-                          ? null
-                          : _flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </div>
-                    )}
-                  </th>
-                );
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody className={styles.tbody}>
-          {table.getRowModel().rows.map((row: any) => {
-            const isClickable = !!onRowClick;
-            const isSelected = selectable ? row.getIsSelected() : false;
-            const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
-              if (!onRowClick) return;
-              if (isInteractiveTarget(event.target, event.currentTarget)) return;
-              onRowClick(row.original);
-            };
-
-            const handleRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {
-              if (!onRowClick) return;
-              if (isInteractiveTarget(event.target, event.currentTarget)) return;
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                onRowClick(row.original);
-              }
-            };
+    <tbody className={[styles.tbody, className].filter(Boolean).join(' ')} {...props}>
+      {children}
+    </tbody>
+  );
+}
 
-            return (
-              <tr
-                key={row.id}
-                className={[
-                  styles.row,
-                  isClickable && styles.clickable,
-                  isSelected && styles.selected,
-                ]
-                  .filter(Boolean)
-                  .join(' ')}
-                onClick={isClickable ? handleRowClick : undefined}
-                onKeyDown={isClickable ? handleRowKeyDown : undefined}
-                tabIndex={isClickable ? 0 : undefined}
-                data-selected={isSelected || undefined}
-              >
-                {row.getVisibleCells().map((cell: any) => (
-                  <td key={cell.id} className={styles.td} style={getColumnSizeStyle(cell.column)}>
-                    {_flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
+function TableFooter({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tfoot className={[styles.tfoot, className].filter(Boolean).join(' ')} {...props}>
+      {children}
+    </tfoot>
   );
 }
 
-// Sort icons - minimal and functional
-function SortIcon() {
+function TableRow({ className, selected, children, ...props }: TableRowProps) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
+    <tr
+      className={[styles.row, selected && styles.selected, className].filter(Boolean).join(' ')}
+      data-selected={selected || undefined}
+      {...props}
     >
-      <path
-        d="M6 2L8.5 5H3.5L6 2Z"
-        fill="currentColor"
-        opacity="0.3"
-      />
-      <path
-        d="M6 10L3.5 7H8.5L6 10Z"
-        fill="currentColor"
-        opacity="0.3"
-      />
-    </svg>
+      {children}
+    </tr>
   );
 }
 
-function SortAscIcon() {
+function TableCell({ className, children, ...props }: TableCellProps) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <path d="M6 2L8.5 5H3.5L6 2Z" fill="currentColor" />
-    </svg>
+    <td className={[styles.td, className].filter(Boolean).join(' ')} {...props}>
+      {children}
+    </td>
   );
 }
 
-function SortDescIcon() {
+function TableHeaderCell({ className, scope = 'col', children, ...props }: TableHeaderCellProps) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
+    <th className={[styles.th, className].filter(Boolean).join(' ')} scope={scope} {...props}>
+      <div className={styles.headerContent}>{children}</div>
+    </th>
+  );
+}
+
+function TableCaption({ className, hidden: visuallyHidden, children, ...props }: TableCaptionProps) {
+  return (
+    <caption
+      className={[visuallyHidden ? styles.captionHidden : styles.caption, className].filter(Boolean).join(' ')}
+      {...props}
     >
-      <path d="M6 10L3.5 7H8.5L6 10Z" fill="currentColor" />
-    </svg>
+      {children}
+    </caption>
   );
 }
 
-// Helper to create simple columns without TanStack's createColumnHelper
-export function createColumns<T>(
-  columns: Array<{
-    key: string;
-    header: string;
-    width?: number;
-    cell?: (row: T) => React.ReactNode;
-  }>
-): TableColumn<T>[] {
-  return columns.map((col) => ({
-    id: col.key,
-    accessorKey: col.key,
-    header: col.header,
-    size: col.width,
-    minSize: col.width,
-    maxSize: col.width,
-    cell: col.cell
-      ? ({ row }) => col.cell!(row.original)
-      : ({ getValue }) => getValue() ?? '--',
-  }));
+// ============================================
+// Root component
+// ============================================
+
+function TableRoot({
+  size = 'md',
+  striped = false,
+  bordered = false,
+  className,
+  children,
+  ...htmlProps
+}: TableProps) {
+  const tableClasses = [
+    styles.table,
+    styles[size],
+    striped && styles.striped,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
+      <table className={tableClasses} {...htmlProps}>
+        {children}
+      </table>
+    </div>
+  );
 }
 
+// ============================================
+// Compound export
+// ============================================
+
 export const Table = Object.assign(TableRoot, {
   Root: TableRoot,
-  Columns: createColumns,
+  Head: TableHead,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Cell: TableCell,
+  HeaderCell: TableHeaderCell,
+  Caption: TableCaption,
 });

package/src/index.ts

@@ -210,16 +210,27 @@ export {
   type LoadingScreenProps,
 } from './components/Loading';
 
-// Table
+// Table (simple semantic HTML table)
 export {
   Table,
-  createColumns,
   type TableProps,
-  type TableColumn,
+  type TableRowProps,
+  type TableCellProps,
+  type TableHeaderCellProps,
+  type TableCaptionProps,
+} from './components/Table';
+
+// DataTable (TanStack-powered data table)
+export {
+  DataTable,
+  createColumns,
+  type DataTableProps,
+  type DataTableColumn,
   type ColumnDef,
   type SortingState,
   type RowSelectionState,
-} from './components/Table';
+  type ExpandedState,
+} from './components/DataTable';
 
 // EmptyState
 export {

package/src/tokens/_computed.scss

@@ -8,12 +8,12 @@
 //
 // ============================================
 
-@use 'sass:map';
-@use 'seeds' as seeds;
-@use 'palettes' as palettes;
-@use 'density' as density;
-@use 'radius' as radius;
-@use 'derive' as derive;
+@use "sass:map";
+@use "seeds" as seeds;
+@use "palettes" as palettes;
+@use "density" as density;
+@use "radius" as radius;
+@use "derive" as derive;
 
 // --------------------------------------------
 // Resolve Seed Values
@@ -60,6 +60,7 @@ $computed-padding-container-sm: map.get($_padding, container-sm);
 $computed-padding-container-md: map.get($_padding, container-md);
 $computed-padding-container-lg: map.get($_padding, container-lg);
 $computed-padding-container-xl: map.get($_padding, container-xl);
+$computed-padding-inline-xs: map.get($_padding, inline-xs);
 $computed-padding-inline-sm: map.get($_padding, inline-sm);
 $computed-padding-inline-md: map.get($_padding, inline-md);
 $computed-padding-inline-lg: map.get($_padding, inline-lg);