@fragments-sdk/ui 0.9.4 → 0.9.6

package/src/components/Table/Table.fragment.tsx

@@ -1,148 +1,53 @@
 import React from 'react';
 import { defineFragment } from '@fragments-sdk/cli/core';
-import { Table, createColumns } from '.';
-import { Badge } from '../Badge';
-
-// Sample data types
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  status: 'active' | 'inactive' | 'pending';
-  role: string;
-}
-
-const sampleUsers: User[] = [
-  { id: '1', name: 'Alice Johnson', email: 'alice@example.com', status: 'active', role: 'Admin' },
-  { id: '2', name: 'Bob Smith', email: 'bob@example.com', status: 'active', role: 'Editor' },
-  { id: '3', name: 'Carol Williams', email: 'carol@example.com', status: 'pending', role: 'Viewer' },
-  { id: '4', name: 'David Brown', email: 'david@example.com', status: 'inactive', role: 'Editor' },
-];
-
-const columns = createColumns<User>([
-  { key: 'name', header: 'Name' },
-  { key: 'email', header: 'Email' },
-  {
-    key: 'status',
-    header: 'Status',
-    cell: (row) => (
-      <Badge
-        variant={row.status === 'active' ? 'success' : row.status === 'pending' ? 'warning' : 'default'}
-        dot
-      >
-        {row.status}
-      </Badge>
-    ),
-  },
-  { key: 'role', header: 'Role' },
-]);
+import { Table } from '.';
 
 export default defineFragment({
   component: Table,
 
   meta: {
     name: 'Table',
-    description: 'Data table with sorting and row selection. Use for displaying structured data that needs to be scanned, compared, or acted upon.',
+    description: 'Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.',
     category: 'display',
     status: 'stable',
-    tags: ['table', 'data', 'grid', 'list', 'sorting'],
+    tags: ['table', 'semantic', 'html', 'layout'],
     since: '0.1.0',
-    dependencies: [
-      { name: '@tanstack/react-table', version: '>=8.0.0', reason: 'Table state management and rendering' },
-    ],
   },
 
   usage: {
     when: [
-      'Displaying structured, tabular data',
-      'Data that users need to scan and compare',
-      'Lists with multiple attributes per item',
-      'Data that needs sorting or selection',
+      'Displaying simple tabular data with semantic HTML',
+      'Static data that does not need sorting or selection',
+      'Showing structured information with headers and rows',
+      'Tables with footers or captions',
     ],
     whenNot: [
+      'Data that needs sorting (use DataTable)',
+      'Data that needs row selection (use DataTable)',
+      'Data that needs clickable rows (use DataTable)',
       'Simple lists (use List component)',
-      'Card-based layouts (use Grid with Cards)',
-      'Heavily interactive data (consider DataGrid)',
-      'Small screens (consider card or list view)',
     ],
     guidelines: [
-      'Keep columns to a reasonable number (5-7 max)',
-      'Use consistent alignment (numbers right, text left)',
-      'Provide meaningful empty states',
-      'Consider mobile responsiveness',
+      'Use Table.HeaderCell for column headers (adds scope="col" by default)',
+      'Use Table.Caption for table descriptions (can be visually hidden)',
+      'Keep tables simple — use DataTable for interactive features',
+      'Consider mobile responsiveness; table scrolls horizontally on small screens',
     ],
     accessibility: [
-      'Proper table semantics with headers',
-      'Sortable columns are keyboard accessible',
-      'Row selection is properly announced',
+      'Semantic HTML table elements (thead, tbody, tfoot, th, td)',
+      'Column headers have scope="col" by default',
+      'Caption provides table description for screen readers',
+      'Supports visually-hidden caption for screen-reader-only labels',
     ],
   },
 
   props: {
-    columns: {
-      type: 'array',
-      description: 'Column definitions',
-      required: true,
-    },
-    data: {
-      type: 'array',
-      description: 'Data rows to display',
-      required: true,
-    },
-    getRowId: {
-      type: 'function',
-      description: 'Unique key extractor for each row',
-    },
-    sortable: {
-      type: 'boolean',
-      description: 'Enable column sorting',
-      default: 'false',
-    },
-    sorting: {
-      type: 'object',
-      description: 'Controlled sorting state',
-    },
-    onSortingChange: {
-      type: 'function',
-      description: 'Sorting change handler',
-    },
-    selectable: {
-      type: 'boolean',
-      description: 'Enable row selection',
-      default: 'false',
-    },
-    rowSelection: {
-      type: 'object',
-      description: 'Controlled row selection state',
-    },
-    onRowSelectionChange: {
-      type: 'function',
-      description: 'Row selection change handler',
-    },
-    onRowClick: {
-      type: 'function',
-      description: 'Handler for row clicks',
-    },
-    emptyMessage: {
-      type: 'string',
-      description: 'Message when no data',
-      default: 'No data available',
-    },
     size: {
       type: 'enum',
       description: 'Table density',
       values: ['sm', 'md'],
       default: 'md',
     },
-    caption: {
-      type: 'string',
-      description: 'Visible caption for the table',
-    },
-    captionHidden: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Hide caption visually but keep it for screen readers',
-    },
     striped: {
       type: 'boolean',
       description: 'Show alternating row backgrounds',
@@ -156,110 +61,220 @@ export default defineFragment({
   },
 
   relations: [
-    { component: 'EmptyState', relationship: 'sibling', note: 'Use EmptyState for empty table states' },
-    { component: 'Badge', relationship: 'sibling', note: 'Use Badge for status columns' },
+    { component: 'DataTable', relationship: 'alternative', note: 'Use DataTable for sorting, selection, and TanStack features' },
   ],
 
   contract: {
     propsSummary: [
-      'columns: ColumnDef[] - column definitions',
-      'data: T[] - row data array',
-      'sortable: boolean - enable sorting',
-      'selectable: boolean - enable row selection',
       'size: sm|md - table density',
       'striped: boolean - alternating row backgrounds',
       'bordered: boolean - bordered container',
+      'Table.Head, Table.Body, Table.Footer - section wrappers',
+      'Table.Row - table row with optional selected prop',
+      'Table.HeaderCell - th with scope="col"',
+      'Table.Cell - td element',
+      'Table.Caption - caption with optional hidden prop',
     ],
     scenarioTags: [
-      'data.table',
-      'display.list',
-      'data.grid',
+      'display.table',
+      'layout.table',
+      'semantic.html',
     ],
-    a11yRules: ['A11Y_TABLE_HEADERS', 'A11Y_TABLE_SORT'],
+    a11yRules: ['A11Y_TABLE_HEADERS', 'A11Y_TABLE_CAPTION'],
   },
 
   ai: {
-    compositionPattern: 'simple',
+    compositionPattern: 'compound',
     commonPatterns: [
-      '<Table columns={[{header:"Name",accessorKey:"name"},{header:"Status",accessorKey:"status"}]} data={[{name:"Item 1",status:"Active"}]} />',
+      '<Table><Table.Head><Table.Row><Table.HeaderCell>Name</Table.HeaderCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Alice</Table.Cell></Table.Row></Table.Body></Table>',
     ],
   },
 
   variants: [
     {
       name: 'Default',
-      description: 'Basic data table',
+      description: 'Basic semantic table',
       render: () => (
-        <Table
-          columns={columns}
-          data={sampleUsers}
-        />
+        <Table aria-label="Team members">
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Role</Table.HeaderCell>
+              <Table.HeaderCell>Status</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Alice Johnson</Table.Cell>
+              <Table.Cell>Engineer</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Bob Smith</Table.Cell>
+              <Table.Cell>Designer</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Carol Williams</Table.Cell>
+              <Table.Cell>PM</Table.Cell>
+              <Table.Cell>Away</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
       ),
     },
     {
-      name: 'Sortable',
-      description: 'Table with sortable columns',
+      name: 'Striped',
+      description: 'Alternating row backgrounds for readability',
       render: () => (
-        <Table
-          columns={columns}
-          data={sampleUsers}
-          sortable
-        />
+        <Table striped aria-label="Inventory">
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Item</Table.HeaderCell>
+              <Table.HeaderCell>Category</Table.HeaderCell>
+              <Table.HeaderCell>Qty</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Widget A</Table.Cell>
+              <Table.Cell>Hardware</Table.Cell>
+              <Table.Cell>120</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Widget B</Table.Cell>
+              <Table.Cell>Software</Table.Cell>
+              <Table.Cell>85</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Widget C</Table.Cell>
+              <Table.Cell>Hardware</Table.Cell>
+              <Table.Cell>200</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Widget D</Table.Cell>
+              <Table.Cell>Software</Table.Cell>
+              <Table.Cell>50</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
       ),
     },
     {
-      name: 'Clickable Rows',
-      description: 'Table with clickable rows',
+      name: 'Bordered',
+      description: 'Table with bordered container',
       render: () => (
-        <Table
-          columns={columns}
-          data={sampleUsers}
-          onRowClick={(row) => alert(`Clicked: ${row.name}`)}
-        />
+        <Table bordered aria-label="Pricing">
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Plan</Table.HeaderCell>
+              <Table.HeaderCell>Price</Table.HeaderCell>
+              <Table.HeaderCell>Features</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Basic</Table.Cell>
+              <Table.Cell>$9/mo</Table.Cell>
+              <Table.Cell>5 projects</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Pro</Table.Cell>
+              <Table.Cell>$29/mo</Table.Cell>
+              <Table.Cell>Unlimited</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
       ),
     },
     {
       name: 'Compact',
-      description: 'Smaller, denser table',
-      render: () => (
-        <Table
-          columns={columns}
-          data={sampleUsers}
-          size="sm"
-        />
-      ),
-    },
-    {
-      name: 'Striped',
-      description: 'Table with alternating row backgrounds',
+      description: 'Small, dense table',
       render: () => (
-        <Table
-          columns={columns}
-          data={sampleUsers}
-          striped
-        />
+        <Table size="sm" aria-label="Shortcuts">
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Key</Table.HeaderCell>
+              <Table.HeaderCell>Action</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Ctrl+S</Table.Cell>
+              <Table.Cell>Save</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Ctrl+Z</Table.Cell>
+              <Table.Cell>Undo</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Ctrl+C</Table.Cell>
+              <Table.Cell>Copy</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
       ),
     },
     {
-      name: 'Bordered',
-      description: 'Table with bordered container',
+      name: 'With Caption',
+      description: 'Table with visible caption',
       render: () => (
-        <Table
-          columns={columns}
-          data={sampleUsers}
-          bordered
-        />
+        <Table aria-label="Q1 results">
+          <Table.Caption>Quarterly Results (Q1 2026)</Table.Caption>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Metric</Table.HeaderCell>
+              <Table.HeaderCell>Value</Table.HeaderCell>
+              <Table.HeaderCell>Change</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Revenue</Table.Cell>
+              <Table.Cell>$1.2M</Table.Cell>
+              <Table.Cell>+15%</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Users</Table.Cell>
+              <Table.Cell>24,500</Table.Cell>
+              <Table.Cell>+8%</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
       ),
     },
     {
-      name: 'Empty State',
-      description: 'Table with no data',
+      name: 'With Footer',
+      description: 'Table with footer row for totals',
       render: () => (
-        <Table
-          columns={columns}
-          data={[]}
-          emptyMessage="No users found"
-        />
+        <Table bordered aria-label="Expenses">
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Category</Table.HeaderCell>
+              <Table.HeaderCell>Amount</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Marketing</Table.Cell>
+              <Table.Cell>$12,000</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Engineering</Table.Cell>
+              <Table.Cell>$45,000</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Operations</Table.Cell>
+              <Table.Cell>$8,000</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.Cell>Total</Table.Cell>
+              <Table.Cell>$65,000</Table.Cell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
       ),
     },
   ],

package/src/components/Table/Table.module.scss

@@ -51,10 +51,10 @@
   position: sticky;
   top: 0;
   z-index: 1;
-}
 
-.headerRow {
-  border-bottom: 1px solid var(--fui-border, $fui-border);
+  > tr {
+    border-bottom: 1px solid var(--fui-border, $fui-border);
+  }
 }
 
 .th {
@@ -63,7 +63,6 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
   vertical-align: middle;
-  user-select: none;
 
   &:first-child {
     border-top-left-radius: var(--fui-radius-md, $fui-radius-md);
@@ -80,41 +79,6 @@
   gap: var(--fui-space-1, $fui-space-1);
 }
 
-// Sortable header cell (for focus styles)
-.thSortable {
-  padding: 0;
-}
-
-.sortButton {
-  @include button-reset;
-  @include interactive-base;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--fui-space-1, $fui-space-1);
-  width: 100%;
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
-  color: inherit;
-  text-align: left;
-  transition: color var(--fui-transition-fast, $fui-transition-fast);
-
-  &:hover {
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-}
-
-.sortIndicator {
-  display: inline-flex;
-  align-items: center;
-  color: var(--fui-text-tertiary, $fui-text-tertiary);
-  flex-shrink: 0;
-
-  .sortButton:hover & {
-    color: var(--fui-text-secondary, $fui-text-secondary);
-  }
-}
-
 // Body
 .tbody {}
 
@@ -131,22 +95,6 @@
   }
 }
 
-.clickable {
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
-
-  &:active {
-    background-color: var(--fui-bg-active, $fui-bg-active);
-  }
-}
-
 .selected {
   background-color: rgba($fui-color-accent, 0.08);
 
@@ -161,19 +109,20 @@
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-// Striped rows
-.striped {
-  .row:nth-child(even) {
-    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
-  }
+// Footer
+.tfoot {
+  border-top: 2px solid var(--fui-border, $fui-border);
 
-  // Hover and selected override stripe
-  .clickable:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  .td,
+  .th {
+    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   }
+}
 
-  .clickable:active {
-    background-color: var(--fui-bg-active, $fui-bg-active);
+// Striped rows
+.striped {
+  .tbody .row:nth-child(even) {
+    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
   }
 
   .selected {
@@ -192,20 +141,6 @@
   overflow: hidden;
 }
 
-// Empty state
-.emptyState {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--fui-space-12, $fui-space-12) var(--fui-space-6, $fui-space-6);
-}
-
-.emptyMessage {
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  color: var(--fui-text-tertiary, $fui-text-tertiary);
-}
-
 // Responsive: allow horizontal scroll on small screens
 @include below-sm {
   .wrapper {
@@ -221,17 +156,13 @@
 // ============================================
 
 @media (prefers-contrast: more) {
-  .headerRow {
+  .thead > tr {
     border-bottom-width: 2px;
   }
 
   .row {
     border-bottom-width: 2px;
   }
-
-  .sortButton:focus-visible {
-    outline-width: 3px;
-  }
 }
 
 // ============================================
@@ -242,8 +173,4 @@
   .row {
     transition: none;
   }
-
-  .sortButton {
-    transition: none;
-  }
 }