ruler-components 0.1.0 → 0.1.2

package/components/docs/table-doc-page.tsx

@@ -1,689 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { Table2, User, ArrowUpRight, MoreHorizontal, Check, X, Copy } from "lucide-react";
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, ExpandableRow } from "@/components/ui/table";
-import { Badge, type BadgeProps } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
-import { DataTable, type DataTableColumn } from "@/components/ui/data-table";
-import { Pagination } from "@/components/ui/pagination";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-  DocsSimpleTable,
-  DocsSubsection,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-interface Member {
-  name: string;
-  email: string;
-  role: "Admin" | "Editor" | "Viewer";
-  status: "Active" | "Invited" | "Suspended";
-  projects: number;
-  joined: string;
-}
-
-function statusVariant(status: string): BadgeProps["variant"] {
-  switch (status) {
-    case "Active":
-    case "Paid":
-      return "success";
-    case "Invited":
-      return "info";
-    case "Pending":
-    case "Paused":
-      return "warning";
-    case "Suspended":
-    case "Overdue":
-    case "Error":
-      return "error";
-    default:
-      return "default";
-  }
-}
-
-interface Invoice {
-  id: string;
-  customer: string;
-  amount: string;
-  status: "Paid" | "Pending" | "Overdue";
-}
-
-const INVOICES: Invoice[] = [
-  { id: "INV-1042", customer: "Bright Path Studio", amount: "$1,240.00", status: "Paid" },
-  { id: "INV-1041", customer: "Northwind Traders", amount: "$860.50", status: "Paid" },
-  { id: "INV-1040", customer: "Vertex Analytics", amount: "$2,310.00", status: "Pending" },
-  { id: "INV-1039", customer: "Solstice Media", amount: "$540.00", status: "Paid" },
-  { id: "INV-1038", customer: "Anchor & Co.", amount: "$3,120.75", status: "Overdue" },
-  { id: "INV-1037", customer: "Glide Robotics", amount: "$975.20", status: "Paid" },
-  { id: "INV-1036", customer: "Fable Interiors", amount: "$410.00", status: "Pending" },
-  { id: "INV-1035", customer: "Harbor Logistics", amount: "$1,890.00", status: "Paid" },
-  { id: "INV-1034", customer: "Quiet Forge", amount: "$260.00", status: "Overdue" },
-  { id: "INV-1033", customer: "Lumen Health", amount: "$4,050.00", status: "Paid" },
-  { id: "INV-1032", customer: "Cedar & Vine", amount: "$725.00", status: "Pending" },
-  { id: "INV-1031", customer: "Pace Robotics", amount: "$1,150.00", status: "Paid" },
-];
-
-const INVOICE_PAGE_SIZE = 5;
-
-const MEMBERS: Member[] = [
-  { name: "Ava Whitfield", email: "ava@ruler.dev", role: "Admin", status: "Active", projects: 12, joined: "2023-02-14" },
-  { name: "Noah Bianchi", email: "noah@ruler.dev", role: "Editor", status: "Active", projects: 8, joined: "2023-05-30" },
-  { name: "Lena Kowalski", email: "lena@ruler.dev", role: "Viewer", status: "Invited", projects: 0, joined: "2024-01-09" },
-  { name: "Marcus Reed", email: "marcus@ruler.dev", role: "Editor", status: "Active", projects: 15, joined: "2022-11-02" },
-  { name: "Priya Nandakumar", email: "priya@ruler.dev", role: "Admin", status: "Active", projects: 21, joined: "2022-08-18" },
-  { name: "Diego Ferreira", email: "diego@ruler.dev", role: "Viewer", status: "Suspended", projects: 3, joined: "2023-09-25" },
-  { name: "Hana Suzuki", email: "hana@ruler.dev", role: "Editor", status: "Active", projects: 6, joined: "2024-03-11" },
-  { name: "Owen Fitzgerald", email: "owen@ruler.dev", role: "Viewer", status: "Invited", projects: 1, joined: "2024-04-02" },
-  { name: "Zara Ahmed", email: "zara@ruler.dev", role: "Admin", status: "Active", projects: 18, joined: "2022-06-07" },
-  { name: "Leo Moretti", email: "leo@ruler.dev", role: "Editor", status: "Active", projects: 9, joined: "2023-07-19" },
-  { name: "Ines Duarte", email: "ines@ruler.dev", role: "Viewer", status: "Suspended", projects: 2, joined: "2023-12-01" },
-  { name: "Felix Bergman", email: "felix@ruler.dev", role: "Editor", status: "Active", projects: 11, joined: "2023-03-27" },
-];
-
-const MEMBER_COLUMNS: DataTableColumn<Member>[] = [
-  {
-    key: "name",
-    header: "Member",
-    sortable: true,
-    render: (row) => (
-      <div className="flex items-center gap-3">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-xs font-bold text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
-          {row.name.split(" ").map((part) => part[0]).join("")}
-        </div>
-        <div>
-          <p className="text-sm font-semibold text-zinc-900 dark:text-white">{row.name}</p>
-          <p className="text-xs text-zinc-500 dark:text-zinc-400">{row.email}</p>
-        </div>
-      </div>
-    ),
-  },
-  { key: "role", header: "Role", filterOptions: ["Admin", "Editor", "Viewer"] },
-  {
-    key: "status",
-    header: "Status",
-    filterOptions: ["Active", "Invited", "Suspended"],
-    render: (row) => <Badge variant={statusVariant(row.status)}>{row.status}</Badge>,
-  },
-  { key: "projects", header: "Projects", sortable: true, align: "right" },
-  {
-    key: "joined",
-    header: "Joined",
-    sortable: true,
-    render: (row) => new Date(row.joined).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
-  },
-];
-
-const DATA_TABLE_API_ROWS = [
-  { prop: "data", type: "T[]", default: "—", description: "Array of row objects to render" },
-  { prop: "columns", type: "DataTableColumn<T>[]", default: "—", description: "Column definitions — sorting, filtering, alignment, and custom rendering" },
-  { prop: "searchPlaceholder", type: "string", default: '"Search..."', description: "Placeholder text for the built-in search input" },
-  { prop: "pageSize", type: "number", default: "5", description: "Number of rows shown per page" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes for the outer container" },
-];
-
-const SUBCOMPONENT_ROWS = [
-  { name: "Table", description: "Root scroll container and <table> element." },
-  { name: "TableHeader", description: "Wraps the header row(s) in a <thead>." },
-  { name: "TableBody", description: "Wraps data rows in a <tbody> with row dividers." },
-  { name: "TableRow", description: "A single row with a subtle hover state." },
-  { name: "TableHead", description: "A header cell with uppercase, muted styling." },
-  { name: "TableCell", description: "A standard data cell." },
-  { name: "ExpandableRow", description: "A row that toggles open to reveal extra details." },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Use TableHead cells for column headers so screen readers announce them correctly.",
-  "Keep an accessible label on icon-only actions like row menus and pagination controls.",
-  "Don't rely on color alone to convey status — pair badges with text.",
-  "Expandable rows should reflect their open/closed state to assistive tech.",
-  "Prefer numeric alignment (text-right) for scannable, comparable metrics.",
-];
-
-interface Product {
-  name: string;
-  category: string;
-  status: "Active" | "Paused" | "Error";
-  price: string;
-}
-
-const PRODUCTS: Product[] = [
-  { name: "Aurora Desk Lamp", category: "Lighting", status: "Active", price: "$48.00" },
-  { name: "Cedar Notebook", category: "Stationery", status: "Active", price: "$14.00" },
-  { name: "Mono Backpack", category: "Bags", status: "Paused", price: "$92.00" },
-  { name: "Slate Water Bottle", category: "Outdoor", status: "Active", price: "$22.00" },
-  { name: "Nimbus Headphones", category: "Audio", status: "Error", price: "$128.00" },
-  { name: "Birch Wall Clock", category: "Home", status: "Active", price: "$36.00" },
-  { name: "Ridge Trail Tent", category: "Outdoor", status: "Paused", price: "$210.00" },
-  { name: "Quartz Desk Mat", category: "Office", status: "Active", price: "$18.00" },
-];
-
-const ROW_COUNTS = [3, 5, 8] as const;
-type RowCount = (typeof ROW_COUNTS)[number];
-
-function playgroundCodeFor(rowCount: RowCount, expandable: boolean) {
-  if (expandable) {
-    return `<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead></TableHead>
-      <TableHead>Product</TableHead>
-      <TableHead>Category</TableHead>
-      <TableHead>Status</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <ExpandableRow
-      title="${PRODUCTS[0].name}"
-      details={<div>Price: ${PRODUCTS[0].price}</div>}
-    >
-      <TableCell className="font-medium">${PRODUCTS[0].name}</TableCell>
-      <TableCell>${PRODUCTS[0].category}</TableCell>
-      <TableCell>
-        <Badge variant="success">${PRODUCTS[0].status}</Badge>
-      </TableCell>
-    </ExpandableRow>
-    {/* ...${rowCount - 1} more rows */}
-  </TableBody>
-</Table>`;
-  }
-
-  return `<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Product</TableHead>
-      <TableHead>Category</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead className="text-right">Price</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell className="font-medium">${PRODUCTS[0].name}</TableCell>
-      <TableCell>${PRODUCTS[0].category}</TableCell>
-      <TableCell>
-        <Badge variant="success">${PRODUCTS[0].status}</Badge>
-      </TableCell>
-      <TableCell className="text-right font-mono">${PRODUCTS[0].price}</TableCell>
-    </TableRow>
-    {/* ...${rowCount - 1} more rows */}
-  </TableBody>
-</Table>`;
-}
-
-export function TableDocPage() {
-  const data = [
-    { channel: "Direct", sessions: "39,443", bounce: "38.47%", status: "Active" },
-    { channel: "Organic Search", sessions: "18,199", bounce: "37.06%", status: "Paused" },
-    { channel: "Social", sessions: "13,268", bounce: "55.54%", status: "Error" },
-  ];
-
-  const [invoicePage, setInvoicePage] = React.useState(1);
-  const invoiceTotalPages = Math.ceil(INVOICES.length / INVOICE_PAGE_SIZE);
-  const pagedInvoices = INVOICES.slice(
-    (invoicePage - 1) * INVOICE_PAGE_SIZE,
-    invoicePage * INVOICE_PAGE_SIZE,
-  );
-
-  const [rowCount, setRowCount] = useState<RowCount>(5);
-  const [expandable, setExpandable] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const playgroundRows = PRODUCTS.slice(0, rowCount);
-  const playgroundSnippet = playgroundCodeFor(rowCount, expandable);
-
-  function copyPlaygroundSnippet() {
-    navigator.clipboard.writeText(playgroundSnippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={Table2}
-        title="Table"
-        description="Full-width data tables for every use case — from a fully interactive data grid to lightweight static styles."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Compose a table from the real building blocks and copy the exact markup — live."
-      >
-        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
-          <div className="relative flex min-h-[18rem] items-start justify-center overflow-hidden bg-zinc-50 p-6 dark:bg-zinc-900/40">
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
-              style={{
-                backgroundImage:
-                  "linear-gradient(to right, rgb(161 161 170 / 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgb(161 161 170 / 0.35) 1px, transparent 1px)",
-                backgroundSize: "24px 24px",
-              }}
-            />
-            <div
-              key={`${rowCount}-${expandable}`}
-              className="relative w-full animate-[pagination-pop_0.2s_ease-out] overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950"
-            >
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    {expandable && <TableHead></TableHead>}
-                    <TableHead>Product</TableHead>
-                    <TableHead>Category</TableHead>
-                    <TableHead>Status</TableHead>
-                    {!expandable && <TableHead className="text-right">Price</TableHead>}
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {expandable
-                    ? playgroundRows.map((p) => (
-                        <ExpandableRow
-                          key={p.name}
-                          title={p.name}
-                          colSpan={3}
-                          details={
-                            <div className="text-zinc-500 dark:text-zinc-400">Price: {p.price}</div>
-                          }
-                        >
-                          <TableCell className="font-medium">{p.name}</TableCell>
-                          <TableCell>{p.category}</TableCell>
-                          <TableCell>
-                            <Badge variant={statusVariant(p.status)}>{p.status}</Badge>
-                          </TableCell>
-                        </ExpandableRow>
-                      ))
-                    : playgroundRows.map((p) => (
-                        <TableRow key={p.name}>
-                          <TableCell className="font-medium">{p.name}</TableCell>
-                          <TableCell>{p.category}</TableCell>
-                          <TableCell>
-                            <Badge variant={statusVariant(p.status)}>{p.status}</Badge>
-                          </TableCell>
-                          <TableCell className="text-right font-mono">{p.price}</TableCell>
-                        </TableRow>
-                      ))}
-                </TableBody>
-              </Table>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-5 border-t border-zinc-200 p-5 dark:border-zinc-800">
-            <div className="flex flex-wrap items-start justify-between gap-6">
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Row count
-                </p>
-                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {ROW_COUNTS.map((n) => (
-                    <button
-                      key={n}
-                      type="button"
-                      onClick={() => setRowCount(n)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        rowCount === n
-                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {n}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Expandable rows
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setExpandable((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    expandable
-                      ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                      : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  {expandable ? "On" : "Off"}
-                </button>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
-              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
-                <code>{playgroundSnippet}</code>
-              </pre>
-              <Tooltip content={copied ? "Copied!" : "Copy code"}>
-                <button
-                  type="button"
-                  onClick={copyPlaygroundSnippet}
-                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
-                >
-                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
-                </button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="Data Table"
-        description="A complete, self-contained table with search, sortable columns, dropdown filters, and pagination."
-      >
-        <Card className="p-6">
-          <DataTable data={MEMBERS} columns={MEMBER_COLUMNS} searchPlaceholder="Search members..." pageSize={5} />
-        </Card>
-      </DocsSection>
-
-      <DocsSection title="Basic & Striped" description="Standard rows, or zebra-striping for easier scanning.">
-        <DocsSectionGrid>
-          <DocsSubsection title="Basic">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Channel</TableHead>
-                  <TableHead>Sessions</TableHead>
-                  <TableHead>Bounce Rate</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {data.map((r) => (
-                  <TableRow key={r.channel}>
-                    <TableCell className="font-medium">{r.channel}</TableCell>
-                    <TableCell>{r.sessions}</TableCell>
-                    <TableCell>{r.bounce}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </DocsSubsection>
-
-          <DocsSubsection title="Striped">
-            <Table className="[&_tr:nth-child(even)]:bg-zinc-50 dark:[&_tr:nth-child(even)]:bg-zinc-900/50">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Channel</TableHead>
-                  <TableHead>Sessions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {data.map((r) => (
-                  <TableRow key={r.channel}>
-                    <TableCell>{r.channel}</TableCell>
-                    <TableCell>{r.sessions}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Bordered & Compact" description="Full cell borders for clarity, or tight padding for dense data.">
-        <DocsSectionGrid>
-          <DocsSubsection title="Bordered">
-            <div className="overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800">
-              <Table className="[&_td]:border-r [&_th]:border-r last:[&_td]:border-r-0 last:[&_th]:border-r-0">
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Channel</TableHead>
-                    <TableHead>Sessions</TableHead>
-                    <TableHead>Bounce Rate</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {data.map((r) => (
-                    <TableRow key={r.channel}>
-                      <TableCell className="font-medium">{r.channel}</TableCell>
-                      <TableCell>{r.sessions}</TableCell>
-                      <TableCell>{r.bounce}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </DocsSubsection>
-
-          <DocsSubsection title="Compact">
-            <Table>
-              <TableBody>
-                {data.map((r) => (
-                  <TableRow key={r.channel}>
-                    <TableCell className="py-1.5">{r.channel}</TableCell>
-                    <TableCell className="py-1.5 text-right font-mono">{r.sessions}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Paginated Table" description="Slice a larger dataset into pages with simple, reusable pagination controls.">
-        <div className="overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Invoice</TableHead>
-                <TableHead>Customer</TableHead>
-                <TableHead className="text-right">Amount</TableHead>
-                <TableHead>Status</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {pagedInvoices.map((invoice) => (
-                <TableRow key={invoice.id}>
-                  <TableCell className="font-mono text-xs text-zinc-500 dark:text-zinc-400">{invoice.id}</TableCell>
-                  <TableCell className="font-medium">{invoice.customer}</TableCell>
-                  <TableCell className="text-right font-mono">{invoice.amount}</TableCell>
-                  <TableCell>
-                    <Badge variant={statusVariant(invoice.status)}>{invoice.status}</Badge>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-
-        <div className="flex flex-col-reverse items-center justify-between gap-3 pt-4 sm:flex-row">
-          <p className="text-xs text-zinc-500 dark:text-zinc-400">
-            Showing {(invoicePage - 1) * INVOICE_PAGE_SIZE + 1}–
-            {Math.min(invoicePage * INVOICE_PAGE_SIZE, INVOICES.length)} of {INVOICES.length}
-          </p>
-          <Pagination page={invoicePage} totalPages={invoiceTotalPages} onPageChange={setInvoicePage} />
-        </div>
-      </DocsSection>
-
-      <DocsSection title="Minimal & Comparison" description="A borderless style for quiet lists, or side-by-side plan comparisons.">
-        <DocsSectionGrid>
-          <DocsSubsection title="Minimal">
-            <Table className="border-none">
-              <TableBody>
-                {data.map((r) => (
-                  <TableRow key={r.channel} className="hover:bg-transparent">
-                    <TableCell className="px-0 font-medium">{r.channel}</TableCell>
-                    <TableCell className="px-0 text-right opacity-70">{r.sessions}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </DocsSubsection>
-
-          <DocsSubsection title="Comparison">
-            <Table className="border border-zinc-200 dark:border-zinc-800">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[30%]">Feature</TableHead>
-                  <TableHead className="bg-zinc-50 text-center dark:bg-zinc-900">Personal</TableHead>
-                  <TableHead className="text-center">Team</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>API access</TableCell>
-                  <TableCell className="text-center">
-                    <X size={16} className="mx-auto text-red-500" />
-                  </TableCell>
-                  <TableCell className="text-center">
-                    <Check size={16} className="mx-auto text-emerald-500" />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>Custom domain</TableCell>
-                  <TableCell className="text-center">
-                    <Check size={16} className="mx-auto text-emerald-500" />
-                  </TableCell>
-                  <TableCell className="text-center">
-                    <Check size={16} className="mx-auto text-emerald-500" />
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Expandable Rows" description="Toggle a row open to reveal more detailed information.">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead></TableHead>
-              <TableHead>Project Name</TableHead>
-              <TableHead>Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <ExpandableRow
-              title="Project X"
-              details={
-                <div className="p-2 text-zinc-500 dark:text-zinc-400">
-                  Project internal ID: #9901. Team: Analytics. Priority: High.
-                </div>
-              }
-            >
-              <TableCell className="font-semibold">Project X</TableCell>
-              <TableCell>
-                <Badge variant="success">Active</Badge>
-              </TableCell>
-            </ExpandableRow>
-            <ExpandableRow
-              title="Project Y"
-              details={
-                <div className="p-2 text-zinc-500 dark:text-zinc-400">
-                  Project internal ID: #9902. Team: Marketing. Priority: Low.
-                </div>
-              }
-            >
-              <TableCell className="font-semibold">Project Y</TableCell>
-              <TableCell>
-                <Badge variant="warning">Pending</Badge>
-              </TableCell>
-            </ExpandableRow>
-          </TableBody>
-        </Table>
-      </DocsSection>
-
-      <DocsSection title="Status Table" description="Highlight state changes across rows using badges.">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Channel</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Sessions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {data.map((r) => (
-              <TableRow key={r.channel}>
-                <TableCell className="font-medium">{r.channel}</TableCell>
-                <TableCell>
-                  <Badge variant={statusVariant(r.status)}>{r.status}</Badge>
-                </TableCell>
-                <TableCell>{r.sessions}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </DocsSection>
-
-      <DocsSection title="Card Table" description="A table contained within a rounded, elevated surface.">
-        <Card className="overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Source</TableHead>
-                <TableHead className="text-right">Value</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data.map((r) => (
-                <TableRow key={r.channel}>
-                  <TableCell>{r.channel}</TableCell>
-                  <TableCell className="text-right">{r.sessions}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Card>
-      </DocsSection>
-
-      <DocsSection title="Dashboard Table" description="A rich dashboard view with avatars, growth metrics, and row actions.">
-        <Card className="overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Project Lead</TableHead>
-                <TableHead>Growth</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="text-right">Action</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data.map((r) => (
-                <TableRow key={r.channel}>
-                  <TableCell>
-                    <div className="flex items-center gap-3">
-                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-500 dark:bg-zinc-800">
-                        <User size={14} />
-                      </div>
-                      <span className="text-sm font-semibold text-zinc-900 dark:text-white">{r.channel}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <span className="flex items-center gap-1 text-sm font-bold text-emerald-500">
-                      +14.5% <ArrowUpRight size={14} />
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={statusVariant(r.status)}>{r.status}</Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <MoreHorizontal size={16} className="ml-auto cursor-pointer opacity-50 hover:opacity-100" />
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Card>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — DataTable" rows={DATA_TABLE_API_ROWS} />
-        <DocsSimpleTable title="Building Blocks" rows={SUBCOMPONENT_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}