@neynar/ui 0.4.0 → 0.5.0

package/src/components/ui/stories/table.stories.tsx

@@ -1,5 +1,17 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AlertCircleIcon,
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CheckCircle2Icon,
+  ClockIcon,
+  ExternalLinkIcon,
+  MoreHorizontalIcon,
+  XCircleIcon,
+} from "lucide-react";
+
+import { Badge } from "../badge";
+import { Button } from "../button";
 import {
   Table,
   TableBody,
@@ -10,531 +22,837 @@ import {
   TableHeader,
   TableRow,
 } from "../table";
-import { Badge } from "../badge";
-import { Button } from "../button";
-import { Checkbox } from "../checkbox";
-import { Avatar, AvatarFallback } from "../avatar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../dropdown-menu";
-import { MoreHorizontal } from "lucide-react";
 
-const meta = {
-  title: "Data Display/Table",
+const meta: Meta<typeof Table> = {
+  title: "Components/Layout & Structure/Table",
   component: Table,
   parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "A responsive table component built on semantic HTML elements. Supports hover states, selection, captions, and footers. Perfect for dashboards, data management, and structured content display following shadcn/ui patterns.",
-      },
-    },
+    layout: "centered",
   },
   argTypes: {
     className: {
       control: "text",
-      description: "Additional CSS classes for styling customization",
+      description: "Additional CSS classes for the table",
     },
   },
-} satisfies Meta<typeof Table>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Table>;
 
 /**
- * Interactive playground with all table features available for testing.
- * This story demonstrates the full range of table capabilities including
- * selection, actions, captions, and various cell types.
+ * Neynar Dashboard Tables - Realistic scenarios showing tables in context
+ * of transaction history, webhook logs, and API request monitoring.
  */
-export const Interactive: Story = {
-  render: function InteractiveTable() {
-    const [selectedRows, setSelectedRows] = React.useState<Set<string>>(
-      new Set()
-    );
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function DashboardTables() {
+      return (
+        <div className="w-full max-w-6xl space-y-8">
+          {/* Transaction History Table */}
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-lg font-semibold">Transaction History</h3>
+              <p className="text-muted-foreground text-sm">
+                Recent API credit purchases and usage transactions.
+              </p>
+            </div>
+            <div className="border-border rounded-lg border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Transaction ID</TableHead>
+                    <TableHead>Type</TableHead>
+                    <TableHead>Amount</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Date</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      txn_9k2m4n8p
+                    </TableCell>
+                    <TableCell>Credit Purchase</TableCell>
+                    <TableCell className="font-medium">$99.00</TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Completed
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-29 14:23
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <ExternalLinkIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      txn_7h5k3m2n
+                    </TableCell>
+                    <TableCell>API Usage</TableCell>
+                    <TableCell className="font-medium">-$12.50</TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Completed
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-28 09:15
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <ExternalLinkIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      txn_4f2j8k1m
+                    </TableCell>
+                    <TableCell>Credit Purchase</TableCell>
+                    <TableCell className="font-medium">$49.00</TableCell>
+                    <TableCell>
+                      <Badge variant="outline">
+                        <ClockIcon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Pending
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-27 16:42
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <ExternalLinkIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      txn_2d9h5k3p
+                    </TableCell>
+                    <TableCell>Refund</TableCell>
+                    <TableCell className="font-medium">$25.00</TableCell>
+                    <TableCell>
+                      <Badge variant="destructive">
+                        <XCircleIcon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Failed
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-26 11:08
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <ExternalLinkIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+                <TableFooter>
+                  <TableRow>
+                    <TableCell colSpan={2}>Total Balance</TableCell>
+                    <TableCell className="font-semibold">$110.50</TableCell>
+                    <TableCell colSpan={3} />
+                  </TableRow>
+                </TableFooter>
+              </Table>
+            </div>
+          </div>
+
+          {/* Webhook Logs Table */}
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-lg font-semibold">Webhook Logs</h3>
+              <p className="text-muted-foreground text-sm">
+                Recent webhook delivery attempts and their status.
+              </p>
+            </div>
+            <div className="border-border rounded-lg border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Event Type</TableHead>
+                    <TableHead>Webhook URL</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Response</TableHead>
+                    <TableHead>Timestamp</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      cast.created
+                    </TableCell>
+                    <TableCell className="font-mono text-xs">
+                      https://api.example.com/webhooks
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        200 OK
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      42ms
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-29 14:45:23
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <MoreHorizontalIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      user.updated
+                    </TableCell>
+                    <TableCell className="font-mono text-xs">
+                      https://api.example.com/webhooks
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        200 OK
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      38ms
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-29 14:44:15
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <MoreHorizontalIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      reaction.added
+                    </TableCell>
+                    <TableCell className="font-mono text-xs">
+                      https://api.example.com/webhooks
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="destructive">
+                        <XCircleIcon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        500 Error
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      1,203ms
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-29 14:43:08
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <MoreHorizontalIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      cast.created
+                    </TableCell>
+                    <TableCell className="font-mono text-xs">
+                      https://api.example.com/webhooks
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">
+                        <AlertCircleIcon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Timeout
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      30,000ms
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      2025-12-29 14:42:01
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon-sm">
+                        <MoreHorizontalIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+                <TableCaption>
+                  Showing the last 4 webhook deliveries
+                </TableCaption>
+              </Table>
+            </div>
+          </div>
+
+          {/* API Request Logs Table */}
+          <div className="space-y-4">
+            <div>
+              <h3 className="text-lg font-semibold">API Request Logs</h3>
+              <p className="text-muted-foreground text-sm">
+                Monitor your API usage, endpoints, and response times.
+              </p>
+            </div>
+            <div className="border-border rounded-lg border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Endpoint</TableHead>
+                    <TableHead>Method</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Response Time</TableHead>
+                    <TableHead>Requests</TableHead>
+                    <TableHead className="text-right">Trend</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      /v2/farcaster/cast
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="font-mono">
+                        GET
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Healthy
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      125ms avg
+                    </TableCell>
+                    <TableCell className="font-medium">1,245</TableCell>
+                    <TableCell className="text-right">
+                      <span className="text-green-600 flex items-center justify-end gap-1 text-sm">
+                        <ArrowUpIcon className="size-3" />
+                        +12%
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      /v2/farcaster/user/bulk
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="font-mono">
+                        GET
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Healthy
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      89ms avg
+                    </TableCell>
+                    <TableCell className="font-medium">2,891</TableCell>
+                    <TableCell className="text-right">
+                      <span className="text-green-600 flex items-center justify-end gap-1 text-sm">
+                        <ArrowUpIcon className="size-3" />
+                        +8%
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      /v2/farcaster/feed
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="font-mono">
+                        GET
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">
+                        <AlertCircleIcon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Degraded
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      523ms avg
+                    </TableCell>
+                    <TableCell className="font-medium">456</TableCell>
+                    <TableCell className="text-right">
+                      <span className="text-red-600 flex items-center justify-end gap-1 text-sm">
+                        <ArrowDownIcon className="size-3" />
+                        -15%
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-mono text-xs">
+                      /v2/farcaster/cast
+                    </TableCell>
+                    <TableCell>
+                      <Badge className="font-mono">POST</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
+                        <CheckCircle2Icon
+                          data-icon="inline-start"
+                          className="size-3"
+                        />
+                        Healthy
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      198ms avg
+                    </TableCell>
+                    <TableCell className="font-medium">678</TableCell>
+                    <TableCell className="text-right">
+                      <span className="text-green-600 flex items-center justify-end gap-1 text-sm">
+                        <ArrowUpIcon className="size-3" />
+                        +5%
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+                <TableFooter>
+                  <TableRow>
+                    <TableCell colSpan={4}>Total API Requests Today</TableCell>
+                    <TableCell className="font-semibold">5,270</TableCell>
+                    <TableCell className="text-right">
+                      <span className="text-green-600 flex items-center justify-end gap-1 text-sm font-medium">
+                        <ArrowUpIcon className="size-3" />
+                        +9%
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                </TableFooter>
+              </Table>
+            </div>
+          </div>
+        </div>
+      );
+    }
 
-    const users = [
-      {
-        id: "1",
-        username: "dwr.eth",
-        displayName: "Dan Romero",
-        fid: "3",
-        followers: "45.2k",
-        following: "892",
-        joined: "Jul 2021",
-        avatar: "DR",
-        status: "active" as const,
-      },
-      {
-        id: "2",
-        username: "vitalik.eth",
-        displayName: "Vitalik Buterin",
-        fid: "5650",
-        followers: "112.3k",
-        following: "234",
-        joined: "Oct 2022",
-        avatar: "VB",
-        status: "active" as const,
-      },
-      {
-        id: "3",
-        username: "jessepollak",
-        displayName: "Jesse Pollak",
-        fid: "420",
-        followers: "32.1k",
-        following: "567",
-        joined: "Sep 2021",
-        avatar: "JP",
-        status: "inactive" as const,
-      },
-      {
-        id: "4",
-        username: "linda",
-        displayName: "Linda Xie",
-        fid: "1214",
-        followers: "28.9k",
-        following: "432",
-        joined: "Nov 2021",
-        avatar: "LX",
-        status: "active" as const,
-      },
-    ];
+    return <DashboardTables />;
+  },
+};
 
-    const toggleRow = (id: string) => {
-      const newSelected = new Set(selectedRows);
-      if (newSelected.has(id)) {
-        newSelected.delete(id);
-      } else {
-        newSelected.add(id);
-      }
-      setSelectedRows(newSelected);
-    };
+/**
+ * Complete design system reference showing all table components,
+ * variants, and composition patterns.
+ */
+export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => (
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Basic Table */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Table</h3>
+          <p className="text-muted-foreground text-sm">
+            Simple table with header, body, and footer sections.
+          </p>
+        </div>
+        <div className="border-border rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Method</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <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">INV002</TableCell>
+                <TableCell>Pending</TableCell>
+                <TableCell>PayPal</TableCell>
+                <TableCell className="text-right">$150.00</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">INV003</TableCell>
+                <TableCell>Unpaid</TableCell>
+                <TableCell>Bank Transfer</TableCell>
+                <TableCell className="text-right">$350.00</TableCell>
+              </TableRow>
+            </TableBody>
+            <TableFooter>
+              <TableRow>
+                <TableCell colSpan={3}>Total</TableCell>
+                <TableCell className="text-right">$750.00</TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+        </div>
+      </section>
 
-    const toggleAll = () => {
-      if (selectedRows.size === users.length) {
-        setSelectedRows(new Set());
-      } else {
-        setSelectedRows(new Set(users.map((u) => u.id)));
-      }
-    };
+      {/* With Caption */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Caption</h3>
+          <p className="text-muted-foreground text-sm">
+            Table with a descriptive caption below.
+          </p>
+        </div>
+        <div className="border-border rounded-lg border">
+          <Table>
+            <TableCaption>A list of your recent transactions</TableCaption>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Transaction</TableHead>
+                <TableHead>Date</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-medium">Purchase</TableCell>
+                <TableCell>2025-12-29</TableCell>
+                <TableCell className="text-right">$99.00</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">Refund</TableCell>
+                <TableCell>2025-12-28</TableCell>
+                <TableCell className="text-right">-$25.00</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </section>
 
-    return (
-      <div className="space-y-4">
-        <Table>
-          <TableCaption>
-            Farcaster user directory - {users.length} users shown
-          </TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[50px]">
-                <Checkbox
-                  checked={selectedRows.size === users.length}
-                  onCheckedChange={toggleAll}
-                  aria-label="Select all users"
-                />
-              </TableHead>
-              <TableHead>User</TableHead>
-              <TableHead>FID</TableHead>
-              <TableHead>Network</TableHead>
-              <TableHead>Joined</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {users.map((user) => (
-              <TableRow
-                key={user.id}
-                data-state={selectedRows.has(user.id) ? "selected" : undefined}
-              >
+      {/* With Badges */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Status Badges</h3>
+          <p className="text-muted-foreground text-sm">
+            Tables commonly use badges for status indicators.
+          </p>
+        </div>
+        <div className="border-border rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Service</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Uptime</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-medium">API Gateway</TableCell>
                 <TableCell>
-                  <Checkbox
-                    checked={selectedRows.has(user.id)}
-                    onCheckedChange={() => toggleRow(user.id)}
-                    aria-label={`Select ${user.displayName}`}
-                  />
+                  <Badge variant="secondary">
+                    <CheckCircle2Icon
+                      data-icon="inline-start"
+                      className="size-3"
+                    />
+                    Operational
+                  </Badge>
                 </TableCell>
+                <TableCell>99.99%</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">Webhooks</TableCell>
                 <TableCell>
-                  <div className="flex items-center gap-3">
-                    <Avatar className="h-8 w-8">
-                      <AvatarFallback>{user.avatar}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <div className="font-medium">{user.displayName}</div>
-                      <div className="text-sm text-muted-foreground">
-                        @{user.username}
-                      </div>
-                    </div>
-                  </div>
+                  <Badge variant="outline">
+                    <AlertCircleIcon
+                      data-icon="inline-start"
+                      className="size-3"
+                    />
+                    Degraded
+                  </Badge>
+                </TableCell>
+                <TableCell>98.50%</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">Database</TableCell>
+                <TableCell>
+                  <Badge variant="destructive">
+                    <XCircleIcon data-icon="inline-start" className="size-3" />
+                    Offline
+                  </Badge>
+                </TableCell>
+                <TableCell>85.20%</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </section>
+
+      {/* With Actions */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Action Buttons</h3>
+          <p className="text-muted-foreground text-sm">
+            Tables can include action buttons for row-level operations.
+          </p>
+        </div>
+        <div className="border-border rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>API Key</TableHead>
+                <TableHead>Environment</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-mono text-xs">
+                  neynar_sk_***_8f3d
                 </TableCell>
-                <TableCell>{user.fid}</TableCell>
                 <TableCell>
-                  <div className="text-sm">
-                    <div>{user.followers} followers</div>
-                    <div className="text-muted-foreground">
-                      {user.following} following
-                    </div>
+                  <Badge variant="default">Production</Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  2025-12-15
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-2">
+                    <Button variant="ghost" size="icon-sm">
+                      <ExternalLinkIcon className="size-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon-sm">
+                      <MoreHorizontalIcon className="size-4" />
+                    </Button>
                   </div>
                 </TableCell>
-                <TableCell>{user.joined}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-mono text-xs">
+                  neynar_sk_***_2k9m
+                </TableCell>
                 <TableCell>
-                  <Badge
-                    variant={
-                      user.status === "active" ? "default" : "secondary"
-                    }
-                  >
-                    {user.status}
-                  </Badge>
+                  <Badge variant="secondary">Development</Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  2025-12-10
                 </TableCell>
                 <TableCell className="text-right">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <DropdownMenuItem>View profile</DropdownMenuItem>
-                      <DropdownMenuItem>Send message</DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>Block user</DropdownMenuItem>
-                      <DropdownMenuItem>Report user</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="ghost" size="icon-sm">
+                      <ExternalLinkIcon className="size-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon-sm">
+                      <MoreHorizontalIcon className="size-4" />
+                    </Button>
+                  </div>
                 </TableCell>
               </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={5}>Total Active Users</TableCell>
-              <TableCell>
-                <Badge variant="default">
-                  {users.filter((u) => u.status === "active").length}
-                </Badge>
-              </TableCell>
-              <TableCell className="text-right">
-                {selectedRows.size > 0 && (
-                  <Button variant="outline" size="sm">
-                    Bulk Actions ({selectedRows.size})
-                  </Button>
-                )}
-              </TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive table with all features including selection checkboxes, dropdown actions, various cell types, and footer totals. Test selection, hover states, and accessibility features.",
-      },
-    },
-  },
-};
-
-/**
- * Showcase of different table variants and configurations.
- * Demonstrates basic tables, tables with captions, footers, and empty states.
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="space-y-8">
-      {/* Basic Table */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Basic Table</h3>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>User</TableHead>
-              <TableHead>Channel</TableHead>
-              <TableHead className="text-right">Reactions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="font-medium">@dwr.eth</TableCell>
-              <TableCell>/farcaster</TableCell>
-              <TableCell className="text-right">1,234</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-medium">@vitalik.eth</TableCell>
-              <TableCell>/ethereum</TableCell>
-              <TableCell className="text-right">892</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Table with Caption */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Table with Caption</h3>
-        <Table>
-          <TableCaption>Recent casts from your network</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Channel</TableHead>
-              <TableHead>Members</TableHead>
-              <TableHead>Growth</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell>/farcaster</TableCell>
-              <TableCell>5,234</TableCell>
-              <TableCell>
-                <Badge variant="default">+12%</Badge>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>/dev</TableCell>
-              <TableCell>3,821</TableCell>
-              <TableCell>
-                <Badge variant="default">+8%</Badge>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
+            </TableBody>
+          </Table>
+        </div>
+      </section>
 
-      {/* Table with Footer */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Table with Footer</h3>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Channel</TableHead>
-              <TableHead>Members</TableHead>
-              <TableHead>Active</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell>/farcaster</TableCell>
-              <TableCell>5,234</TableCell>
-              <TableCell>1,892</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>/dev</TableCell>
-              <TableCell>3,821</TableCell>
-              <TableCell>1,234</TableCell>
-            </TableRow>
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell>Total</TableCell>
-              <TableCell>9,055</TableCell>
-              <TableCell>3,126</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
+      {/* Selectable Rows */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Selectable Rows</h3>
+          <p className="text-muted-foreground text-sm">
+            Rows can be highlighted using the data-state attribute.
+          </p>
+        </div>
+        <div className="border-border rounded-lg border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-medium">Alice Johnson</TableCell>
+                <TableCell>Admin</TableCell>
+                <TableCell>
+                  <Badge variant="secondary">Active</Badge>
+                </TableCell>
+              </TableRow>
+              <TableRow data-state="selected">
+                <TableCell className="font-medium">Bob Smith</TableCell>
+                <TableCell>Developer</TableCell>
+                <TableCell>
+                  <Badge variant="secondary">Active</Badge>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">Carol White</TableCell>
+                <TableCell>Designer</TableCell>
+                <TableCell>
+                  <Badge variant="outline">Inactive</Badge>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </section>
 
-      {/* Empty State */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Empty State</h3>
-        <Table>
-          <TableCaption>No data available</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Username</TableHead>
-              <TableHead>FID</TableHead>
-              <TableHead>Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell colSpan={3} className="h-24 text-center">
-                No users found.
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </div>
+      {/* Compact Table */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Compact Table</h3>
+          <p className="text-muted-foreground text-sm">
+            Condensed spacing for dense data display.
+          </p>
+        </div>
+        <div className="border-border rounded-lg border">
+          <Table className="text-xs">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="h-8 px-2">ID</TableHead>
+                <TableHead className="h-8 px-2">Event</TableHead>
+                <TableHead className="h-8 px-2">Time</TableHead>
+                <TableHead className="h-8 px-2">Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="p-1 px-2 font-mono">001</TableCell>
+                <TableCell className="p-1 px-2">cast.created</TableCell>
+                <TableCell className="p-1 px-2 text-muted-foreground">
+                  14:32:15
+                </TableCell>
+                <TableCell className="p-1 px-2">
+                  <Badge variant="secondary" className="h-5 text-xs">
+                    OK
+                  </Badge>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="p-1 px-2 font-mono">002</TableCell>
+                <TableCell className="p-1 px-2">user.updated</TableCell>
+                <TableCell className="p-1 px-2 text-muted-foreground">
+                  14:31:42
+                </TableCell>
+                <TableCell className="p-1 px-2">
+                  <Badge variant="secondary" className="h-5 text-xs">
+                    OK
+                  </Badge>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="p-1 px-2 font-mono">003</TableCell>
+                <TableCell className="p-1 px-2">reaction.added</TableCell>
+                <TableCell className="p-1 px-2 text-muted-foreground">
+                  14:30:18
+                </TableCell>
+                <TableCell className="p-1 px-2">
+                  <Badge variant="destructive" className="h-5 text-xs">
+                    Error
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </section>
     </div>
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Different table configurations showing basic tables, tables with captions for accessibility, tables with footer totals, and empty state handling.",
-      },
-    },
-  },
 };
 
 /**
- * Real-world usage example in a dashboard context.
- * Shows how tables integrate with other components in actual applications.
+ * Interactive playground for testing table props.
  */
-export const InContext: Story = {
+export const Interactive: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="space-y-6">
-      {/* Dashboard Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">
-            Channel Analytics
-          </h2>
-          <p className="text-muted-foreground">
-            Performance metrics for your Farcaster channels
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm">
-            Export Data
-          </Button>
-          <Button size="sm">Refresh</Button>
-        </div>
-      </div>
-
-      {/* Analytics Table */}
+    <div className="border-border w-full max-w-2xl rounded-lg border">
       <Table>
-        <TableCaption>
-          Channel performance over the last 30 days. Data updated hourly.
-        </TableCaption>
+        <TableCaption>A simple interactive table example</TableCaption>
         <TableHeader>
           <TableRow>
-            <TableHead>Channel</TableHead>
-            <TableHead>Members</TableHead>
-            <TableHead>Daily Active</TableHead>
-            <TableHead>Casts/Day</TableHead>
-            <TableHead>Engagement Rate</TableHead>
-            <TableHead>Growth</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="text-right">Value</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           <TableRow>
-            <TableCell className="font-medium">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-md bg-purple-500" />
-                /farcaster
-              </div>
-            </TableCell>
-            <TableCell>5,234</TableCell>
-            <TableCell>1,892</TableCell>
-            <TableCell>342</TableCell>
-            <TableCell>8.4%</TableCell>
+            <TableCell className="font-medium">Item 1</TableCell>
             <TableCell>
-              <Badge variant="default">+12%</Badge>
-            </TableCell>
-            <TableCell className="text-right">
-              <Button variant="ghost" size="sm">
-                View Details
-              </Button>
+              <Badge variant="secondary">Active</Badge>
             </TableCell>
+            <TableCell className="text-right">$250.00</TableCell>
           </TableRow>
           <TableRow>
-            <TableCell className="font-medium">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-md bg-blue-500" />
-                /dev
-              </div>
-            </TableCell>
-            <TableCell>3,821</TableCell>
-            <TableCell>1,234</TableCell>
-            <TableCell>256</TableCell>
-            <TableCell>7.2%</TableCell>
-            <TableCell>
-              <Badge variant="default">+8%</Badge>
-            </TableCell>
-            <TableCell className="text-right">
-              <Button variant="ghost" size="sm">
-                View Details
-              </Button>
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell className="font-medium">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-md bg-green-500" />
-                /founders
-              </div>
-            </TableCell>
-            <TableCell>2,145</TableCell>
-            <TableCell>892</TableCell>
-            <TableCell>178</TableCell>
-            <TableCell>9.1%</TableCell>
+            <TableCell className="font-medium">Item 2</TableCell>
             <TableCell>
-              <Badge variant="default">+15%</Badge>
-            </TableCell>
-            <TableCell className="text-right">
-              <Button variant="ghost" size="sm">
-                View Details
-              </Button>
+              <Badge variant="outline">Pending</Badge>
             </TableCell>
+            <TableCell className="text-right">$150.00</TableCell>
           </TableRow>
           <TableRow>
-            <TableCell className="font-medium">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-md bg-orange-500" />
-                /crypto
-              </div>
-            </TableCell>
-            <TableCell>4,567</TableCell>
-            <TableCell>2,103</TableCell>
-            <TableCell>412</TableCell>
-            <TableCell>6.8%</TableCell>
+            <TableCell className="font-medium">Item 3</TableCell>
             <TableCell>
-              <Badge variant="secondary">+2%</Badge>
-            </TableCell>
-            <TableCell className="text-right">
-              <Button variant="ghost" size="sm">
-                View Details
-              </Button>
+              <Badge variant="secondary">Active</Badge>
             </TableCell>
+            <TableCell className="text-right">$350.00</TableCell>
           </TableRow>
         </TableBody>
         <TableFooter>
           <TableRow>
-            <TableCell>Total</TableCell>
-            <TableCell>15,767</TableCell>
-            <TableCell>6,121</TableCell>
-            <TableCell>1,188</TableCell>
-            <TableCell>7.9%</TableCell>
-            <TableCell>
-              <Badge variant="default">+9.25%</Badge>
-            </TableCell>
-            <TableCell className="text-right">
-              <Button variant="outline" size="sm">
-                Export
-              </Button>
-            </TableCell>
+            <TableCell colSpan={2}>Total</TableCell>
+            <TableCell className="text-right">$750.00</TableCell>
           </TableRow>
         </TableFooter>
       </Table>
-
-      {/* Table Footer Actions */}
-      <div className="flex items-center justify-between text-sm text-muted-foreground">
-        <p>Showing 4 of 12 channels</p>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm">
-            Previous
-          </Button>
-          <Button variant="outline" size="sm">
-            Next
-          </Button>
-        </div>
-      </div>
     </div>
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Real-world dashboard example showing how tables work in context with headers, actions, and pagination. Demonstrates integration with other UI components for complete data management interfaces.",
-      },
-    },
-  },
-};
+};