@usefragments/ui 1.0.0

package/src/components/Switch/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export { Switch, type SwitchProps, Toggle, type ToggleProps } from '../Toggle';

package/src/components/Table/Table.contract.json

@@ -0,0 +1,171 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Table",
+  "description": "Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.",
+  "category": "display",
+  "tags": [
+    "table",
+    "semantic",
+    "html",
+    "layout"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Table/index.tsx",
+  "exportName": "Table",
+  "propsSummary": [
+    "size: sm|md (default: md)",
+    "striped: boolean (default: false)",
+    "bordered: boolean (default: false)",
+    "wrapperClassName: string",
+    "wrapperProps: object",
+    "children: node"
+  ],
+  "props": {
+    "size": {
+      "type": "enum",
+      "description": "Table density",
+      "default": "md",
+      "required": false,
+      "values": [
+        "sm",
+        "md"
+      ]
+    },
+    "striped": {
+      "type": "boolean",
+      "description": "Show alternating row backgrounds",
+      "default": "false",
+      "required": false
+    },
+    "bordered": {
+      "type": "boolean",
+      "description": "Wrap table in a bordered container",
+      "default": "false",
+      "required": false
+    },
+    "wrapperClassName": {
+      "type": "string",
+      "description": "Class name for the outer scroll/wrapper container",
+      "required": false
+    },
+    "wrapperProps": {
+      "type": "object",
+      "description": "HTML attributes for the outer scroll/wrapper container",
+      "required": false
+    },
+    "children": {
+      "type": "node",
+      "description": "",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "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)"
+    ],
+    "guidelines": [
+      "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": [
+      "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"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic semantic table",
+      "code": "<Table aria-label=\"Team members\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell>Status</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Alice Johnson</Table.Cell>\n      <Table.Cell>Engineer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Bob Smith</Table.Cell>\n      <Table.Cell>Designer</Table.Cell>\n      <Table.Cell>Active</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Carol Williams</Table.Cell>\n      <Table.Cell>PM</Table.Cell>\n      <Table.Cell>Away</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
+    {
+      "name": "Striped",
+      "description": "Alternating row backgrounds for readability",
+      "code": "<Table striped aria-label=\"Inventory\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Item</Table.HeaderCell>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Qty</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Widget A</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>120</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget B</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>85</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget C</Table.Cell>\n      <Table.Cell>Hardware</Table.Cell>\n      <Table.Cell>200</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Widget D</Table.Cell>\n      <Table.Cell>Software</Table.Cell>\n      <Table.Cell>50</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
+    {
+      "name": "Bordered",
+      "description": "Table with bordered container",
+      "code": "<Table bordered aria-label=\"Pricing\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Plan</Table.HeaderCell>\n      <Table.HeaderCell>Price</Table.HeaderCell>\n      <Table.HeaderCell>Features</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Basic</Table.Cell>\n      <Table.Cell>$9/mo</Table.Cell>\n      <Table.Cell>5 projects</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Pro</Table.Cell>\n      <Table.Cell>$29/mo</Table.Cell>\n      <Table.Cell>Unlimited</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
+    {
+      "name": "Compact",
+      "description": "Small, dense table",
+      "code": "<Table size=\"sm\" aria-label=\"Shortcuts\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Key</Table.HeaderCell>\n      <Table.HeaderCell>Action</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Ctrl+S</Table.Cell>\n      <Table.Cell>Save</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+Z</Table.Cell>\n      <Table.Cell>Undo</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Ctrl+C</Table.Cell>\n      <Table.Cell>Copy</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
+    {
+      "name": "With Caption",
+      "description": "Table with visible caption",
+      "code": "<Table aria-label=\"Q1 results\">\n  <Table.Caption>Quarterly Results (Q1 2026)</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Metric</Table.HeaderCell>\n      <Table.HeaderCell>Value</Table.HeaderCell>\n      <Table.HeaderCell>Change</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Revenue</Table.Cell>\n      <Table.Cell>$1.2M</Table.Cell>\n      <Table.Cell>+15%</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Users</Table.Cell>\n      <Table.Cell>24,500</Table.Cell>\n      <Table.Cell>+8%</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
+    {
+      "name": "Screen Reader Caption",
+      "description": "Visually hidden caption for screen-reader context while keeping visual UI compact",
+      "code": "<Table\n  aria-label=\"API keys\"\n  wrapperProps={{ 'data-demo': 'table-wrapper' }}\n  wrapperClassName=\"demo-table-wrapper\"\n>\n  <Table.Caption visuallyHidden>API keys and last-used timestamps</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Prefix</Table.HeaderCell>\n      <Table.HeaderCell>Last Used</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Deploy</Table.Cell>\n      <Table.Cell>frg_live_...</Table.Cell>\n      <Table.Cell>2 hours ago</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>CI</Table.Cell>\n      <Table.Cell>frg_test_...</Table.Cell>\n      <Table.Cell>Yesterday</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>"
+    },
+    {
+      "name": "With Footer",
+      "description": "Table with footer row for totals",
+      "code": "<Table bordered aria-label=\"Expenses\">\n  <Table.Head>\n    <Table.Row>\n      <Table.HeaderCell>Category</Table.HeaderCell>\n      <Table.HeaderCell>Amount</Table.HeaderCell>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Marketing</Table.Cell>\n      <Table.Cell>$12,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Engineering</Table.Cell>\n      <Table.Cell>$45,000</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Operations</Table.Cell>\n      <Table.Cell>$8,000</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n  <Table.Footer>\n    <Table.Row>\n      <Table.Cell>Total</Table.Cell>\n      <Table.Cell>$65,000</Table.Cell>\n    </Table.Row>\n  </Table.Footer>\n</Table>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "DataTable",
+      "relationship": "alternative",
+      "note": "Use DataTable for sorting, selection, and TanStack features"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "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",
+      "wrapperClassName/wrapperProps - customize outer scroll wrapper",
+      "Table.Caption - caption with visuallyHidden prop (hidden is deprecated alias)"
+    ],
+    "a11yRules": [
+      "A11Y_TABLE_HEADERS",
+      "A11Y_TABLE_CAPTION"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Root",
+      "Head",
+      "Body",
+      "Footer",
+      "Row",
+      "Cell",
+      "HeaderCell",
+      "Caption"
+    ],
+    "commonPatterns": [
+      "<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>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:04.484Z"
+  }
+}

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

@@ -0,0 +1,206 @@
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+.wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Caption for accessibility
+.caption {
+  padding: var(--fui-space-3, $fui-space-3) 0;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  text-align: left;
+  caption-side: top;
+}
+
+// Visually hidden caption (screen readers only)
+.captionHidden {
+  @include visually-hidden;
+}
+
+// Size variants
+.sm {
+  .th,
+  .td {
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  }
+}
+
+.md {
+  .th,
+  .td {
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  }
+}
+
+// Dashboard-dense rows — 36px tall, 14px horizontal padding, 12px text.
+// Hairline dividers only; no striping. Header sits flush on the same rail
+// as rows so it reads as part of the list, not a separate band.
+.compact {
+  .th,
+  .td {
+    padding: 0 var(--fui-space-2, $fui-space-2);
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+    height: 2.571rem; // 36px
+    line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+  }
+
+  .th {
+    font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
+    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  }
+}
+
+// Tabular numerals on a cell — digits align in columns so updating numbers
+// don't jitter. Essential for numeric columns, timestamps, currencies.
+.tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+// Header
+.thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  > tr {
+    border-bottom: 1px solid var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
+  }
+}
+
+.th {
+  text-align: left;
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  white-space: nowrap;
+  vertical-align: middle;
+
+  &:first-child {
+    border-top-left-radius: var(--fui-radius-md, $fui-radius-md);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--fui-radius-md, $fui-radius-md);
+  }
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-1, $fui-space-1);
+}
+
+// Body
+.tbody {
+}
+
+.row {
+  --fui-table-row-base-bg: var(--fui-table-bg, var(--fui-main-bg, var(--fui-bg-primary, #{$fui-bg-primary})));
+  --fui-table-row-bg: var(--fui-table-row-base-bg);
+
+  border-bottom: 1px solid var(--fui-table-border, var(--fui-border, #{$fui-border}));
+  background-color: var(--fui-table-row-bg);
+  transition: background-color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    --fui-table-row-bg: var(--fui-table-row-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+  }
+}
+
+.selected {
+  --fui-table-row-bg: var(--fui-table-row-selected-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 8%, transparent));
+  box-shadow: inset 1px 0 0 var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
+
+  &:hover {
+    --fui-table-row-bg: var(--fui-table-row-selected-bg, color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent));
+  }
+}
+
+.td {
+  color: var(--fui-text-primary, $fui-text-primary);
+  vertical-align: middle;
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+}
+
+// Footer
+.tfoot {
+  border-top: 1px solid var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
+
+  .td,
+  .th {
+    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  }
+}
+
+// Striped rows
+.striped {
+  .tbody .row:nth-child(even),
+  .tbody .row[data-band="alt"] {
+    --fui-table-row-base-bg: var(--fui-table-subrow-bg, var(--fui-bg-subtle, #{$fui-bg-subtle}));
+  }
+
+  .tbody .row[data-band="default"] {
+    --fui-table-row-base-bg: var(--fui-main-bg, var(--fui-bg-primary, #{$fui-bg-primary}));
+  }
+}
+
+// Bordered
+.bordered {
+  border: 1px solid var(--fui-table-border, var(--fui-border, #{$fui-border}));
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  overflow: hidden;
+}
+
+// Responsive: allow horizontal scroll on small screens
+@include below-sm {
+  .wrapper {
+    margin-left: calc(-1 * var(--fui-space-4, $fui-space-4));
+    margin-right: calc(-1 * var(--fui-space-4, $fui-space-4));
+    padding-left: var(--fui-space-4, $fui-space-4);
+    padding-right: var(--fui-space-4, $fui-space-4);
+  }
+}
+
+// ============================================
+// Accessibility: High Contrast Mode
+// ============================================
+
+@media (prefers-contrast: more) {
+  .thead > tr {
+    border-bottom-width: 2px;
+  }
+
+  .row {
+    border-bottom-width: 2px;
+  }
+}
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .row {
+    transition: none;
+  }
+}

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from '.';
+
+/**
+ * Table is the canonical semantic-HTML table primitive. Reach for it whenever
+ * you need to render static tabular data with headers, rows, and footers —
+ * agents should compose `Table.Head`/`Table.Body`/`Table.Row` rather than
+ * hand-rolling `<table>` markup. For sorting and selection, use DataTable.
+ */
+const meta = {
+  title: 'Display/Table',
+  component: Table,
+  tags: ['autodocs', 'canonical'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Semantic HTML table with a compound API. Prefer this over a raw <table>; use DataTable when you need sorting or selection.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'Table density',
+    },
+    striped: { control: 'boolean', description: 'Show alternating row backgrounds' },
+    bordered: { control: 'boolean', description: 'Wrap table in a bordered container' },
+  },
+  args: {
+    size: 'md',
+    striped: false,
+    bordered: false,
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Table {...args} 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>
+  ),
+};
+
+export const Striped: Story = {
+  args: { striped: true },
+  render: (args) => (
+    <Table {...args} 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.Body>
+    </Table>
+  ),
+};
+
+export const Bordered: Story = {
+  args: { bordered: true },
+  render: (args) => (
+    <Table {...args} 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>
+  ),
+};
+
+export const Compact: Story = {
+  args: { size: 'sm' },
+  render: (args) => (
+    <Table {...args} 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>
+  ),
+};
+
+export const WithCaption: Story = {
+  render: (args) => (
+    <Table {...args} 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>
+  ),
+};
+
+export const WithFooter: Story = {
+  args: { bordered: true },
+  render: (args) => (
+    <Table {...args} 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>
+  ),
+};