aural-ui 4.0.1 → 4.2.0

package/dist/components/tabs/Tabs.stories.tsx

@@ -1,16 +1,17 @@
 import React from "react"
 import {
   AlertIcon,
-  CrossIcon,
-  EditBigIcon,
-  EyeOpenIcon,
   FileChartIcon,
-  PlusIcon,
+  HeartIcon,
+  MusicalNoteIcon,
   SearchIcon,
-  TickCircleIcon,
+  SettingIcon,
+  StarIcon,
 } from "@icons/index"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "."
 
 const meta: Meta<typeof Tabs> = {
@@ -27,168 +28,27 @@ const meta: Meta<typeof Tabs> = {
     },
     docs: {
       description: {
-        component: `
-# Tabs Component
-
-A beautiful and accessible tabs component built on top of Radix UI's Tabs primitive with custom styling and animations. Features smooth tab transitions, hover effects, and a stunning gradient glow for active tabs.
-
-## Components
-
-### Core Components
-- **Tabs**: Root container for the entire tabs system with size context
-- **TabsList**: Container for all tab triggers
-- **TabsTrigger**: Individual tab buttons with custom glow effects
-- **TabsContent**: Content panels that display when tabs are active
-
-## Features
-
-- **Gradient Glow Effects**: Beautiful radial gradient with blur effects on active tabs
-- **Smooth Animations**: Fade in/out transitions between active and inactive states
-- **Size Variants**: Small, medium, and large tab sizes via context
-- **Keyboard Accessible**: Full keyboard navigation support
-- **Screen Reader Support**: Proper ARIA attributes and announcements
-- **Custom Styling**: Tailored design system integration
-- **Responsive Design**: Adapts to different screen sizes
-- **Icon Support**: Built-in support for icons in tab labels
-
-## Size Variants
-
-### Small (sm)
-- Font size: var(--text-fm-md)
-- Padding: 8px (p-2)
-- Ideal for: Compact interfaces, sidebars
-
-### Medium (md) - Default
-- Font size: var(--text-fm-xl)
-- Padding: 12px horizontal, 16px top, 12px bottom
-- Ideal for: Main navigation, content sections
-
-### Large (lg)
-- Font size: var(--text-fm-2xl)
-- Padding: 12px horizontal, 16px top, 12px bottom
-- Ideal for: Primary navigation, hero sections
-
-## Visual Effects
-
-### Active Tab Glow
-The active tab features a stunning dual-layer gradient effect with configurable direction:
-- **Glow Direction**: Choose between "bottom" (default) or "top" glow positioning
-- **Bottom Layer**: Curved gradient line at the tab base
-- **Top Layer**: Blurred elliptical glow with screen blend mode
-- **Colors**: Red to purple to black gradient (#FF3E4C → #5200A3 → #0A0A0A)
-
-### Animations
-- **Fade In**: Active tabs fade in with animate-fm-fadeIn
-- **Fade Out**: Inactive tabs fade out with animate-fm-fadeOut
-- **Smooth Transitions**: Color and glow transitions
-
-## Usage Examples
-
-### Basic Tabs with Size
-\`\`\`tsx
-<Tabs defaultValue="tab1" size="lg">
-  <TabsList>
-    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">Content 1</TabsContent>
-  <TabsContent value="tab2">Content 2</TabsContent>
-</Tabs>
-\`\`\`
-
-### With Icons
-\`\`\`tsx
-<Tabs defaultValue="dashboard" size="md">
-  <TabsList>
-    <TabsTrigger value="dashboard">
-      <BarChart className="w-4 h-4" />
-      Dashboard
-    </TabsTrigger>
-    <TabsTrigger value="settings">
-      <Settings className="w-4 h-4" />
-      Settings
-    </TabsTrigger>
-  </TabsList>
-  <TabsContent value="dashboard">Dashboard content</TabsContent>
-  <TabsContent value="settings">Settings content</TabsContent>
-</Tabs>
-\`\`\`
-
-### With Glow Direction
-\`\`\`tsx
-<Tabs defaultValue="overview" size="md">
-  <TabsList>
-    <TabsTrigger value="overview" glowDirection="bottom">Overview</TabsTrigger>
-    <TabsTrigger value="analytics" glowDirection="top">Analytics</TabsTrigger>
-    <TabsTrigger value="settings" glowDirection="bottom">Settings</TabsTrigger>
-  </TabsList>
-  <TabsContent value="overview">Overview content</TabsContent>
-  <TabsContent value="analytics">Analytics content</TabsContent>
-  <TabsContent value="settings">Settings content</TabsContent>
-</Tabs>
-\`\`\`
-
-### Individual Size Override
-\`\`\`tsx
-<Tabs defaultValue="home" size="md">
-  <TabsList>
-    <TabsTrigger value="home">Home</TabsTrigger>
-    <TabsTrigger value="about" size="lg">About (Large)</TabsTrigger>
-  </TabsList>
-  <TabsContent value="home">Home content</TabsContent>
-  <TabsContent value="about">About content</TabsContent>
-</Tabs>
-\`\`\`
-
-## Props
-
-### Tabs Props
-- **size**: "sm" | "md" | "lg" - Sets the size for all child TabsTrigger components
-- **defaultValue**: string - The default active tab
-- **value**: string - Controlled active tab value
-- **onValueChange**: (value: string) => void - Callback when tab changes
-
-### TabsTrigger Props
-- **size**: "sm" | "md" | "lg" - Optional override for individual triggers
-- **glowDirection**: "bottom" | "top" - Direction of the glow effect (default: "bottom")
-- **value**: string - Unique identifier for the tab
-- **disabled**: boolean - Disable the tab trigger
-
-## Accessibility
-
-- **Keyboard Navigation**: Arrow keys to move between tabs, Space/Enter to activate
-- **Screen Reader Support**: Proper ARIA labels and announcements
-- **Focus Management**: Clear focus indicators and logical tab order
-- **Role Attributes**: Correct tab, tablist, and tabpanel roles
-- **State Announcements**: Active/inactive states announced to screen readers
-
-## Design System Integration
-
-- **Color Tokens**: Uses design system color tokens (fm-primary, fm-tertiary, etc.)
-- **Typography**: Integrated with font size and leading variables
-- **Focus States**: Consistent focus ring styling
-- **Transitions**: Smooth color and effect transitions
-- **Border Styles**: Consistent with design system borders
-
-## Best Practices
-
-- Keep tab labels concise and descriptive
-- Use icons to improve visual hierarchy
-- Don't use more than 7-8 tabs in a single group
-- Ensure tab content is substantial enough to warrant separation
-- Test keyboard navigation thoroughly
-- Consider mobile responsive behavior
-- Use consistent sizing throughout your application
-- Set size on Tabs component instead of individual triggers
-
-## Performance
-
-- **Lazy Loading**: Content panels only render when active
-- **Efficient Re-renders**: Optimized state management with context
-- **CSS Animations**: Hardware-accelerated animations
-- **Minimal DOM**: Clean, semantic HTML structure
-        `,
+        component:
+          "A compound tabs component built on Radix UI Tabs with gradient glow effects on active triggers, smooth fade animations, and three size variants. Supports bottom and top glow directions and per-trigger size overrides via a shared size context.",
       },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Gradient Glow",
+              description: "Active trigger effect",
+            },
+            {
+              title: "3 Sizes",
+              description: "sm, md, lg via context",
+            },
+            {
+              title: "Fade Animation",
+              description: "Smooth content switch",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -196,658 +56,123 @@ The active tab features a stunning dual-layer gradient effect with configurable
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
-      description: "Size variant applied to all tab triggers",
+      description: "Size variant applied to all tab triggers via context",
     },
     defaultValue: {
       control: "text",
       description: "The default active tab value",
     },
-    value: {
-      control: "text",
-      description: "The controlled active tab value",
-    },
-    onValueChange: {
-      action: "valueChanged",
-      description: "Callback when tab changes",
-    },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof Tabs>
 
-// 1. Basic Tabs
-export const Basic: Story = {
-  render: () => (
-    <div className="w-full max-w-2xl">
-      <Tabs defaultValue="overview" className="w-full">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="analytics">Analytics</TabsTrigger>
-          <TabsTrigger value="reports">Reports</TabsTrigger>
-        </TabsList>
-        <TabsContent value="overview" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Overview
-            </h3>
-            <p className="text-fm-secondary mb-4">
-              Get a comprehensive view of your project's key metrics and
-              performance indicators.
-            </p>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
-                <div className="text-fm-info text-2xl font-bold">1,234</div>
-                <div className="text-fm-secondary text-sm">Total Users</div>
-              </div>
-              <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-4">
-                <div className="text-fm-positive text-2xl font-bold">98.5%</div>
-                <div className="text-fm-secondary text-sm">Uptime</div>
-              </div>
-            </div>
-          </div>
-        </TabsContent>
-        <TabsContent value="analytics" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Analytics
-            </h3>
-            <p className="text-fm-secondary mb-4">
-              Deep dive into user behavior and engagement patterns across your
-              platform.
-            </p>
-            <div className="space-y-4">
-              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
-                <span className="text-fm-primary">Page Views</span>
-                <span className="text-fm-positive font-semibold">+12.5%</span>
-              </div>
-              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
-                <span className="text-fm-primary">Session Duration</span>
-                <span className="text-fm-info font-semibold">4:32 avg</span>
-              </div>
-              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
-                <span className="text-fm-primary">Bounce Rate</span>
-                <span className="font-semibold text-orange-400">32.1%</span>
-              </div>
-            </div>
-          </div>
-        </TabsContent>
-        <TabsContent value="reports" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Reports
-            </h3>
-            <p className="text-fm-secondary mb-4">
-              Generate and download detailed reports for stakeholders and
-              analysis.
-            </p>
-            <div className="space-y-3">
-              <button className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary w-full rounded-lg p-3 text-left transition-colors">
-                <div className="text-fm-primary font-medium">
-                  Monthly Performance Report
-                </div>
-                <div className="text-fm-secondary text-sm">
-                  Last generated: 2 days ago
-                </div>
-              </button>
-              <button className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary w-full rounded-lg p-3 text-left transition-colors">
-                <div className="text-fm-primary font-medium">
-                  User Engagement Analysis
-                </div>
-                <div className="text-fm-secondary text-sm">
-                  Last generated: 1 week ago
-                </div>
-              </button>
-              <button className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary w-full rounded-lg p-3 text-left transition-colors">
-                <div className="text-fm-primary font-medium">
-                  Revenue Breakdown
-                </div>
-                <div className="text-fm-secondary text-sm">
-                  Last generated: 3 days ago
-                </div>
-              </button>
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Basic tabs implementation with three panels showing different types of content using default medium size.",
-      },
-    },
-  },
-}
+// ─── AllVariants ──────────────────────────────────────────────────────────────
 
-// 2. With Icons
-export const WithIcons: Story = {
+export const AllVariants: Story = {
   render: () => (
-    <div className="w-full max-w-3xl">
-      <Tabs defaultValue="dashboard" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="dashboard" className="gap-2">
-            <FileChartIcon className="h-4 w-4" />
-            Dashboard
-          </TabsTrigger>
-          <TabsTrigger value="users" className="gap-2">
-            <EyeOpenIcon className="h-4 w-4" />
-            Users
-          </TabsTrigger>
-          <TabsTrigger value="settings" className="gap-2">
-            <EditBigIcon className="h-4 w-4" />
-            Settings
-          </TabsTrigger>
-          <TabsTrigger value="alerts" className="gap-2">
-            <AlertIcon className="h-4 w-4" />
-            Alerts
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="dashboard" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <div className="mb-4 flex items-center gap-3">
-              <FileChartIcon className="text-fm-info h-6 w-6" />
-              <h3 className="text-fm-primary text-lg font-semibold">
-                Dashboard
-              </h3>
-            </div>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-              <div className="rounded-lg border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">847</div>
-                <div className="text-fm-secondary text-sm">Active Sessions</div>
-                <div className="text-fm-positive mt-1 text-xs">
-                  ↗ +15% from yesterday
-                </div>
-              </div>
-              <div className="rounded-lg border border-green-500/30 bg-gradient-to-br from-green-500/20 to-teal-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">
-                  $12,847
-                </div>
-                <div className="text-fm-secondary text-sm">Revenue Today</div>
-                <div className="text-fm-positive mt-1 text-xs">
-                  ↗ +8% from yesterday
-                </div>
-              </div>
-              <div className="rounded-lg border border-orange-500/30 bg-gradient-to-br from-orange-500/20 to-red-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">23</div>
-                <div className="text-fm-secondary text-sm">Critical Issues</div>
-                <div className="text-fm-icon-negative mt-1 text-xs">
-                  ↗ +3 new issues
-                </div>
-              </div>
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="users" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <div className="mb-4 flex items-center gap-3">
-              <EyeOpenIcon className="text-fm-positive h-6 w-6" />
-              <h3 className="text-fm-primary text-lg font-semibold">
-                User Management
-              </h3>
-            </div>
-            <div className="space-y-3">
-              {[
-                {
-                  name: "Alice Johnson",
-                  role: "Admin",
-                  status: "online",
-                  avatar: "AJ",
-                },
-                {
-                  name: "Bob Smith",
-                  role: "Editor",
-                  status: "away",
-                  avatar: "BS",
-                },
-                {
-                  name: "Carol Davis",
-                  role: "Viewer",
-                  status: "offline",
-                  avatar: "CD",
-                },
-                {
-                  name: "David Wilson",
-                  role: "Admin",
-                  status: "online",
-                  avatar: "DW",
-                },
-              ].map((user, index) => (
-                <div
-                  key={index}
-                  className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary flex items-center justify-between rounded-lg p-3 transition-colors"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500">
-                      <span className="text-fm-primary text-sm font-semibold">
-                        {user.avatar}
-                      </span>
-                    </div>
-                    <div>
-                      <div className="text-fm-primary font-medium">
-                        {user.name}
-                      </div>
-                      <div className="text-fm-secondary text-sm">
-                        {user.role}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={`h-2 w-2 rounded-full ${
-                        user.status === "online"
-                          ? "bg-fm-surface-positive"
-                          : user.status === "away"
-                            ? "bg-yellow-500"
-                            : "bg-fm-surface-tertiary"
-                      }`}
-                    />
-                    <span className="text-fm-secondary text-xs capitalize">
-                      {user.status}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="settings" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <div className="mb-4 flex items-center gap-3">
-              <EditBigIcon className="h-6 w-6 text-purple-400" />
-              <h3 className="text-fm-primary text-lg font-semibold">
-                Settings
-              </h3>
-            </div>
-            <div className="space-y-4">
-              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
-                <div>
-                  <div className="text-fm-primary font-medium">
-                    Email Notifications
-                  </div>
-                  <div className="text-fm-secondary text-sm">
-                    Receive updates via email
-                  </div>
-                </div>
-                <button className="bg-fm-surface-info relative h-6 w-12 rounded-full">
-                  <div className="bg-fm-surface-primary absolute top-0.5 right-0.5 h-5 w-5 rounded-full transition-transform"></div>
-                </button>
-              </div>
-              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
-                <div>
-                  <div className="text-fm-primary font-medium">Dark Mode</div>
-                  <div className="text-fm-secondary text-sm">
-                    Use dark theme
-                  </div>
-                </div>
-                <button className="bg-fm-surface-info relative h-6 w-12 rounded-full">
-                  <div className="bg-fm-surface-primary absolute top-0.5 right-0.5 h-5 w-5 rounded-full transition-transform"></div>
-                </button>
-              </div>
-              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
-                <div>
-                  <div className="text-fm-primary font-medium">Auto-save</div>
-                  <div className="text-fm-secondary text-sm">
-                    Automatically save changes
-                  </div>
-                </div>
-                <button className="bg-fm-surface-tertiary relative h-6 w-12 rounded-full">
-                  <div className="bg-fm-surface-primary absolute top-0.5 left-0.5 h-5 w-5 rounded-full transition-transform"></div>
-                </button>
-              </div>
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="alerts" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <div className="mb-4 flex items-center gap-3">
-              <AlertIcon className="text-fm-icon-negative h-6 w-6" />
-              <h3 className="text-fm-primary text-lg font-semibold">
-                System Alerts
-              </h3>
-            </div>
-            <div className="space-y-3">
-              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-start gap-3 rounded-lg border p-3">
-                <AlertIcon className="text-fm-icon-negative mt-0.5 h-5 w-5 flex-shrink-0" />
-                <div>
-                  <div className="text-fm-primary font-medium">
-                    High CPU Usage
-                  </div>
-                  <div className="text-fm-secondary text-sm">
-                    Server load is above 90% threshold
-                  </div>
-                  <div className="text-fm-tertiary mt-1 text-xs">
-                    2 minutes ago
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-start gap-3 rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-3">
-                <AlertIcon className="mt-0.5 h-5 w-5 flex-shrink-0 text-yellow-400" />
-                <div>
-                  <div className="text-fm-primary font-medium">
-                    Database Connection
-                  </div>
-                  <div className="text-fm-secondary text-sm">
-                    Intermittent connectivity issues detected
-                  </div>
-                  <div className="text-fm-tertiary mt-1 text-xs">
-                    15 minutes ago
-                  </div>
-                </div>
-              </div>
-              <div className="border-fm-divider-positive bg-fm-surface-positive-sec flex items-start gap-3 rounded-lg border p-3">
-                <TickCircleIcon className="text-fm-positive mt-0.5 h-5 w-5 flex-shrink-0" />
-                <div>
-                  <div className="text-fm-primary font-medium">
-                    Backup Completed
-                  </div>
-                  <div className="text-fm-secondary text-sm">
-                    Daily backup finished successfully
-                  </div>
-                  <div className="text-fm-tertiary mt-1 text-xs">
-                    1 hour ago
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Tabs with icons showing a complete admin dashboard interface with different functional areas using default medium size.",
-      },
-    },
-  },
-}
-
-// 3. Size Variations
-export const SizeVariations: Story = {
-  render: () => (
-    <div className="w-full max-w-4xl space-y-8">
-      <div className="space-y-4">
-        <h3 className="text-fm-primary text-lg font-medium">Small Size</h3>
-        <Tabs defaultValue="tab1" size="sm" className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="tab1">Compact</TabsTrigger>
-            <TabsTrigger value="tab2">Small</TabsTrigger>
-            <TabsTrigger value="tab3">Minimal</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-              <p className="text-fm-secondary">
-                Small tabs are perfect for compact interfaces and secondary
-                navigation.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab2" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-              <p className="text-fm-secondary">
-                Ideal for sidebars, modal dialogs, and tight spaces.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab3" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-              <p className="text-fm-secondary">
-                Minimal design with efficient use of space.
-              </p>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </div>
-
+    <div className="space-y-8">
+      {/* Size variants */}
       <div className="space-y-4">
-        <h3 className="text-fm-primary text-lg font-medium">
-          Medium Size (Default)
-        </h3>
-        <Tabs defaultValue="tab1" size="md" className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="tab1">Standard</TabsTrigger>
-            <TabsTrigger value="tab2">Medium</TabsTrigger>
-            <TabsTrigger value="tab3">Default</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Medium tabs provide the perfect balance between visibility and
-                space efficiency.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab2" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Great for main content areas and primary navigation.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab3" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                The default choice for most tab implementations.
-              </p>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-fm-primary text-lg font-medium">Large Size</h3>
-        <Tabs defaultValue="tab1" size="lg" className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="tab1">Prominent</TabsTrigger>
-            <TabsTrigger value="tab2">Large</TabsTrigger>
-            <TabsTrigger value="tab3">Bold</TabsTrigger>
-          </TabsList>
-          <TabsContent value="tab1" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-              <p className="text-fm-secondary">
-                Large tabs make a statement and are perfect for hero sections
-                and primary interfaces.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab2" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-              <p className="text-fm-secondary">
-                Enhanced visibility and improved touch targets for mobile
-                interfaces.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab3" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-              <p className="text-fm-secondary">
-                Bold design that commands attention and improves user
-                experience.
-              </p>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "All three size variants (small, medium, large) showing different use cases and visual hierarchy. Notice how the size is set once on the Tabs component instead of each individual trigger.",
-      },
-    },
-  },
-}
-
-// 4. Individual Size Override
-export const IndividualSizeOverride: Story = {
-  render: () => (
-    <div className="w-full max-w-3xl space-y-6">
-      <div className="text-center">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Individual Size Override
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Tabs component has size="md" set, but individual triggers can override
-          with their own size prop
-        </p>
-      </div>
-
-      <Tabs defaultValue="normal" size="md" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="small" size="sm">
-            Small Override
-          </TabsTrigger>
-          <TabsTrigger value="normal">Normal (md)</TabsTrigger>
-          <TabsTrigger value="normal2">Normal (md)</TabsTrigger>
-          <TabsTrigger value="large" size="lg">
-            Large Override
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="small" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Small Override
-            </h3>
-            <p className="text-fm-secondary">
-              This tab trigger has{" "}
-              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
-                size="sm"
-              </code>{" "}
-              which overrides the parent Tabs component's{" "}
-              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
-                size="md"
-              </code>{" "}
-              setting.
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Size Variants
+        </h4>
+        <div className="space-y-6">
+          <div className="space-y-2 text-center">
+            <Tabs defaultValue="a" size="sm">
+              <TabsList>
+                <TabsTrigger value="a">Songs</TabsTrigger>
+                <TabsTrigger value="b">Albums</TabsTrigger>
+                <TabsTrigger value="c">Artists</TabsTrigger>
+              </TabsList>
+              <TabsContent value="a" />
+              <TabsContent value="b" />
+              <TabsContent value="c" />
+            </Tabs>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Small (sm)
             </p>
-            <div className="border-fm-divider-secondary bg-fm-surface-info-sec mt-4 rounded-lg border p-3">
-              <div className="text-fm-info text-sm">
-                <strong>Use case:</strong> When you need most tabs to be medium
-                size but want to emphasize or de-emphasize specific tabs.
-              </div>
-            </div>
           </div>
-        </TabsContent>
 
-        <TabsContent value="normal" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Normal Size
-            </h3>
-            <p className="text-fm-secondary">
-              This tab uses the default size inherited from the parent Tabs
-              component (
-              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
-                size="md"
-              </code>
-              ).
+          <div className="space-y-2 text-center">
+            <Tabs defaultValue="a" size="md">
+              <TabsList>
+                <TabsTrigger value="a">Songs</TabsTrigger>
+                <TabsTrigger value="b">Albums</TabsTrigger>
+                <TabsTrigger value="c">Artists</TabsTrigger>
+              </TabsList>
+              <TabsContent value="a" />
+              <TabsContent value="b" />
+              <TabsContent value="c" />
+            </Tabs>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Medium (md) — default
             </p>
-            <div className="mt-4 grid grid-cols-2 gap-4">
-              <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-3">
-                <div className="text-fm-positive text-sm">
-                  Consistent sizing across most tabs
-                </div>
-              </div>
-              <div className="rounded-lg border border-purple-500/20 bg-purple-500/10 p-3">
-                <div className="text-sm text-purple-200">
-                  Clean, unified appearance
-                </div>
-              </div>
-            </div>
           </div>
-        </TabsContent>
 
-        <TabsContent value="normal2" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Another Normal Tab
-            </h3>
-            <p className="text-fm-secondary">
-              Another tab using the inherited medium size from the parent
-              component.
+          <div className="space-y-2 text-center">
+            <Tabs defaultValue="a" size="lg">
+              <TabsList>
+                <TabsTrigger value="a">Songs</TabsTrigger>
+                <TabsTrigger value="b">Albums</TabsTrigger>
+                <TabsTrigger value="c">Artists</TabsTrigger>
+              </TabsList>
+              <TabsContent value="a" />
+              <TabsContent value="b" />
+              <TabsContent value="c" />
+            </Tabs>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Large (lg)
             </p>
-            <div className="mt-4 space-y-3">
-              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
-                <TickCircleIcon className="text-fm-positive h-5 w-5" />
-                <span className="text-fm-secondary">
-                  Inherits parent size automatically
-                </span>
-              </div>
-              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
-                <TickCircleIcon className="text-fm-positive h-5 w-5" />
-                <span className="text-fm-secondary">
-                  No need to specify size prop
-                </span>
-              </div>
-              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
-                <TickCircleIcon className="text-fm-positive h-5 w-5" />
-                <span className="text-fm-secondary">
-                  Maintains consistent appearance
-                </span>
-              </div>
-            </div>
           </div>
-        </TabsContent>
+        </div>
+      </div>
 
-        <TabsContent value="large" className="mt-6">
-          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-              Large Override
-            </h3>
-            <p className="text-fm-secondary">
-              This tab trigger has{" "}
-              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
-                size="lg"
-              </code>{" "}
-              which overrides the parent's medium size setting, making it more
-              prominent.
+      {/* Glow direction variants */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Glow Direction Variants
+        </h4>
+        <div className="flex flex-wrap gap-8">
+          <div className="space-y-2 text-center">
+            <Tabs defaultValue="active" size="md">
+              <TabsList>
+                <TabsTrigger value="active" glowDirection="bottom">
+                  Active
+                </TabsTrigger>
+                <TabsTrigger value="other" glowDirection="bottom">
+                  Inactive
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="active" />
+              <TabsContent value="other" />
+            </Tabs>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Glow Bottom (default)
             </p>
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary mt-4 rounded-lg border p-3">
-              <div className="text-fm-warning text-sm">
-                <strong>Use case:</strong> Call-to-action tabs, primary
-                navigation items, or tabs that need extra visual emphasis in
-                your interface.
-              </div>
-            </div>
-            <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div className="rounded-lg border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 p-4">
-                <div className="text-fm-primary text-lg font-semibold">
-                  Enhanced
-                </div>
-                <div className="text-fm-secondary text-sm">
-                  Better visibility
-                </div>
-              </div>
-              <div className="rounded-lg border border-green-500/30 bg-gradient-to-br from-green-500/20 to-teal-500/20 p-4">
-                <div className="text-fm-primary text-lg font-semibold">
-                  Prominent
-                </div>
-                <div className="text-fm-secondary text-sm">Draws attention</div>
-              </div>
-            </div>
           </div>
-        </TabsContent>
-      </Tabs>
 
-      <div className="text-fm-secondary space-y-1 text-center text-xs">
-        <p>
-          Parent Tabs component:{" "}
-          <code className="bg-fm-surface-secondary rounded px-2 py-0.5 font-mono">
-            size="md"
-          </code>
-        </p>
-        <p>Individual overrides: Tab 1 (sm), Tab 4 (lg)</p>
+          <div className="space-y-2 text-center">
+            <div className="pt-8">
+              <Tabs defaultValue="active" size="md">
+                <TabsList>
+                  <TabsTrigger value="active" glowDirection="top">
+                    Active
+                  </TabsTrigger>
+                  <TabsTrigger value="other" glowDirection="top">
+                    Inactive
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="active" />
+                <TabsContent value="other" />
+              </Tabs>
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Glow Top
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   ),
@@ -855,746 +180,424 @@ export const IndividualSizeOverride: Story = {
     docs: {
       description: {
         story:
-          "Demonstrates how individual TabsTrigger components can override the parent Tabs size setting. The parent has size='md' but individual triggers can specify their own size for special emphasis.",
+          "All three size variants (sm, md, lg) and both glow direction options (bottom, top) shown as labeled item cards.",
       },
     },
   },
 }
 
-// 5. Complex Content (Updated to use size prop)
-export const ComplexContent: Story = {
-  render: () => (
-    <div className="w-full max-w-4xl">
-      <Tabs defaultValue="products" size="md" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="products" className="gap-2">
-            <SearchIcon className="h-4 w-4" />
-            Products
-          </TabsTrigger>
-          <TabsTrigger value="customers" className="gap-2">
-            <EyeOpenIcon className="h-4 w-4" />
-            Customers
-          </TabsTrigger>
-          <TabsTrigger value="orders" className="gap-2">
-            <FileChartIcon className="h-4 w-4" />
-            Orders
-          </TabsTrigger>
-          <TabsTrigger value="analytics" className="gap-2" size="lg">
-            <TickCircleIcon className="h-4 w-4" />
-            Analytics
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="products" className="mt-6">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="text-fm-primary text-lg font-semibold">
-                Product Catalog
-              </h3>
-              <button className="bg-fm-surface-info text-fm-surface-primary hover:bg-fm-surface-info flex items-center gap-2 rounded-lg px-4 py-2 transition-colors">
-                <PlusIcon className="h-4 w-4" />
-                Add Product
-              </button>
-            </div>
+// ─── Configurations ───────────────────────────────────────────────────────────
 
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {[
-                {
-                  name: "Wireless Headphones",
-                  price: "$199",
-                  category: "Electronics",
-                  stock: 45,
-                },
-                {
-                  name: "Smart Watch",
-                  price: "$299",
-                  category: "Wearables",
-                  stock: 23,
-                },
-                {
-                  name: "Laptop Stand",
-                  price: "$49",
-                  category: "Accessories",
-                  stock: 67,
-                },
-                {
-                  name: "USB-C Cable",
-                  price: "$29",
-                  category: "Cables",
-                  stock: 156,
-                },
-                {
-                  name: "Wireless Mouse",
-                  price: "$79",
-                  category: "Electronics",
-                  stock: 34,
-                },
-                {
-                  name: "Keyboard",
-                  price: "$149",
-                  category: "Electronics",
-                  stock: 28,
-                },
-              ].map((product, index) => (
-                <div
-                  key={index}
-                  className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-tertiary rounded-lg border p-4 transition-colors"
-                >
-                  <div className="mb-3 flex aspect-square items-center justify-center rounded-lg bg-gradient-to-br from-purple-500/20 to-pink-500/20">
-                    <SearchIcon className="text-fm-tertiary h-8 w-8" />
-                  </div>
-                  <h4 className="text-fm-primary mb-1 font-medium">
-                    {product.name}
-                  </h4>
-                  <p className="text-fm-secondary mb-2 text-sm">
-                    {product.category}
-                  </p>
-                  <div className="flex items-center justify-between">
-                    <span className="text-fm-primary font-semibold">
-                      {product.price}
-                    </span>
-                    <span className="text-fm-secondary text-xs">
-                      {product.stock} in stock
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="customers" className="mt-6">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="text-fm-primary text-lg font-semibold">
-                Customer Directory
-              </h3>
-              <div className="flex gap-2">
-                <button className="bg-fm-surface-secondary text-fm-primary hover:bg-fm-surface-tertiary rounded px-3 py-1 text-sm transition-colors">
-                  Export
-                </button>
-                <button className="bg-fm-surface-info text-fm-surface-primary hover:bg-fm-surface-info rounded px-3 py-1 text-sm transition-colors">
-                  Add Customer
-                </button>
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              {[
-                {
-                  name: "Alice Cooper",
-                  email: "alice@example.com",
-                  orders: 12,
-                  value: "$2,847",
-                },
-                {
-                  name: "Bob Martinez",
-                  email: "bob@example.com",
-                  orders: 8,
-                  value: "$1,923",
-                },
-                {
-                  name: "Carol Johnson",
-                  email: "carol@example.com",
-                  orders: 15,
-                  value: "$3,456",
-                },
-                {
-                  name: "David Kim",
-                  email: "david@example.com",
-                  orders: 6,
-                  value: "$1,234",
-                },
-                {
-                  name: "Eva Rodriguez",
-                  email: "eva@example.com",
-                  orders: 22,
-                  value: "$4,567",
-                },
-              ].map((customer, index) => (
-                <div
-                  key={index}
-                  className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-tertiary flex items-center justify-between rounded-lg border p-4 transition-colors"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-500">
-                      <span className="text-fm-primary text-sm font-semibold">
-                        {customer.name
-                          .split(" ")
-                          .map((n) => n[0])
-                          .join("")}
-                      </span>
-                    </div>
-                    <div>
-                      <div className="text-fm-primary font-medium">
-                        {customer.name}
-                      </div>
-                      <div className="text-fm-secondary text-sm">
-                        {customer.email}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <div className="text-fm-primary font-medium">
-                      {customer.value}
-                    </div>
-                    <div className="text-fm-secondary text-sm">
-                      {customer.orders} orders
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="orders" className="mt-6">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="text-fm-primary text-lg font-semibold">
-                Recent Orders
-              </h3>
-              <div className="flex gap-2">
-                <select className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary rounded border px-3 py-1 text-sm">
-                  <option>All Status</option>
-                  <option>Pending</option>
-                  <option>Processing</option>
-                  <option>Shipped</option>
-                  <option>Delivered</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="space-y-3">
-              {[
-                {
-                  id: "#ORD-001",
-                  customer: "Alice Cooper",
-                  total: "$247.99",
-                  status: "delivered",
-                  date: "2 hours ago",
-                },
-                {
-                  id: "#ORD-002",
-                  customer: "Bob Martinez",
-                  total: "$89.50",
-                  status: "shipped",
-                  date: "4 hours ago",
-                },
-                {
-                  id: "#ORD-003",
-                  customer: "Carol Johnson",
-                  total: "$156.75",
-                  status: "processing",
-                  date: "6 hours ago",
-                },
-                {
-                  id: "#ORD-004",
-                  customer: "David Kim",
-                  total: "$324.00",
-                  status: "pending",
-                  date: "8 hours ago",
-                },
-                {
-                  id: "#ORD-005",
-                  customer: "Eva Rodriguez",
-                  total: "$78.25",
-                  status: "delivered",
-                  date: "1 day ago",
-                },
-              ].map((order, index) => (
-                <div
-                  key={index}
-                  className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-tertiary flex items-center justify-between rounded-lg border p-4 transition-colors"
-                >
-                  <div className="flex items-center gap-4">
-                    <div>
-                      <div className="text-fm-primary font-medium">
-                        {order.id}
-                      </div>
-                      <div className="text-fm-secondary text-sm">
-                        {order.customer}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <div className="text-right">
-                      <div className="text-fm-primary font-medium">
-                        {order.total}
-                      </div>
-                      <div className="text-fm-secondary text-sm">
-                        {order.date}
-                      </div>
-                    </div>
-                    <span
-                      className={`rounded-full px-2 py-1 text-xs ${
-                        order.status === "delivered"
-                          ? "text-fm-positive bg-green-500/20"
-                          : order.status === "shipped"
-                            ? "text-fm-info bg-blue-500/20"
-                            : order.status === "processing"
-                              ? "bg-yellow-500/20 text-yellow-400"
-                              : "bg-fm-surface-secondary text-fm-tertiary"
-                      }`}
-                    >
-                      {order.status}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="analytics" className="mt-6">
-          <div className="space-y-6">
-            <div className="flex items-center gap-3">
-              <TickCircleIcon className="text-fm-positive h-6 w-6" />
-              <h3 className="text-fm-primary text-lg font-semibold">
-                Sales Analytics
-              </h3>
-              <span className="text-fm-positive rounded-full bg-green-500/20 px-3 py-1 text-xs">
-                Large Tab
-              </span>
-            </div>
-
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-lg border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">
-                  $45,231
-                </div>
-                <div className="text-fm-secondary text-sm">
-                  Revenue This Month
-                </div>
-                <div className="text-fm-positive mt-1 text-xs">
-                  ↗ +12% vs last month
-                </div>
-              </div>
-              <div className="rounded-lg border border-green-500/30 bg-gradient-to-br from-green-500/20 to-emerald-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">1,847</div>
-                <div className="text-fm-secondary text-sm">
-                  Orders This Month
-                </div>
-                <div className="text-fm-positive mt-1 text-xs">
-                  ↗ +8% vs last month
-                </div>
-              </div>
-              <div className="rounded-lg border border-purple-500/30 bg-gradient-to-br from-purple-500/20 to-pink-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">324</div>
-                <div className="text-fm-secondary text-sm">New Customers</div>
-                <div className="text-fm-positive mt-1 text-xs">
-                  ↗ +15% vs last month
-                </div>
-              </div>
-              <div className="rounded-lg border border-orange-500/30 bg-gradient-to-br from-orange-500/20 to-red-500/20 p-4">
-                <div className="text-fm-primary text-2xl font-bold">$24.50</div>
-                <div className="text-fm-secondary text-sm">Avg Order Value</div>
-                <div className="text-fm-icon-negative mt-1 text-xs">
-                  ↘ -3% vs last month
-                </div>
-              </div>
-            </div>
-
-            <div className="border-fm-divider-warning bg-fm-surface-warning-sec rounded-lg border p-4">
-              <div className="text-fm-warning text-sm">
-                <strong>Note:</strong> The Analytics tab uses{" "}
-                <code className="bg-fm-surface-secondary rounded px-2 py-1">
-                  size="lg"
-                </code>
-                to emphasize its importance as the primary data view, while
-                other tabs inherit the default medium size.
-              </div>
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complex e-commerce admin interface demonstrating the new size prop functionality. The parent Tabs has size='md' but the Analytics tab uses size='lg' to emphasize its importance.",
-      },
-    },
-  },
-}
-
-// 6. Glow Direction Variations
-export const GlowDirectionVariations: Story = {
+export const Configurations: Story = {
   render: () => (
-    <div className="w-full max-w-4xl space-y-8">
+    <div className="space-y-8">
+      {/* With icons */}
       <div className="space-y-4">
-        <h3 className="text-fm-primary text-lg font-medium">
-          Bottom Glow (Default)
-        </h3>
-        <Tabs defaultValue="tab1" size="md" className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="tab1" glowDirection="bottom">
-              Dashboard
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          With Icons
+        </h4>
+        <Tabs defaultValue="songs" size="md" className="w-full max-w-lg">
+          <TabsList>
+            <TabsTrigger value="songs" className="gap-2">
+              <MusicalNoteIcon className="h-4 w-4" />
+              Songs
             </TabsTrigger>
-            <TabsTrigger value="tab2" glowDirection="bottom">
-              Reports
+            <TabsTrigger value="favorites" className="gap-2">
+              <HeartIcon className="h-4 w-4" />
+              Favorites
             </TabsTrigger>
-            <TabsTrigger value="tab3" glowDirection="bottom">
-              Profile
+            <TabsTrigger value="discover" className="gap-2">
+              <SearchIcon className="h-4 w-4" />
+              Discover
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="tab1" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Bottom glow creates an underline effect that emphasizes the
-                tab's connection to content below.
+          <TabsContent value="songs" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                Your full song library lives here — browse by title, artist, or
+                recently played.
               </p>
             </div>
           </TabsContent>
-          <TabsContent value="tab2" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Perfect for interfaces where you want to draw attention to the
-                content area.
+          <TabsContent value="favorites" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                Songs you've hearted appear here for quick access.
               </p>
             </div>
           </TabsContent>
-          <TabsContent value="tab3" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Creates a strong visual connection between the tab and its
-                associated content.
+          <TabsContent value="discover" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                Personalized recommendations based on your listening habits.
               </p>
             </div>
           </TabsContent>
         </Tabs>
       </div>
 
+      {/* Individual size override */}
       <div className="space-y-4">
-        <h3 className="text-fm-primary text-lg font-medium">Top Glow</h3>
-        <Tabs defaultValue="tab1" size="md" className="w-full">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="tab1" glowDirection="top">
-              Overview
-            </TabsTrigger>
-            <TabsTrigger value="tab2" glowDirection="top">
-              Analytics
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Individual Size Override
+        </h4>
+        <Tabs defaultValue="featured" size="sm" className="w-full max-w-lg">
+          <TabsList>
+            <TabsTrigger value="featured">Featured</TabsTrigger>
+            <TabsTrigger value="trending" size="md">
+              Trending (md)
             </TabsTrigger>
-            <TabsTrigger value="tab3" glowDirection="top">
-              Settings
+            <TabsTrigger value="new" size="lg">
+              New (lg)
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="tab1" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Top glow creates a subtle highlight effect above the active tab,
-                perfect for elevated interfaces.
+          <TabsContent value="featured" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                The first trigger inherits the parent{" "}
+                <code className="text-fm-primary font-(--font-fm-mono)">
+                  size="sm"
+                </code>
+                . The other two override to md and lg respectively.
               </p>
             </div>
           </TabsContent>
-          <TabsContent value="tab2" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Alternative glow direction for different visual effects.
+          <TabsContent value="trending" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                This trigger uses{" "}
+                <code className="text-fm-primary font-(--font-fm-mono)">
+                  size="md"
+                </code>{" "}
+                directly on the trigger, overriding the parent context.
               </p>
             </div>
           </TabsContent>
-          <TabsContent value="tab3" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Ideal for creating variety in your interface design.
+          <TabsContent value="new" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                This trigger uses{" "}
+                <code className="text-fm-primary font-(--font-fm-mono)">
+                  size="lg"
+                </code>{" "}
+                for a prominent call-to-action feel.
               </p>
             </div>
           </TabsContent>
         </Tabs>
       </div>
 
+      {/* Different content panels */}
       <div className="space-y-4">
-        <h3 className="text-fm-primary text-lg font-medium">
-          Mixed Glow Directions
-        </h3>
-        <Tabs defaultValue="tab1" size="md" className="w-full">
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="tab1" glowDirection="bottom">
-              Bottom Glow
-            </TabsTrigger>
-            <TabsTrigger value="tab2" glowDirection="top">
-              Top Glow
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Rich Content Panels
+        </h4>
+        <Tabs defaultValue="stats" size="md" className="w-full max-w-lg">
+          <TabsList>
+            <TabsTrigger value="stats" className="gap-2">
+              <FileChartIcon className="h-4 w-4" />
+              Stats
             </TabsTrigger>
-            <TabsTrigger value="tab3" glowDirection="bottom">
-              Bottom Glow
+            <TabsTrigger value="top" className="gap-2">
+              <StarIcon className="h-4 w-4" />
+              Top Tracks
             </TabsTrigger>
-            <TabsTrigger value="tab4" glowDirection="top">
-              Top Glow
+            <TabsTrigger value="settings" className="gap-2">
+              <SettingIcon className="h-4 w-4" />
+              Settings
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="tab1" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                You can mix and match glow directions for different visual
-                effects.
-              </p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab2" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Each tab can have its own glow direction for maximum
-                flexibility.
-              </p>
+          <TabsContent value="stats" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Listening time this week
+                </span>
+                <span className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                  14h 32m
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Songs played
+                </span>
+                <span className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                  312
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Artists explored
+                </span>
+                <span className="text-fm-primary font-fm-brand text-fm-md leading-fm-md font-semibold">
+                  47
+                </span>
+              </div>
             </div>
           </TabsContent>
-          <TabsContent value="tab3" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Useful for creating visual hierarchy or emphasizing specific
-                tabs.
-              </p>
+          <TabsContent value="top" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-2 rounded-lg border p-4">
+              {["Midnight Drive", "Electric Haze", "Neon Pulse"].map(
+                (track, i) => (
+                  <div
+                    key={track}
+                    className="flex items-center gap-3 rounded-md px-2 py-2"
+                  >
+                    <span className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm w-4">
+                      {i + 1}
+                    </span>
+                    <div className="bg-fm-surface-secondary border-fm-divider-secondary flex h-8 w-8 items-center justify-center rounded-md border">
+                      <MusicalNoteIcon className="text-fm-secondary h-4 w-4" />
+                    </div>
+                    <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                      {track}
+                    </span>
+                  </div>
+                )
+              )}
             </div>
           </TabsContent>
-          <TabsContent value="tab4" className="mt-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <p className="text-fm-secondary">
-                Experiment with different combinations to achieve your desired
-                design.
-              </p>
+          <TabsContent value="settings" className="mt-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  Crossfade
+                </span>
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  3s
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  Normalize volume
+                </span>
+                <span className="text-fm-positive font-fm-text text-fm-sm leading-fm-sm">
+                  On
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                  Download quality
+                </span>
+                <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  High
+                </span>
+              </div>
             </div>
           </TabsContent>
         </Tabs>
       </div>
-
-      <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
-        <div className="text-fm-info text-sm">
-          <strong>Note:</strong> The glowDirection prop allows you to customize
-          the visual effect of active tabs. Use "bottom" (default) for an
-          underline-style glow or "top" for a subtle highlight effect. You can
-          mix different directions within the same tab group for creative
-          designs.
-        </div>
-      </div>
     </div>
   ),
   parameters: {
     docs: {
       description: {
         story:
-          "Demonstrates the glowDirection prop with different configurations. Shows top glow (default), bottom glow, and mixed directions for various visual effects.",
+          "Configuration axes: tabs with icons, individual per-trigger size overrides against a parent size context, and tabs with rich differentiated content panels.",
       },
     },
   },
 }
 
-// 7. Interactive States (keeping the same as it demonstrates good functionality)
-export const InteractiveStates: Story = {
-  render: () => {
-    const [activeTab, setActiveTab] = React.useState("normal")
-    const [isLoading, setIsLoading] = React.useState(false)
-
-    const handleTabChange = (value: string) => {
-      setIsLoading(true)
-      setActiveTab(value)
+// ─── Interactive ──────────────────────────────────────────────────────────────
 
-      // Simulate loading
-      setTimeout(() => {
-        setIsLoading(false)
-      }, 1000)
-    }
+export const Interactive: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = React.useState("songs")
+
+    const tabs = [
+      { value: "songs", label: "Songs", icon: MusicalNoteIcon },
+      { value: "albums", label: "Albums", icon: StarIcon },
+      { value: "artists", label: "Artists", icon: HeartIcon },
+      { value: "about", label: "About", icon: AlertIcon },
+    ]
+
+    const songs = [
+      { title: "Midnight Drive", artist: "Nova Wave", duration: "3:42" },
+      { title: "Electric Haze", artist: "The Circuits", duration: "4:15" },
+      { title: "Neon Pulse", artist: "Synthcore", duration: "3:58" },
+      { title: "Deep Current", artist: "Ocean Mind", duration: "5:02" },
+    ]
+
+    const albums = [
+      { title: "Chromatic", artist: "Nova Wave", tracks: 12, year: 2024 },
+      { title: "Static Dreams", artist: "The Circuits", tracks: 9, year: 2023 },
+      { title: "Parallax", artist: "Synthcore", tracks: 14, year: 2024 },
+    ]
+
+    const artists = [
+      { name: "Nova Wave", genre: "Synthpop", listeners: "1.2M" },
+      { name: "The Circuits", genre: "Electronic", listeners: "840K" },
+      { name: "Synthcore", genre: "Ambient", listeners: "620K" },
+      { name: "Ocean Mind", genre: "Chill", listeners: "390K" },
+    ]
 
     return (
-      <div className="w-full max-w-3xl space-y-6">
-        <div className="text-center">
-          <h3 className="text-fm-primary mb-2 text-lg font-medium">
-            Interactive States Demo
-          </h3>
-          <p className="text-fm-secondary text-sm">
-            Click tabs to see loading states and transitions
-          </p>
-        </div>
-
-        <Tabs
-          value={activeTab}
-          onValueChange={handleTabChange}
-          size="md"
-          className="w-full"
-        >
-          <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="normal" className="gap-2">
-              <TickCircleIcon className="h-4 w-4" />
-              Normal
-            </TabsTrigger>
-            <TabsTrigger value="loading" className="gap-2" disabled={isLoading}>
-              {isLoading && activeTab === "loading" ? (
-                <div className="border-fm-divider-secondary border-t-fm-primary h-4 w-4 animate-spin rounded-full border-2" />
-              ) : (
-                <AlertIcon className="h-4 w-4" />
-              )}
-              Loading
-            </TabsTrigger>
-            <TabsTrigger value="error" className="gap-2">
-              <CrossIcon className="h-4 w-4" />
-              Error
-            </TabsTrigger>
-            <TabsTrigger value="success" className="gap-2">
-              <TickCircleIcon className="h-4 w-4" />
-              Success
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="normal" className="mt-6">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-                Normal State
-              </h3>
-              <p className="text-fm-secondary mb-4">
-                This is the default state of the component with all
-                functionality working normally.
+      <div className="w-full p-8">
+        <div className="mx-auto max-w-3xl space-y-6">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            {/* Controls panel */}
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-5 rounded-xl border p-5">
+              <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                Active Tab
               </p>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-3">
-                  <div className="text-fm-primary text-lg font-semibold">
-                    98.5%
-                  </div>
-                  <div className="text-fm-secondary text-sm">System Uptime</div>
-                </div>
-                <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-3">
-                  <div className="text-fm-primary text-lg font-semibold">
-                    1,247
-                  </div>
-                  <div className="text-fm-secondary text-sm">Active Users</div>
-                </div>
+              <div className="space-y-2">
+                {tabs.map((tab) => {
+                  const Icon = tab.icon
+                  return (
+                    <button
+                      key={tab.value}
+                      onClick={() => setActiveTab(tab.value)}
+                      className={`font-fm-text text-fm-sm leading-fm-sm flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors ${
+                        activeTab === tab.value
+                          ? "bg-fm-surface-primary text-fm-primary"
+                          : "text-fm-secondary hover:text-fm-primary"
+                      }`}
+                    >
+                      <Icon className="h-4 w-4 shrink-0" />
+                      {tab.label}
+                    </button>
+                  )
+                })}
+              </div>
+              <div className="border-fm-divider-secondary border-t pt-4" />
+              <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-lg border px-4 py-3">
+                <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">
+                  value=&quot;{activeTab}&quot;
+                </code>
               </div>
             </div>
-          </TabsContent>
 
-          <TabsContent value="loading" className="mt-6">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              {isLoading ? (
-                <div className="py-8 text-center">
-                  <div className="border-fm-divider-secondary border-t-fm-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2" />
-                  <h3 className="text-fm-primary mb-2 text-lg font-semibold">
-                    Loading Content...
-                  </h3>
-                  <p className="text-fm-secondary">
-                    Please wait while we fetch the latest data.
-                  </p>
-                </div>
-              ) : (
-                <>
-                  <h3 className="text-fm-primary mb-4 text-lg font-semibold">
-                    Loading State Demo
-                  </h3>
-                  <p className="text-fm-secondary mb-4">
-                    This tab demonstrates loading states and async content
-                    fetching.
-                  </p>
-                  <div className="space-y-3">
-                    <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
-                      <div className="bg-fm-surface-positive flex h-5 w-5 items-center justify-center rounded-full">
-                        <TickCircleIcon className="text-fm-primary h-3 w-3" />
-                      </div>
-                      <span className="text-fm-secondary">
-                        Content loaded successfully
-                      </span>
-                    </div>
-                    <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
-                      <div className="bg-fm-surface-info flex h-5 w-5 items-center justify-center rounded-full">
-                        <AlertIcon className="text-fm-primary h-3 w-3" />
+            {/* Preview stage */}
+            <div className="flex flex-col gap-3 lg:col-span-2">
+              <Tabs
+                value={activeTab}
+                onValueChange={setActiveTab}
+                size="md"
+                className="w-full"
+              >
+                <TabsList>
+                  {tabs.map((tab) => {
+                    const Icon = tab.icon
+                    return (
+                      <TabsTrigger
+                        key={tab.value}
+                        value={tab.value}
+                        className="gap-2"
+                      >
+                        <Icon className="h-4 w-4" />
+                        {tab.label}
+                      </TabsTrigger>
+                    )
+                  })}
+                </TabsList>
+
+                <TabsContent value="songs" className="mt-4">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-2 rounded-lg border p-4">
+                    {songs.map((song) => (
+                      <div
+                        key={song.title}
+                        className="hover:bg-fm-surface-primary flex items-center justify-between rounded-md px-2 py-2 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="bg-fm-surface-primary border-fm-divider-secondary flex h-9 w-9 shrink-0 items-center justify-center rounded-md border">
+                            <MusicalNoteIcon className="text-fm-secondary h-4 w-4" />
+                          </div>
+                          <div>
+                            <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                              {song.title}
+                            </p>
+                            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                              {song.artist}
+                            </p>
+                          </div>
+                        </div>
+                        <span className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+                          {song.duration}
+                        </span>
                       </div>
-                      <span className="text-fm-secondary">
-                        Data synchronized with server
-                      </span>
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="error" className="mt-6">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-              <div className="mb-4 flex items-start gap-3">
-                <CrossIcon className="text-fm-icon-negative mt-0.5 h-6 w-6 flex-shrink-0" />
-                <div>
-                  <h3 className="text-fm-primary text-lg font-semibold">
-                    Error State
-                  </h3>
-                  <p className="text-fm-secondary">
-                    Something went wrong while loading the content.
-                  </p>
-                </div>
-              </div>
-
-              <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 rounded-lg border p-4">
-                <div className="text-fm-secondary text-sm">
-                  <strong>Error:</strong> Failed to fetch data from the server.
-                  Please check your connection and try again.
-                </div>
-              </div>
-
-              <div className="flex gap-2">
-                <button className="bg-fm-surface-negative text-fm-surface-primary hover:bg-fm-surface-negative rounded-lg px-4 py-2 transition-colors">
-                  Retry
-                </button>
-                <button className="bg-fm-surface-secondary text-fm-primary hover:bg-fm-surface-tertiary rounded-lg px-4 py-2 transition-colors">
-                  Report Issue
-                </button>
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="success" className="mt-6">
-            <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-6">
-              <div className="mb-4 flex items-start gap-3">
-                <TickCircleIcon className="text-fm-positive mt-0.5 h-6 w-6 flex-shrink-0" />
-                <div>
-                  <h3 className="text-fm-primary text-lg font-semibold">
-                    Success State
-                  </h3>
-                  <p className="text-fm-secondary">
-                    Operation completed successfully!
-                  </p>
-                </div>
-              </div>
-
-              <div className="space-y-3">
-                <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-4">
-                  <div className="text-fm-positive text-sm">
-                    ✅ All systems are operational and running smoothly.
+                    ))}
                   </div>
-                </div>
-
-                <div className="grid grid-cols-3 gap-3">
-                  <div className="bg-fm-surface-secondary rounded-lg p-3 text-center">
-                    <div className="text-fm-primary text-lg font-semibold">
-                      100%
-                    </div>
-                    <div className="text-fm-secondary text-xs">
-                      Success Rate
-                    </div>
+                </TabsContent>
+
+                <TabsContent value="albums" className="mt-4">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-2 rounded-lg border p-4">
+                    {albums.map((album) => (
+                      <div
+                        key={album.title}
+                        className="hover:bg-fm-surface-primary flex items-center justify-between rounded-md px-2 py-2 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="bg-fm-surface-primary border-fm-divider-secondary flex h-12 w-12 shrink-0 items-center justify-center rounded-md border">
+                            <StarIcon className="text-fm-secondary h-5 w-5" />
+                          </div>
+                          <div>
+                            <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                              {album.title}
+                            </p>
+                            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                              {album.artist}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                            {album.tracks} tracks
+                          </p>
+                          <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+                            {album.year}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
                   </div>
-                  <div className="bg-fm-surface-secondary rounded-lg p-3 text-center">
-                    <div className="text-fm-primary text-lg font-semibold">
-                      0ms
-                    </div>
-                    <div className="text-fm-secondary text-xs">Error Rate</div>
+                </TabsContent>
+
+                <TabsContent value="artists" className="mt-4">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-2 rounded-lg border p-4">
+                    {artists.map((artist) => (
+                      <div
+                        key={artist.name}
+                        className="hover:bg-fm-surface-primary flex items-center justify-between rounded-md px-2 py-2 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="bg-fm-surface-primary border-fm-divider-secondary flex h-10 w-10 shrink-0 items-center justify-center rounded-full border">
+                            <HeartIcon className="text-fm-secondary h-4 w-4" />
+                          </div>
+                          <div>
+                            <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                              {artist.name}
+                            </p>
+                            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                              {artist.genre}
+                            </p>
+                          </div>
+                        </div>
+                        <span className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+                          {artist.listeners}
+                        </span>
+                      </div>
+                    ))}
                   </div>
-                  <div className="bg-fm-surface-secondary rounded-lg p-3 text-center">
-                    <div className="text-fm-primary text-lg font-semibold">
-                      Fast
+                </TabsContent>
+
+                <TabsContent value="about" className="mt-4">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-lg border p-4">
+                    <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl">
+                      Aural is a music streaming platform designed for deep
+                      listeners. Discover new artists, curate playlists, and
+                      explore lossless audio quality.
+                    </p>
+                    <div className="border-fm-divider-secondary bg-fm-surface-primary rounded-lg border px-4 py-3">
+                      <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-xl">
+                        Version 2.4.1 · Last updated April 2026
+                      </p>
                     </div>
-                    <div className="text-fm-secondary text-xs">Performance</div>
                   </div>
-                </div>
-              </div>
+                </TabsContent>
+              </Tabs>
             </div>
-          </TabsContent>
-        </Tabs>
-
-        <div className="text-fm-secondary text-center text-xs">
-          <p>
-            Current active tab:{" "}
-            <span className="bg-fm-surface-secondary rounded px-2 py-0.5 font-mono">
-              {activeTab}
-            </span>
-          </p>
-          {isLoading && <p className="mt-1">Loading state active...</p>}
+          </div>
         </div>
       </div>
     )
@@ -1603,7 +606,7 @@ export const InteractiveStates: Story = {
     docs: {
       description: {
         story:
-          "Interactive states demonstration showing loading, error, and success states with real-time tab switching using the new size prop approach.",
+          "Stateful audio app tab switcher — Songs, Albums, Artists, About — with a left-side preset panel for controlled tab activation and a live preview stage showing each content panel.",
       },
     },
   },