torch-glare 2.5.6 → 2.6.0

package/docs/components/table.md

@@ -1,1088 +0,0 @@
----
-name: Table
-version: 2.4.5
-status: stable
-category: components/data-display
-tags: [table, data, grid, sortable, resizable, accessible, compound]
-last-reviewed: 2024-11-05
-bundle-size: 4.2kb
-dependencies:
-  - "class-variance-authority": "^0.7.0"
-  - "@/components/Button": "internal"
-  - "@/components/Checkbox": "internal"
-  - "@/hooks/useResize": "internal"
----
-
-# Table
-
-> A comprehensive data table component with resizable columns, sortable headers, row states, and compound architecture. Built for complex data presentation with accessibility and performance in mind.
-
-## Installation
-
-TORCH Glare is a copy-in library: the CLI copies this component's source into your project
-(you do **not** install it from the npm package). Run `init` once, then `add`:
-
-```bash
-npx torch-glare@latest init
-npx torch-glare@latest add Table
-```
-
-`add` also copies any components, hooks, and utilities that `Table` depends on.
-
-## Import
-
-Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
-
-```tsx
-import { Table } from "@/components/Table";
-```
-
-## Quick Examples
-
-### Basic Table
-
-```typescript
-import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/Table'
-
-function BasicTable() {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-          <TableHead>Status</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>John Doe</TableCell>
-          <TableCell>john@example.com</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Jane Smith</TableCell>
-          <TableCell>jane@example.com</TableCell>
-          <TableCell>Pending</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-### Sortable Table
-
-```typescript
-function SortableTable() {
-  const [sortField, setSortField] = useState<string | null>(null)
-  const [sortType, setSortType] = useState<'asc' | 'desc' | undefined>()
-  const [data, setData] = useState(initialData)
-
-  const handleSort = (field: string) => {
-    const newSortType = sortType === 'asc' ? 'desc' : 'asc'
-    setSortType(newSortType)
-    setSortField(field)
-
-    // Sort data
-    const sorted = [...data].sort((a, b) => {
-      if (newSortType === 'asc') {
-        return a[field] > b[field] ? 1 : -1
-      }
-      return a[field] < b[field] ? 1 : -1
-    })
-    setData(sorted)
-  }
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead
-            sortType={sortField === 'name' ? sortType : undefined}
-            onSort={() => handleSort('name')}
-          >
-            Name
-          </TableHead>
-          <TableHead
-            sortType={sortField === 'date' ? sortType : undefined}
-            onSort={() => handleSort('date')}
-          >
-            Date
-          </TableHead>
-          <TableHead
-            sortType={sortField === 'amount' ? sortType : undefined}
-            onSort={() => handleSort('amount')}
-          >
-            Amount
-          </TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {data.map((item) => (
-          <TableRow key={item.id}>
-            <TableCell>{item.name}</TableCell>
-            <TableCell>{item.date}</TableCell>
-            <TableCell>${item.amount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-### Table with Row States
-
-```typescript
-function TableWithStates() {
-  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set())
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Item</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Action</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow state="add">
-          <TableCell>New Item</TableCell>
-          <TableCell>Added</TableCell>
-          <TableCell>Review</TableCell>
-        </TableRow>
-        <TableRow state="update">
-          <TableCell>Updated Item</TableCell>
-          <TableCell>Modified</TableCell>
-          <TableCell>Confirm</TableCell>
-        </TableRow>
-        <TableRow state="delete">
-          <TableCell>Deleted Item</TableCell>
-          <TableCell>Removed</TableCell>
-          <TableCell>Undo</TableCell>
-        </TableRow>
-        <TableRow state="selected">
-          <TableCell>Selected Item</TableCell>
-          <TableCell>Active</TableCell>
-          <TableCell>Edit</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-### Table with Checkbox Selection
-
-```typescript
-function SelectableTable() {
-  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set())
-  const [data] = useState(items)
-
-  const toggleRow = (id: string) => {
-    const newSet = new Set(selectedRows)
-    if (newSet.has(id)) {
-      newSet.delete(id)
-    } else {
-      newSet.add(id)
-    }
-    setSelectedRows(newSet)
-  }
-
-  const toggleAll = () => {
-    if (selectedRows.size === data.length) {
-      setSelectedRows(new Set())
-    } else {
-      setSelectedRows(new Set(data.map(d => d.id)))
-    }
-  }
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead size="S">
-            <TableCheckbox
-              id="select-all"
-              checked={
-                selectedRows.size === data.length
-                  ? true
-                  : selectedRows.size > 0
-                    ? 'indeterminate'
-                    : false
-              }
-              onCheckedChange={toggleAll}
-            />
-          </TableHead>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {data.map((item) => (
-          <TableRow
-            key={item.id}
-            state={selectedRows.has(item.id) ? 'selected' : undefined}
-          >
-            <TableCell>
-              <TableCheckbox
-                id={`select-${item.id}`}
-                checked={selectedRows.has(item.id)}
-                onCheckedChange={() => toggleRow(item.id)}
-              />
-            </TableCell>
-            <TableCell>{item.name}</TableCell>
-            <TableCell>{item.email}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-### Table with Themed Styles
-
-```typescript
-function ThemedTable() {
-  return (
-    <>
-      <Table theme="light">
-        <TableCaption>Light Theme Table</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Column 1</TableHead>
-            <TableHead>Column 2</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Data 1</TableCell>
-            <TableCell>Data 2</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-
-      <Table theme="dark">
-        <TableCaption>Dark Theme Table</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Column 1</TableHead>
-            <TableHead>Column 2</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Data 1</TableCell>
-            <TableCell>Data 2</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </>
-  )
-}
-```
-
-### Table with Footer Actions
-
-```typescript
-function TableWithFooter() {
-  const [showMore, setShowMore] = useState(false)
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Product</TableHead>
-          <TableHead>Price</TableHead>
-          <TableHead>Stock</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {products.slice(0, showMore ? undefined : 5).map((product) => (
-          <TableRow key={product.id}>
-            <TableCell>{product.name}</TableCell>
-            <TableCell>${product.price}</TableCell>
-            <TableCell>{product.stock}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableFooterButton onClick={() => setShowMore(!showMore)}>
-          <i className="ri-add-line" />
-          {showMore ? 'Show Less' : 'Show More Items'}
-        </TableFooterButton>
-      </TableFooter>
-    </Table>
-  )
-}
-```
-
-### Resizable Columns
-
-```typescript
-function ResizableTable() {
-  // Column resizing is automatic with the useResize hook
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Resizable Column 1</TableHead>
-          <TableHead>Resizable Column 2</TableHead>
-          <TableHead isDummy>Fixed Width</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>Drag the resize handle</TableCell>
-          <TableCell>On column borders</TableCell>
-          <TableCell isDummy>Cannot resize</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-## API Reference
-
-### Table Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `theme` | `'dark' \| 'light' \| 'default'` | `'default'` | Theme variant |
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Table content |
-
-### TableHeader Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Header rows |
-
-#### Sticky header
-
-`TableHeader` carries `position: sticky; top: 0`, so a table inside a vertically scrolling container
-can keep its header in view while the rows move under it. Sticky keeps the element in normal flow,
-so it changes nothing in a table that does not scroll.
-
-It needs two things from you.
-
-**Pass `overflow-visible`.** Sticky resolves against the **nearest scrollport**, and `Table` defaults
-to `overflow-hidden` — which makes the table itself a scrollport, so the header pins to a box that
-never scrolls and appears not to stick. Turning that clipping off binds it to your scroller instead.
-
-Only do this when your scroller is `min-w-0` (or otherwise width-constrained). That default clipping
-is also what stops a `w-auto` table wider than its container from pushing the whole page wide, so
-opting out without a constrained scroller trades a sticky header for a horizontal scrollbar.
-
-**Give the header an opaque background** — see below.
-
-```tsx
-{/* `min-w-0` so a wide table scrolls in here rather than widening the layout */}
-<div className="min-w-0 max-h-[400px] overflow-auto">
-  <Table className="w-full overflow-visible">
-    <TableHeader className="bg-background-presentation-form-base">
-      ...
-```
-
-The default header background is translucent, which was fine when nothing ever passed beneath it.
-Once rows scroll under a stuck header they read through it, so give
-the header the opaque colour of whatever surface it sits on — `Table` cannot pick one for you,
-since forcing a surface would recolour every table not on it. `DataViews`' table view is the worked
-example: it paints the surface token as the background colour and re-applies the header tint as a
-`background-image`, which stacks above it, landing on the exact colour the header always had.
-
-### TableBody Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Body rows |
-
-### TableRow Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `state` | `'delete' \| 'update' \| 'add' \| 'selected' \| 'open'` | - | Row state styling |
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Row cells |
-
-### TableHead Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `'S' \| 'M'` | `'M'` | Header cell size |
-| `disabled` | `boolean` | `false` | Disables interactions |
-| `sortType` | `'asc' \| 'desc' \| undefined` | - | Sort indicator |
-| `onSort` | `() => void` | - | Sort handler |
-| `sortLabel` | `string` | - | Column name for the sort button's accessible label |
-| `onResize` | `(width: number) => void` | - | Fires while the column is drag-resized. Passing it makes the width **controlled** — you own the value and feed it back via `style.width`. Required whenever the table needs a definite width (`table-layout: fixed`), since only the owner of every column width can total them. Omit for uncontrolled resizing. |
-| `isDummy` | `boolean` | `false` | Non-interactive header |
-| `className` / `style` | `string` / `CSSProperties` | - | Applied to the `<th>` — this is how you size a column (`style={{ width: 200 }}`) |
-| `contentClassName` | `string` | - | Classes for the inner layout box (the flex row holding the label and sort toggle). Use it for typography or colour; `className` styles the `<th>` itself. |
-
-**Every** prop you pass — `className`, `style`, `aria-*`, `role`, `tabIndex` and event
-handlers alike — lands on the `<th>`. They deliberately share one element: libraries like
-dnd-kit hand back accessibility attributes and event listeners as a matched pair, and
-splitting them across two nodes leaves the focusable element without its handlers. Reach the
-inner layout box with `contentClassName`.
-
-### TableCell Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isDummy` | `boolean` | `false` | Non-interactive cell |
-| `minWidth` | `number` | `200` | Minimum width of the content box, in px. Pass `0` when the column width is driven by the caller — otherwise this floor silently overrides any narrower column. |
-| `fade` | `boolean` | `true` | Whether the cell **crops** its content and fades the last 25% of it, signalling text clipped by the column width. Set `false` for cells holding a **control**: the fade washes out whatever sits at the right edge (a Select's chevron, a date button), and the crop — the content box hugs the control exactly — would clip every side of the control's hover/focus drop shadow. `isDummy` cells never fade. |
-| `childrenClassName` | `string` | - | Classes for content wrapper |
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Cell content |
-
-### TableScroller Props
-
-Horizontal scroll container for a table, with the thin design-system scrollbar (4px track
-that thickens and turns blue on hover). Accepts any `div` props. Keep header actions and
-`TableEndAction` **outside** it so they don't scroll away on a wide table.
-
-### TableEndAction Props
-
-The full-width action bar that sits **below** a table — e.g. `＋ Add New`. A `<button>`, not
-a `<tr>`, so it is a sibling of `TableScroller` and stays put while the columns scroll. Accepts
-any `button` props. Use `TableFooterButton` instead when the action should scroll with the grid.
-
-### TableCheckbox Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | - | Required checkbox ID |
-| `checked` | `boolean \| 'indeterminate'` | - | Checked state; pass `'indeterminate'` for the mixed state |
-| `onCheckedChange` | `(checked: boolean \| 'indeterminate') => void` | - | Change handler (Radix Checkbox) |
-
-### TableFooterButton Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `onClick` | `() => void` | - | Click handler |
-| `className` | `string` | - | Additional CSS classes |
-| `children` | `React.ReactNode` | - | Button content |
-
-### TypeScript
-
-```typescript
-// Table types
-interface TableProps extends HTMLAttributes<HTMLTableElement> {
-  theme?: 'dark' | 'light' | 'default'
-  className?: string
-}
-
-// TableRow types
-interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
-  state?: 'delete' | 'update' | 'add' | 'selected' | 'open'
-}
-
-// TableHead types
-interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
-  size?: 'S' | 'M'
-  disabled?: boolean
-  sortType?: 'asc' | 'desc' | undefined
-  onSort?: () => void
-  sortLabel?: string
-  onResize?: (width: number) => void
-  contentClassName?: string
-  isDummy?: boolean
-}
-
-// TableCell types
-interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
-  isDummy?: boolean
-  minWidth?: number
-  fade?: boolean
-  childrenClassName?: string
-}
-
-// TableScroller / TableEndAction types
-type TableScrollerProps = HTMLAttributes<HTMLDivElement>
-type TableEndActionProps = ButtonHTMLAttributes<HTMLButtonElement>
-
-// TableCheckbox types
-interface TableCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  id: string
-  checked?: boolean | 'indeterminate'
-  onCheckedChange?: (checked: boolean | 'indeterminate') => void
-}
-
-// Export structure
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-  TableCheckbox,
-  SubTableButton,
-  TableFooterButton
-}
-```
-
-## Common Patterns
-
-### Data Table with Pagination
-
-```typescript
-function PaginatedTable() {
-  const [page, setPage] = useState(1)
-  const [rowsPerPage, setRowsPerPage] = useState(10)
-  const totalPages = Math.ceil(data.length / rowsPerPage)
-
-  const paginatedData = data.slice(
-    (page - 1) * rowsPerPage,
-    page * rowsPerPage
-  )
-
-  return (
-    <>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>ID</TableHead>
-            <TableHead>Name</TableHead>
-            <TableHead>Date</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {paginatedData.map((item) => (
-            <TableRow key={item.id}>
-              <TableCell>{item.id}</TableCell>
-              <TableCell>{item.name}</TableCell>
-              <TableCell>{item.date}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <div className="flex justify-between items-center mt-4">
-        <select
-          value={rowsPerPage}
-          onChange={(e) => setRowsPerPage(Number(e.target.value))}
-        >
-          <option value={10}>10 rows</option>
-          <option value={25}>25 rows</option>
-          <option value={50}>50 rows</option>
-        </select>
-        <div className="flex gap-2">
-          <button
-            disabled={page === 1}
-            onClick={() => setPage(page - 1)}
-          >
-            Previous
-          </button>
-          <span>Page {page} of {totalPages}</span>
-          <button
-            disabled={page === totalPages}
-            onClick={() => setPage(page + 1)}
-          >
-            Next
-          </button>
-        </div>
-      </div>
-    </>
-  )
-}
-```
-
-### Expandable Rows
-
-```typescript
-function ExpandableTable() {
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
-
-  const toggleRow = (id: string) => {
-    const newSet = new Set(expandedRows)
-    if (newSet.has(id)) {
-      newSet.delete(id)
-    } else {
-      newSet.add(id)
-    }
-    setExpandedRows(newSet)
-  }
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead size="S"></TableHead>
-          <TableHead>Order ID</TableHead>
-          <TableHead>Customer</TableHead>
-          <TableHead>Total</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {orders.map((order) => (
-          <React.Fragment key={order.id}>
-            <TableRow state={expandedRows.has(order.id) ? 'open' : undefined}>
-              <TableCell>
-                <SubTableButton
-                  isActive={expandedRows.has(order.id)}
-                  onClick={() => toggleRow(order.id)}
-                />
-              </TableCell>
-              <TableCell>{order.id}</TableCell>
-              <TableCell>{order.customer}</TableCell>
-              <TableCell>${order.total}</TableCell>
-            </TableRow>
-            {expandedRows.has(order.id) && (
-              <TableRow>
-                <TableCell colSpan={4}>
-                  <div className="p-4">
-                    <h4>Order Details</h4>
-                    {order.items.map((item) => (
-                      <div key={item.id}>
-                        {item.name} - ${item.price} x {item.quantity}
-                      </div>
-                    ))}
-                  </div>
-                </TableCell>
-              </TableRow>
-            )}
-          </React.Fragment>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-### Editable Table
-
-```typescript
-function EditableTable() {
-  const [data, setData] = useState(initialData)
-  const [editingId, setEditingId] = useState<string | null>(null)
-
-  const handleEdit = (id: string, field: string, value: string) => {
-    setData(data.map(item =>
-      item.id === id ? { ...item, [field]: value } : item
-    ))
-  }
-
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-          <TableHead>Actions</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {data.map((item) => (
-          <TableRow key={item.id}>
-            <TableCell>
-              {editingId === item.id ? (
-                <Input
-                  value={item.name}
-                  onChange={(e) => handleEdit(item.id, 'name', e.target.value)}
-                  onBlur={() => setEditingId(null)}
-                />
-              ) : (
-                item.name
-              )}
-            </TableCell>
-            <TableCell>
-              {editingId === item.id ? (
-                <Input
-                  value={item.email}
-                  onChange={(e) => handleEdit(item.id, 'email', e.target.value)}
-                  onBlur={() => setEditingId(null)}
-                />
-              ) : (
-                item.email
-              )}
-            </TableCell>
-            <TableCell>
-              <button onClick={() => setEditingId(item.id)}>
-                Edit
-              </button>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-## Testing
-
-### Unit Test Example
-
-```typescript
-import { render, screen, fireEvent } from '@testing-library/react'
-import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/Table'
-
-describe('Table', () => {
-  it('renders table with data', () => {
-    render(
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Header 1</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell 1</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    )
-
-    expect(screen.getByText('Header 1')).toBeInTheDocument()
-    expect(screen.getByText('Cell 1')).toBeInTheDocument()
-  })
-
-  it('handles sorting', () => {
-    const handleSort = jest.fn()
-    render(
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead onSort={handleSort} sortType="asc">
-              Sortable
-            </TableHead>
-          </TableRow>
-        </TableHeader>
-      </Table>
-    )
-
-    const sortButton = screen.getByRole('button')
-    fireEvent.pointerDown(sortButton)
-    expect(handleSort).toHaveBeenCalled()
-  })
-
-  it('applies row states correctly', () => {
-    const { container } = render(
-      <Table>
-        <TableBody>
-          <TableRow state="selected">
-            <TableCell>Selected</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    )
-
-    const row = container.querySelector('tr')
-    expect(row).toHaveClass('bg-background-presentation-table-row-selected')
-  })
-})
-```
-
-### Accessibility Test
-
-```typescript
-import { axe } from '@axe-core/react'
-
-test('Table meets WCAG standards', async () => {
-  const { container } = render(
-    <Table>
-      <TableCaption>User Data</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead scope="col">Name</TableHead>
-          <TableHead scope="col">Email</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>John Doe</TableCell>
-          <TableCell>john@example.com</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  )
-
-  const results = await axe(container)
-  expect(results).toHaveNoViolations()
-})
-```
-
-## Known Limitations & Frontend Patterns
-
-### `Table` defaults to `w-auto` — always pass `className="w-full"` for data tables
-
-The shipped `Table` base classes include `w-auto`, so the table sizes to its content. Inside a `Card`, `Dialog`, or any flex/grid container with short rows, the table collapses to a narrow column on the left with empty space on the right. This is rarely what you want for a data list.
-
-**Always pass `className="w-full"`** for list/data tables:
-
-```tsx
-<Card className="p-0 overflow-hidden">
-  <CardContent className="p-0 overflow-x-auto">
-    <Table className="w-full">
-      <TableHeader>
-        <TableRow>
-          <TableHead>Number</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead className="text-right">Total Debit</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>...</TableBody>
-    </Table>
-  </CardContent>
-</Card>
-```
-
-**Wrap with `overflow-x-auto`** on the parent so wide tables (10+ columns) scroll horizontally inside the card instead of overflowing it.
-
-### Numeric columns: `text-right` on both head and cell
-
-Right-align debit, credit, amount, count columns on **both** `TableHead` and the corresponding `TableCell`:
-
-```tsx
-<TableHead className="text-right">Total Debit</TableHead>
-<TableCell className="text-right font-mono">{voucher.totalDebit}</TableCell>
-```
-
-Use `font-mono` on the cell so digits line up across rows.
-
-### `whitespace-nowrap` on date and numeric cells
-
-Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowrap` on those cells (not on heads):
-
-```tsx
-<TableCell className="whitespace-nowrap">{formatDate(voucher.date)}</TableCell>
-```
-
-### `TableCell` force-wraps children — use `childrenClassName` to override
-
-`TableCell` unconditionally wraps children in an inner `<div>` with `flex justify-start items-center gap-1`, a `min-width` of 200px, `overflow-hidden`, and a fade-out gradient mask. Three common breakages:
-
-1. **Empty-state rows don't center.** A `flex flex-col items-center` empty state ends up flush left because the outer wrapper's `justify-start` already decided alignment.
-2. **Multi-line content is clipped** by `overflow-hidden` + the gradient mask.
-3. **`flex-col` doesn't work** because the wrapper is `flex` (row) by default.
-
-**Workaround — use the `childrenClassName` prop**, which merges into the inner wrapper, and skip your own outer `<div>`:
-
-```tsx
-<TableRow>
-  <TableCell
-    colSpan={7}
-    minWidth={0}
-    fade={false}
-    childrenClassName="flex flex-col items-center justify-center gap-3 py-12 w-full text-content-presentation-global-secondary"
-  >
-    <i className="ri-inbox-line text-4xl opacity-60" />
-    <p className="typography-body-medium-regular">No data</p>
-    <p className="typography-body-small-regular opacity-80">Try adjusting filters</p>
-  </TableCell>
-</TableRow>
-```
-
-Key overrides:
-
-- `flex flex-col` on `childrenClassName` overrides the default `flex-row`
-- `items-center justify-center` on `childrenClassName` overrides `justify-start`
-- **`minWidth={0}`** clears the 200px floor. It is an inline style, so a class such as
-  `min-w-0` on `childrenClassName` cannot beat it — use the prop.
-- **`fade={false}`** drops both the gradient mask and the `overflow-hidden` that clips
-  multi-line content.
-
-## Accessibility
-
-### Keyboard Support
-
-- **Tab**: Navigate through interactive elements
-- **Space/Enter**: Activate buttons and checkboxes
-- **Arrow Keys**: Navigate cells (with additional implementation)
-- **Home/End**: Jump to first/last cell in row
-
-### ARIA Attributes
-
-```typescript
-// Sortable headers
-<TableHead
-  role="columnheader"
-  aria-sort={sortType === 'asc' ? 'ascending' : 'descending'}
->
-
-// Row selection
-<TableRow
-  role="row"
-  aria-selected={isSelected}
->
-
-// Table caption for screen readers
-<TableCaption>
-  Showing {start} to {end} of {total} results
-</TableCaption>
-```
-
-### Screen Reader Support
-
-- Announces table structure and dimensions
-- Reads column headers with cells
-- Announces sort state changes
-- Communicates row selection state
-
-## Styling
-
-### Custom Styles with className
-
-```typescript
-<Table className="border rounded-lg">
-  <TableHeader className="bg-gray-100">
-    <TableRow className="border-b-2">
-      <TableHead className="font-bold">Custom Styled</TableHead>
-    </TableRow>
-  </TableHeader>
-</Table>
-```
-
-### CSS Variables
-
-```css
-/* Custom theme variables */
-[data-theme="custom"] {
-  --table-border: #your-border;
-  --table-header-bg: #your-header-bg;
-  --table-row-hover: #your-hover;
-  --table-row-selected: #your-selected;
-  --table-sort-active: #your-sort-color;
-}
-```
-
-### Row State Classes
-
-```css
-/* Row states */
-.state-delete { background: var(--color-negative); }
-.state-update { background: var(--color-information); }
-.state-add { background: var(--color-success); }
-.state-selected { background: var(--color-selected); }
-.state-open { background: var(--color-hover); }
-```
-
-## Performance
-
-| Metric | Value |
-|--------|-------|
-| Bundle size (gzip) | 4.2kb |
-| First render (100 rows) | <20ms |
-| Re-render (100 rows) | <10ms |
-| Column resize | <5ms |
-| Tree-shakeable | ✅ |
-
-### Optimization Tips
-
-1. Use `React.memo()` for row components with large datasets
-2. Implement virtual scrolling for tables with >100 rows
-3. Debounce sort and filter operations
-4. Use `useCallback` for event handlers
-5. Consider pagination for large datasets
-
-## Migration
-
-### From v1.0.x
-
-```diff
-// Import path changed
-- import Table from 'torch-glare/Table'
-+ import { Table, TableHeader, TableBody } from '@/components/Table'
-
-// Component structure
-- <Table headers={headers} data={data} />
-+ <Table>
-+   <TableHeader>
-+     <TableRow>
-+       {headers.map(h => <TableHead key={h}>{h}</TableHead>)}
-+     </TableRow>
-+   </TableHeader>
-+   <TableBody>
-+     {data.map(row => (
-+       <TableRow key={row.id}>
-+         {row.cells.map(cell => <TableCell key={cell}>{cell}</TableCell>)}
-+       </TableRow>
-+     ))}
-+   </TableBody>
-+ </Table>
-```
-
-## Troubleshooting
-
-### Common Issues
-
-#### Columns not resizing
-
-**Solution:** Ensure resize handles are not disabled
-
-```typescript
-// ❌ Wrong - disables resize
-<TableHead isDummy>Column</TableHead>
-
-// ✅ Correct - allows resize
-<TableHead>Column</TableHead>
-```
-
-#### Sort not working
-
-**Solution:** Implement sort handler properly
-
-```typescript
-// ❌ Wrong - no state update
-<TableHead onSort={() => console.log('sort')}>
-
-// ✅ Correct - updates data
-<TableHead
-  onSort={() => handleSort('field')}
-  sortType={sortType}
->
-```
-
-#### Row selection not visible
-
-**Solution:** Apply state prop to TableRow
-
-```typescript
-// ❌ Wrong - no visual feedback
-<TableRow>
-
-// ✅ Correct - shows selection
-<TableRow state={isSelected ? 'selected' : undefined}>
-```
-
-## Related Components
-
-- [DataTable](/docs/components/data-table.md) - Advanced table with built-in features
-- [Card](/docs/components/card.md) - Alternative data display format
-- [ScrollArea](/docs/components/scroll-area.md) - For scrollable tables
-- [Checkbox](/docs/components/checkbox.md) - For row selection
-- [Button](/docs/components/button.md) - For table actions
-
-## Browser Support
-
-- Chrome 90+ ✅
-- Firefox 88+ ✅
-- Safari 14+ ✅
-- Edge 90+ ✅
-- Mobile browsers ✅
-
-## Changelog
-
-### v1.1.15
-- Added column resizing functionality
-- Improved sorting indicators
-- Enhanced row state styling
-- Better TypeScript types
-
-### v1.1.14
-- Table component refactor
-- Added compound architecture
-- Performance optimizations
-
-### v1.1.0
-- Initial stable release