@delightui/components 0.1.104 → 0.1.106

package/docs/components/organisms/TabItem.md

@@ -0,0 +1,1091 @@
+# TabItem
+
+## Description
+
+A clickable tab item component that serves as the interactive element for switching between different tab content panels. TabItem extends Button functionality with specialized behavior for tab navigation, supporting various styles and states. It works in conjunction with TabContent to create comprehensive tabbed interfaces with proper accessibility and user experience.
+
+## Aliases
+
+- TabItem
+- Tab Button
+- Tab Header
+- Tab Navigation
+- Tab Selector
+
+## Props Breakdown
+
+**Extends:** `ButtonProps` (excluding `actionType`, `appearance`, `size`, `style`, `type`)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `value` | `number \| string` | - | Yes | The tabs value used for determining which tab is selected |
+| `defaultTab` | `boolean` | `false` | No | True means that this tab will be displayed initially |
+| `style` | `TabItemStyleEnum` | `'Filled'` | No | The tab item style to apply ('Filled' \| 'Underlined') |
+| `loading` | `boolean` | `false` | No | Indicates if the button is in a loading state |
+| `disabled` | `boolean` | `false` | No | Specifies if the button is disabled |
+| `leadingIcon` | `ReactNode` | - | No | Icon to be displayed before the button's content |
+| `trailingIcon` | `ReactNode` | - | No | Icon to be displayed after the button's content |
+| `onClick` | `(event?: MouseEvent<HTMLElement>) => void` | - | No | Click event handler for the button |
+| `className` | `string` | - | No | Additional CSS class names |
+| `children` | `ReactNode` | - | No | Content to display in the tab item |
+
+Plus all standard HTML button attributes (except excluded ButtonProps).
+
+## Examples
+
+### Basic Tab Items
+
+```tsx
+import { Tabs, TabItem, TabContent } from '@delightui/components';
+
+function BasicTabItemExample() {
+  return (
+    <Tabs>
+      <div style={{ display: 'flex', borderBottom: '1px solid #e0e0e0' }}>
+        <TabItem value="dashboard" defaultTab>
+          Dashboard
+        </TabItem>
+        <TabItem value="analytics">
+          Analytics
+        </TabItem>
+        <TabItem value="settings">
+          Settings
+        </TabItem>
+        <TabItem value="profile">
+          Profile
+        </TabItem>
+      </div>
+      
+      <TabContent value="dashboard">
+        <div style={{ padding: '20px' }}>
+          <h2>Dashboard</h2>
+          <p>Welcome to your main dashboard with overview metrics and quick actions.</p>
+        </div>
+      </TabContent>
+      
+      <TabContent value="analytics">
+        <div style={{ padding: '20px' }}>
+          <h2>Analytics</h2>
+          <p>View detailed analytics and performance metrics for your account.</p>
+        </div>
+      </TabContent>
+      
+      <TabContent value="settings">
+        <div style={{ padding: '20px' }}>
+          <h2>Settings</h2>
+          <p>Configure your account preferences and application settings.</p>
+        </div>
+      </TabContent>
+      
+      <TabContent value="profile">
+        <div style={{ padding: '20px' }}>
+          <h2>Profile</h2>
+          <p>Manage your personal information and account details.</p>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Items with Icons
+
+```tsx
+import { Tabs, TabItem, TabContent, Icon } from '@delightui/components';
+
+function IconTabItemExample() {
+  return (
+    <Tabs style="Underlined">
+      <div style={{ display: 'flex' }}>
+        <TabItem 
+          value="home" 
+          defaultTab
+          leadingIcon={<Icon name="Home" />}
+        >
+          Home
+        </TabItem>
+        <TabItem 
+          value="search"
+          leadingIcon={<Icon name="SearchOutlined" />}
+        >
+          Search
+        </TabItem>
+        <TabItem 
+          value="notifications"
+          leadingIcon={<Icon name="Bell" />}
+          trailingIcon={<span style={{ 
+            backgroundColor: '#f44336', 
+            color: 'white', 
+            borderRadius: '10px', 
+            padding: '2px 6px', 
+            fontSize: '12px' 
+          }}>3</span>}
+        >
+          Notifications
+        </TabItem>
+        <TabItem 
+          value="messages"
+          leadingIcon={<Icon name="Message" />}
+          trailingIcon={<span style={{ 
+            backgroundColor: '#4caf50', 
+            color: 'white', 
+            borderRadius: '50%', 
+            width: '8px', 
+            height: '8px', 
+            display: 'inline-block' 
+          }} />}
+        >
+          Messages
+        </TabItem>
+        <TabItem 
+          value="profile"
+          leadingIcon={<Icon name="Person" />}
+        >
+          Profile
+        </TabItem>
+      </div>
+      
+      <TabContent value="home">
+        <div style={{ padding: '24px' }}>
+          <h2>🏠 Home Feed</h2>
+          <p>Stay updated with the latest posts and activities from your network.</p>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', marginBottom: '12px' }}>
+              <strong>John Doe</strong> shared a new post
+              <p style={{ margin: '8px 0 0 0', color: '#666' }}>Just completed an amazing project! 🎉</p>
+            </div>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <strong>Jane Smith</strong> updated their status
+              <p style={{ margin: '8px 0 0 0', color: '#666' }}>Working on some exciting new features!</p>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="search">
+        <div style={{ padding: '24px' }}>
+          <h2>🔍 Search</h2>
+          <p>Find people, posts, and content across the platform.</p>
+        </div>
+      </TabContent>
+      
+      <TabContent value="notifications">
+        <div style={{ padding: '24px' }}>
+          <h2>🔔 Notifications</h2>
+          <p>You have 3 unread notifications.</p>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ padding: '12px', backgroundColor: '#e3f2fd', borderRadius: '8px', marginBottom: '8px' }}>
+              <strong>New follower:</strong> Alex Johnson started following you
+            </div>
+            <div style={{ padding: '12px', backgroundColor: '#e8f5e8', borderRadius: '8px', marginBottom: '8px' }}>
+              <strong>Like:</strong> Someone liked your recent post
+            </div>
+            <div style={{ padding: '12px', backgroundColor: '#fff3e0', borderRadius: '8px' }}>
+              <strong>Comment:</strong> Sarah commented on your photo
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="messages">
+        <div style={{ padding: '24px' }}>
+          <h2>💬 Messages</h2>
+          <p>Chat with your connections and stay in touch.</p>
+        </div>
+      </TabContent>
+      
+      <TabContent value="profile">
+        <div style={{ padding: '24px' }}>
+          <h2>👤 Profile</h2>
+          <p>View and edit your profile information.</p>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Items with Loading States
+
+```tsx
+import { Tabs, TabItem, TabContent, Spinner, Text } from '@delightui/components';
+
+function LoadingTabItemExample() {
+  const [loadingTabs, setLoadingTabs] = useState<Set<string>>(new Set());
+  const [loadedData, setLoadedData] = useState<Set<string>>(new Set());
+
+  const handleTabClick = async (tabValue: string) => {
+    if (loadedData.has(tabValue)) return;
+    
+    setLoadingTabs(prev => new Set(prev).add(tabValue));
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    setLoadingTabs(prev => {
+      const next = new Set(prev);
+      next.delete(tabValue);
+      return next;
+    });
+    
+    setLoadedData(prev => new Set(prev).add(tabValue));
+  };
+
+  return (
+    <Tabs>
+      <div style={{ display: 'flex' }}>
+        <TabItem 
+          value="reports" 
+          defaultTab
+          loading={loadingTabs.has('reports')}
+          onClick={() => handleTabClick('reports')}
+        >
+          Reports
+        </TabItem>
+        <TabItem 
+          value="analytics"
+          loading={loadingTabs.has('analytics')}
+          onClick={() => handleTabClick('analytics')}
+        >
+          Analytics
+        </TabItem>
+        <TabItem 
+          value="exports"
+          loading={loadingTabs.has('exports')}
+          onClick={() => handleTabClick('exports')}
+        >
+          Exports
+        </TabItem>
+        <TabItem 
+          value="archive"
+          loading={loadingTabs.has('archive')}
+          onClick={() => handleTabClick('archive')}
+        >
+          Archive
+        </TabItem>
+      </div>
+      
+      <TabContent value="reports">
+        <div style={{ padding: '24px', textAlign: 'center' }}>
+          {loadingTabs.has('reports') ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Loading reports...</Text>
+            </div>
+          ) : loadedData.has('reports') ? (
+            <div>
+              <h2>📊 Reports Dashboard</h2>
+              <p>Your reports have been loaded successfully!</p>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginTop: '20px' }}>
+                <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <Text size="Large" weight="Bold">142</Text>
+                  <Text color="secondary">Total Reports</Text>
+                </div>
+                <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <Text size="Large" weight="Bold">28</Text>
+                  <Text color="secondary">This Month</Text>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div>
+              <h2>📊 Reports</h2>
+              <p>Click the Reports tab to load your report data.</p>
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="analytics">
+        <div style={{ padding: '24px', textAlign: 'center' }}>
+          {loadingTabs.has('analytics') ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Analyzing data...</Text>
+            </div>
+          ) : loadedData.has('analytics') ? (
+            <div>
+              <h2>📈 Analytics</h2>
+              <p>Analytics data loaded and ready for analysis!</p>
+            </div>
+          ) : (
+            <div>
+              <h2>📈 Analytics</h2>
+              <p>Click the Analytics tab to load your analytics data.</p>
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="exports">
+        <div style={{ padding: '24px', textAlign: 'center' }}>
+          {loadingTabs.has('exports') ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Preparing exports...</Text>
+            </div>
+          ) : loadedData.has('exports') ? (
+            <div>
+              <h2>📁 Exports</h2>
+              <p>Export files are ready for download!</p>
+            </div>
+          ) : (
+            <div>
+              <h2>📁 Exports</h2>
+              <p>Click the Exports tab to prepare your export files.</p>
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="archive">
+        <div style={{ padding: '24px', textAlign: 'center' }}>
+          {loadingTabs.has('archive') ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Loading archive...</Text>
+            </div>
+          ) : loadedData.has('archive') ? (
+            <div>
+              <h2>🗄️ Archive</h2>
+              <p>Archived items loaded successfully!</p>
+            </div>
+          ) : (
+            <div>
+              <h2>🗄️ Archive</h2>
+              <p>Click the Archive tab to access archived content.</p>
+            </div>
+          )}
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Disabled Tab Items
+
+```tsx
+import { Tabs, TabItem, TabContent, Text, Button } from '@delightui/components';
+
+function DisabledTabItemExample() {
+  const [userRole, setUserRole] = useState<'user' | 'admin' | 'moderator'>('user');
+  
+  const hasAccess = (requiredRole: string) => {
+    const roles = { user: 1, moderator: 2, admin: 3 };
+    return roles[userRole] >= roles[requiredRole as keyof typeof roles];
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '20px' }}>
+        <Text weight="Bold">Current Role: {userRole}</Text>
+        <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+          <Button 
+            size="Small" 
+            type={userRole === 'user' ? 'Filled' : 'Outlined'}
+            onClick={() => setUserRole('user')}
+          >
+            User
+          </Button>
+          <Button 
+            size="Small" 
+            type={userRole === 'moderator' ? 'Filled' : 'Outlined'}
+            onClick={() => setUserRole('moderator')}
+          >
+            Moderator
+          </Button>
+          <Button 
+            size="Small" 
+            type={userRole === 'admin' ? 'Filled' : 'Outlined'}
+            onClick={() => setUserRole('admin')}
+          >
+            Admin
+          </Button>
+        </div>
+      </div>
+
+      <Tabs>
+        <div style={{ display: 'flex' }}>
+          <TabItem value="dashboard" defaultTab>
+            Dashboard
+          </TabItem>
+          <TabItem 
+            value="users"
+            disabled={!hasAccess('moderator')}
+            title={!hasAccess('moderator') ? 'Requires Moderator access' : ''}
+          >
+            User Management
+          </TabItem>
+          <TabItem 
+            value="content"
+            disabled={!hasAccess('moderator')}
+            title={!hasAccess('moderator') ? 'Requires Moderator access' : ''}
+          >
+            Content Moderation
+          </TabItem>
+          <TabItem 
+            value="system"
+            disabled={!hasAccess('admin')}
+            title={!hasAccess('admin') ? 'Requires Admin access' : ''}
+          >
+            System Settings
+          </TabItem>
+          <TabItem 
+            value="logs"
+            disabled={!hasAccess('admin')}
+            title={!hasAccess('admin') ? 'Requires Admin access' : ''}
+          >
+            Audit Logs
+          </TabItem>
+        </div>
+        
+        <TabContent value="dashboard">
+          <div style={{ padding: '24px' }}>
+            <h2>Dashboard</h2>
+            <p>Welcome to your dashboard! This section is available to all users.</p>
+            <div style={{ marginTop: '20px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
+              <Text>Your current role ({userRole}) provides access to this section.</Text>
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="users">
+          <div style={{ padding: '24px' }}>
+            <h2>User Management</h2>
+            <p>Manage user accounts, permissions, and access levels.</p>
+            <Text color="secondary">
+              This feature requires Moderator or Admin privileges.
+            </Text>
+          </div>
+        </TabContent>
+        
+        <TabContent value="content">
+          <div style={{ padding: '24px' }}>
+            <h2>Content Moderation</h2>
+            <p>Review and moderate user-generated content.</p>
+            <Text color="secondary">
+              This feature requires Moderator or Admin privileges.
+            </Text>
+          </div>
+        </TabContent>
+        
+        <TabContent value="system">
+          <div style={{ padding: '24px' }}>
+            <h2>System Settings</h2>
+            <p>Configure system-wide settings and preferences.</p>
+            <Text color="secondary">
+              This feature requires Admin privileges.
+            </Text>
+          </div>
+        </TabContent>
+        
+        <TabContent value="logs">
+          <div style={{ padding: '24px' }}>
+            <h2>Audit Logs</h2>
+            <p>View system audit logs and security events.</p>
+            <Text color="secondary">
+              This feature requires Admin privileges.
+            </Text>
+          </div>
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
+```
+
+### Tab Items with Badges and Counters
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function BadgeTabItemExample() {
+  const [counts, setCounts] = useState({
+    inbox: 15,
+    sent: 0,
+    drafts: 3,
+    spam: 142,
+    trash: 8
+  });
+
+  const Badge = ({ count, type = 'primary' }: { count: number; type?: 'primary' | 'danger' | 'warning' }) => {
+    if (count === 0) return null;
+    
+    const colors = {
+      primary: { bg: '#2196f3', color: 'white' },
+      danger: { bg: '#f44336', color: 'white' },
+      warning: { bg: '#ff9800', color: 'white' }
+    };
+    
+    const style = colors[type];
+    
+    return (
+      <span style={{
+        backgroundColor: style.bg,
+        color: style.color,
+        borderRadius: '12px',
+        padding: '2px 8px',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        marginLeft: '8px',
+        minWidth: '20px',
+        textAlign: 'center',
+        display: 'inline-block'
+      }}>
+        {count > 99 ? '99+' : count}
+      </span>
+    );
+  };
+
+  return (
+    <Tabs style="Underlined">
+      <div style={{ display: 'flex' }}>
+        <TabItem 
+          value="inbox" 
+          defaultTab
+          trailingIcon={<Badge count={counts.inbox} type="primary" />}
+        >
+          Inbox
+        </TabItem>
+        <TabItem 
+          value="sent"
+          trailingIcon={<Badge count={counts.sent} />}
+        >
+          Sent
+        </TabItem>
+        <TabItem 
+          value="drafts"
+          trailingIcon={<Badge count={counts.drafts} type="warning" />}
+        >
+          Drafts
+        </TabItem>
+        <TabItem 
+          value="spam"
+          trailingIcon={<Badge count={counts.spam} type="danger" />}
+        >
+          Spam
+        </TabItem>
+        <TabItem 
+          value="trash"
+          trailingIcon={<Badge count={counts.trash} />}
+        >
+          Trash
+        </TabItem>
+      </div>
+      
+      <TabContent value="inbox">
+        <div style={{ padding: '24px' }}>
+          <h2>📥 Inbox ({counts.inbox})</h2>
+          <p>You have {counts.inbox} unread messages in your inbox.</p>
+          <div style={{ marginTop: '20px' }}>
+            {Array.from({ length: Math.min(counts.inbox, 5) }, (_, i) => (
+              <div key={i} style={{ 
+                padding: '12px', 
+                border: '1px solid #e0e0e0', 
+                borderRadius: '8px', 
+                marginBottom: '8px',
+                backgroundColor: i < 3 ? '#e3f2fd' : 'white'
+              }}>
+                <Text weight="Bold">Message {i + 1}</Text>
+                <Text size="Small" color="secondary">
+                  {i < 3 ? 'Unread' : 'Read'} • 2 hours ago
+                </Text>
+              </div>
+            ))}
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="sent">
+        <div style={{ padding: '24px' }}>
+          <h2>📤 Sent Messages</h2>
+          <p>Your sent messages appear here.</p>
+          {counts.sent === 0 && (
+            <Text color="secondary">No sent messages yet.</Text>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="drafts">
+        <div style={{ padding: '24px' }}>
+          <h2>📝 Draft Messages ({counts.drafts})</h2>
+          <p>You have {counts.drafts} draft messages waiting to be sent.</p>
+          <div style={{ marginTop: '20px' }}>
+            {Array.from({ length: counts.drafts }, (_, i) => (
+              <div key={i} style={{ 
+                padding: '12px', 
+                border: '1px solid #e0e0e0', 
+                borderRadius: '8px', 
+                marginBottom: '8px',
+                backgroundColor: '#fff3e0'
+              }}>
+                <Text weight="Bold">Draft {i + 1}</Text>
+                <Text size="Small" color="secondary">
+                  Last edited 1 hour ago
+                </Text>
+              </div>
+            ))}
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="spam">
+        <div style={{ padding: '24px' }}>
+          <h2>🚫 Spam ({counts.spam})</h2>
+          <p>Messages identified as spam are moved here automatically.</p>
+          <Text size="Small" color="secondary">
+            Spam messages are automatically deleted after 30 days.
+          </Text>
+        </div>
+      </TabContent>
+      
+      <TabContent value="trash">
+        <div style={{ padding: '24px' }}>
+          <h2>🗑️ Trash ({counts.trash})</h2>
+          <p>Deleted messages are stored here temporarily.</p>
+          <Text size="Small" color="secondary">
+            Messages in trash are permanently deleted after 30 days.
+          </Text>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Items with Custom Styling
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function CustomStyledTabItemExample() {
+  const [activeTab, setActiveTab] = useState('design');
+
+  return (
+    <Tabs 
+      style="Filled"
+      onClick={(value) => setActiveTab(value as string)}
+    >
+      <div style={{ 
+        display: 'flex', 
+        backgroundColor: '#f5f5f5', 
+        borderRadius: '12px', 
+        padding: '4px',
+        width: 'fit-content'
+      }}>
+        <TabItem 
+          value="design" 
+          defaultTab
+          style={{
+            borderRadius: '8px',
+            margin: '2px',
+            backgroundColor: activeTab === 'design' ? '#2196f3' : 'transparent',
+            color: activeTab === 'design' ? 'white' : '#666',
+            border: 'none',
+            transition: 'all 0.2s ease'
+          }}
+        >
+          🎨 Design
+        </TabItem>
+        <TabItem 
+          value="development"
+          style={{
+            borderRadius: '8px',
+            margin: '2px',
+            backgroundColor: activeTab === 'development' ? '#4caf50' : 'transparent',
+            color: activeTab === 'development' ? 'white' : '#666',
+            border: 'none',
+            transition: 'all 0.2s ease'
+          }}
+        >
+          💻 Development
+        </TabItem>
+        <TabItem 
+          value="testing"
+          style={{
+            borderRadius: '8px',
+            margin: '2px',
+            backgroundColor: activeTab === 'testing' ? '#ff9800' : 'transparent',
+            color: activeTab === 'testing' ? 'white' : '#666',
+            border: 'none',
+            transition: 'all 0.2s ease'
+          }}
+        >
+          🧪 Testing
+        </TabItem>
+        <TabItem 
+          value="deployment"
+          style={{
+            borderRadius: '8px',
+            margin: '2px',
+            backgroundColor: activeTab === 'deployment' ? '#9c27b0' : 'transparent',
+            color: activeTab === 'deployment' ? 'white' : '#666',
+            border: 'none',
+            transition: 'all 0.2s ease'
+          }}
+        >
+          🚀 Deployment
+        </TabItem>
+      </div>
+      
+      <TabContent value="design">
+        <div style={{ 
+          padding: '24px', 
+          background: 'linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)',
+          borderRadius: '12px',
+          marginTop: '16px'
+        }}>
+          <h2 style={{ color: '#1976d2' }}>🎨 Design Phase</h2>
+          <Text>Create wireframes, mockups, and design systems for the project.</Text>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '12px' }}>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Wireframes</Text>
+                <Text size="Small">Complete</Text>
+              </div>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">UI Design</Text>
+                <Text size="Small">In Progress</Text>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="development">
+        <div style={{ 
+          padding: '24px', 
+          background: 'linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%)',
+          borderRadius: '12px',
+          marginTop: '16px'
+        }}>
+          <h2 style={{ color: '#2e7d32' }}>💻 Development Phase</h2>
+          <Text>Build the application using modern development practices and tools.</Text>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '12px' }}>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Frontend</Text>
+                <Text size="Small">80% Complete</Text>
+              </div>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Backend</Text>
+                <Text size="Small">60% Complete</Text>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="testing">
+        <div style={{ 
+          padding: '24px', 
+          background: 'linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%)',
+          borderRadius: '12px',
+          marginTop: '16px'
+        }}>
+          <h2 style={{ color: '#f57c00' }}>🧪 Testing Phase</h2>
+          <Text>Comprehensive testing to ensure quality and reliability.</Text>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '12px' }}>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Unit Tests</Text>
+                <Text size="Small">Not Started</Text>
+              </div>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Integration Tests</Text>
+                <Text size="Small">Not Started</Text>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="deployment">
+        <div style={{ 
+          padding: '24px', 
+          background: 'linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%)',
+          borderRadius: '12px',
+          marginTop: '16px'
+        }}>
+          <h2 style={{ color: '#7b1fa2' }}>🚀 Deployment Phase</h2>
+          <Text>Deploy the application to production environments.</Text>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minWidth(200px, 1fr))', gap: '12px' }}>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Staging</Text>
+                <Text size="Small">Not Started</Text>
+              </div>
+              <div style={{ padding: '16px', backgroundColor: 'rgba(255,255,255,0.8)', borderRadius: '8px' }}>
+                <Text weight="Bold">Production</Text>
+                <Text size="Small">Not Started</Text>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Items with Click Handlers
+
+```tsx
+import { Tabs, TabItem, TabContent, Text, Button } from '@delightui/components';
+
+function ClickHandlerTabItemExample() {
+  const [clickCounts, setClickCounts] = useState({
+    home: 0,
+    about: 0,
+    services: 0,
+    contact: 0
+  });
+  
+  const [lastClicked, setLastClicked] = useState<string>('');
+
+  const handleTabClick = (tabValue: string) => {
+    setClickCounts(prev => ({
+      ...prev,
+      [tabValue]: prev[tabValue as keyof typeof prev] + 1
+    }));
+    setLastClicked(tabValue);
+    console.log(`Tab ${tabValue} clicked ${clickCounts[tabValue as keyof typeof clickCounts] + 1} times`);
+  };
+
+  const resetCounts = () => {
+    setClickCounts({ home: 0, about: 0, services: 0, contact: 0 });
+    setLastClicked('');
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
+        <Text weight="Bold">Click Analytics</Text>
+        <Text size="Small">Last clicked: {lastClicked || 'None'}</Text>
+        <div style={{ display: 'flex', gap: '16px', marginTop: '8px' }}>
+          <Text size="Small">Home: {clickCounts.home}</Text>
+          <Text size="Small">About: {clickCounts.about}</Text>
+          <Text size="Small">Services: {clickCounts.services}</Text>
+          <Text size="Small">Contact: {clickCounts.contact}</Text>
+        </div>
+        <Button size="Small" type="Outlined" onClick={resetCounts} style={{ marginTop: '8px' }}>
+          Reset Counts
+        </Button>
+      </div>
+
+      <Tabs>
+        <div style={{ display: 'flex' }}>
+          <TabItem 
+            value="home" 
+            defaultTab
+            onClick={() => handleTabClick('home')}
+          >
+            Home ({clickCounts.home})
+          </TabItem>
+          <TabItem 
+            value="about"
+            onClick={() => handleTabClick('about')}
+          >
+            About ({clickCounts.about})
+          </TabItem>
+          <TabItem 
+            value="services"
+            onClick={() => handleTabClick('services')}
+          >
+            Services ({clickCounts.services})
+          </TabItem>
+          <TabItem 
+            value="contact"
+            onClick={() => handleTabClick('contact')}
+          >
+            Contact ({clickCounts.contact})
+          </TabItem>
+        </div>
+        
+        <TabContent value="home">
+          <div style={{ padding: '24px' }}>
+            <h2>🏠 Home</h2>
+            <Text>Welcome to our home page! You've clicked this tab {clickCounts.home} times.</Text>
+            <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#e3f2fd', borderRadius: '8px' }}>
+              <Text size="Small">
+                This tab has custom click tracking enabled. Each click is logged to the console.
+              </Text>
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="about">
+          <div style={{ padding: '24px' }}>
+            <h2>ℹ️ About</h2>
+            <Text>Learn more about us! Click count: {clickCounts.about}</Text>
+          </div>
+        </TabContent>
+        
+        <TabContent value="services">
+          <div style={{ padding: '24px' }}>
+            <h2>🛠️ Services</h2>
+            <Text>Discover our services! Click count: {clickCounts.services}</Text>
+          </div>
+        </TabContent>
+        
+        <TabContent value="contact">
+          <div style={{ padding: '24px' }}>
+            <h2>📞 Contact</h2>
+            <Text>Get in touch with us! Click count: {clickCounts.contact}</Text>
+          </div>
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
+```
+
+### Responsive Tab Items
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function ResponsiveTabItemExample() {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <Tabs style={isMobile ? 'Filled' : 'Underlined'}>
+      <div style={{ 
+        display: 'flex',
+        flexDirection: isMobile ? 'column' : 'row',
+        gap: isMobile ? '8px' : '0',
+        ...(isMobile && { padding: '8px' })
+      }}>
+        <TabItem 
+          value="dashboard" 
+          defaultTab
+          style={{
+            ...(isMobile && {
+              width: '100%',
+              justifyContent: 'flex-start',
+              padding: '12px 16px'
+            })
+          }}
+        >
+          {isMobile ? '📊 Dashboard' : 'Dashboard'}
+        </TabItem>
+        <TabItem 
+          value="analytics"
+          style={{
+            ...(isMobile && {
+              width: '100%',
+              justifyContent: 'flex-start',
+              padding: '12px 16px'
+            })
+          }}
+        >
+          {isMobile ? '📈 Analytics' : 'Analytics'}
+        </TabItem>
+        <TabItem 
+          value="reports"
+          style={{
+            ...(isMobile && {
+              width: '100%',
+              justifyContent: 'flex-start',
+              padding: '12px 16px'
+            })
+          }}
+        >
+          {isMobile ? '📋 Reports' : 'Reports'}
+        </TabItem>
+        <TabItem 
+          value="settings"
+          style={{
+            ...(isMobile && {
+              width: '100%',
+              justifyContent: 'flex-start',
+              padding: '12px 16px'
+            })
+          }}
+        >
+          {isMobile ? '⚙️ Settings' : 'Settings'}
+        </TabItem>
+      </div>
+      
+      <TabContent value="dashboard">
+        <div style={{ padding: isMobile ? '16px' : '24px' }}>
+          <h2>Dashboard</h2>
+          <Text>
+            {isMobile 
+              ? 'Mobile-optimized dashboard view with essential metrics.'
+              : 'Full dashboard with comprehensive analytics and reporting tools.'
+            }
+          </Text>
+          <div style={{ 
+            display: 'grid', 
+            gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(200px, 1fr))', 
+            gap: '16px', 
+            marginTop: '20px' 
+          }}>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <Text weight="Bold">Users</Text>
+              <Text size="Large">1,234</Text>
+            </div>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <Text weight="Bold">Revenue</Text>
+              <Text size="Large">$45,678</Text>
+            </div>
+            {!isMobile && (
+              <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <Text weight="Bold">Growth</Text>
+                <Text size="Large">+12.5%</Text>
+              </div>
+            )}
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="analytics">
+        <div style={{ padding: isMobile ? '16px' : '24px' }}>
+          <h2>Analytics</h2>
+          <Text>
+            {isMobile 
+              ? 'Key analytics metrics optimized for mobile viewing.'
+              : 'Detailed analytics with charts, graphs, and comprehensive data visualization.'
+            }
+          </Text>
+        </div>
+      </TabContent>
+      
+      <TabContent value="reports">
+        <div style={{ padding: isMobile ? '16px' : '24px' }}>
+          <h2>Reports</h2>
+          <Text>
+            {isMobile 
+              ? 'Essential reports formatted for mobile devices.'
+              : 'Complete reporting suite with advanced filtering and export options.'
+            }
+          </Text>
+        </div>
+      </TabContent>
+      
+      <TabContent value="settings">
+        <div style={{ padding: isMobile ? '16px' : '24px' }}>
+          <h2>Settings</h2>
+          <Text>
+            {isMobile 
+              ? 'Core settings available on mobile.'
+              : 'Full settings panel with advanced configuration options.'
+            }
+          </Text>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```