@tanishqkancharla/maui 0.0.13 → 0.0.14

package/dist/components/Table.d.ts

@@ -1,20 +1,29 @@
-import type React from "react";
-export declare function Table(props: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function TableHead(props: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function TableBody(props: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function TableRow(props: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function TableHeaderCell(props: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function TableCell(props: {
-    children: React.ReactNode;
-    align?: "top" | "middle";
-}): React.JSX.Element;
+import type { ReactNode } from "react";
+import { type CellProps as AriaCellProps, type ColumnProps as AriaColumnProps, type RowProps as AriaRowProps, type TableBodyProps as AriaTableBodyProps, type TableFooterProps as AriaTableFooterProps, type TableHeaderProps as AriaTableHeaderProps, type TableProps as AriaTableProps } from "react-aria-components";
+export type TableAlign = "start" | "center" | "end";
+export interface TableProps extends Omit<AriaTableProps, "className"> {
+}
+export declare function Table(props: TableProps): import("react").JSX.Element;
+export interface TableHeaderProps<T> extends Omit<AriaTableHeaderProps<T>, "className"> {
+}
+export declare function TableHeader<T extends object = object>(props: TableHeaderProps<T>): import("react").JSX.Element;
+export interface TableHeadProps extends Omit<AriaColumnProps, "className"> {
+    align?: TableAlign;
+}
+export declare function TableHead({ align, ...props }: TableHeadProps): import("react").JSX.Element;
+export interface TableBodyProps<T> extends Omit<AriaTableBodyProps<T>, "className"> {
+}
+export declare function TableBody<T extends object = object>(props: TableBodyProps<T>): import("react").JSX.Element;
+export interface TableFooterProps<T> extends Omit<AriaTableFooterProps<T>, "className"> {
+}
+export declare function TableFooter<T extends object = object>(props: TableFooterProps<T>): import("react").JSX.Element;
+export interface TableRowProps<T> extends Omit<AriaRowProps<T>, "className"> {
+}
+export declare function TableRow<T extends object = object>(props: TableRowProps<T>): import("react").JSX.Element;
+export interface TableCellProps extends Omit<AriaCellProps, "className"> {
+    align?: TableAlign;
+}
+export declare function TableCell({ align, ...props }: TableCellProps): import("react").JSX.Element;
+export declare function TableCaption(props: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Table.js

@@ -1,42 +1,116 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableFooter as AriaTableFooter, TableHeader as AriaTableHeader, } from "react-aria-components";
 import { style, useStyles } from "purse-styles";
-import { border } from "../tokens/borders";
+import { backgroundColor } from "../tokens/background";
+import { border, borderColor } from "../tokens/borders";
+import { colors } from "../tokens/colors";
+import { focusRing } from "../tokens/focusRing";
+import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
-import { labelText } from "./Typography";
-const tableClass = style({
+import { memoize } from "../utils/memoize";
+const tableContainerClass = style({
+    width: "100%",
+    overflowX: "auto",
+});
+const tableClass = style(focusRing("&[data-focus-visible]"), {
     borderCollapse: "collapse",
+    borderSpacing: 0,
     width: "100%",
+    outline: "none",
+});
+const tableHeaderClass = style({
+    outline: "none",
+});
+const tableHeadClass = memoize((align = "start") => style(text({ size: "xs", fontWeight: 500, color: "lowContrast" }), spacing.padding({ x: 4, y: 3 }), border(["bottom"], "border"), focusRing("&[data-focus-visible]"), {
+    textAlign: align,
+    verticalAlign: "middle",
+    whiteSpace: "nowrap",
+    outline: "none",
+    fontWeight: 500,
+}));
+const tableBodyClass = style({
+    outline: "none",
+    "& tr:last-child td": {
+        borderBottom: "none",
+    },
+    "&[data-empty]": {
+        textAlign: "center",
+    },
+});
+const tableFooterClass = style(text({ size: "sm", fontWeight: 500, color: "highContrast" }), {
+    backgroundColor: colors.gray[2],
+    "& td": {
+        borderBottom: "none",
+        fontWeight: 500,
+        backgroundColor: colors.gray[2],
+    },
+    "& tr:first-child td": {
+        borderTop: `1px solid ${borderColor.border}`,
+    },
+    "& tr:hover td, & tr[data-hovered] td": {
+        backgroundColor: colors.gray[2],
+    },
 });
-const tableHeaderCellClass = style(labelText, {
-    padding: "0 12px 8px 0",
-    textAlign: "left",
-    verticalAlign: "bottom",
+const tableRowClass = style({
+    outline: "none",
+    cursor: "default",
+    "&:hover td, &[data-hovered] td": {
+        backgroundColor: backgroundColor.elementHover,
+    },
+    "&[data-selected] td": {
+        backgroundColor: backgroundColor.elementActive,
+    },
+    "&[data-disabled]": {
+        color: colors.gray[8],
+    },
 });
-const tableBodyCellClass = style(text({ size: "sm", fontWeight: 400, color: "lowContrast" }), border(["top"], "border"), {
-    padding: "10px 12px 10px 0",
-    verticalAlign: "top",
+const tableCellClass = memoize((align = "start") => style(text({ size: "sm", fontWeight: 400, color: "highContrast" }), spacing.padding({ x: 4, y: 3 }), border(["bottom"], "border"), focusRing("&[data-focus-visible]"), {
+    textAlign: align,
+    verticalAlign: "middle",
+    outline: "none",
+    '&[role="rowheader"]': {
+        fontWeight: 500,
+    },
+}));
+const tableCaptionClass = style(text({ size: "xs", fontWeight: 400, color: "lowContrast" }), {
+    margin: 0,
+    marginTop: spacing.value(4),
+});
+const emptyStateClass = style(text({ size: "sm", fontWeight: 400, color: "lowContrast" }), spacing.padding({ x: 4, y: 8 }), {
+    textAlign: "center",
 });
 export function Table(props) {
+    const containerClassName = useStyles(tableContainerClass);
     const className = useStyles(tableClass);
-    return _jsx("table", { className: className, children: props.children });
+    return (_jsx("div", { className: containerClassName, children: _jsx(AriaTable, { ...props, className: className }) }));
+}
+export function TableHeader(props) {
+    const className = useStyles(tableHeaderClass);
+    return _jsx(AriaTableHeader, { ...props, className: className });
 }
-export function TableHead(props) {
-    return _jsx("thead", { children: props.children });
+export function TableHead({ align = "start", ...props }) {
+    const className = useStyles(tableHeadClass(align));
+    return _jsx(AriaColumn, { ...props, className: className });
 }
 export function TableBody(props) {
-    return _jsx("tbody", { children: props.children });
+    const className = useStyles(tableBodyClass);
+    const emptyClassName = useStyles(emptyStateClass);
+    return (_jsx(AriaTableBody, { ...props, className: className, renderEmptyState: props.renderEmptyState ??
+            (() => _jsx("div", { className: emptyClassName, children: "No results." })) }));
+}
+export function TableFooter(props) {
+    const className = useStyles(tableFooterClass);
+    return _jsx(AriaTableFooter, { ...props, className: className });
 }
 export function TableRow(props) {
-    return _jsx("tr", { children: props.children });
+    const className = useStyles(tableRowClass);
+    return _jsx(AriaRow, { ...props, className: className });
 }
-export function TableHeaderCell(props) {
-    const className = useStyles(tableHeaderCellClass);
-    return _jsx("th", { className: className, children: props.children });
+export function TableCell({ align = "start", ...props }) {
+    const className = useStyles(tableCellClass(align));
+    return _jsx(AriaCell, { ...props, className: className });
 }
-const tableBodyCellMiddleClass = style({
-    verticalAlign: "middle",
-});
-export function TableCell(props) {
-    const className = useStyles(tableBodyCellClass, props.align === "middle" && tableBodyCellMiddleClass);
-    return _jsx("td", { className: className, children: props.children });
+export function TableCaption(props) {
+    const className = useStyles(tableCaptionClass);
+    return _jsx("div", { className: className, children: props.children });
 }

package/dist/maui.d.ts

@@ -28,8 +28,7 @@ export { Select, SelectItem, type SelectProps, type SelectItemProps, } from "./c
 export { Dialog } from "./components/Dialog";
 export { Tooltip } from "./components/Tooltip";
 export { Overlay } from "./components/Overlay";
-export { Panel } from "./components/Panel";
-export { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, } from "./components/Table";
+export { Table, TableHeader, TableHead, TableBody, TableFooter, TableRow, TableCell, TableCaption, type TableAlign, type TableProps, type TableHeaderProps, type TableHeadProps, type TableBodyProps, type TableFooterProps, type TableRowProps, type TableCellProps, } from "./components/Table";
 export { Prose, useProseSize, proseMaxWidth } from "./components/Prose";
 export { Editor, type EditorProps } from "./components/Editor";
 export { Thinking, type ThinkingProps, type ThinkingVariant, } from "./components/Thinking";

package/dist/maui.js

@@ -31,8 +31,7 @@ export { Select, SelectItem, } from "./components/Select";
 export { Dialog } from "./components/Dialog";
 export { Tooltip } from "./components/Tooltip";
 export { Overlay } from "./components/Overlay";
-export { Panel } from "./components/Panel";
-export { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, } from "./components/Table";
+export { Table, TableHeader, TableHead, TableBody, TableFooter, TableRow, TableCell, TableCaption, } from "./components/Table";
 export { Prose, useProseSize, proseMaxWidth } from "./components/Prose";
 export { Editor } from "./components/Editor";
 export { Thinking, } from "./components/Thinking";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.13",
+	"version": "0.0.14",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/SKILL.md

@@ -116,14 +116,13 @@ import { Text as TextIcon } from "maui/icons"
 - `Avatar`
 - `Badge`
 - `Code`, `Kbd`, `CodeBlock`
-- `Table` / `TableHead` / `TableBody` / `TableRow` / `TableHeaderCell` / `TableCell`
-- `Panel` — gallery/demo surface
+- `Table` — React Aria table. `TableHeader` contains `TableHead` columns directly (no `TableRow`). Mark the identifying column with `isRowHeader` (required; usually the name/id column, not a leading checkbox or drag handle). `align` on `TableHead` / `TableCell` is `"start"` | `"center"` | `"end"`. `TableFooter` fills with `colors.gray[2]`. Place `TableCaption` after `Table`. `TableBody` renders “No results.” when empty; pass `renderEmptyState` to replace it.
 - `FuzzyString` — highlight segments; takes a match result, not a plain string
 - `Thinking` — 3×3 Game of Life indicator; reseeds when the board dies or loops
 
 ## Reference: patterns and apps
 
-Patterns and demo apps are not part of the `"maui"` package barrel. Use the closest one as a reference before inventing new layout (also available via `"maui/src/..."`):
+Patterns, demo apps, and the gallery `Panel` preview surface are not part of the `"maui"` package barrel. Use the closest one as a reference before inventing new layout (also available via `"maui/src/..."`):
 
 ### Patterns — `src/patterns/`
 

package/src/apps/JsxEditor/catalog.ts

@@ -17,7 +17,6 @@ import {
 import { ListBox, ListBoxItem } from "../../components/ListBox"
 import { Menu, MenuItem, MenuTrigger } from "../../components/Menu"
 import { Overlay } from "../../components/Overlay"
-import { Panel } from "../../components/Panel"
 import { Prose } from "../../components/Prose"
 import { RadioOption, RadioOptionGroup } from "../../components/Radio"
 import { Select, SelectItem } from "../../components/Select"
@@ -26,9 +25,11 @@ import { Switch } from "../../components/Switch"
 import {
 	Table,
 	TableBody,
+	TableCaption,
 	TableCell,
+	TableFooter,
 	TableHead,
-	TableHeaderCell,
+	TableHeader,
 	TableRow,
 } from "../../components/Table"
 import { Text } from "../../components/Text"
@@ -264,11 +265,6 @@ export const catalog: CatalogComponent[] = [
 			{ name: "className" },
 		],
 	},
-	{
-		name: "Panel",
-		info: "Raised preview surface.",
-		attributes: [],
-	},
 	{
 		name: "Icons",
 		info: "Icon set. Use as <Icons.Plus size=\"sm\" />. The Icons namespace is not tree-shakeable.",
@@ -346,6 +342,53 @@ export const catalog: CatalogComponent[] = [
 		info: "Select option.",
 		attributes: [{ name: "id" }],
 	},
+	{
+		name: "Table",
+		info: "Accessible data table. Pair with TableHeader, TableHead, TableBody, TableRow, and TableCell.",
+		attributes: [{ name: "aria-label" }],
+	},
+	{
+		name: "TableHeader",
+		info: "Table column header row. Contains TableHead columns directly, not TableRow.",
+		attributes: [],
+	},
+	{
+		name: "TableHead",
+		info: "Column header. First identifying column should set isRowHeader. align is start, center, or end.",
+		attributes: [
+			{ name: "isRowHeader", boolean: true },
+			{ name: "align", values: ["start", "center", "end"] },
+			{ name: "id" },
+		],
+	},
+	{
+		name: "TableBody",
+		info: "Table rows. Renders an empty state when there are no rows.",
+		attributes: [],
+	},
+	{
+		name: "TableRow",
+		info: "Table row.",
+		attributes: [{ name: "id" }],
+	},
+	{
+		name: "TableCell",
+		info: "Table cell. align is start, center, or end.",
+		attributes: [
+			{ name: "align", values: ["start", "center", "end"] },
+			{ name: "colSpan" },
+		],
+	},
+	{
+		name: "TableFooter",
+		info: "Summary row group below the body.",
+		attributes: [],
+	},
+	{
+		name: "TableCaption",
+		info: "Caption below the table. Place after Table, often inside a figure.",
+		attributes: [],
+	},
 	{
 		name: "Tooltip",
 		info: "Hover tooltip.",
@@ -400,7 +443,6 @@ export const previewScope: Record<string, unknown> = {
 	MenuItem,
 	MenuTrigger,
 	Overlay,
-	Panel,
 	Editor,
 	Prose,
 	RadioOption,
@@ -411,9 +453,11 @@ export const previewScope: Record<string, unknown> = {
 	Switch,
 	Table,
 	TableBody,
+	TableCaption,
 	TableCell,
+	TableFooter,
 	TableHead,
-	TableHeaderCell,
+	TableHeader,
 	TableRow,
 	Text,
 	Thinking,

package/src/components/Table.tsx

@@ -1,61 +1,223 @@
+import type { ReactNode } from "react"
+import {
+	Cell as AriaCell,
+	Column as AriaColumn,
+	Row as AriaRow,
+	Table as AriaTable,
+	TableBody as AriaTableBody,
+	TableFooter as AriaTableFooter,
+	TableHeader as AriaTableHeader,
+	type CellProps as AriaCellProps,
+	type ColumnProps as AriaColumnProps,
+	type RowProps as AriaRowProps,
+	type TableBodyProps as AriaTableBodyProps,
+	type TableFooterProps as AriaTableFooterProps,
+	type TableHeaderProps as AriaTableHeaderProps,
+	type TableProps as AriaTableProps,
+} from "react-aria-components"
 import { style, useStyles } from "purse-styles"
-import type React from "react"
-import { border } from "../tokens/borders"
+import { backgroundColor } from "../tokens/background"
+import { border, borderColor } from "../tokens/borders"
+import { colors } from "../tokens/colors"
+import { focusRing } from "../tokens/focusRing"
+import { spacing } from "../tokens/spacing"
 import { text } from "../tokens/text"
-import { labelText } from "./Typography"
+import { memoize } from "../utils/memoize"
 
-const tableClass = style({
+export type TableAlign = "start" | "center" | "end"
+
+const tableContainerClass = style({
+	width: "100%",
+	overflowX: "auto",
+})
+
+const tableClass = style(focusRing("&[data-focus-visible]"), {
 	borderCollapse: "collapse",
+	borderSpacing: 0,
 	width: "100%",
+	outline: "none",
 })
 
-const tableHeaderCellClass = style(labelText, {
-	padding: "0 12px 8px 0",
-	textAlign: "left",
-	verticalAlign: "bottom",
+const tableHeaderClass = style({
+	outline: "none",
 })
 
-const tableBodyCellClass = style(text({ size: "sm", fontWeight: 400, color: "lowContrast" }), border(["top"], "border"), {
-	padding: "10px 12px 10px 0",
-	verticalAlign: "top",
+const tableHeadClass = memoize((align: TableAlign = "start") =>
+	style(
+		text({ size: "xs", fontWeight: 500, color: "lowContrast" }),
+		spacing.padding({ x: 4, y: 3 }),
+		border(["bottom"], "border"),
+		focusRing("&[data-focus-visible]"),
+		{
+			textAlign: align,
+			verticalAlign: "middle",
+			whiteSpace: "nowrap",
+			outline: "none",
+			fontWeight: 500,
+		},
+	),
+)
+
+const tableBodyClass = style({
+	outline: "none",
+	"& tr:last-child td": {
+		borderBottom: "none",
+	},
+	"&[data-empty]": {
+		textAlign: "center",
+	},
+})
+
+const tableFooterClass = style(
+	text({ size: "sm", fontWeight: 500, color: "highContrast" }),
+	{
+		backgroundColor: colors.gray[2],
+		"& td": {
+			borderBottom: "none",
+			fontWeight: 500,
+			backgroundColor: colors.gray[2],
+		},
+		"& tr:first-child td": {
+			borderTop: `1px solid ${borderColor.border}`,
+		},
+		"& tr:hover td, & tr[data-hovered] td": {
+			backgroundColor: colors.gray[2],
+		},
+	},
+)
+
+const tableRowClass = style({
+	outline: "none",
+	cursor: "default",
+	"&:hover td, &[data-hovered] td": {
+		backgroundColor: backgroundColor.elementHover,
+	},
+	"&[data-selected] td": {
+		backgroundColor: backgroundColor.elementActive,
+	},
+	"&[data-disabled]": {
+		color: colors.gray[8],
+	},
 })
 
-export function Table(props: { children: React.ReactNode }) {
+const tableCellClass = memoize((align: TableAlign = "start") =>
+	style(
+		text({ size: "sm", fontWeight: 400, color: "highContrast" }),
+		spacing.padding({ x: 4, y: 3 }),
+		border(["bottom"], "border"),
+		focusRing("&[data-focus-visible]"),
+		{
+			textAlign: align,
+			verticalAlign: "middle",
+			outline: "none",
+			'&[role="rowheader"]': {
+				fontWeight: 500,
+			},
+		},
+	),
+)
+
+const tableCaptionClass = style(
+	text({ size: "xs", fontWeight: 400, color: "lowContrast" }),
+	{
+		margin: 0,
+		marginTop: spacing.value(4),
+	},
+)
+
+const emptyStateClass = style(
+	text({ size: "sm", fontWeight: 400, color: "lowContrast" }),
+	spacing.padding({ x: 4, y: 8 }),
+	{
+		textAlign: "center",
+	},
+)
+
+export interface TableProps extends Omit<AriaTableProps, "className"> {}
+
+export function Table(props: TableProps) {
+	const containerClassName = useStyles(tableContainerClass)
 	const className = useStyles(tableClass)
 
-	return <table className={className}>{props.children}</table>
+	return (
+		<div className={containerClassName}>
+			<AriaTable {...props} className={className} />
+		</div>
+	)
 }
 
-export function TableHead(props: { children: React.ReactNode }) {
-	return <thead>{props.children}</thead>
-}
+export interface TableHeaderProps<T>
+	extends Omit<AriaTableHeaderProps<T>, "className"> {}
 
-export function TableBody(props: { children: React.ReactNode }) {
-	return <tbody>{props.children}</tbody>
+export function TableHeader<T extends object = object>(
+	props: TableHeaderProps<T>,
+) {
+	const className = useStyles(tableHeaderClass)
+
+	return <AriaTableHeader {...props} className={className} />
 }
 
-export function TableRow(props: { children: React.ReactNode }) {
-	return <tr>{props.children}</tr>
+export interface TableHeadProps extends Omit<AriaColumnProps, "className"> {
+	align?: TableAlign
 }
 
-export function TableHeaderCell(props: { children: React.ReactNode }) {
-	const className = useStyles(tableHeaderCellClass)
+export function TableHead({ align = "start", ...props }: TableHeadProps) {
+	const className = useStyles(tableHeadClass(align))
 
-	return <th className={className}>{props.children}</th>
+	return <AriaColumn {...props} className={className} />
 }
 
-const tableBodyCellMiddleClass = style({
-	verticalAlign: "middle",
-})
+export interface TableBodyProps<T>
+	extends Omit<AriaTableBodyProps<T>, "className"> {}
 
-export function TableCell(props: {
-	children: React.ReactNode
-	align?: "top" | "middle"
-}) {
-	const className = useStyles(
-		tableBodyCellClass,
-		props.align === "middle" && tableBodyCellMiddleClass,
+export function TableBody<T extends object = object>(props: TableBodyProps<T>) {
+	const className = useStyles(tableBodyClass)
+	const emptyClassName = useStyles(emptyStateClass)
+
+	return (
+		<AriaTableBody
+			{...props}
+			className={className}
+			renderEmptyState={
+				props.renderEmptyState ??
+				(() => <div className={emptyClassName}>No results.</div>)
+			}
+		/>
 	)
+}
+
+export interface TableFooterProps<T>
+	extends Omit<AriaTableFooterProps<T>, "className"> {}
+
+export function TableFooter<T extends object = object>(
+	props: TableFooterProps<T>,
+) {
+	const className = useStyles(tableFooterClass)
+
+	return <AriaTableFooter {...props} className={className} />
+}
+
+export interface TableRowProps<T>
+	extends Omit<AriaRowProps<T>, "className"> {}
+
+export function TableRow<T extends object = object>(props: TableRowProps<T>) {
+	const className = useStyles(tableRowClass)
+
+	return <AriaRow {...props} className={className} />
+}
+
+export interface TableCellProps extends Omit<AriaCellProps, "className"> {
+	align?: TableAlign
+}
+
+export function TableCell({ align = "start", ...props }: TableCellProps) {
+	const className = useStyles(tableCellClass(align))
+
+	return <AriaCell {...props} className={className} />
+}
+
+export function TableCaption(props: { children: ReactNode }) {
+	const className = useStyles(tableCaptionClass)
 
-	return <td className={className}>{props.children}</td>
+	return <div className={className}>{props.children}</div>
 }

package/src/maui.ts

@@ -81,14 +81,23 @@ export {
 export { Dialog } from "./components/Dialog"
 export { Tooltip } from "./components/Tooltip"
 export { Overlay } from "./components/Overlay"
-export { Panel } from "./components/Panel"
 export {
 	Table,
+	TableHeader,
 	TableHead,
 	TableBody,
+	TableFooter,
 	TableRow,
-	TableHeaderCell,
 	TableCell,
+	TableCaption,
+	type TableAlign,
+	type TableProps,
+	type TableHeaderProps,
+	type TableHeadProps,
+	type TableBodyProps,
+	type TableFooterProps,
+	type TableRowProps,
+	type TableCellProps,
 } from "./components/Table"
 export { Prose, useProseSize, proseMaxWidth } from "./components/Prose"
 export { Editor, type EditorProps } from "./components/Editor"

package/src/pages/BackgroundColorTokenPage.tsx

@@ -2,7 +2,8 @@ import { useStyles } from "purse-styles"
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { H2, H3, P } from "../components/Typography"
 import { background } from "../tokens/background"
 import { border } from "../tokens/borders"
@@ -39,14 +40,12 @@ export function BackgroundColorTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Background color tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/BordersTokenPage.tsx

@@ -1,5 +1,6 @@
 import { style, useStyles, type CSSProperties } from "purse-styles"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
@@ -54,14 +55,12 @@ export function BordersTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Input</TableHeaderCell>
-						<TableHeaderCell>Values</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Border token values">
+				<TableHeader>
+					<TableHead isRowHeader>Input</TableHead>
+					<TableHead>Values</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>
@@ -102,13 +101,11 @@ export function BordersTokenPage() {
 			</Table>
 
 			<H3>Examples</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Call</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Border token examples">
+				<TableHeader>
+					<TableHead isRowHeader>Call</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					{borderExamples.map((example) => (
 						<TableRow key={example.label}>

package/src/pages/CodePage.tsx

@@ -6,7 +6,7 @@ import {
 	TableBody,
 	TableCell,
 	TableHead,
-	TableHeaderCell,
+	TableHeader,
 	TableRow,
 } from "../components/Table"
 import { H2, H3, H4, Link, P } from "../components/Typography"
@@ -111,26 +111,24 @@ export function CodePage() {
 				strings use blue in light and green in dark.
 			</P>
 
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Role</TableHeaderCell>
-						<TableHeaderCell>Sublime scope</TableHeaderCell>
-						<TableHeaderCell>Color</TableHeaderCell>
-						<TableHeaderCell>Sample</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Maui Shiki theme tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Role</TableHead>
+					<TableHead>Sublime scope</TableHead>
+					<TableHead>Color</TableHead>
+					<TableHead>Sample</TableHead>
+				</TableHeader>
 				<TableBody>
 					{themeTokens.map((token) => (
 						<TableRow key={token.role}>
-							<TableCell align="middle">{token.role}</TableCell>
-							<TableCell align="middle">
+							<TableCell>{token.role}</TableCell>
+							<TableCell>
 								<Code>{token.sublime}</Code>
 							</TableCell>
-							<TableCell align="middle">
+							<TableCell>
 								<Code>{token.color}</Code>
 							</TableCell>
-							<TableCell align="middle">
+							<TableCell>
 								<span
 									style={{
 										color: token.color,

package/src/pages/CornerRadiusTokenPage.tsx

@@ -1,7 +1,8 @@
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { H2, H3, P } from "../components/Typography"
 
 import { colors } from "../tokens/colors"
@@ -16,14 +17,12 @@ export function CornerRadiusTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Corner radius tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/FlexTokenPage.tsx

@@ -1,7 +1,8 @@
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { H2, H3, P } from "../components/Typography"
 import { Flex } from "../components/Utils"
 
@@ -24,14 +25,12 @@ export function FlexTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Flex attributes">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/FocusRingTokenPage.tsx

@@ -1,5 +1,6 @@
 import { style, useStyles } from "purse-styles"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
@@ -28,14 +29,12 @@ export function FocusRingTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Focus ring tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/FuzzyStringPage.tsx

@@ -1,6 +1,7 @@
 import { useStyles } from "purse-styles"
 import { useMemo, useState } from "react"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { FuzzyString } from "../components/FuzzyString"
 import { SearchField } from "../components/Input"
 import { Panel } from "../components/Panel"
@@ -70,14 +71,12 @@ export function FuzzyStringPage() {
 
 			<H3>Examples</H3>
 			<Panel>
-				<Table>
-					<TableHead>
-						<TableRow>
-							<TableHeaderCell>Query</TableHeaderCell>
-							<TableHeaderCell>Text</TableHeaderCell>
-							<TableHeaderCell>Result</TableHeaderCell>
-						</TableRow>
-					</TableHead>
+				<Table aria-label="FuzzyString examples">
+					<TableHeader>
+						<TableHead isRowHeader>Query</TableHead>
+						<TableHead>Text</TableHead>
+						<TableHead>Result</TableHead>
+					</TableHeader>
 					<TableBody>
 						{staticExamples.map((example) => {
 							const match = fuzzyMatch(example.query, example.text)

package/src/pages/LayoutTokenPage.tsx

@@ -1,5 +1,6 @@
 import { style, useStyles } from "purse-styles"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
@@ -32,14 +33,12 @@ export function LayoutTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Arguments</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Layout tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Arguments</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/Maui.tsx

@@ -50,6 +50,7 @@ import { SelectPage } from "./SelectPage"
 import { SpacingTokenPage } from "./SpacingTokenPage"
 import { TextPage } from "./TextPage"
 import { TextTokenPage } from "./TextTokenPage"
+import { TablePage } from "./TablePage"
 import { TooltipPage } from "./TooltipPage"
 
 export function Maui() {
@@ -139,6 +140,7 @@ const navigation: NavEntry[] = [
 				path: "/components/list-box",
 				page: ListBoxPage,
 			},
+			{ label: "Table", path: "/components/table", page: TablePage },
 			{ label: "Menu", path: "/components/menu", page: MenuPage },
 			{ label: "Tooltip", path: "/components/tooltip", page: TooltipPage },
 			{

package/src/pages/MotionTokenPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { style, useStyles } from "purse-styles"
 import { Button } from "../components/Button"
 import { CodeBlock } from "../components/CodeBlock"
@@ -35,14 +36,12 @@ export function MotionTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Motion tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/ShadowTokenPage.tsx

@@ -7,7 +7,7 @@ import {
 	TableBody,
 	TableCell,
 	TableHead,
-	TableHeaderCell,
+	TableHeader,
 	TableRow,
 } from "../components/Table"
 import { H2, H3, P } from "../components/Typography"
@@ -31,14 +31,12 @@ export function ShadowTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Shadow tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/SizingTokenPage.tsx

@@ -4,7 +4,7 @@ import {
 	TableBody,
 	TableCell,
 	TableHead,
-	TableHeaderCell,
+	TableHeader,
 	TableRow,
 } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
@@ -26,14 +26,12 @@ export function SizingTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Sizing tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/SpacingTokenPage.tsx

@@ -1,5 +1,6 @@
 import { useStyles } from "purse-styles"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
@@ -18,14 +19,12 @@ export function SpacingTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Name</TableHeaderCell>
-						<TableHeaderCell>Value</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Spacing tokens">
+				<TableHeader>
+					<TableHead isRowHeader>Name</TableHead>
+					<TableHead>Value</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					{spacingScale.map((token) => (
 							<TableRow key={token.name}>

package/src/pages/TablePage.tsx

@@ -0,0 +1,121 @@
+import { Code } from "../components/Code"
+import { Panel } from "../components/Panel"
+import { Prose } from "../components/Prose"
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "../components/Table"
+import { H2, H3, P } from "../components/Typography"
+
+const invoices = [
+	{
+		invoice: "INV001",
+		paymentStatus: "Paid",
+		totalAmount: "$250.00",
+		paymentMethod: "Credit Card",
+	},
+	{
+		invoice: "INV002",
+		paymentStatus: "Pending",
+		totalAmount: "$150.00",
+		paymentMethod: "PayPal",
+	},
+	{
+		invoice: "INV003",
+		paymentStatus: "Unpaid",
+		totalAmount: "$350.00",
+		paymentMethod: "Bank Transfer",
+	},
+	{
+		invoice: "INV004",
+		paymentStatus: "Paid",
+		totalAmount: "$450.00",
+		paymentMethod: "Credit Card",
+	},
+	{
+		invoice: "INV005",
+		paymentStatus: "Paid",
+		totalAmount: "$550.00",
+		paymentMethod: "PayPal",
+	},
+	{
+		invoice: "INV006",
+		paymentStatus: "Pending",
+		totalAmount: "$200.00",
+		paymentMethod: "Bank Transfer",
+	},
+	{
+		invoice: "INV007",
+		paymentStatus: "Unpaid",
+		totalAmount: "$300.00",
+		paymentMethod: "Credit Card",
+	},
+]
+
+export function TablePage() {
+	return (
+		<Prose style={{ marginBottom: "32px" }}>
+			<H2>Table</H2>
+			<P>
+				A data table with horizontal dividers and cell padding. Columns live
+				directly in <Code>TableHeader</Code>. Use <Code>align</Code> on{" "}
+				<Code>TableHead</Code> and <Code>TableCell</Code> instead of text
+				alignment classes.
+			</P>
+
+			<H3>Invoices</H3>
+			<Panel>
+				<figure style={{ margin: 0, width: "100%" }}>
+					<Table aria-label="Invoices">
+						<TableHeader>
+							<TableHead isRowHeader>Invoice</TableHead>
+							<TableHead>Status</TableHead>
+							<TableHead>Method</TableHead>
+							<TableHead align="end">Amount</TableHead>
+						</TableHeader>
+						<TableBody>
+							{invoices.map((invoice) => (
+								<TableRow key={invoice.invoice} id={invoice.invoice}>
+									<TableCell>{invoice.invoice}</TableCell>
+									<TableCell>{invoice.paymentStatus}</TableCell>
+									<TableCell>{invoice.paymentMethod}</TableCell>
+									<TableCell align="end">{invoice.totalAmount}</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+						<TableFooter>
+							<TableRow id="total">
+								<TableCell colSpan={3}>Total</TableCell>
+								<TableCell align="end">$2,500.00</TableCell>
+							</TableRow>
+						</TableFooter>
+					</Table>
+					<TableCaption>A list of your recent invoices.</TableCaption>
+				</figure>
+			</Panel>
+
+			<H3>Empty</H3>
+			<P>
+				Tables need an empty composition. <Code>TableBody</Code> renders “No
+				results.” when there are no rows; pass{" "}
+				<Code>renderEmptyState</Code> to replace it.
+			</P>
+			<Panel>
+				<Table aria-label="Empty invoices">
+					<TableHeader>
+						<TableHead isRowHeader>Invoice</TableHead>
+						<TableHead>Status</TableHead>
+						<TableHead align="end">Amount</TableHead>
+					</TableHeader>
+					<TableBody />
+				</Table>
+			</Panel>
+		</Prose>
+	)
+}

package/src/pages/TextPage.tsx

@@ -7,7 +7,7 @@ import {
 	TableBody,
 	TableCell,
 	TableHead,
-	TableHeaderCell,
+	TableHeader,
 	TableRow,
 } from "../components/Table"
 import { Text } from "../components/Text"
@@ -28,14 +28,12 @@ export function TextPage() {
 			</P>
 
 			<H3>Attributes</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Attribute</TableHeaderCell>
-						<TableHeaderCell>Values</TableHeaderCell>
-						<TableHeaderCell>Default</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Text attributes">
+				<TableHeader>
+					<TableHead isRowHeader>Attribute</TableHead>
+					<TableHead>Values</TableHead>
+					<TableHead>Default</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/src/pages/TextTokenPage.tsx

@@ -1,5 +1,6 @@
 import { useStyles } from "purse-styles"
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../components/Table"
+import { Table, TableBody, TableCell, TableHead,
+	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
 import { Panel } from "../components/Panel"
 import { Prose } from "../components/Prose"
@@ -22,14 +23,12 @@ export function TextTokenPage() {
 			</P>
 
 			<H3>Values</H3>
-			<Table>
-				<TableHead>
-					<TableRow>
-						<TableHeaderCell>Input</TableHeaderCell>
-						<TableHeaderCell>Values</TableHeaderCell>
-						<TableHeaderCell>Use</TableHeaderCell>
-					</TableRow>
-				</TableHead>
+			<Table aria-label="Text token values">
+				<TableHeader>
+					<TableHead isRowHeader>Input</TableHead>
+					<TableHead>Values</TableHead>
+					<TableHead>Use</TableHead>
+				</TableHeader>
 				<TableBody>
 					<TableRow>
 						<TableCell>

package/dist/components/Panel.d.ts

@@ -1,4 +0,0 @@
-import type React from "react";
-type PanelProps = React.ComponentPropsWithoutRef<"div">;
-export declare function Panel({ className, children, ...props }: PanelProps): React.JSX.Element;
-export {};

package/dist/components/Panel.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { style, useStyles } from "purse-styles";
-import { border } from "../tokens/borders";
-import { colors } from "../tokens/colors";
-import { radius } from "../tokens/radius";
-import { spacing } from "../tokens/spacing";
-const panelClass = style(spacing.padding({ all: 16 }), border([], "outline"), radius.lg, {
-    backgroundColor: colors.gray[1],
-    backgroundImage: `radial-gradient(${colors.grayAlpha[3]} 1px, transparent 1px)`,
-    backgroundSize: "12px 12px",
-});
-export function Panel({ className, children, ...props }) {
-    const panelClassName = useStyles(panelClass);
-    return (_jsx("div", { ...props, className: [panelClassName, className].filter(Boolean).join(" "), children: children }));
-}