@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

package/src/organisms/showcase/ComponentShowcasePage.tsx

@@ -1,2496 +0,0 @@
-import React, { useState } from 'react';
-import { Card } from '../../atoms/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../atoms/ui/Tabs';
-import { DataBadge, StatCard, DetailedCard, DataTable, EmptyState, ColorSwatch, IconBadge, Accordion, ToastContainer, FileUpload, DateTimePicker, Chart } from '../../atoms/composed';
-import { Badge } from '../../atoms/ui/Badge';
-import { Switch } from '../../atoms/ui/Switch';
-import { ShowcaseSection } from '../../molecules/layout';
-import { Pagination, NavMenu } from '../../molecules/navigation';
-import { FormGroup, SearchInput } from '../../molecules/forms';
-import { Alert, ProgressBar, FormField, Breadcrumb } from '../../atoms/composed';
-import { Input } from '../../atoms/ui/input';
-import { Label } from '../../atoms/ui/label';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../atoms/ui/table';
-import { Spinner } from '../../atoms/ui/spinner';
-import { Skeleton } from '../../atoms/ui/skeleton';
-import { Button } from '../../atoms/ui/button';
-import { 
-  Database, 
-  TrendingUp, 
-  Users, 
-  Activity,
-  CheckCircle,
-  AlertTriangle,
-  XCircle,
-  Info,
-  Clock,
-  Layers,
-  Palette,
-  Grid3X3,
-  Home,
-  Settings,
-  FileText,
-  ChevronRight
-} from 'lucide-react';
-
-interface SampleDataItem extends Record<string, unknown> {
-  id: number;
-  name: string;
-  status: 'success' | 'warning' | 'error';
-  category: string;
-  runs: number;
-}
-
-export const ComponentShowcasePage: React.FC = () => {
-  const [activeSection, setActiveSection] = useState('badges');
-  const [showCode, setShowCode] = useState(false);
-  const [toasts, setToasts] = useState<Array<{ id: string; status: 'success' | 'warning' | 'error' | 'info'; title: string; message: string }>>([]);
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
-  const [dateRange, setDateRange] = useState<{ start: Date | undefined; end: Date | undefined }>({ start: undefined, end: undefined });
-
-  // Sample data for DataTable
-  const sampleData: SampleDataItem[] = [
-    { id: 1, name: 'Customer Analysis', status: 'success', category: 'Analytics', runs: 24 },
-    { id: 2, name: 'Revenue Model', status: 'warning', category: 'Finance', runs: 18 },
-    { id: 3, name: 'User Behavior', status: 'error', category: 'Product', runs: 31 },
-    { id: 4, name: 'Sales Forecast', status: 'success', category: 'Sales', runs: 12 }
-  ];
-
-  const tableColumns = [
-    { key: 'name', header: 'Model Name' },
-    { key: 'status', header: 'Status', type: 'status' as const },
-    { key: 'category', header: 'Category', type: 'category' as const },
-    { key: 'runs', header: 'Runs' }
-  ];
-
-  return (
-    <div className="min-h-screen bg-background">
-      {/* Hero Section */}
-      <div className="bg-gradient-to-br from-category-1/5 via-category-2/5 to-category-3/5 border-b border-border/50">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <IconBadge 
-                variant="category" 
-                category={1} 
-                size="lg" 
-                icon={<Grid3X3 className="w-6 h-6" />}
-              />
-              <div>
-                <h1 className="text-4xl font-bold text-foreground">Component Showcase</h1>
-                <p className="text-lg text-muted-foreground mt-2">
-                  Explore our comprehensive design system and component library built for data analytics interfaces
-                </p>
-              </div>
-            </div>
-            
-            <div className="flex items-center space-x-3">
-              <div className="flex items-center gap-3 bg-card/80 backdrop-blur-sm border border-border/50 rounded px-3 py-2">
-                <Layers className="w-4 h-4 text-muted-foreground" />
-                <span className="text-sm font-medium text-foreground">Show Code</span>
-                <Switch
-                  checked={showCode}
-                  onCheckedChange={setShowCode}
-                />
-              </div>
-            </div>
-          </div>
-          
-          {/* Quick Stats */}
-          <div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
-            <StatCard
-              title="Components"
-              value="20+"
-              subtitle="Design system components"
-              category={1}
-              icon={<Database className="w-4 h-4" />}
-            />
-            <StatCard
-              title="Colors"
-              value="20+"
-              subtitle="System colors & variants"
-              category={2}
-              icon={<Palette className="w-4 h-4" />}
-            />
-            <StatCard
-              title="Variants"
-              value="50+"
-              subtitle="Component variations"
-              category={3}
-              icon={<CheckCircle className="w-4 h-4" />}
-            />
-            <StatCard
-              title="Interactive"
-              value="100%"
-              subtitle="Fully interactive components"
-              category={4}
-              icon={<Activity className="w-4 h-4" />}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
-        <div className="space-y-8">
-
-      {/* Navigation */}
-      <Tabs value={activeSection} onValueChange={setActiveSection} className="w-full">
-        {
-          <TabsList className="grid w-full grid-cols-10 lg:w-fit lg:mx-auto mb-8">
-            <TabsTrigger value="badges" category={1}>Badges</TabsTrigger>
-            <TabsTrigger value="cards" category={2}>Cards</TabsTrigger>
-            <TabsTrigger value="tables" category={3}>Data</TabsTrigger>
-            <TabsTrigger value="forms" category={4}>Forms</TabsTrigger>
-            <TabsTrigger value="navigation" category={5}>Navigation</TabsTrigger>
-            <TabsTrigger value="feedback" category={6}>Feedback</TabsTrigger>
-            <TabsTrigger value="states" category={7}>States</TabsTrigger>
-            <TabsTrigger value="palettes" category={8}>Palettes</TabsTrigger>
-            <TabsTrigger value="typography" category={1}>Typography</TabsTrigger>
-            <TabsTrigger value="debug" category={2}>Debug</TabsTrigger>
-          </TabsList>
-        }
-
-        {/* Badges Section */}
-        <TabsContent value="badges" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Badge Components</h2>
-            <p className="text-muted-foreground">
-              From base UI badges to semantic data badges with design tokens and theming.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Base Badge Component */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Base Badge Component"
-                description="Foundation UI badge with default variants and sizes"
-                badge={{ text: "UI Component", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4">
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Variants</h4>
-                    <div className="flex flex-wrap gap-2">
-                      <Badge variant="default">Default</Badge>
-                      <Badge variant="secondary">Secondary</Badge>
-                      <Badge variant="destructive">Destructive</Badge>
-                      <Badge variant="outline">Outline</Badge>
-                    </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Sizes</h4>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Badge size="sm">Small</Badge>
-                      <Badge size="md">Medium</Badge>
-                      <Badge size="lg">Large</Badge>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-3 p-3 bg-muted/50 rounded text-sm font-mono">
-                      <code>{`<Badge variant="default">Default</Badge>
-<Badge variant="secondary">Secondary</Badge>`}</code>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* DataBadge - Category */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="DataBadge with Category Theming"
-                description="Extended badge component using design tokens for data categorization"
-                badge={{ text: "Business Component", variant: "category", category: 2 }}
-              >
-                <div className="space-y-4">
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Category Colors (Design Tokens)</h4>
-                    <div className="flex flex-wrap gap-2">
-                      {[1, 2, 3, 4, 5, 6, 7, 8].map(category => (
-                        <DataBadge key={category} variant="category" category={category as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}>
-                          Category {category}
-                        </DataBadge>
-                      ))}
-                    </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Sizes & Interactive States</h4>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <DataBadge variant="category" category={1} size="sm">Small</DataBadge>
-                      <DataBadge variant="category" category={2} size="md">Medium</DataBadge>
-                      <DataBadge variant="category" category={3} size="lg">Large</DataBadge>
-                      <DataBadge variant="category" category={4} interactive onClick={() => alert('Interactive badge clicked!')}>
-                        Interactive (Click me)
-                      </DataBadge>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-3 p-3 bg-muted/50 rounded text-sm font-mono">
-                      <code>{`<DataBadge variant="category" category={1}>
-  Category 1
-</DataBadge>`}</code>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* DataBadge - Status */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="DataBadge with Status Theming"
-                description="Semantic status indicators using design system colors"
-                badge={{ text: "Business Component", variant: "category", category: 3 }}
-              >
-                <div className="space-y-4">
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Status Variants (Semantic Colors)</h4>
-                    <div className="flex flex-wrap gap-2">
-                      <DataBadge variant="status" status="success">
-                        <CheckCircle className="w-3 h-3 mr-1" />
-                        Success
-                      </DataBadge>
-                      <DataBadge variant="status" status="warning">
-                        <AlertTriangle className="w-3 h-3 mr-1" />
-                        Warning
-                      </DataBadge>
-                      <DataBadge variant="status" status="error">
-                        <XCircle className="w-3 h-3 mr-1" />
-                        Error
-                      </DataBadge>
-                      <DataBadge variant="status" status="info">
-                        <Info className="w-3 h-3 mr-1" />
-                        Info
-                      </DataBadge>
-                      <DataBadge variant="status" status="neutral">
-                        <Clock className="w-3 h-3 mr-1" />
-                        Neutral
-                      </DataBadge>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<DataBadge variant="status" status="success">Success</DataBadge>
-<DataBadge variant="status" status="warning">Warning</DataBadge>
-<DataBadge variant="status" status="error">Error</DataBadge>
-<DataBadge variant="status" status="info">Info</DataBadge>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Token Usage Example */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="Design Token Usage"
-                description="How components leverage design tokens for consistent theming"
-                badge={{ text: "Architecture", variant: "category", category: 4 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">CSS Variables Applied</h4>
-                      <div className="space-y-2 text-xs font-mono">
-                        <div className="p-2 bg-category-1/10 text-category-1 rounded border border-category-1/20">
-                          --category-1: {getComputedStyle(document.documentElement).getPropertyValue('--category-1') || '217 91% 60%'}
-                        </div>
-                        <div className="p-2 bg-status-success/10 text-status-success rounded border border-status-success/20">
-                          --status-success: {getComputedStyle(document.documentElement).getPropertyValue('--status-success') || '142 76% 36%'}
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Component Classes</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          <code>.badge-category-1</code> uses <code>var(--category-1)</code>
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>.status-success</code> uses <code>var(--status-success)</code>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Cards Section */}
-        <TabsContent value="cards" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Card Components</h2>
-            <p className="text-muted-foreground">
-              From base cards to specialized data visualization cards with metrics and analytics.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Base Card Component */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Base Card Component"
-                description="Foundation card with optional category theming"
-                badge={{ text: "UI Component", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-3 gap-4">
-                    <Card className="p-4">
-                      <h4 className="font-medium mb-2">Basic Card</h4>
-                      <p className="text-sm text-muted-foreground">Standard card with default styling</p>
-                    </Card>
-                    
-                    <Card className="p-4" category={2}>
-                      <h4 className="font-medium mb-2">Category Card</h4>
-                      <p className="text-sm text-muted-foreground">Card with category color accent</p>
-                    </Card>
-                    
-                    <Card className="p-4" category={4}>
-                      <h4 className="font-medium mb-2">Themed Card</h4>
-                      <p className="text-sm text-muted-foreground">Using design token theming</p>
-                    </Card>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>
-                        {`<Card category={2}>Card with category theming</Card>`}
-                        </code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* StatCard Component */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="StatCard Component"
-                description="Specialized card for displaying key metrics with trends"
-                badge={{ text: "Business Component", variant: "category", category: 2 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <StatCard
-                      title="Total Models"
-                      value="1,234"
-                      subtitle="Active dbt models"
-                      category={1}
-                      icon={<Database className="w-5 h-5" />}
-                      trend={{ value: 12.5, label: "vs last month" }}
-                    />
-                    <StatCard
-                      title="Success Rate"
-                      value="99.2%"
-                      subtitle="Test pass rate"
-                      category={2}
-                      icon={<CheckCircle className="w-5 h-5" />}
-                      trend={{ value: 2.1, label: "vs last week" }}
-                    />
-                    <StatCard
-                      title="Active Users"
-                      value="567"
-                      subtitle="Monthly active users"
-                      category={3}
-                      icon={<Users className="w-5 h-5" />}
-                      trend={{ value: -3.2, label: "vs last month" }}
-                    />
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<StatCard
-  title="Total Models"
-  value="1,234"
-  subtitle="Active dbt models"
-  category={1}
-  icon={<Database />}
-  trend={{ value: 12.5, label: "vs last month" }}
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* DetailedCard Component */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="DetailedCard Component"
-                description="Rich information card with multiple metrics and interactive elements"
-                badge={{ text: "Business Component", variant: "category", category: 3 }}
-              >
-                <DetailedCard
-                  title="Customer Analytics Model"
-                  subtitle="Production Model"
-                  description="Advanced analytics model for customer behavior tracking and segmentation."
-                  category={1}
-                  icon={<Database className="w-5 h-5" />}
-                  primaryMetric={{
-                    label: "Success Rate",
-                    value: "98.7%",
-                    trend: { value: 5.2, label: "vs last week" }
-                  }}
-                  secondaryMetrics={[
-                    { label: "Daily Runs", value: "24", status: "success" },
-                    { label: "Avg Runtime", value: "2.4min", status: "info" },
-                    { label: "Data Quality", value: "95%", status: "warning" },
-                    { label: "Test Coverage", value: "87%", status: "success" }
-                  ]}
-                  tags={[
-                    { label: "Production", status: "success" },
-                    { label: "Analytics", category: 1 },
-                    { label: "Customer Data", category: 3 }
-                  ]}
-                  onClick={() => alert('Model details clicked!')}
-                />
-              </ShowcaseSection>
-            </Card>
-
-            {/* Card Design Tokens */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="Card Theming & Composition"
-                description="How cards leverage design tokens and compose with other components"
-                badge={{ text: "Architecture", variant: "category", category: 4 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Component Hierarchy</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded flex items-center gap-2">
-                          <span className="font-mono">Card</span>
-                          <span className="text-muted-foreground">→ Base container</span>
-                        </div>
-                        <div className="p-2 bg-muted rounded flex items-center gap-2 ml-4">
-                          <span className="font-mono">StatCard</span>
-                          <span className="text-muted-foreground">→ Metrics display</span>
-                        </div>
-                        <div className="p-2 bg-muted rounded flex items-center gap-2 ml-4">
-                          <span className="font-mono">DetailedCard</span>
-                          <span className="text-muted-foreground">→ Rich content</span>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Composed Elements</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          Uses <code>DataBadge</code> for tags
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          Uses <code>IconBadge</code> for icons
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          Category theming via CSS variables
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Tables Section */}
-        <TabsContent value="tables" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Data Visualization</h2>
-            <p className="text-muted-foreground">
-              Tables and charts for displaying and visualizing data with sorting, filtering, and interactive features.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Base Table Component */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Base Table Component"
-                description="Foundation table components with semantic HTML structure"
-                badge={{ text: "UI Component", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead>Category</TableHead>
-                        <TableHead className="text-right">Value</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      <TableRow>
-                        <TableCell>Customer Analytics</TableCell>
-                        <TableCell>Active</TableCell>
-                        <TableCell>Analytics</TableCell>
-                        <TableCell className="text-right">1,234</TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell>Revenue Model</TableCell>
-                        <TableCell>Pending</TableCell>
-                        <TableCell>Finance</TableCell>
-                        <TableCell className="text-right">567</TableCell>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Name</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>Data</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>`}</code>
-                    </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* DataTable Component */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="DataTable Component"
-                description="Feature-rich table with search, sorting, hover states, and click handlers"
-                badge={{ text: "Business Component", variant: "category", category: 2 }}
-              >
-                <DataTable
-                  data={sampleData}
-                  columns={tableColumns}
-                  searchPlaceholder="Search models..."
-                  onRowClick={(item) => alert(`Clicked: ${item.name}`)}
-                  hover={true}
-                />
-                
-                {showCode && (
-                  <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                    <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                      <code>{`<DataTable
-  data={sampleData}
-  columns={[
-    { key: 'name', header: 'Model Name' },
-    { key: 'status', header: 'Status', type: 'status' },
-    { key: 'category', header: 'Category', type: 'category' }
-  ]}
-  searchPlaceholder="Search models..."
-  onRowClick={(item) => alert(item.name)}
-  hover={true}
-/>`}</code>
-                    </pre>
-                  </div>
-                )}
-              </ShowcaseSection>
-            </Card>
-
-            {/* Table Features */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="Table Features & Composition"
-                description="How DataTable composes UI elements and leverages the design system"
-                badge={{ text: "Architecture", variant: "category", category: 3 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Integrated Components</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          <code>Input</code> for search functionality
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>DataBadge</code> for status/category cells
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>Button</code> for actions
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Features</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Client-side search/filter
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Hover row highlighting
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Click handlers
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Type-aware cell rendering
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Chart Component */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="Chart Component"
-                description="Data visualization charts with multiple types, interactive features, and accessibility support"
-                badge={{ text: "Business Component", variant: "category", category: 4 }}
-              >
-                <div className="space-y-6">
-                  <div className="grid md:grid-cols-2 gap-6">
-                    {/* Bar Chart */}
-                    <Chart
-                      title="Monthly Revenue"
-                      subtitle="Revenue by month"
-                      type="bar"
-                      category={1}
-                      height="medium"
-                      data={[
-                        { label: 'Jan', value: 4200 },
-                        { label: 'Feb', value: 5300 },
-                        { label: 'Mar', value: 6100 },
-                        { label: 'Apr', value: 5900 },
-                        { label: 'May', value: 7200 },
-                        { label: 'Jun', value: 8100 }
-                      ]}
-                      showValues
-                      showTrend
-                      trend={{ value: 12.5, label: "vs last period" }}
-                      onClick={() => alert('Chart clicked!')}
-                    />
-                    
-                    {/* Line Chart */}
-                    <Chart
-                      title="User Growth"
-                      subtitle="Active users over time"
-                      type="line"
-                      category={2}
-                      height="medium"
-                      data={[
-                        { label: 'Week 1', value: 120 },
-                        { label: 'Week 2', value: 145 },
-                        { label: 'Week 3', value: 139 },
-                        { label: 'Week 4', value: 167 },
-                        { label: 'Week 5', value: 185 },
-                        { label: 'Week 6', value: 201 }
-                      ]}
-                      showTrend
-                      trend={{ value: 8.3, label: "growth" }}
-                    />
-                  </div>
-                  
-                  <div className="grid md:grid-cols-2 gap-6">
-                    {/* Area Chart */}
-                    <Chart
-                      title="System Load"
-                      subtitle="CPU usage over time"
-                      type="area"
-                      category={4}
-                      data={[
-                        { label: '00:00', value: 45 },
-                        { label: '04:00', value: 32 },
-                        { label: '08:00', value: 67 },
-                        { label: '12:00', value: 78 },
-                        { label: '16:00', value: 82 },
-                        { label: '20:00', value: 54 }
-                      ]}
-                      height="compact"
-                    />
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Chart Variants</h4>
-                    <div className="grid md:grid-cols-3 gap-4">
-                      <Chart
-                        title="Minimal Chart"
-                        type="bar"
-                        variant="minimal"
-                        category={5}
-                        data={[
-                          { label: 'A', value: 20 },
-                          { label: 'B', value: 35 },
-                          { label: 'C', value: 45 },
-                          { label: 'D', value: 30 }
-                        ]}
-                        height="sidebar"
-                      />
-                      
-                      <Chart
-                        title="Loading State"
-                        type="line"
-                        category={6}
-                        data={[]}
-                        isLoading
-                        height="sidebar"
-                      />
-                      
-                      <Chart
-                        title="Custom Colors"
-                        type="bar"
-                        category={7}
-                        data={[
-                          { label: 'Q1', value: 100 },
-                          { label: 'Q2', value: 150 },
-                          { label: 'Q3', value: 120 },
-                          { label: 'Q4', value: 180 }
-                        ]}
-                        colorOverrides={['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4']}
-                        height="sidebar"
-                      />
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Chart
-  title="Monthly Revenue"
-  type="bar"
-  category={1}
-  data={chartData}
-  showValues
-  showTrend
-  trend={{ value: 12.5, label: "vs last period" }}
-  onClick={() => handleChartClick()}
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-          </div>
-        </TabsContent>
-
-        {/* Forms Section */}
-        <TabsContent value="forms" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Form Components</h2>
-            <p className="text-muted-foreground">
-              From base form inputs to complete form patterns with validation and organization.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Base Form Elements */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Base Form Elements"
-                description="Foundation form components with labels and inputs"
-                badge={{ text: "UI Components", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4 max-w-md">
-                  <div className="space-y-2">
-                    <Label htmlFor="basic-input">Basic Label</Label>
-                    <Input id="basic-input" placeholder="Enter text..." />
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor="email-input">Email Address</Label>
-                    <Input id="email-input" type="email" placeholder="email@example.com" />
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor="password-input">Password</Label>
-                    <Input id="password-input" type="password" placeholder="Enter password" />
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Label htmlFor="input">Label</Label>
-<Input id="input" placeholder="Enter text..." />`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* FormField Component */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="FormField Component"
-                description="Enhanced form field with label, description, and error states"
-                badge={{ text: "Molecule Component", variant: "category", category: 2 }}
-              >
-                <div className="space-y-6 max-w-md">
-                  <FormField
-                    label="Username"
-                    description="This will be your display name"
-                    required
-                    htmlFor="username"
-                  >
-                    <Input id="username" placeholder="johndoe" />
-                  </FormField>
-                  
-                  <FormField
-                    label="Email"
-                    description="We'll never share your email"
-                    error="Please enter a valid email address"
-                    required
-                    htmlFor="email"
-                  >
-                    <Input id="email" type="email" placeholder="email@example.com" />
-                  </FormField>
-                  
-                  <FormField
-                    label="Bio"
-                    layout="horizontal"
-                    htmlFor="bio"
-                  >
-                    <Input id="bio" placeholder="Tell us about yourself" />
-                  </FormField>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<FormField
-  label="Email"
-  description="We'll never share your email"
-  error={errors.email}
-  required
->
-  <Input type="email" />
-</FormField>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* FormGroup Component */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="FormGroup Component"
-                description="Organize related form fields into logical sections"
-                badge={{ text: "Molecule Component", variant: "category", category: 3 }}
-              >
-                <div className="space-y-6">
-                  <FormGroup
-                    title="Personal Information"
-                    description="Basic details about your account"
-                    variant="card"
-                    category={6}
-                  >
-                    <FormField label="First Name" required htmlFor="firstName">
-                      <Input id="firstName" placeholder="John" />
-                    </FormField>
-                    <FormField label="Last Name" required htmlFor="lastName">
-                      <Input id="lastName" placeholder="Doe" />
-                    </FormField>
-                    <FormField label="Email" required htmlFor="groupEmail">
-                      <Input id="groupEmail" type="email" placeholder="john@example.com" />
-                    </FormField>
-                  </FormGroup>
-                  
-                  <FormGroup
-                    title="Preferences"
-                    description="Customize your experience"
-                    variant="section"
-                  >
-                    <FormField label="Language" htmlFor="language">
-                      <Input id="language" placeholder="English" />
-                    </FormField>
-                    <FormField label="Timezone" htmlFor="timezone">
-                      <Input id="timezone" placeholder="UTC-5" />
-                    </FormField>
-                  </FormGroup>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* SearchInput Component */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="SearchInput Component"
-                description="Advanced search with autocomplete and keyboard navigation"
-                badge={{ text: "Molecule Component", variant: "category", category: 4 }}
-              >
-                <div className="space-y-6">
-                  <div className="max-w-md">
-                    <h4 className="text-sm font-medium mb-3">With Results</h4>
-                    <SearchInput
-                      placeholder="Search users..."
-                      results={[
-                        { id: '1', label: 'John Doe', description: 'john@example.com', category: 'User', icon: <Users className="w-4 h-4" /> },
-                        { id: '2', label: 'Jane Smith', description: 'jane@example.com', category: 'Admin', icon: <Users className="w-4 h-4" /> },
-                        { id: '3', label: 'Analytics Dashboard', description: 'View analytics', category: 'Page', icon: <Database className="w-4 h-4" /> }
-                      ]}
-                      category={7}
-                      onSelect={(result) => alert(`Selected: ${result.label}`)}
-                    />
-                  </div>
-                  
-                  <div className="max-w-md">
-                    <h4 className="text-sm font-medium mb-3">Simple Search</h4>
-                    <SearchInput
-                      placeholder="Search anything..."
-                      clearable={false}
-                      category={2}
-                    />
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<SearchInput
-  placeholder="Search users..."
-  results={searchResults}
-  category={7}
-  onSelect={(result) => handleSelect(result)}
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* FileUpload Component */}
-            <Card className="p-6" category={5}>
-              <ShowcaseSection
-                title="FileUpload Component"
-                description="Advanced file upload with drag-and-drop, previews, validation, and progress tracking"
-                badge={{ text: "Business Component", variant: "category", category: 5 }}
-              >
-                <div className="space-y-6">
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Default File Upload</h4>
-                    <FileUpload
-                      accept="image/*,.pdf,.doc,.docx"
-                      multiple
-                      maxSize={5 * 1024 * 1024}
-                      maxFiles={5}
-                      onChange={(files) => console.log('Files:', files)}
-                      onUpload={async (files) => {
-                        console.log('Uploading:', files);
-                        // Simulate upload
-                        await new Promise(resolve => setTimeout(resolve, 2000));
-                      }}
-                    />
-                  </div>
-                  
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Compact Variant</h4>
-                      <FileUpload
-                        variant="compact"
-                        accept=".csv,.xlsx"
-                        maxSize={1 * 1024 * 1024}
-                        uploadText="Upload spreadsheet"
-                      />
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Large Variant</h4>
-                      <FileUpload
-                        variant="large"
-                        accept="image/*"
-                        showPreview
-                        uploadText="Drop images here"
-                        dragText="Release to upload"
-                      />
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<FileUpload
-  accept="image/*,.pdf"
-  multiple
-  maxSize={5 * 1024 * 1024}
-  showPreview
-  onUpload={async (files) => {
-    await uploadFiles(files);
-  }}
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* DateTimePicker Component */}
-            <Card className="p-6" category={6}>
-              <ShowcaseSection
-                title="DateTimePicker Component"
-                description="Flexible date and time selection with multiple modes, formats, and range support"
-                badge={{ text: "Business Component", variant: "category", category: 6 }}
-              >
-                <div className="space-y-6">
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Date Picker</h4>
-                      <DateTimePicker
-                        mode="date"
-                        value={selectedDate}
-                        onChange={(date) => setSelectedDate(date || undefined)}
-                        placeholder="Select date"
-                      />
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Time Picker</h4>
-                      <DateTimePicker
-                        mode="time"
-                        value={selectedDate}
-                        onChange={(date) => setSelectedDate(date || undefined)}
-                        placeholder="Select time"
-                        timeFormat="12h"
-                      />
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">DateTime Picker</h4>
-                      <DateTimePicker
-                        mode="datetime"
-                        value={selectedDate}
-                        onChange={(date) => setSelectedDate(date || undefined)}
-                        placeholder="Select date and time"
-                      />
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Date Range</h4>
-                      <DateTimePicker
-                        mode="date"
-                        isRange
-                        rangeValue={{ start: dateRange.start || null, end: dateRange.end || null }}
-                        onRangeChange={(range) => setDateRange({ start: range.start || undefined, end: range.end || undefined })}
-                        placeholder="Select date range"
-                      />
-                    </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Inline Calendar</h4>
-                    <div className="flex justify-center">
-                      <DateTimePicker
-                        mode="date"
-                        variant="inline"
-                        value={selectedDate}
-                        onChange={(date) => setSelectedDate(date || undefined)}
-                      />
-                    </div>
-                  </div>
-                  
-                  <div className="grid md:grid-cols-3 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Compact Variant</h4>
-                      <DateTimePicker
-                        variant="compact"
-                        mode="date"
-                        value={selectedDate}
-                        onChange={(date) => setSelectedDate(date || undefined)}
-                      />
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">With Min/Max</h4>
-                      <DateTimePicker
-                        mode="date"
-                        minDate={new Date()}
-                        maxDate={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)}
-                        placeholder="Next 30 days"
-                      />
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Error State</h4>
-                      <DateTimePicker
-                        mode="date"
-                        error
-                        placeholder="Invalid date"
-                      />
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<DateTimePicker
-  mode="datetime"
-  value={selectedDate}
-  onChange={setSelectedDate}
-  minDate={new Date()}
-  timeFormat="12h"
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Form Architecture */}
-            <Card className="p-6" category={7}>
-              <ShowcaseSection
-                title="Form Composition & Validation"
-                description="How form components compose and integrate"
-                badge={{ text: "Architecture", variant: "category", category: 7 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Component Layers</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          <code>Input/Label</code> → Base elements
-                        </div>
-                        <div className="p-2 bg-muted rounded ml-4">
-                          <code>FormField</code> → Field wrapper
-                        </div>
-                        <div className="p-2 bg-muted rounded ml-8">
-                          <code>FormGroup</code> → Section organizer
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Features</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Built-in validation states
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Required field indicators
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Horizontal/vertical layouts
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          ✓ Category theming support
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-          </div>
-        </TabsContent>
-
-        {/* Navigation Section */}
-        <TabsContent value="navigation" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Navigation Components</h2>
-            <p className="text-muted-foreground">
-              Navigation patterns for breadcrumbs, menus, and pagination.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Breadcrumb Component */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Breadcrumb Component"
-                description="Navigation breadcrumbs with home icon and separators"
-                badge={{ text: "Molecule Component", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4">
-                  <Breadcrumb
-                    items={[
-                      { label: 'Dashboard', href: '/dashboard' },
-                      { label: 'Projects', href: '/projects' },
-                      { label: 'Analytics', active: true }
-                    ]}
-                    category={2}
-                  />
-                  
-                  <Breadcrumb
-                    items={[
-                      { label: 'Settings', href: '/settings' },
-                      { label: 'Users', href: '/users' },
-                      { label: 'Edit Profile', active: true }
-                    ]}
-                    showHome={false}
-                    separator={<ChevronRight className="w-3 h-3" />}
-                    category={5}
-                  />
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Breadcrumb
-  items={[
-    { label: 'Dashboard', href: '/dashboard' },
-    { label: 'Projects', href: '/projects' },
-    { label: 'Analytics', active: true }
-  ]}
-  category={2}
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Pagination Component */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="Pagination Component"
-                description="Page navigation with first/last controls and ellipsis"
-                badge={{ text: "Molecule Component", variant: "category", category: 2 }}
-              >
-                <div className="space-y-6">
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Full Pagination</h4>
-                    <Pagination
-                      currentPage={5}
-                      totalPages={12}
-                      onPageChange={(page) => console.log('Page:', page)}
-                      category={3}
-                    />
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-3">Simple Pagination</h4>
-                    <Pagination
-                      currentPage={1}
-                      totalPages={3}
-                      onPageChange={(page) => console.log('Page:', page)}
-                      showFirstLast={false}
-                      category={6}
-                      size="sm"
-                    />
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Pagination
-  currentPage={5}
-  totalPages={12}
-  onPageChange={(page) => setPage(page)}
-  category={3}
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* NavMenu Component */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="NavMenu Component"
-                description="Navigation menus with horizontal and vertical orientations"
-                badge={{ text: "Molecule Component", variant: "category", category: 3 }}
-              >
-                <div className="space-y-8">
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Horizontal Menu</h4>
-                    <NavMenu
-                      items={[
-                        { id: 'home', label: 'Home', href: '/home', icon: <Home className="w-4 h-4" />, category: 1 },
-                        { id: 'projects', label: 'Projects', href: '/projects', icon: <FileText className="w-4 h-4" />, category: 2 },
-                        { id: 'settings', label: 'Settings', href: '/settings', icon: <Settings className="w-4 h-4" />, category: 3 }
-                      ]}
-                      orientation="horizontal"
-                      defaultCategory={4}
-                    />
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Vertical Menu</h4>
-                    <div className="max-w-64">
-                      <NavMenu
-                        items={[
-                          { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: <Database className="w-4 h-4" />, category: 1 },
-                          { id: 'analytics', label: 'Analytics', href: '/analytics', icon: <TrendingUp className="w-4 h-4" />, category: 2 },
-                          { id: 'users', label: 'Users', href: '/users', icon: <Users className="w-4 h-4" />, category: 3 }
-                        ]}
-                        orientation="vertical"
-                        defaultCategory={4}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Accordion Component */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="Accordion Component"
-                description="Collapsible content sections with smooth animations and keyboard navigation"
-                badge={{ text: "Business Component", variant: "category", category: 4 }}
-              >
-                <div className="space-y-8">
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Default Accordion</h4>
-                    <Accordion
-                      items={[
-                        {
-                          id: 'section1',
-                          title: 'Getting Started',
-                          icon: <Home className="w-4 h-4" />,
-                          content: (
-                            <div className="space-y-2">
-                              <p>Welcome to our platform! This section covers the basics of getting started.</p>
-                              <ul className="list-disc list-inside space-y-1 text-sm">
-                                <li>Create your account</li>
-                                <li>Set up your profile</li>
-                                <li>Explore the dashboard</li>
-                              </ul>
-                            </div>
-                          )
-                        },
-                        {
-                          id: 'section2',
-                          title: 'API Documentation',
-                          icon: <FileText className="w-4 h-4" />,
-                          content: (
-                            <div className="space-y-2">
-                              <p>Complete API reference and integration guides.</p>
-                              <div className="grid grid-cols-2 gap-2 text-sm">
-                                <div className="p-2 bg-muted/30 rounded">Authentication</div>
-                                <div className="p-2 bg-muted/30 rounded">Endpoints</div>
-                                <div className="p-2 bg-muted/30 rounded">Examples</div>
-                                <div className="p-2 bg-muted/30 rounded">SDKs</div>
-                              </div>
-                            </div>
-                          )
-                        },
-                        {
-                          id: 'section3',
-                          title: 'Advanced Features',
-                          icon: <Settings className="w-4 h-4" />,
-                          content: (
-                            <div className="space-y-2">
-                              <p>Explore advanced functionality and customization options.</p>
-                              <p className="text-sm">Advanced features include custom integrations, webhooks, and enterprise-level analytics.</p>
-                            </div>
-                          )
-                        }
-                      ]}
-                      category={4}
-                      defaultOpen="section1"
-                    />
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Multiple Open (Bordered Variant)</h4>
-                    <Accordion
-                      items={[
-                        {
-                          id: 'faq1',
-                          title: 'How do I reset my password?',
-                          content: 'You can reset your password by clicking the "Forgot Password" link on the login page.'
-                        },
-                        {
-                          id: 'faq2',
-                          title: 'What are the subscription plans?',
-                          content: (
-                            <div className="space-y-2">
-                              <p>We offer three subscription tiers:</p>
-                              <div className="space-y-1 text-sm">
-                                <div>• <strong>Starter</strong>: $9/month - Basic features</div>
-                                <div>• <strong>Pro</strong>: $29/month - Advanced features</div>
-                                <div>• <strong>Enterprise</strong>: Custom pricing - Full suite</div>
-                              </div>
-                            </div>
-                          )
-                        },
-                        {
-                          id: 'faq3',
-                          title: 'How can I contact support?',
-                          content: 'You can reach our support team via email at support@example.com or through the in-app chat.'
-                        }
-                      ]}
-                      variant="bordered"
-                      allowMultiple={true}
-                      category={5}
-                      defaultOpen={['faq1', 'faq2']}
-                    />
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Filled Variant with Categories</h4>
-                    <Accordion
-                      items={[
-                        {
-                          id: 'analytics',
-                          title: 'Analytics & Reporting',
-                          icon: <TrendingUp className="w-4 h-4" />,
-                          content: 'Comprehensive analytics dashboard with real-time metrics, custom reports, and data export capabilities.'
-                        },
-                        {
-                          id: 'users',
-                          title: 'User Management',
-                          icon: <Users className="w-4 h-4" />,
-                          content: 'Manage user accounts, permissions, roles, and access controls across your organization.'
-                        },
-                        {
-                          id: 'database',
-                          title: 'Data Integration',
-                          icon: <Database className="w-4 h-4" />,
-                          content: 'Connect multiple data sources, set up automated pipelines, and manage data transformations.'
-                        }
-                      ]}
-                      variant="filled"
-                      category={6}
-                    />
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Accordion
-  items={[
-    {
-      id: 'section1',
-      title: 'Getting Started',
-      icon: <Home className="w-4 h-4" />,
-      content: 'Welcome to our platform!'
-    },
-    {
-      id: 'section2',
-      title: 'API Documentation',
-      content: 'Complete API reference...'
-    }
-  ]}
-  category={4}
-  defaultOpen="section1"
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Feedback Section */}
-        <TabsContent value="feedback" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Feedback Components</h2>
-            <p className="text-muted-foreground">
-              User feedback patterns including alerts, progress indicators, and notifications.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Alert Component */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Alert Component"
-                description="Status-based alerts with dismissible options"
-                badge={{ text: "Molecule Component", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4">
-                  <Alert status="success" title="Success!" dismissible>
-                    Your changes have been saved successfully.
-                  </Alert>
-                  
-                  <Alert status="warning" title="Warning" variant="outlined">
-                    Please review your settings before continuing.
-                  </Alert>
-                  
-                  <Alert status="error" dismissible>
-                    There was an error processing your request. Please try again.
-                  </Alert>
-                  
-                  <Alert status="info" variant="filled" hideIcon>
-                    This is an informational message with no icon.
-                  </Alert>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Alert status="success" title="Success!" dismissible>
-  Your changes have been saved successfully.
-</Alert>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* ProgressBar Component */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="ProgressBar Component"
-                description="Progress indicators with status colors and animations"
-                badge={{ text: "Molecule Component", variant: "category", category: 2 }}
-              >
-                <div className="space-y-6">
-                  <ProgressBar
-                    value={75}
-                    status="success"
-                    showLabel
-                    label="Upload Progress"
-                  />
-                  
-                  <ProgressBar
-                    value={45}
-                    category={3}
-                    showLabel
-                    size="lg"
-                  />
-                  
-                  <ProgressBar
-                    value={90}
-                    status="warning"
-                    variant="striped"
-                    size="sm"
-                  />
-                  
-                  <ProgressBar
-                    value={60}
-                    category={6}
-                    variant="animated"
-                    showLabel
-                  />
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<ProgressBar
-  value={75}
-  status="success"
-  showLabel
-  label="Upload Progress"
-/>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Toast Component */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="Toast Component"
-                description="Non-intrusive notifications with auto-dismiss, progress indicators, and multiple positions"
-                badge={{ text: "Molecule Component", variant: "category", category: 3 }}
-              >
-                <div className="space-y-6">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Toast Types</h4>
-                      <div className="flex flex-wrap gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => {
-                            const id = Date.now().toString();
-                            setToasts([...toasts, { id, status: 'success', title: 'Success!', message: 'Model saved successfully.' }]);
-                            setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
-                          }}
-                        >
-                          Success Toast
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => {
-                            const id = Date.now().toString();
-                            setToasts([...toasts, { id, status: 'warning', title: 'Warning', message: 'Model runtime exceeded threshold.' }]);
-                            setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
-                          }}
-                        >
-                          Warning Toast
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => {
-                            const id = Date.now().toString();
-                            setToasts([...toasts, { id, status: 'error', title: 'Error', message: 'Failed to connect to database.' }]);
-                            setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
-                          }}
-                        >
-                          Error Toast
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => {
-                            const id = Date.now().toString();
-                            setToasts([...toasts, { id, status: 'info', title: 'Info', message: 'New update available.' }]);
-                            setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
-                          }}
-                        >
-                          Info Toast
-                        </Button>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Features</h4>
-                      <ul className="text-sm text-muted-foreground space-y-1">
-                        <li>• Auto-dismiss with configurable duration</li>
-                        <li>• Progress indicator for timed dismissal</li>
-                        <li>• Multiple positioning options</li>
-                        <li>• Dismissible with close button</li>
-                        <li>• Status-based theming</li>
-                      </ul>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Toast
-  status="success"
-  title="Success!"
-  duration={5000}
-  showProgress
-  onDismiss={() => handleDismiss()}
->
-  Model saved successfully.
-</Toast>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Feedback Composition */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="Feedback System Architecture"
-                description="How feedback components integrate with the design system"
-                badge={{ text: "Architecture", variant: "category", category: 3 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Status Theming</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-status-success/10 text-status-success rounded">
-                          Success states use <code>--status-success</code>
-                        </div>
-                        <div className="p-2 bg-status-warning/10 text-status-warning rounded">
-                          Warning states use <code>--status-warning</code>
-                        </div>
-                        <div className="p-2 bg-status-error/10 text-status-error rounded">
-                          Error states use <code>--status-error</code>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Toast Notifications</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          <p className="font-medium mb-1">Toast component features:</p>
-                          <ul className="list-disc list-inside space-y-1 text-muted-foreground">
-                            <li>Auto-dismiss timer</li>
-                            <li>Progress indicator</li>
-                            <li>Stacking behavior</li>
-                            <li>Status-based styling</li>
-                          </ul>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-          </div>
-        </TabsContent>
-
-        {/* States Section */}
-        <TabsContent value="states" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">State Components</h2>
-            <p className="text-muted-foreground">
-              Loading states, empty states, and error states for better user experience.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Loading States */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Loading States"
-                description="Base loading indicators and skeleton components"
-                badge={{ text: "UI Components", variant: "category", category: 1 }}
-              >
-                <div className="space-y-4">
-                  <div className="flex items-center gap-4">
-                    <Spinner size="sm" />
-                    <Spinner size="md" />
-                    <Spinner size="lg" />
-                    <span className="text-sm text-muted-foreground">Spinner component</span>
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-3/4" />
-                    <Skeleton className="h-4 w-1/2" />
-                    <span className="text-sm text-muted-foreground">Skeleton loader</span>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<Spinner size="md" />
-<Skeleton className="h-4 w-full" />`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* EmptyState Component */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="EmptyState Component"
-                description="Informative empty states with actions for different scenarios"
-                badge={{ text: "Business Component", variant: "category", category: 2 }}
-              >
-                <div className="grid md:grid-cols-2 gap-6">
-                  <EmptyState
-                    variant="no-data"
-                    title="No models found"
-                    description="Get started by creating your first dbt model."
-                    action={{
-                      label: "Create Model",
-                      onClick: () => alert('Create model!')
-                    }}
-                  />
-                  
-                  <EmptyState
-                    variant="no-results"
-                    title="No search results"
-                    description="Try adjusting your search terms."
-                    action={{
-                      label: "Clear Filters",
-                      onClick: () => alert('Clear filters!')
-                    }}
-                    secondaryAction={{
-                      label: "Browse All",
-                      onClick: () => alert('Browse all!')
-                    }}
-                  />
-                  
-                  <EmptyState
-                    variant="error"
-                    title="Connection failed"
-                    description="Unable to connect to the database."
-                    action={{
-                      label: "Retry",
-                      onClick: () => alert('Retry!')
-                    }}
-                  />
-                  
-                  <EmptyState
-                    variant="loading"
-                    title="Loading data"
-                    description="Please wait while we fetch your data."
-                  />
-                </div>
-                
-                {showCode && (
-                  <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                    <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                      <code>{`<EmptyState
-  variant="no-data"
-  title="No models found"
-  description="Get started by creating your first model."
-  action={{
-    label: "Create Model",
-    onClick: () => createModel()
-  }}
-/>`}</code>
-                    </pre>
-                  </div>
-                )}
-              </ShowcaseSection>
-            </Card>
-
-            {/* State Architecture */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="State Management Architecture"
-                description="How state components compose and provide user feedback"
-                badge={{ text: "Architecture", variant: "category", category: 3 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">State Types</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          <code>loading</code> → Data fetching
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>no-data</code> → Empty initial state
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>no-results</code> → Search/filter empty
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>error</code> → Operation failed
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Components Used</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          Uses <code>Button</code> for actions
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          Uses <code>Card</code> for container
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          SVG illustrations for visual interest
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          Consistent typography hierarchy
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-          </div>
-        </TabsContent>
-
-
-        {/* Typography Section */}
-        <TabsContent value="typography" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Typography System</h2>
-            <p className="text-muted-foreground">
-              From base typography to data-focused patterns optimized for analytics interfaces.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Base Typography */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Base Typography"
-                description="Foundation type scale for headings, body text, and UI elements"
-                badge={{ text: "UI Typography", variant: "category", category: 1 }}
-              >
-                <div className="space-y-6">
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Headings</h4>
-                    <div className="space-y-3">
-                      <h1 className="text-4xl font-bold">Heading 1 - 36px Bold</h1>
-                      <h2 className="text-3xl font-semibold">Heading 2 - 30px Semibold</h2>
-                      <h3 className="text-2xl font-semibold">Heading 3 - 24px Semibold</h3>
-                      <h4 className="text-xl font-medium">Heading 4 - 20px Medium</h4>
-                      <h5 className="text-lg font-medium">Heading 5 - 18px Medium</h5>
-                      <h6 className="text-base font-medium">Heading 6 - 16px Medium</h6>
-                    </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Body Text</h4>
-                    <div className="space-y-3">
-                      <p className="text-lg">Large body text for emphasis - 18px regular</p>
-                      <p className="text-base">Base body text for content - 16px regular</p>
-                      <p className="text-sm">Small body text for secondary content - 14px regular</p>
-                      <p className="text-xs">Extra small text for metadata - 12px regular</p>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>
-                        {`<h1 className="text-4xl font-bold">Heading</h1>
-<p className="text-base">Body text</p>`}
-                        </code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Data Typography */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="Data Typography Patterns"
-                description="Specialized typography for data presentation and analytics"
-                badge={{ text: "Business Patterns", variant: "category", category: 2 }}
-              >
-                <div className="space-y-6">
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <div>
-                      <h4 className="text-sm font-medium mb-4">Data Display</h4>
-                      <div className="space-y-4">
-                        <Card className="p-4 bg-background">
-                          <div className="text-data-label mb-1">METRIC LABEL</div>
-                          <div className="text-data-value">1,234.56</div>
-                          <div className="text-data-meta">+12.3% from last period</div>
-                        </Card>
-                        
-                        <Card className="p-4 bg-background">
-                          <div className="text-data-label mb-1">STATUS</div>
-                          <div className="text-data-value text-status-success">Healthy</div>
-                          <div className="text-data-meta">All systems operational</div>
-                        </Card>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-4">Table Typography</h4>
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead className="text-data-label">COLUMN</TableHead>
-                            <TableHead className="text-data-label text-right">VALUE</TableHead>
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          <TableRow>
-                            <TableCell className="text-data-value">Row Item</TableCell>
-                            <TableCell className="text-data-value text-right">123</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell className="text-data-meta">Metadata</TableCell>
-                            <TableCell className="text-data-meta text-right">Info</TableCell>
-                          </TableRow>
-                        </TableBody>
-                      </Table>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <pre className="text-sm font-mono text-foreground overflow-x-auto">
-                        <code>{`<div className="text-data-label">METRIC LABEL</div>
-<div className="text-data-value">1,234.56</div>
-<div className="text-data-meta">+12.3% from last period</div>`}</code>
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Typography Utilities */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="Typography Utilities"
-                description="Utility classes for text styling and layout"
-                badge={{ text: "Utilities", variant: "category", category: 3 }}
-              >
-                <div className="space-y-6">
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <div>
-                      <h4 className="text-sm font-medium mb-4">Text Colors</h4>
-                      <div className="space-y-2">
-                        <p className="text-foreground">text-foreground - Primary text</p>
-                        <p className="text-muted-foreground">text-muted-foreground - Secondary text</p>
-                        <p className="text-primary">text-primary - Brand color</p>
-                        <p className="text-status-success">text-status-success - Success state</p>
-                        <p className="text-status-error">text-status-error - Error state</p>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-4">Font Weights</h4>
-                      <div className="space-y-2">
-                        <p className="font-thin">font-thin - 100</p>
-                        <p className="font-light">font-light - 300</p>
-                        <p className="font-normal">font-normal - 400</p>
-                        <p className="font-medium">font-medium - 500</p>
-                        <p className="font-semibold">font-semibold - 600</p>
-                        <p className="font-bold">font-bold - 700</p>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div>
-                    <h4 className="text-sm font-medium mb-4">Text Alignment & Spacing</h4>
-                    <div className="grid md:grid-cols-3 gap-4">
-                      <Card className="p-4 text-left" category={1}>
-                        <p className="font-medium">Left Aligned</p>
-                        <p className="text-sm text-muted-foreground">text-left</p>
-                      </Card>
-                      <Card className="p-4 text-center" category={2}>
-                        <p className="font-medium">Center Aligned</p>
-                        <p className="text-sm text-muted-foreground">text-center</p>
-                      </Card>
-                      <Card className="p-4 text-right" category={3}>
-                        <p className="font-medium">Right Aligned</p>
-                        <p className="text-sm text-muted-foreground">text-right</p>
-                      </Card>
-                    </div>
-                  </div>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Typography in Components */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="Typography in Context"
-                description="How typography works within component compositions"
-                badge={{ text: "Integration", variant: "category", category: 4 }}
-              >
-                <div className="space-y-6">
-                  <div className="grid md:grid-cols-2 gap-6">
-                    <StatCard
-                      title="Typography in StatCard"
-                      value="99.9%"
-                      subtitle="Uses data typography patterns"
-                      category={1}
-                      icon={<Database className="w-5 h-5" />}
-                      trend={{ value: 2.3, label: "improvement" }}
-                    />
-                    
-                    <Card className="p-4" category={2}>
-                      <div className="flex items-start justify-between mb-2">
-                        <h3 className="text-lg font-semibold">Card Title</h3>
-                        <DataBadge variant="category" category={2} size="sm">Active</DataBadge>
-                      </div>
-                      <p className="text-sm text-muted-foreground mb-4">
-                        Card description using muted foreground color for secondary text.
-                      </p>
-                      <div className="flex items-center gap-4">
-                        <div>
-                          <div className="text-data-label">STATUS</div>
-                          <div className="text-data-value">Online</div>
-                        </div>
-                        <div>
-                          <div className="text-data-label">UPTIME</div>
-                          <div className="text-data-value">99.9%</div>
-                        </div>
-                      </div>
-                    </Card>
-                  </div>
-                  
-                  <Alert status="info" title="Typography Best Practices">
-                    <ul className="list-disc list-inside space-y-1 text-sm">
-                      <li>Use <code className="text-xs bg-muted px-1 rounded">text-data-label</code> for metric labels</li>
-                      <li>Use <code className="text-xs bg-muted px-1 rounded">text-data-value</code> for prominent values</li>
-                      <li>Use <code className="text-xs bg-muted px-1 rounded">text-muted-foreground</code> for secondary text</li>
-                      <li>Maintain consistent hierarchy with font sizes and weights</li>
-                    </ul>
-                  </Alert>
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Typography Architecture */}
-            <Card className="p-6" category={5}>
-              <ShowcaseSection
-                title="Typography System Architecture"
-                description="Design tokens and CSS variables powering the typography system"
-                badge={{ text: "Architecture", variant: "category", category: 5 }}
-              >
-                <div className="space-y-4">
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Type Scale</h4>
-                      <div className="space-y-2 text-xs font-mono">
-                        <div className="p-2 bg-muted rounded">
-                          --font-size-xs: 0.75rem (12px)
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          --font-size-sm: 0.875rem (14px)
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          --font-size-base: 1rem (16px)
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          --font-size-lg: 1.125rem (18px)
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          --font-size-xl: 1.25rem (20px)
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div>
-                      <h4 className="text-sm font-medium mb-3">Data Typography Classes</h4>
-                      <div className="space-y-2 text-xs">
-                        <div className="p-2 bg-muted rounded">
-                          <code>.text-data-label</code> → Uppercase, smaller, medium weight
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>.text-data-value</code> → Larger, semibold, high contrast
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>.text-data-meta</code> → Smaller, muted color
-                        </div>
-                        <div className="p-2 bg-muted rounded">
-                          <code>.text-data-*</code> → Sized variants (xs, sm, base, lg, xl)
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  {showCode && (
-                    <div className="mt-4 p-4 bg-muted border border-border rounded-md">
-                      <h5 className="font-medium mb-2">Usage Guidelines</h5>
-                      <ul className="text-sm space-y-1 text-muted-foreground">
-                        <li>• Use base typography for general UI text</li>
-                        <li>• Use data typography for metrics, values, and data presentation</li>
-                        <li>• Maintain consistent hierarchy within components</li>
-                        <li>• Leverage color utilities for semantic meaning</li>
-                      </ul>
-                    </div>
-                  )}
-                </div>
-              </ShowcaseSection>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Palettes Section */}
-        <TabsContent value="palettes" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Color System & Palettes</h2>
-            <p className="text-muted-foreground">
-              Complete color system including individual color swatches and predefined palette combinations for data visualization and interface design.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Category Colors - Individual Swatches */}
-            <Card className="p-6" category={1}>
-              <ShowcaseSection
-                title="Category Colors"
-                description="Primary colors for categorizing different types of data, models, and content sections."
-                badge={{ text: "Data Classification", variant: "category", category: 1 }}
-              >
-                <div className="grid grid-cols-4 md:grid-cols-8 gap-4">
-                {[
-                  { num: 1, name: 'Blue', usage: 'Primary data' },
-                  { num: 2, name: 'Teal', usage: 'Models' },
-                  { num: 3, name: 'Orange', usage: 'Tests' },
-                  { num: 4, name: 'Purple', usage: 'Sources' },
-                  { num: 5, name: 'Pink', usage: 'Analytics' },
-                  { num: 6, name: 'Green', usage: 'Jobs' },
-                  { num: 7, name: 'Yellow', usage: 'Documentation' },
-                  { num: 8, name: 'Red', usage: 'Issues' }
-                ].map(category => (
-                  <ColorSwatch
-                    key={category.num}
-                    color={`hsl(var(--category-${category.num}))`}
-                    name={category.name}
-                    label={category.usage}
-                    interactive
-                  />
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Category Palette - Combined */}
-            <Card className="p-6" category={6}>
-              <ShowcaseSection
-                title="Category Palette"
-                description="Complete 8-color palette for data categorization with excellent contrast and accessibility."
-                badge={{ text: "8 Colors", variant: "category", category: 6 }}
-              >
-                <div className="flex gap-1 rounded overflow-hidden border border-border">
-                {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
-                  <div 
-                    key={num}
-                    className="flex-1 h-24 group relative cursor-pointer"
-                    style={{ backgroundColor: `hsl(var(--category-${num}))` }}
-                  >
-                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 flex items-center justify-center">
-                      <span className="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity">
-                        {num}
-                      </span>
-                    </div>
-                  </div>
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Status Colors - Individual Swatches */}
-            <Card className="p-6" category={2}>
-              <ShowcaseSection
-                title="Status Colors"
-                description="Semantic colors for indicating status, health, and operational states across the system."
-                badge={{ text: "System States", variant: "status", status: "success" }}
-              >
-                <div className="grid grid-cols-5 gap-4">
-                {[
-                  { name: 'Success', usage: 'Completed', cssVar: '--status-success' },
-                  { name: 'Warning', usage: 'Attention', cssVar: '--status-warning' },
-                  { name: 'Error', usage: 'Failed', cssVar: '--status-error' },
-                  { name: 'Info', usage: 'Information', cssVar: '--status-info' },
-                  { name: 'Neutral', usage: 'Pending', cssVar: '--status-neutral' }
-                ].map(color => (
-                  <ColorSwatch
-                    key={color.name}
-                    color={`hsl(var(${color.cssVar}))`}
-                    name={color.name}
-                    label={color.usage}
-                    interactive
-                  />
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Status Palette - Combined */}
-            <Card className="p-6" category={7}>
-              <ShowcaseSection
-                title="Status Palette"
-                description="Semantic color palette for system states and operational indicators."
-                badge={{ text: "5 States", variant: "status", status: "info" }}
-              >
-                <div className="flex gap-1 rounded overflow-hidden border border-border">
-                {[
-                  { name: 'Success', var: '--status-success' },
-                  { name: 'Warning', var: '--status-warning' },
-                  { name: 'Error', var: '--status-error' },
-                  { name: 'Info', var: '--status-info' },
-                  { name: 'Neutral', var: '--status-neutral' }
-                ].map(status => (
-                  <div 
-                    key={status.name}
-                    className="flex-1 h-24 group relative cursor-pointer"
-                    style={{ backgroundColor: `hsl(var(${status.var}))` }}
-                  >
-                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 flex items-center justify-center">
-                      <span className="text-white font-medium text-xs opacity-0 group-hover:opacity-100 transition-opacity">
-                        {status.name}
-                      </span>
-                    </div>
-                  </div>
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Extended Grays - Individual Swatches */}
-            <Card className="p-6" category={3}>
-              <ShowcaseSection
-                title="Extended Grays"
-                description="Comprehensive gray scale for backgrounds, borders, text, and subtle UI elements."
-                badge={{ text: "Neutrals", variant: "status", status: "neutral" }}
-              >
-                <div className="grid grid-cols-6 md:grid-cols-11 gap-2">
-                {[25, 75, 150, 250, 350, 450, 550, 650, 750, 850, 925].map(shade => (
-                  <ColorSwatch
-                    key={shade}
-                    color={`hsl(var(--gray-${shade}))`}
-                    name={shade.toString()}
-                    size="sm"
-                    interactive
-                  />
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* Gray Palette - Combined */}
-            <Card className="p-6" category={8}>
-              <ShowcaseSection
-                title="Extended Gray Palette"
-                description="Comprehensive neutral palette for backgrounds, borders, and subtle interface elements."
-                badge={{ text: "11 Shades", variant: "status", status: "neutral" }}
-              >
-                <div className="flex gap-1 rounded overflow-hidden border border-border">
-                {[25, 75, 150, 250, 350, 450, 550, 650, 750, 850, 925].map(shade => (
-                  <div 
-                    key={shade}
-                    className="flex-1 h-24 group relative cursor-pointer"
-                    style={{ backgroundColor: `hsl(var(--gray-${shade}))` }}
-                  >
-                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 flex items-center justify-center">
-                      <span className="text-white font-medium text-xs opacity-0 group-hover:opacity-100 transition-opacity">
-                        {shade}
-                      </span>
-                    </div>
-                  </div>
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-
-            {/* UI System Colors - Individual Swatches */}
-            <Card className="p-6" category={4}>
-              <ShowcaseSection
-                title="UI System Colors"
-                description="Core UI colors for backgrounds, surfaces, borders, and interactive elements."
-                badge={{ text: "Interface", variant: "category", category: 4 }}
-              >
-                <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
-                {[
-                  { name: 'Background', cssVar: '--background', usage: 'Page background' },
-                  { name: 'Foreground', cssVar: '--foreground', usage: 'Primary text' },
-                  { name: 'Card', cssVar: '--card', usage: 'Card backgrounds' },
-                  { name: 'Border', cssVar: '--border', usage: 'Dividers' },
-                  { name: 'Primary', cssVar: '--primary', usage: 'Brand color' },
-                  { name: 'Secondary', cssVar: '--secondary', usage: 'Secondary actions' }
-                ].map(color => (
-                  <ColorSwatch
-                    key={color.name}
-                    color={`hsl(var(${color.cssVar}))`}
-                    name={color.name}
-                    label={color.usage}
-                    size="lg"
-                    interactive
-                  />
-                ))}
-                </div>
-              </ShowcaseSection>
-            </Card>
-          </div>
-        </TabsContent>
-
-        {/* Debug Section */}
-        <TabsContent value="debug" className="space-y-6">
-          <div className="space-y-2 mb-8">
-            <h2 className="text-2xl font-bold text-foreground">Debug Tools</h2>
-            <p className="text-muted-foreground">
-              Development utilities for testing, debugging, and validating the design system.
-            </p>
-          </div>
-
-          <div className="grid gap-6">
-            {/* Color Variables Debug */}
-            <Card className="p-6" category={8}>
-              <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
-                CSS Variables
-                <DataBadge variant="category" category={8} size="sm">Debug</DataBadge>
-              </h3>
-              <p className="text-sm text-muted-foreground mb-6">
-                Live CSS custom property values currently applied to the system.
-              </p>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm font-mono">
-                {[
-                  '--category-1', '--category-2', '--category-3', '--category-4',
-                  '--status-success', '--status-warning', '--status-error', '--status-info',
-                  '--background', '--foreground', '--border', '--primary'
-                ].map(variable => (
-                  <Card key={variable} className="p-3">
-                    <div className="text-xs text-muted-foreground mb-1">{variable}</div>
-                    <div 
-                      className="w-full h-8 rounded border border-border"
-                      style={{ backgroundColor: `hsl(var(${variable}))` }}
-                    />
-                  </Card>
-                ))}
-              </div>
-            </Card>
-
-            {/* Component States */}
-            <Card className="p-6" category={5}>
-              <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
-                Component States
-                <DataBadge variant="status" status="info" size="sm">Interactive</DataBadge>
-              </h3>
-              <p className="text-sm text-muted-foreground mb-6">
-                Test different states and interactions of design system components.
-              </p>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                {[1, 2, 3, 4].map(category => (
-                  <Card key={category} category={category as 1 | 2 | 3 | 4} className="p-4">
-                    <h4 className="font-medium mb-2">Category {category}</h4>
-                    <DataBadge variant="category" category={category as 1 | 2 | 3 | 4} size="sm">
-                      Test Badge
-                    </DataBadge>
-                    <div className="mt-3 space-y-2">
-                      <div className="text-xs text-muted-foreground">
-                        Color: hsl(var(--category-{category}))
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        Background: hsl(var(--category-{category}) / 0.02)
-                      </div>
-                    </div>
-                  </Card>
-                ))}
-              </div>
-            </Card>
-          </div>
-        </TabsContent>
-      </Tabs>
-        </div>
-      </div>
-
-      {/* Toast Container */}
-      <ToastContainer
-        toasts={toasts.map(t => ({
-          id: t.id,
-          status: t.status,
-          title: t.title,
-          children: t.message,
-          duration: 5000,
-          showProgress: true,
-          onDismiss: () => setToasts(prev => prev.filter(toast => toast.id !== t.id))
-        }))}
-        position="top-right"
-      />
-
-      {/* Footer */}
-      <footer className="bg-card/30 backdrop-blur-sm border-t border-border/50">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <IconBadge 
-                variant="category" 
-                category={1} 
-                size="sm"
-              >
-                DT
-              </IconBadge>
-              <div>
-                <p className="text-sm font-medium text-foreground">Data Trust Navigator</p>
-                <p className="text-xs text-muted-foreground">Design System Showcase • Built with Atomic Architecture</p>
-              </div>
-            </div>
-            
-            <div className="flex items-center space-x-4">
-              <DataBadge variant="category" category={1} size="sm">Design System</DataBadge>
-              <DataBadge variant="status" status="success" size="sm">v1.0</DataBadge>
-            </div>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-};