@rovula/ui 0.1.28 → 0.1.29

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

@@ -3,10 +3,11 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
+  TableFooter,
   TableHead,
   TableHeader,
+  TablePagination,
   TableRow,
 } from "./Table";
 
@@ -14,12 +15,17 @@ const meta = {
   title: "Components/Table",
   component: Table,
   tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    bordered: {
+      control: "boolean",
+      description:
+        "Outer `rounded-md` + `border-table-c-border`, inner scroll (`Table.tsx`).",
+    },
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-8 flex flex-col gap-10 bg-page-bg-main min-h-screen w-full">
         <Story />
       </div>
     ),
@@ -28,52 +34,791 @@ const meta = {
 
 export default meta;
 
-export const Default = {
-  args: {},
-  render: (args) => {
-    const props: typeof args = {
-      ...args,
-    };
+const rows = [
+  { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+  { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+  { id: "INV003", status: "Paid", method: "Bank Transfer", amount: "$350.00" },
+  {
+    id: "INV004",
+    status: "Cancelled",
+    method: "Credit Card",
+    amount: "$450.00",
+  },
+  { id: "INV005", status: "Pending", method: "PayPal", amount: "$90.00" },
+];
+
+// ── Shared helpers ────────────────────────────────────────────────────────────
+
+const Headers = ({ colDivided = false }: { colDivided?: boolean }) => (
+  <TableHeader>
+    {/* divided={false}: TableHeader already applies border-b via [&_tr>th]:border-b */}
+    <TableRow divided={false} colDivided={colDivided}>
+      <TableHead className="w-[120px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+);
+
+const Rows = ({
+  divided = true,
+  colDivided = false,
+  selectedIndex,
+}: {
+  divided?: boolean;
+  colDivided?: boolean;
+  selectedIndex?: number;
+}) => (
+  <>
+    {rows.map((r, i) => (
+      <TableRow
+        key={r.id}
+        divided={divided}
+        colDivided={colDivided}
+        data-state={i === selectedIndex ? "selected" : undefined}
+      >
+        <TableCell className="font-medium">{r.id}</TableCell>
+        <TableCell>{r.status}</TableCell>
+        <TableCell>{r.method}</TableCell>
+        <TableCell className="text-right">{r.amount}</TableCell>
+      </TableRow>
+    ))}
+  </>
+);
+
+// ── Stories ───────────────────────────────────────────────────────────────────
+
+/** NON-STRIPED — horizontal row strokes, no column dividers */
+export const Default: StoryObj = {
+  render: () => (
+    <Table>
+      <Headers />
+      <TableBody>
+        <Rows />
+      </TableBody>
+    </Table>
+  ),
+};
+
+/** NON-STRIPED + COL DIVIDED — horizontal row strokes + vertical column dividers */
+export const NonStripedDivided: StoryObj = {
+  render: () => (
+    <Table bordered>
+      <Headers colDivided />
+      <TableBody>
+        <Rows colDivided />
+      </TableBody>
+    </Table>
+  ),
+};
+
+/** STRIPED — alternating bg-a / bg-b, NO row strokes, NO column dividers */
+export const Striped: StoryObj = {
+  render: () => (
+    <Table bordered>
+      <Headers />
+      <TableBody striped>
+        <Rows divided={false} />
+      </TableBody>
+    </Table>
+  ),
+};
+
+/**
+ * STRIPED + COL DIVIDED — alternating bg, NO row strokes, WITH column dividers.
+ * Primary Xspector table style.
+ */
+export const StripedAndDivided: StoryObj = {
+  render: () => (
+    <Table bordered>
+      <Headers colDivided />
+      <TableBody striped>
+        <Rows divided={false} colDivided />
+      </TableBody>
+    </Table>
+  ),
+};
+
+/** SELECTED ROW — data-[state=selected] applies transparent-primary-12. Row 1 pre-selected. */
+export const WithSelectedRow: StoryObj = {
+  render: () => (
+    <Table bordered>
+      <Headers colDivided />
+      <TableBody striped>
+        <Rows divided={false} colDivided selectedIndex={1} />
+      </TableBody>
+    </Table>
+  ),
+};
+
+/**
+ * WITH FOOTER — tfoot summary row with bg-table-bg-main + top border.
+ * TableFooter is inside Table so bordered works naturally.
+ */
+export const WithFooter: StoryObj = {
+  render: () => (
+    <Table bordered>
+      <Headers colDivided />
+      <TableBody>
+        <Rows colDivided />
+      </TableBody>
+      <TableFooter>
+        <TableRow divided={false} colDivided>
+          <TableCell className="font-medium">5 invoices</TableCell>
+          <TableCell />
+          <TableCell />
+          <TableCell className="text-right font-medium">$1,290.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};
+
+/**
+ * WITH PAGINATION — TablePagination is a sibling of Table so needs an explicit
+ * outer wrapper (not covered by Table's bordered prop).
+ */
+export const WithPagination: StoryObj = {
+  render: () => {
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(2);
+    const paged = rows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
     return (
-      <div className="flex flex-row gap-4 w-full">
+      // Explicit outer wrapper — required because TablePagination is a sibling of Table
+      <div className="rounded-md overflow-hidden border border-table-c-border w-full">
         <Table>
-          <TableCaption>A list of your recent invoices.</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[100px]">Invoice</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
+          <Headers colDivided />
           <TableBody>
-            <TableRow>
-              <TableCell className="font-medium">INV001</TableCell>
-              <TableCell>Paid</TableCell>
-              <TableCell>Credit Card</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-medium">INV001</TableCell>
-              <TableCell>Paid</TableCell>
-              <TableCell>Credit Card</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-medium">INV001</TableCell>
-              <TableCell>Paid</TableCell>
-              <TableCell>Credit Card</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-medium">INV001</TableCell>
-              <TableCell>Paid</TableCell>
-              <TableCell>Credit Card</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
+            {paged.map((r) => (
+              <TableRow key={r.id} divided={true} colDivided>
+                <TableCell className="font-medium">{r.id}</TableCell>
+                <TableCell>{r.status}</TableCell>
+                <TableCell>{r.method}</TableCell>
+                <TableCell className="text-right">{r.amount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <TablePagination
+          pageIndex={pageIndex}
+          pageSize={pageSize}
+          totalCount={rows.length}
+          pageSizeOptions={[2, 3, 5]}
+          onPageChange={setPageIndex}
+          onPageSizeChange={(s) => {
+            setPageSize(s);
+            setPageIndex(0);
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+/** EMPTY STATE — single full-width row with centered message */
+export const Empty: StoryObj = {
+  render: () => (
+    <Table bordered>
+      <Headers colDivided />
+      <TableBody>
+        <TableRow divided={false} className="hover:bg-transparent">
+          <TableCell
+            colSpan={4}
+            className="h-32 text-center text-text-g-contrast-medium"
+          >
+            No data found.
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};
+
+/** ALL STATES SIDE-BY-SIDE — reference sheet for design review */
+export const AllStates: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-full">
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Non-striped — row stroke only
+      </p>
+      <Table bordered>
+        <Headers />
+        <TableBody>
+          <Rows />
+        </TableBody>
+      </Table>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Non-striped + col divided — row stroke + column dividers
+      </p>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody>
+          <Rows colDivided />
+        </TableBody>
+      </Table>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Striped — alternating bg, no row stroke, no column dividers
+      </p>
+      <Table bordered>
+        <Headers />
+        <TableBody striped>
+          <Rows divided={false} />
+        </TableBody>
+      </Table>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Striped + col divided — alternating bg, no row stroke, column dividers
+        (primary style)
+      </p>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody striped>
+          <Rows divided={false} colDivided />
+        </TableBody>
+      </Table>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Selected row (index 2) — transparent-primary-12 overlay
+      </p>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody striped>
+          <Rows divided={false} colDivided selectedIndex={2} />
+        </TableBody>
+      </Table>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        With footer — summary row in tfoot
+      </p>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody>
+          <Rows colDivided />
+        </TableBody>
+        <TableFooter>
+          <TableRow divided={false} colDivided>
+            <TableCell className="font-medium">5 invoices</TableCell>
+            <TableCell />
+            <TableCell />
+            <TableCell className="text-right font-medium">$1,290.00</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  ),
+};
+
+// ── Scroll ────────────────────────────────────────────────────────────────────
+
+const scrollCols = [
+  "ID",
+  "Column name",
+  "Category",
+  "Data type",
+  "Format",
+  "Source",
+  "Default value",
+  "Required",
+  "Nullable",
+  "Min length",
+  "Max length",
+  "Pattern",
+  "Unit",
+  "Precision",
+  "Encoding",
+  "Description",
+];
+
+const scrollRows = Array.from({ length: 40 }, (_, i) => [
+  `COL-${String(i + 1).padStart(3, "0")}`,
+  `column_field_${i + 1}`,
+  ["Identifier", "Asset", "Timestamp", "Status", "User", "Metric", "Tag"][
+    i % 7
+  ],
+  ["String", "Number", "Date", "Boolean", "Enum", "Array", "Object"][i % 7],
+  ["UUID", "Free text", "ISO 8601", "true/false", "1–5", "JSON", "Base64"][
+    i % 7
+  ],
+  ["System", "Manual", "Device", "Auth", "Sensor", "Import", "Computed"][i % 7],
+  ["-", "auto", "now()", "true", "0", "[]", "{}"][i % 7],
+  i % 3 === 0 ? "Yes" : "No",
+  i % 2 === 0 ? "Yes" : "No",
+  ["-", "1", "3", "8", "16", "36", "64"][i % 7],
+  ["255", "128", "1024", "36", "64", "512", "-"][i % 7],
+  ["-", "^[A-Z]+$", "^\\d+$", ".*", "^[a-z_]+$", "-", "-"][i % 7],
+  ["m", "kg", "°C", "-", "%", "px", "ms"][i % 7],
+  ["-", "2", "4", "6", "0", "3", "8"][i % 7],
+  ["UTF-8", "ASCII", "Base64", "UTF-16", "-", "UTF-8", "UTF-8"][i % 7],
+  `Description text for column ${i + 1}`,
+]);
+
+/**
+ * WITH SCROLL (Figma 9637-10817)
+ *
+ * Demonstrates both axes of overflow:
+ *  - Vertical: fixed-height container → body rows overflow and scroll vertically
+ *  - Horizontal: 10 columns wider than the viewport → native h-scroll bar appears
+ *
+ * Implementation notes:
+ *  - Outer div sets the fixed height and owns the rounded border
+ *    (TablePagination must sit outside the scrollable Table)
+ *  - Table gets rootClassName="flex-1 min-h-0" so it grows to fill flex space
+ *    and allows overflow-auto to kick in
+ *  - TableHeader gets className="sticky top-0 z-10" for a frozen header row
+ */
+export const WithScroll: StoryObj = {
+  render: () => {
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(5);
+    const totalCount = scrollRows.length;
+    const paged = scrollRows.slice(
+      pageIndex * pageSize,
+      (pageIndex + 1) * pageSize,
+    );
+
+    return (
+      // Outer wrapper: fixed height + border owns the rounded corners.
+      // TablePagination lives here as a sibling (outside the scroll area).
+      <div className="flex flex-col h-[320px] w-full">
+        {/* Table fills remaining height; overflow-auto on rootDiv handles both scroll axes */}
+        <Table rootClassName="flex-1 min-h-0">
+          {/* Sticky header — stays visible during vertical scroll */}
+          <TableHeader className="sticky top-0 z-10">
+            <TableRow divided={false} colDivided>
+              {scrollCols.map((col) => (
+                <TableHead key={col} className="whitespace-nowrap">
+                  {col}
+                </TableHead>
+              ))}
             </TableRow>
+          </TableHeader>
+
+          <TableBody striped>
+            {paged.map((cells, i) => (
+              <TableRow key={i} divided={false} colDivided>
+                {cells.map((cell, j) => (
+                  <TableCell key={j} className="whitespace-nowrap">
+                    {cell}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
+
+        {/* Pagination sits outside the scroll container — always visible */}
+        <TablePagination
+          pageIndex={pageIndex}
+          pageSize={pageSize}
+          totalCount={totalCount}
+          pageSizeOptions={[5, 10, 20]}
+          onPageChange={setPageIndex}
+          onPageSizeChange={(s) => {
+            setPageSize(s);
+            setPageIndex(0);
+          }}
+        />
       </div>
     );
   },
-} satisfies StoryObj;
+};
+
+/**
+ * SCROLLBAR SIZES — per-axis demo
+ *
+ * Combine ui-scrollbar-x-{size} + ui-scrollbar-y-{size} independently.
+ * CSS: height → horizontal bar thickness | width → vertical bar thickness
+ */
+export const ScrollbarSizes: StoryObj = {
+  render: () => {
+    const makeTable = (label: string, xClass: string, yClass: string) => (
+      <div key={label} className="flex flex-col gap-2">
+        <p className="typography-subtitle4 text-text-g-contrast-high">
+          {label}
+        </p>
+        <div className="rounded-xl overflow-hidden border border-table-bg-line h-[180px] flex flex-col">
+          <Table
+            rootClassName={`flex-1 min-h-0 ui-scrollbar ${xClass} ${yClass}`}
+          >
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow divided={false} colDivided>
+                {scrollCols.map((c) => (
+                  <TableHead key={c} className="whitespace-nowrap">
+                    {c}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody striped>
+              {scrollRows.slice(0, 12).map((cells, i) => (
+                <TableRow key={i} divided={false} colDivided>
+                  {cells.map((cell, j) => (
+                    <TableCell key={j} className="whitespace-nowrap">
+                      {cell}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
+
+    return (
+      <div className="flex flex-col gap-8 w-full">
+        {makeTable(
+          "X = M (12px)  +  Y = S (6px)  ← Table default",
+          "ui-scrollbar-x-m",
+          "ui-scrollbar-y-s",
+        )}
+        {makeTable(
+          "X = S (6px)   +  Y = M (12px)",
+          "ui-scrollbar-x-s",
+          "ui-scrollbar-y-m",
+        )}
+        {makeTable(
+          "X = M (12px)  +  Y = M (12px)",
+          "ui-scrollbar-x-m",
+          "ui-scrollbar-y-m",
+        )}
+        {makeTable(
+          "X = S (6px)   +  Y = S (6px)",
+          "ui-scrollbar-x-s",
+          "ui-scrollbar-y-s",
+        )}
+        {makeTable(
+          "X = XS (2px)  +  Y = XS (2px)",
+          "ui-scrollbar-x-xs",
+          "ui-scrollbar-y-xs",
+        )}
+        {makeTable(
+          "X = M (12px)  +  Y = XS (2px)",
+          "ui-scrollbar-x-m",
+          "ui-scrollbar-y-xs",
+        )}
+      </div>
+    );
+  },
+};
+
+// ── Panel (on Modal / Drawer / Panel surface) ─────────────────────────────────
+//
+// The Panel wrapper carries data-surface="panel" which overrides --table-c-*
+// tokens via CSS cascade — no variant prop on Table or TablePagination needed.
+// Every story below mirrors its non-panel counterpart exactly.
+
+/** Simulates a Modal / Drawer / Panel surface wrapper.
+ *  data-surface="panel" triggers the CSS token overrides in table.css. */
+const PanelDecorator = ({ children }: { children: React.ReactNode }) => (
+  <div
+    data-surface="panel"
+    className=" bg-modal-surface p-6 w-full max-w-3xl mx-auto"
+  >
+    <p className="typography-subtitle4 text-text-g-contrast-medium mb-4">
+      Modal / Panel surface
+    </p>
+    {children}
+  </div>
+);
+
+/** PANEL DEFAULT — transparent rows + panel-sub-line row dividers */
+export const PanelDefault: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table>
+        <Headers />
+        <TableBody>
+          <Rows />
+        </TableBody>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/** PANEL NON-STRIPED DIVIDED — row dividers + vertical column dividers */
+export const PanelNonStripedDivided: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table>
+        <Headers colDivided />
+        <TableBody>
+          <Rows colDivided />
+        </TableBody>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/** PANEL STRIPED — alternating rows (both transparent in panel mode), no row strokes */
+export const PanelStriped: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table bordered>
+        <Headers />
+        <TableBody striped>
+          <Rows divided={false} />
+        </TableBody>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/** PANEL STRIPED + COL DIVIDED */
+export const PanelStripedAndDivided: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody striped>
+          <Rows divided={false} colDivided />
+        </TableBody>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/** PANEL SELECTED ROW — table-panel-selected (yellow/olive) */
+export const PanelWithSelectedRow: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody striped>
+          <Rows divided={false} colDivided selectedIndex={1} />
+        </TableBody>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/** PANEL WITH FOOTER */
+export const PanelWithFooter: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody>
+          <Rows colDivided />
+        </TableBody>
+        <TableFooter>
+          <TableRow divided={false} colDivided>
+            <TableCell className="font-medium">5 invoices</TableCell>
+            <TableCell />
+            <TableCell />
+            <TableCell className="text-right font-medium">$1,290.00</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/**
+ * PANEL WITH PAGINATION
+ * TablePagination sits inside the same data-surface="panel" scope so it
+ * automatically picks up the panel tokens — no variant prop needed.
+ */
+export const PanelWithPagination: StoryObj = {
+  render: () => {
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(3);
+    const paged = rows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+    return (
+      <PanelDecorator>
+        <div className="rounded-lg overflow-hidden border border-table-c-border w-full">
+          <Table>
+            <Headers colDivided />
+            <TableBody>
+              {paged.map((r) => (
+                <TableRow key={r.id} divided colDivided>
+                  <TableCell className="font-medium">{r.id}</TableCell>
+                  <TableCell>{r.status}</TableCell>
+                  <TableCell>{r.method}</TableCell>
+                  <TableCell className="text-right">{r.amount}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+          <TablePagination
+            pageIndex={pageIndex}
+            pageSize={pageSize}
+            totalCount={rows.length}
+            pageSizeOptions={[2, 3, 5]}
+            onPageChange={setPageIndex}
+            onPageSizeChange={(s) => {
+              setPageSize(s);
+              setPageIndex(0);
+            }}
+          />
+        </div>
+      </PanelDecorator>
+    );
+  },
+};
+
+/** PANEL EMPTY STATE */
+export const PanelEmpty: StoryObj = {
+  render: () => (
+    <PanelDecorator>
+      <Table bordered>
+        <Headers colDivided />
+        <TableBody>
+          <TableRow divided={false} className="hover:bg-transparent">
+            <TableCell
+              colSpan={4}
+              className="h-32 text-center text-text-g-contrast-medium"
+            >
+              No data found.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </PanelDecorator>
+  ),
+};
+
+/**
+ * PANEL WITH SCROLL — sticky header + both scroll axes inside a fixed-height panel.
+ */
+export const PanelWithScroll: StoryObj = {
+  render: () => {
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(5);
+    const paged = scrollRows.slice(
+      pageIndex * pageSize,
+      (pageIndex + 1) * pageSize,
+    );
+    return (
+      <PanelDecorator>
+        <div className="flex flex-col h-[280px] w-full rounded-lg overflow-hidden border border-table-c-border">
+          <Table rootClassName="flex-1 min-h-0">
+            <TableHeader className="sticky top-0 z-10">
+              <TableRow divided={false} colDivided>
+                {scrollCols.map((col) => (
+                  <TableHead key={col} className="whitespace-nowrap">
+                    {col}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paged.map((cells, i) => (
+                <TableRow key={i} divided colDivided>
+                  {cells.map((cell, j) => (
+                    <TableCell key={j} className="whitespace-nowrap">
+                      {cell}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+          <TablePagination
+            pageIndex={pageIndex}
+            pageSize={pageSize}
+            totalCount={scrollRows.length}
+            pageSizeOptions={[5, 10, 20]}
+            onPageChange={setPageIndex}
+            onPageSizeChange={(s) => {
+              setPageSize(s);
+              setPageIndex(0);
+            }}
+          />
+        </div>
+      </PanelDecorator>
+    );
+  },
+};
+
+/** PANEL ALL STATES — all variants side-by-side for design review */
+export const PanelAllStates: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-full">
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Non-striped — row stroke only
+      </p>
+      <PanelDecorator>
+        <Table bordered>
+          <Headers />
+          <TableBody>
+            <Rows />
+          </TableBody>
+        </Table>
+      </PanelDecorator>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Non-striped + col divided
+      </p>
+      <PanelDecorator>
+        <Table bordered>
+          <Headers colDivided />
+          <TableBody>
+            <Rows colDivided />
+          </TableBody>
+        </Table>
+      </PanelDecorator>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Striped — alternating bg, no row stroke
+      </p>
+      <PanelDecorator>
+        <Table bordered>
+          <Headers />
+          <TableBody striped>
+            <Rows divided={false} />
+          </TableBody>
+        </Table>
+      </PanelDecorator>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Striped + col divided (primary style)
+      </p>
+      <PanelDecorator>
+        <Table bordered>
+          <Headers colDivided />
+          <TableBody striped>
+            <Rows divided={false} colDivided />
+          </TableBody>
+        </Table>
+      </PanelDecorator>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        Selected row (index 2) — table-panel-selected overlay
+      </p>
+      <PanelDecorator>
+        <Table bordered>
+          <Headers colDivided />
+          <TableBody striped>
+            <Rows divided={false} colDivided selectedIndex={2} />
+          </TableBody>
+        </Table>
+      </PanelDecorator>
+
+      <p className="typography-subtitle4 text-text-g-contrast-high">
+        With footer
+      </p>
+      <PanelDecorator>
+        <Table bordered>
+          <Headers colDivided />
+          <TableBody>
+            <Rows colDivided />
+          </TableBody>
+          <TableFooter>
+            <TableRow divided={false} colDivided>
+              <TableCell className="font-medium">5 invoices</TableCell>
+              <TableCell />
+              <TableCell />
+              <TableCell className="text-right font-medium">
+                $1,290.00
+              </TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </PanelDecorator>
+    </div>
+  ),
+};