@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,543 +1,590 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
+import {
+  ActivityIcon,
+  BellIcon,
+  KeyIcon,
+  LineChartIcon,
+  SettingsIcon,
+  WebhookIcon,
+} from "lucide-react";
+import { useState } from "react";
+
 import { Badge } from "../badge";
 import { Button } from "../button";
-import { Avatar, AvatarFallback } from "../avatar";
-import { Input } from "../input";
-import { Label } from "../label";
-import { Switch } from "../switch";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../tabs";
 
-const meta = {
-  title: "Navigation & Menus/Tabs",
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Navigation & Menus/Tabs",
   component: Tabs,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A tabbed interface component for organizing content into multiple sections. Built on Radix UI with full accessibility support and flexible styling options.",
-      },
-    },
+  },
+  args: {
+    onValueChange: fn(),
   },
   argTypes: {
-    defaultValue: {
-      control: { type: "text" },
-      description: "The default active tab (uncontrolled)",
-    },
-    value: {
-      control: { type: "text" },
-      description: "The controlled active tab value",
-    },
     orientation: {
-      control: { type: "radio" },
+      control: "select",
       options: ["horizontal", "vertical"],
-      description: "The orientation of the tabs",
+      description: "Layout orientation of tabs",
     },
-    onValueChange: {
-      action: "tab changed",
-      description: "Callback fired when the active tab changes",
+    defaultValue: {
+      control: "text",
+      description: "Default active tab value",
     },
   },
-} satisfies Meta<typeof Tabs>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Tabs>;
 
 /**
- * Interactive playground with all controls available for testing different
- * configurations and props. Use the controls panel to experiment with
- * various combinations of props and see how they affect the component.
+ * Dashboard Navigation - A realistic scenario showing tabs in the context
+ * of the Neynar Dashboard for switching between different sections.
  */
-export const Interactive: Story = {
-  args: {
-    defaultValue: "overview",
-    orientation: "horizontal",
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
   },
-  render: ({ defaultValue, orientation, ...args }) => (
-    <Tabs
-      defaultValue={defaultValue}
-      orientation={orientation}
-      className="w-[500px]"
-      {...args}
-    >
-      <TabsList className={orientation === "vertical" ? "flex-col h-auto w-[150px]" : "grid w-full grid-cols-4"}>
-        <TabsTrigger value="overview" className={orientation === "vertical" ? "w-full justify-start" : ""}>
-          Overview
-        </TabsTrigger>
-        <TabsTrigger value="analytics" className={orientation === "vertical" ? "w-full justify-start" : ""}>
-          Analytics
-        </TabsTrigger>
-        <TabsTrigger value="reports" className={orientation === "vertical" ? "w-full justify-start" : ""}>
-          Reports
-        </TabsTrigger>
-        <TabsTrigger value="settings" className={orientation === "vertical" ? "w-full justify-start" : ""}>
-          Settings
-        </TabsTrigger>
-      </TabsList>
+  render: () => {
+    function DashboardTabs() {
+      const [activeTab, setActiveTab] = useState("webhooks");
 
-      <div className={orientation === "vertical" ? "flex gap-4" : ""}>
-        <div className="flex-1">
-          <TabsContent value="overview">
-            <Card>
-              <CardHeader>
-                <CardTitle>Overview</CardTitle>
-                <CardDescription>
-                  Dashboard overview with key metrics and insights
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-3 gap-4">
-                  <div className="text-center">
-                    <div className="text-2xl font-bold">2.4k</div>
-                    <p className="text-sm text-muted-foreground">Total Users</p>
-                  </div>
-                  <div className="text-center">
-                    <div className="text-2xl font-bold">45.2%</div>
-                    <p className="text-sm text-muted-foreground">Growth Rate</p>
-                  </div>
-                  <div className="text-center">
-                    <div className="text-2xl font-bold">$12.5k</div>
-                    <p className="text-sm text-muted-foreground">Revenue</p>
+      return (
+        <div className="w-full max-w-4xl space-y-6">
+          {/* Dashboard Header */}
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-2xl font-semibold">Developer Dashboard</h2>
+              <p className="text-muted-foreground text-sm">
+                Manage your API keys, webhooks, and monitor your usage.
+              </p>
+            </div>
+            <Button variant="outline">
+              <SettingsIcon data-icon="inline-start" />
+              Settings
+            </Button>
+          </div>
+
+          {/* Main Tabs */}
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              <TabsTrigger value="webhooks">
+                <WebhookIcon />
+                Webhooks
+                <Badge variant="secondary" className="ml-1.5">
+                  3
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger value="keys">
+                <KeyIcon />
+                API Keys
+              </TabsTrigger>
+              <TabsTrigger value="logs">
+                <ActivityIcon />
+                Activity Logs
+              </TabsTrigger>
+              <TabsTrigger value="analytics" disabled>
+                <LineChartIcon />
+                Analytics
+                <Badge variant="outline" className="ml-1.5">
+                  Soon
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="webhooks" className="space-y-4">
+              <div className="border-border rounded-lg border p-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold">Webhook Endpoints</h3>
+                    <p className="text-muted-foreground text-sm">
+                      Configure webhooks to receive real-time notifications
+                    </p>
                   </div>
+                  <Button>Add Webhook</Button>
                 </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="analytics">
-            <Card>
-              <CardHeader>
-                <CardTitle>Analytics</CardTitle>
-                <CardDescription>
-                  Detailed analytics and performance metrics
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">
-                  Analytics charts and detailed metrics would be displayed here.
-                </p>
                 <div className="mt-4 space-y-2">
-                  <div className="flex justify-between">
-                    <span className="text-sm">Page Views</span>
-                    <span className="text-sm font-medium">12,345</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Unique Visitors</span>
-                    <span className="text-sm font-medium">8,901</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-sm">Bounce Rate</span>
-                    <span className="text-sm font-medium">34.2%</span>
-                  </div>
+                  {[
+                    {
+                      url: "https://api.example.com/webhooks/cast-created",
+                      events: "cast.created",
+                    },
+                    {
+                      url: "https://api.example.com/webhooks/user-followed",
+                      events: "user.followed",
+                    },
+                    {
+                      url: "https://api.example.com/webhooks/reactions",
+                      events: "reaction.created",
+                    },
+                  ].map((webhook, i) => (
+                    <div
+                      key={i}
+                      className="border-border bg-muted/50 flex items-center justify-between rounded-md border p-3"
+                    >
+                      <div>
+                        <code className="text-xs">{webhook.url}</code>
+                        <p className="text-muted-foreground mt-1 text-xs">
+                          Events: {webhook.events}
+                        </p>
+                      </div>
+                      <Button variant="ghost" size="sm">
+                        Configure
+                      </Button>
+                    </div>
+                  ))}
                 </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
+              </div>
+            </TabsContent>
 
-          <TabsContent value="reports">
-            <Card>
-              <CardHeader>
-                <CardTitle>Reports</CardTitle>
-                <CardDescription>
-                  Generate and download detailed reports
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground mb-4">
-                  Available reports and export options.
-                </p>
-                <div className="space-y-2">
-                  <Button variant="outline" className="w-full justify-start">
-                    Download Monthly Report
-                  </Button>
-                  <Button variant="outline" className="w-full justify-start">
-                    Export User Data
-                  </Button>
-                  <Button variant="outline" className="w-full justify-start">
-                    Analytics Summary
-                  </Button>
+            <TabsContent value="keys" className="space-y-4">
+              <div className="border-border rounded-lg border p-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold">API Keys</h3>
+                    <p className="text-muted-foreground text-sm">
+                      Manage authentication keys for your applications
+                    </p>
+                  </div>
+                  <Button>Create Key</Button>
                 </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="settings">
-            <Card>
-              <CardHeader>
-                <CardTitle>Settings</CardTitle>
-                <CardDescription>
-                  Manage your account and preferences
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Display Name</Label>
-                  <Input id="name" defaultValue="John Doe" />
+                <div className="mt-4 space-y-2">
+                  {[
+                    { name: "Production Key", key: "neynar_sk_prod_****_8f3d" },
+                    { name: "Development Key", key: "neynar_sk_dev_****_2a1c" },
+                  ].map((apiKey, i) => (
+                    <div
+                      key={i}
+                      className="border-border bg-muted/50 flex items-center justify-between rounded-md border p-3"
+                    >
+                      <div>
+                        <p className="text-sm font-medium">{apiKey.name}</p>
+                        <code className="text-muted-foreground mt-1 text-xs">
+                          {apiKey.key}
+                        </code>
+                      </div>
+                      <div className="flex gap-2">
+                        <Button variant="outline" size="sm">
+                          Copy
+                        </Button>
+                        <Button variant="ghost" size="sm">
+                          Revoke
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
                 </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="logs" className="space-y-4">
+              <div className="border-border rounded-lg border p-6">
                 <div className="flex items-center justify-between">
-                  <Label htmlFor="notifications">Email Notifications</Label>
-                  <Switch id="notifications" defaultChecked />
+                  <div>
+                    <h3 className="font-semibold">Activity Logs</h3>
+                    <p className="text-muted-foreground text-sm">
+                      Recent API activity and webhook deliveries
+                    </p>
+                  </div>
+                  <Button variant="outline">Export</Button>
                 </div>
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="privacy">Public Profile</Label>
-                  <Switch id="privacy" />
+                <div className="mt-4 space-y-2">
+                  {[
+                    {
+                      action: "GET /v2/farcaster/user",
+                      status: "200",
+                      time: "2 min ago",
+                    },
+                    {
+                      action: "POST /v2/farcaster/cast",
+                      status: "201",
+                      time: "5 min ago",
+                    },
+                    {
+                      action: "Webhook delivered",
+                      status: "200",
+                      time: "12 min ago",
+                    },
+                  ].map((log, i) => (
+                    <div
+                      key={i}
+                      className="border-border bg-muted/50 flex items-center justify-between rounded-md border p-3"
+                    >
+                      <div className="flex items-center gap-3">
+                        <Badge
+                          variant={
+                            log.status === "200" || log.status === "201"
+                              ? "default"
+                              : "destructive"
+                          }
+                        >
+                          {log.status}
+                        </Badge>
+                        <code className="text-xs">{log.action}</code>
+                      </div>
+                      <span className="text-muted-foreground text-xs">
+                        {log.time}
+                      </span>
+                    </div>
+                  ))}
                 </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="analytics" className="space-y-4">
+              <div className="border-border rounded-lg border p-6">
+                <p className="text-muted-foreground text-sm">
+                  Analytics dashboard coming soon...
+                </p>
+              </div>
+            </TabsContent>
+          </Tabs>
         </div>
-      </div>
-    </Tabs>
-  ),
+      );
+    }
+
+    return <DashboardTabs />;
+  },
 };
 
 /**
- * Showcase of all available variants and styling combinations.
- * Demonstrates horizontal vs vertical orientations, different tab layouts,
- * and various visual configurations to help understand what's possible.
+ * Complete design system reference showing all tab variants, orientations, and states.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="space-y-8 w-full max-w-4xl">
-      {/* Standard Horizontal Tabs */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Standard Horizontal Tabs</h3>
-        <Tabs defaultValue="tab1" className="w-[400px]">
-          <TabsList>
-            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Default Variant */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Default Variant</h3>
+          <p className="text-muted-foreground text-sm">
+            Tabs with background highlighting for clear active states.
+          </p>
+        </div>
+        <Tabs defaultValue="overview">
+          <TabsList variant="default">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="reports">Reports</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
           </TabsList>
-          <TabsContent value="tab1">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Content for Tab 1</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="overview" className="py-4">
+            <p className="text-sm">Overview content</p>
           </TabsContent>
-          <TabsContent value="tab2">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Content for Tab 2</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="analytics" className="py-4">
+            <p className="text-sm">Analytics content</p>
           </TabsContent>
-          <TabsContent value="tab3">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Content for Tab 3</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="reports" className="py-4">
+            <p className="text-sm">Reports content</p>
+          </TabsContent>
+          <TabsContent value="settings" className="py-4">
+            <p className="text-sm">Settings content</p>
           </TabsContent>
         </Tabs>
-      </div>
+      </section>
 
-      {/* Grid Layout Tabs */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Grid Layout (Equal Width)</h3>
-        <Tabs defaultValue="home" className="w-[500px]">
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="home">Home</TabsTrigger>
-            <TabsTrigger value="explore">Explore</TabsTrigger>
-            <TabsTrigger value="notifications">Alerts</TabsTrigger>
-            <TabsTrigger value="profile">Profile</TabsTrigger>
+      {/* Line Variant */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Line Variant</h3>
+          <p className="text-muted-foreground text-sm">
+            Underlined tabs for a minimal, clean appearance.
+          </p>
+        </div>
+        <Tabs defaultValue="all">
+          <TabsList variant="line">
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="active">Active</TabsTrigger>
+            <TabsTrigger value="completed">Completed</TabsTrigger>
+            <TabsTrigger value="archived">Archived</TabsTrigger>
           </TabsList>
-          <TabsContent value="home">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Home feed content</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="all" className="py-4">
+            <p className="text-sm">All items</p>
           </TabsContent>
-          <TabsContent value="explore">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Explore new content</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="active" className="py-4">
+            <p className="text-sm">Active items</p>
           </TabsContent>
-          <TabsContent value="notifications">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Notification alerts</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="completed" className="py-4">
+            <p className="text-sm">Completed items</p>
           </TabsContent>
-          <TabsContent value="profile">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Profile settings</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="archived" className="py-4">
+            <p className="text-sm">Archived items</p>
           </TabsContent>
         </Tabs>
-      </div>
+      </section>
 
-      {/* Vertical Orientation */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Vertical Orientation</h3>
-        <div className="flex gap-4 w-[600px]">
-          <Tabs defaultValue="general" orientation="vertical">
-            <TabsList className="flex-col h-auto w-[200px]">
-              <TabsTrigger value="general" className="w-full justify-start">
-                General
-              </TabsTrigger>
-              <TabsTrigger value="security" className="w-full justify-start">
-                Security
-              </TabsTrigger>
-              <TabsTrigger value="notifications" className="w-full justify-start">
-                Notifications
-              </TabsTrigger>
-              <TabsTrigger value="billing" className="w-full justify-start">
-                Billing
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
-          <div className="flex-1">
-            <Card>
-              <CardHeader>
-                <CardTitle>Settings Panel</CardTitle>
-                <CardDescription>
-                  Configure your preferences
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">
-                  Settings content would appear here based on the selected tab.
-                </p>
-              </CardContent>
-            </Card>
-          </div>
+      {/* With Icons */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Icons</h3>
+          <p className="text-muted-foreground text-sm">
+            Tabs with icons for better visual communication.
+          </p>
         </div>
-      </div>
-
-      {/* Tabs with Icons */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Tabs with Icons</h3>
-        <Tabs defaultValue="dashboard" className="w-[400px]">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="dashboard">
-              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-              </svg>
-              Dashboard
+        <Tabs defaultValue="activity">
+          <TabsList>
+            <TabsTrigger value="activity">
+              <ActivityIcon />
+              Activity
             </TabsTrigger>
-            <TabsTrigger value="users">
-              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
-              </svg>
-              Users
+            <TabsTrigger value="notifications">
+              <BellIcon />
+              Notifications
             </TabsTrigger>
             <TabsTrigger value="settings">
-              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
+              <SettingsIcon />
               Settings
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="dashboard">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Dashboard overview with metrics</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="activity" className="py-4">
+            <p className="text-sm">Recent activity and updates</p>
           </TabsContent>
-          <TabsContent value="users">
-            <Card>
-              <CardContent className="pt-6">
-                <p>User management interface</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="notifications" className="py-4">
+            <p className="text-sm">Notification preferences</p>
           </TabsContent>
-          <TabsContent value="settings">
-            <Card>
-              <CardContent className="pt-6">
-                <p>Application settings</p>
-              </CardContent>
-            </Card>
+          <TabsContent value="settings" className="py-4">
+            <p className="text-sm">Account settings</p>
           </TabsContent>
         </Tabs>
-      </div>
-    </div>
-  ),
-};
+      </section>
 
-/**
- * Real-world usage example showing tabs in a typical application context.
- * This example demonstrates how tabs would be used in a user profile interface
- * with multiple sections of content, helping designers and business teams
- * understand practical applications.
- */
-export const InContext: Story = {
-  render: () => (
-    <div className="w-full max-w-4xl mx-auto p-6">
-      <div className="mb-6">
-        <h2 className="text-2xl font-bold mb-2">User Profile</h2>
-        <p className="text-muted-foreground">
-          Manage your profile information, view activity, and configure settings
-        </p>
-      </div>
+      {/* With Badges */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Badges</h3>
+          <p className="text-muted-foreground text-sm">
+            Tabs with count badges and status indicators.
+          </p>
+        </div>
+        <Tabs defaultValue="inbox">
+          <TabsList variant="line">
+            <TabsTrigger value="inbox">
+              Inbox
+              <Badge variant="default" className="ml-1.5">
+                12
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger value="drafts">
+              Drafts
+              <Badge variant="secondary" className="ml-1.5">
+                3
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger value="sent">Sent</TabsTrigger>
+            <TabsTrigger value="trash">
+              Trash
+              <Badge variant="outline" className="ml-1.5">
+                5
+              </Badge>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="inbox" className="py-4">
+            <p className="text-sm">12 unread messages</p>
+          </TabsContent>
+          <TabsContent value="drafts" className="py-4">
+            <p className="text-sm">3 draft messages</p>
+          </TabsContent>
+          <TabsContent value="sent" className="py-4">
+            <p className="text-sm">Sent messages</p>
+          </TabsContent>
+          <TabsContent value="trash" className="py-4">
+            <p className="text-sm">5 items in trash</p>
+          </TabsContent>
+        </Tabs>
+      </section>
 
-      <Tabs defaultValue="profile" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="profile">Profile</TabsTrigger>
-          <TabsTrigger value="activity">Activity</TabsTrigger>
-          <TabsTrigger value="preferences">Preferences</TabsTrigger>
-          <TabsTrigger value="security">Security</TabsTrigger>
-        </TabsList>
+      {/* Disabled State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Disabled State</h3>
+          <p className="text-muted-foreground text-sm">
+            Some tabs can be disabled to prevent interaction.
+          </p>
+        </div>
+        <Tabs defaultValue="general">
+          <TabsList>
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="privacy">Privacy</TabsTrigger>
+            <TabsTrigger value="billing" disabled>
+              Billing
+            </TabsTrigger>
+            <TabsTrigger value="team" disabled>
+              Team
+              <Badge variant="outline" className="ml-1.5">
+                Pro
+              </Badge>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="general" className="py-4">
+            <p className="text-sm">General settings</p>
+          </TabsContent>
+          <TabsContent value="privacy" className="py-4">
+            <p className="text-sm">Privacy settings</p>
+          </TabsContent>
+        </Tabs>
+      </section>
 
-        <TabsContent value="profile" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Profile Information</CardTitle>
-              <CardDescription>
-                Update your profile details and public information
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex items-center gap-4">
-                <Avatar className="h-20 w-20">
-                  <AvatarFallback>JD</AvatarFallback>
-                </Avatar>
-                <div className="space-y-1">
-                  <h3 className="text-lg font-semibold">John Doe</h3>
-                  <p className="text-sm text-muted-foreground">john.doe@example.com</p>
-                  <Badge variant="secondary">Pro User</Badge>
-                </div>
+      {/* Vertical Orientation */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Vertical Orientation</h3>
+          <p className="text-muted-foreground text-sm">
+            Tabs stacked vertically for sidebar-style navigation.
+          </p>
+        </div>
+        <div className="flex gap-6">
+          <Tabs
+            defaultValue="profile"
+            orientation="vertical"
+            className="w-[600px]"
+          >
+            <TabsList variant="default">
+              <TabsTrigger value="profile">
+                <SettingsIcon />
+                Profile
+              </TabsTrigger>
+              <TabsTrigger value="account">
+                <KeyIcon />
+                Account
+              </TabsTrigger>
+              <TabsTrigger value="notifications">
+                <BellIcon />
+                Notifications
+              </TabsTrigger>
+              <TabsTrigger value="display">Display</TabsTrigger>
+            </TabsList>
+            <TabsContent value="profile" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">Profile Settings</h4>
+                <p className="text-muted-foreground text-sm">
+                  Update your profile information and public visibility.
+                </p>
               </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="firstName">First Name</Label>
-                  <Input id="firstName" defaultValue="John" />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="lastName">Last Name</Label>
-                  <Input id="lastName" defaultValue="Doe" />
-                </div>
+            </TabsContent>
+            <TabsContent value="account" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">Account Settings</h4>
+                <p className="text-muted-foreground text-sm">
+                  Manage your account security and authentication.
+                </p>
               </div>
+            </TabsContent>
+            <TabsContent value="notifications" className="py-4">
               <div className="space-y-2">
-                <Label htmlFor="bio">Bio</Label>
-                <textarea
-                  id="bio"
-                  className="w-full min-h-[80px] rounded-md border p-3 text-sm"
-                  defaultValue="Product designer and developer passionate about creating intuitive user experiences."
-                />
+                <h4 className="font-medium">Notification Preferences</h4>
+                <p className="text-muted-foreground text-sm">
+                  Control how and when you receive notifications.
+                </p>
               </div>
-              <Button>Save Changes</Button>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="activity" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Activity</CardTitle>
-              <CardDescription>
-                Your recent actions and engagement
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {[
-                  { action: "Updated profile picture", time: "2 hours ago" },
-                  { action: "Completed onboarding", time: "1 day ago" },
-                  { action: "Joined the platform", time: "3 days ago" },
-                ].map((item, index) => (
-                  <div key={index} className="flex justify-between items-center pb-4 border-b last:border-b-0">
-                    <span className="text-sm">{item.action}</span>
-                    <span className="text-xs text-muted-foreground">{item.time}</span>
-                  </div>
-                ))}
+            </TabsContent>
+            <TabsContent value="display" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">Display Settings</h4>
+                <p className="text-muted-foreground text-sm">
+                  Customize the appearance and theme.
+                </p>
               </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </section>
 
-        <TabsContent value="preferences" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Preferences</CardTitle>
-              <CardDescription>
-                Customize your experience and notification settings
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div>
-                <h4 className="text-sm font-medium mb-4">Notifications</h4>
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="email-notif">Email notifications</Label>
-                    <Switch id="email-notif" defaultChecked />
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="push-notif">Push notifications</Label>
-                    <Switch id="push-notif" />
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="marketing">Marketing emails</Label>
-                    <Switch id="marketing" />
-                  </div>
-                </div>
+      {/* Vertical with Line Variant */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Vertical with Line Variant</h3>
+          <p className="text-muted-foreground text-sm">
+            Vertical tabs with line indicator on the right edge.
+          </p>
+        </div>
+        <div className="flex gap-6">
+          <Tabs
+            defaultValue="docs"
+            orientation="vertical"
+            className="w-[600px]"
+          >
+            <TabsList variant="line">
+              <TabsTrigger value="docs">Documentation</TabsTrigger>
+              <TabsTrigger value="guides">Guides</TabsTrigger>
+              <TabsTrigger value="api">API Reference</TabsTrigger>
+              <TabsTrigger value="examples">Examples</TabsTrigger>
+            </TabsList>
+            <TabsContent value="docs" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">Documentation</h4>
+                <p className="text-muted-foreground text-sm">
+                  Browse comprehensive documentation for all features.
+                </p>
               </div>
-              <div>
-                <h4 className="text-sm font-medium mb-4">Privacy</h4>
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="public-profile">Public profile</Label>
-                    <Switch id="public-profile" defaultChecked />
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="analytics">Analytics tracking</Label>
-                    <Switch id="analytics" defaultChecked />
-                  </div>
-                </div>
+            </TabsContent>
+            <TabsContent value="guides" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">Guides</h4>
+                <p className="text-muted-foreground text-sm">
+                  Step-by-step tutorials and how-to guides.
+                </p>
               </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="security" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Security Settings</CardTitle>
-              <CardDescription>
-                Manage your account security and access
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div>
-                <h4 className="text-sm font-medium mb-4">Password</h4>
-                <div className="space-y-3">
-                  <div className="space-y-2">
-                    <Label htmlFor="current-password">Current Password</Label>
-                    <Input id="current-password" type="password" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="new-password">New Password</Label>
-                    <Input id="new-password" type="password" />
-                  </div>
-                  <Button variant="outline">Change Password</Button>
-                </div>
+            </TabsContent>
+            <TabsContent value="api" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">API Reference</h4>
+                <p className="text-muted-foreground text-sm">
+                  Complete API documentation and endpoint references.
+                </p>
               </div>
-              <div>
-                <h4 className="text-sm font-medium mb-4">Two-Factor Authentication</h4>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm">Add an extra layer of security</p>
-                    <p className="text-xs text-muted-foreground">
-                      Protect your account with 2FA
-                    </p>
-                  </div>
-                  <Button variant="outline">Enable 2FA</Button>
-                </div>
+            </TabsContent>
+            <TabsContent value="examples" className="py-4">
+              <div className="space-y-2">
+                <h4 className="font-medium">Examples</h4>
+                <p className="text-muted-foreground text-sm">
+                  Code examples and implementation patterns.
+                </p>
               </div>
-            </CardContent>
-          </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </section>
+    </div>
+  ),
+};
+
+/**
+ * Interactive playground for testing tabs props.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultValue: "account",
+    orientation: "horizontal",
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <Tabs {...args}>
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+          <TabsTrigger value="notifications">Notifications</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account" className="py-4">
+          <p className="text-sm">
+            Manage your account settings and preferences here.
+          </p>
+        </TabsContent>
+        <TabsContent value="password" className="py-4">
+          <p className="text-sm">
+            Change your password and update security settings.
+          </p>
+        </TabsContent>
+        <TabsContent value="notifications" className="py-4">
+          <p className="text-sm">
+            Configure how you receive notifications and alerts.
+          </p>
         </TabsContent>
       </Tabs>
     </div>
   ),
-};
+};