@delightui/components 0.1.104 → 0.1.106

package/docs/components/organisms/TabContent.md

@@ -0,0 +1,902 @@
+# TabContent
+
+## Description
+
+A content container component for tab panels that displays specific content associated with tab items. TabContent works in conjunction with the Tabs system to show and hide content based on the selected tab. It provides a structured way to organize and present different sections of information within a tabbed interface.
+
+## Aliases
+
+- TabContent
+- Tab Panel
+- Tab Container
+- Content Panel
+- Tab Section
+
+## Props Breakdown
+
+**Standalone Interface**
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `value` | `number \| string` | - | Yes | The tab contents value used to determine which tab is selected |
+| `children` | `ReactNode` | - | Yes | The contents of the tab |
+| `className` | `string` | - | No | Additional CSS class names for styling |
+
+## Examples
+
+### Basic Tab Content
+
+```tsx
+import { Tabs, TabItem, TabContent } from '@delightui/components';
+
+function BasicTabContentExample() {
+  return (
+    <Tabs>
+      <div>
+        <TabItem value="home" defaultTab>Home</TabItem>
+        <TabItem value="about">About</TabItem>
+        <TabItem value="contact">Contact</TabItem>
+      </div>
+      
+      <TabContent value="home">
+        <div style={{ padding: '20px' }}>
+          <h2>Welcome Home</h2>
+          <p>This is the home tab content. Here you can find general information about our services and latest updates.</p>
+          <ul>
+            <li>Latest news and announcements</li>
+            <li>Featured products</li>
+            <li>Quick access to popular sections</li>
+          </ul>
+        </div>
+      </TabContent>
+      
+      <TabContent value="about">
+        <div style={{ padding: '20px' }}>
+          <h2>About Us</h2>
+          <p>Learn more about our company, mission, and values.</p>
+          <p>We are dedicated to providing excellent service and innovative solutions to our customers.</p>
+        </div>
+      </TabContent>
+      
+      <TabContent value="contact">
+        <div style={{ padding: '20px' }}>
+          <h2>Contact Information</h2>
+          <p>Get in touch with us through the following channels:</p>
+          <ul>
+            <li>Email: contact@example.com</li>
+            <li>Phone: +1-555-0123</li>
+            <li>Address: 123 Main St, City, State 12345</li>
+          </ul>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Content with Forms
+
+```tsx
+import { Tabs, TabItem, TabContent, Input, TextArea, Button, FormField } from '@delightui/components';
+
+function FormTabContentExample() {
+  const [personalInfo, setPersonalInfo] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: ''
+  });
+  
+  const [preferences, setPreferences] = useState({
+    notifications: true,
+    newsletter: false,
+    theme: 'light'
+  });
+
+  return (
+    <Tabs style="Underlined">
+      <div style={{ borderBottom: '1px solid #e0e0e0' }}>
+        <TabItem value="personal" defaultTab>Personal Info</TabItem>
+        <TabItem value="preferences">Preferences</TabItem>
+        <TabItem value="security">Security</TabItem>
+      </div>
+      
+      <TabContent value="personal">
+        <div style={{ padding: '24px', maxWidth: '500px' }}>
+          <h3 style={{ marginBottom: '20px' }}>Personal Information</h3>
+          <div style={{ display: 'grid', gap: '16px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+              <FormField label="First Name" required>
+                <Input
+                  value={personalInfo.firstName}
+                  onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, firstName: value }))}
+                  placeholder="Enter first name"
+                />
+              </FormField>
+              <FormField label="Last Name" required>
+                <Input
+                  value={personalInfo.lastName}
+                  onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, lastName: value }))}
+                  placeholder="Enter last name"
+                />
+              </FormField>
+            </div>
+            <FormField label="Email Address" required>
+              <Input
+                inputType="Email"
+                value={personalInfo.email}
+                onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, email: value }))}
+                placeholder="Enter email address"
+              />
+            </FormField>
+            <FormField label="Phone Number">
+              <Input
+                inputType="Tel"
+                value={personalInfo.phone}
+                onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, phone: value }))}
+                placeholder="Enter phone number"
+              />
+            </FormField>
+            <Button style="Primary">Save Personal Info</Button>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="preferences">
+        <div style={{ padding: '24px', maxWidth: '500px' }}>
+          <h3 style={{ marginBottom: '20px' }}>Preferences</h3>
+          <div style={{ display: 'grid', gap: '20px' }}>
+            <FormField label="Notification Settings">
+              <div style={{ display: 'grid', gap: '12px' }}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input 
+                    type="checkbox" 
+                    checked={preferences.notifications}
+                    onChange={(e) => setPreferences(prev => ({ ...prev, notifications: e.target.checked }))}
+                  />
+                  Enable push notifications
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input 
+                    type="checkbox" 
+                    checked={preferences.newsletter}
+                    onChange={(e) => setPreferences(prev => ({ ...prev, newsletter: e.target.checked }))}
+                  />
+                  Subscribe to newsletter
+                </label>
+              </div>
+            </FormField>
+            <FormField label="Theme Preference">
+              <select 
+                value={preferences.theme}
+                onChange={(e) => setPreferences(prev => ({ ...prev, theme: e.target.value }))}
+                style={{ padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
+              >
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+                <option value="auto">Auto</option>
+              </select>
+            </FormField>
+            <Button style="Primary">Save Preferences</Button>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="security">
+        <div style={{ padding: '24px', maxWidth: '500px' }}>
+          <h3 style={{ marginBottom: '20px' }}>Security Settings</h3>
+          <div style={{ display: 'grid', gap: '16px' }}>
+            <FormField label="Current Password" required>
+              <Input
+                inputType="Password"
+                placeholder="Enter current password"
+              />
+            </FormField>
+            <FormField label="New Password" required>
+              <Input
+                inputType="Password"
+                placeholder="Enter new password"
+              />
+            </FormField>
+            <FormField label="Confirm New Password" required>
+              <Input
+                inputType="Password"
+                placeholder="Confirm new password"
+              />
+            </FormField>
+            <Button style="Primary">Update Password</Button>
+          </div>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Content with Data Tables
+
+```tsx
+import { Tabs, TabItem, TabContent, Table, TableBody, TableHeader, TableRow, TableHeaderCell, TableCell, Button, Chip } from '@delightui/components';
+
+function DataTableTabContentExample() {
+  const activeUsers = [
+    { name: 'John Doe', email: 'john@example.com', lastActive: '2 hours ago', status: 'Online' },
+    { name: 'Jane Smith', email: 'jane@example.com', lastActive: '30 minutes ago', status: 'Online' },
+    { name: 'Bob Wilson', email: 'bob@example.com', lastActive: '1 hour ago', status: 'Away' }
+  ];
+
+  const inactiveUsers = [
+    { name: 'Alice Brown', email: 'alice@example.com', lastActive: '2 days ago', status: 'Offline' },
+    { name: 'Charlie Davis', email: 'charlie@example.com', lastActive: '1 week ago', status: 'Offline' }
+  ];
+
+  const pendingUsers = [
+    { name: 'Diana Evans', email: 'diana@example.com', invited: '1 day ago', status: 'Pending' },
+    { name: 'Frank Miller', email: 'frank@example.com', invited: '3 days ago', status: 'Pending' }
+  ];
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'Online': return 'success';
+      case 'Away': return 'warning';
+      case 'Offline': return 'neutral';
+      case 'Pending': return 'primary';
+      default: return 'neutral';
+    }
+  };
+
+  return (
+    <Tabs>
+      <div style={{ borderBottom: '1px solid #e0e0e0', padding: '0 20px' }}>
+        <TabItem value="active" defaultTab>
+          Active Users ({activeUsers.length})
+        </TabItem>
+        <TabItem value="inactive">
+          Inactive Users ({inactiveUsers.length})
+        </TabItem>
+        <TabItem value="pending">
+          Pending Users ({pendingUsers.length})
+        </TabItem>
+      </div>
+      
+      <TabContent value="active">
+        <div style={{ padding: '20px' }}>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Email</TableHeaderCell>
+                <TableHeaderCell>Last Active</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Actions</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {activeUsers.map((user, index) => (
+                <TableRow key={index}>
+                  <TableCell>{user.name}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell>{user.lastActive}</TableCell>
+                  <TableCell>
+                    <Chip color={getStatusColor(user.status)}>
+                      {user.status}
+                    </Chip>
+                  </TableCell>
+                  <TableCell>
+                    <Button size="Small" type="Outlined">Message</Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </TabContent>
+      
+      <TabContent value="inactive">
+        <div style={{ padding: '20px' }}>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Email</TableHeaderCell>
+                <TableHeaderCell>Last Active</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Actions</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {inactiveUsers.map((user, index) => (
+                <TableRow key={index}>
+                  <TableCell>{user.name}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell>{user.lastActive}</TableCell>
+                  <TableCell>
+                    <Chip color={getStatusColor(user.status)}>
+                      {user.status}
+                    </Chip>
+                  </TableCell>
+                  <TableCell>
+                    <Button size="Small" type="Outlined">Reactivate</Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </TabContent>
+      
+      <TabContent value="pending">
+        <div style={{ padding: '20px' }}>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Email</TableHeaderCell>
+                <TableHeaderCell>Invited</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Actions</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pendingUsers.map((user, index) => (
+                <TableRow key={index}>
+                  <TableCell>{user.name}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell>{user.invited}</TableCell>
+                  <TableCell>
+                    <Chip color={getStatusColor(user.status)}>
+                      {user.status}
+                    </Chip>
+                  </TableCell>
+                  <TableCell>
+                    <div style={{ display: 'flex', gap: '8px' }}>
+                      <Button size="Small" style="Primary">Resend</Button>
+                      <Button size="Small" style="Destructive">Cancel</Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Content with Loading States
+
+```tsx
+import { Tabs, TabItem, TabContent, Spinner, Button, Text } from '@delightui/components';
+
+function LoadingTabContentExample() {
+  const [loadingStates, setLoadingStates] = useState({
+    dashboard: false,
+    analytics: false,
+    reports: false
+  });
+  
+  const [data, setData] = useState({
+    dashboard: null,
+    analytics: null,
+    reports: null
+  });
+
+  const loadData = async (tab: string) => {
+    setLoadingStates(prev => ({ ...prev, [tab]: true }));
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    setData(prev => ({ ...prev, [tab]: `Loaded data for ${tab}` }));
+    setLoadingStates(prev => ({ ...prev, [tab]: false }));
+  };
+
+  return (
+    <Tabs>
+      <div>
+        <TabItem value="dashboard" defaultTab>Dashboard</TabItem>
+        <TabItem value="analytics">Analytics</TabItem>
+        <TabItem value="reports">Reports</TabItem>
+      </div>
+      
+      <TabContent value="dashboard">
+        <div style={{ padding: '40px', textAlign: 'center' }}>
+          {loadingStates.dashboard ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Loading dashboard data...</Text>
+            </div>
+          ) : (
+            <div>
+              <h3>Dashboard</h3>
+              {data.dashboard ? (
+                <div>
+                  <Text>{data.dashboard}</Text>
+                  <div style={{ marginTop: '20px' }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+                      <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                        <Text size="Large" weight="Bold">1,234</Text>
+                        <Text color="secondary">Total Users</Text>
+                      </div>
+                      <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                        <Text size="Large" weight="Bold">567</Text>
+                        <Text color="secondary">Active Sessions</Text>
+                      </div>
+                      <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                        <Text size="Large" weight="Bold">89%</Text>
+                        <Text color="secondary">Uptime</Text>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <Text>No data loaded yet.</Text>
+                  <Button 
+                    style="Primary" 
+                    onClick={() => loadData('dashboard')}
+                    style={{ marginTop: '16px' }}
+                  >
+                    Load Dashboard Data
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="analytics">
+        <div style={{ padding: '40px', textAlign: 'center' }}>
+          {loadingStates.analytics ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Analyzing data...</Text>
+            </div>
+          ) : (
+            <div>
+              <h3>Analytics</h3>
+              {data.analytics ? (
+                <div>
+                  <Text>{data.analytics}</Text>
+                  <div style={{ marginTop: '20px' }}>
+                    <div style={{ height: '200px', border: '1px solid #e0e0e0', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <Text color="secondary">[Chart Placeholder]</Text>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <Text>Analytics data not loaded.</Text>
+                  <Button 
+                    style="Primary" 
+                    onClick={() => loadData('analytics')}
+                    style={{ marginTop: '16px' }}
+                  >
+                    Load Analytics
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="reports">
+        <div style={{ padding: '40px', textAlign: 'center' }}>
+          {loadingStates.reports ? (
+            <div>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Generating reports...</Text>
+            </div>
+          ) : (
+            <div>
+              <h3>Reports</h3>
+              {data.reports ? (
+                <div>
+                  <Text>{data.reports}</Text>
+                  <div style={{ marginTop: '20px' }}>
+                    <div style={{ display: 'grid', gap: '12px' }}>
+                      <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', textAlign: 'left' }}>
+                        <Text weight="Bold">Monthly Sales Report</Text>
+                        <Text size="Small" color="secondary">Generated on {new Date().toLocaleDateString()}</Text>
+                      </div>
+                      <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', textAlign: 'left' }}>
+                        <Text weight="Bold">User Activity Report</Text>
+                        <Text size="Small" color="secondary">Generated on {new Date().toLocaleDateString()}</Text>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <Text>No reports generated yet.</Text>
+                  <Button 
+                    style="Primary" 
+                    onClick={() => loadData('reports')}
+                    style={{ marginTop: '16px' }}
+                  >
+                    Generate Reports
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Content with Rich Media
+
+```tsx
+import { Tabs, TabItem, TabContent, Image, Button, Text } from '@delightui/components';
+
+function RichMediaTabContentExample() {
+  const [selectedImage, setSelectedImage] = useState(0);
+  
+  const galleryImages = [
+    { src: '/images/gallery-1.jpg', title: 'Mountain Landscape', description: 'Beautiful mountain scenery at sunset' },
+    { src: '/images/gallery-2.jpg', title: 'Ocean View', description: 'Peaceful ocean waves on a sunny day' },
+    { src: '/images/gallery-3.jpg', title: 'Forest Trail', description: 'Winding path through green forest' }
+  ];
+
+  const videos = [
+    { id: 'video-1', title: 'Product Demo', duration: '3:45', thumbnail: '/images/video-thumb-1.jpg' },
+    { id: 'video-2', title: 'Tutorial Basics', duration: '8:20', thumbnail: '/images/video-thumb-2.jpg' },
+    { id: 'video-3', title: 'Advanced Features', duration: '12:15', thumbnail: '/images/video-thumb-3.jpg' }
+  ];
+
+  return (
+    <Tabs type="Vertical" style={{ height: '500px' }}>
+      <div style={{ width: '200px', borderRight: '1px solid #e0e0e0' }}>
+        <TabItem value="overview" defaultTab>Overview</TabItem>
+        <TabItem value="gallery">Gallery</TabItem>
+        <TabItem value="videos">Videos</TabItem>
+        <TabItem value="downloads">Downloads</TabItem>
+      </div>
+      
+      <TabContent value="overview">
+        <div style={{ padding: '24px', flex: 1 }}>
+          <h2>Project Overview</h2>
+          <div style={{ display: 'grid', gap: '20px' }}>
+            <div>
+              <Text size="Large">
+                Welcome to our multimedia showcase. Here you can explore various types of content 
+                including images, videos, and downloadable resources.
+              </Text>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
+              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <h4>Image Gallery</h4>
+                <Text>Explore our collection of high-quality images and visual content.</Text>
+              </div>
+              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <h4>Video Library</h4>
+                <Text>Watch tutorials, demos, and educational content.</Text>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="gallery">
+        <div style={{ padding: '24px', flex: 1 }}>
+          <h2>Image Gallery</h2>
+          <div style={{ display: 'grid', gap: '20px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '300px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <Image
+                src={galleryImages[selectedImage].src}
+                alt={galleryImages[selectedImage].title}
+                fit="Cover"
+                style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '8px' }}
+              />
+            </div>
+            <div>
+              <h4>{galleryImages[selectedImage].title}</h4>
+              <Text color="secondary">{galleryImages[selectedImage].description}</Text>
+            </div>
+            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
+              {galleryImages.map((image, index) => (
+                <button
+                  key={index}
+                  onClick={() => setSelectedImage(index)}
+                  style={{
+                    padding: '4px',
+                    border: selectedImage === index ? '2px solid #2196f3' : '2px solid transparent',
+                    borderRadius: '4px',
+                    background: 'none',
+                    cursor: 'pointer'
+                  }}
+                >
+                  <Image
+                    src={image.src}
+                    alt={image.title}
+                    width={60}
+                    height={40}
+                    fit="Cover"
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="videos">
+        <div style={{ padding: '24px', flex: 1 }}>
+          <h2>Video Library</h2>
+          <div style={{ display: 'grid', gap: '16px' }}>
+            {videos.map(video => (
+              <div key={video.id} style={{ 
+                display: 'flex', 
+                gap: '16px', 
+                padding: '16px', 
+                border: '1px solid #e0e0e0', 
+                borderRadius: '8px' 
+              }}>
+                <Image
+                  src={video.thumbnail}
+                  alt={video.title}
+                  width={120}
+                  height={80}
+                  fit="Cover"
+                  style={{ borderRadius: '4px' }}
+                />
+                <div style={{ flex: 1 }}>
+                  <h4>{video.title}</h4>
+                  <Text color="secondary">Duration: {video.duration}</Text>
+                  <Button size="Small" style="Primary" style={{ marginTop: '8px' }}>
+                    Play Video
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="downloads">
+        <div style={{ padding: '24px', flex: 1 }}>
+          <h2>Downloads</h2>
+          <div style={{ display: 'grid', gap: '16px' }}>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <Text weight="Bold">User Manual (PDF)</Text>
+                  <Text size="Small" color="secondary">Complete guide - 2.5 MB</Text>
+                </div>
+                <Button size="Small" type="Outlined">Download</Button>
+              </div>
+            </div>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <Text weight="Bold">Sample Data (CSV)</Text>
+                  <Text size="Small" color="secondary">Example dataset - 1.2 MB</Text>
+                </div>
+                <Button size="Small" type="Outlined">Download</Button>
+              </div>
+            </div>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <Text weight="Bold">Template Pack (ZIP)</Text>
+                  <Text size="Small" color="secondary">Design templates - 5.8 MB</Text>
+                </div>
+                <Button size="Small" type="Outlined">Download</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Tab Content with Custom Styling
+
+```tsx
+import { Tabs, TabItem, TabContent, Text, Button } from '@delightui/components';
+
+function CustomStyledTabContentExample() {
+  return (
+    <Tabs style="Filled">
+      <div style={{ 
+        backgroundColor: '#1976d2', 
+        padding: '0 20px',
+        borderRadius: '8px 8px 0 0'
+      }}>
+        <TabItem value="theme1" defaultTab style={{ color: 'white' }}>
+          Ocean Theme
+        </TabItem>
+        <TabItem value="theme2" style={{ color: 'white' }}>
+          Forest Theme
+        </TabItem>
+        <TabItem value="theme3" style={{ color: 'white' }}>
+          Sunset Theme
+        </TabItem>
+      </div>
+      
+      <TabContent 
+        value="theme1"
+        className="ocean-theme"
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          minHeight: '300px'
+        }}
+      >
+        <div style={{ padding: '40px' }}>
+          <h2 style={{ color: 'white', marginBottom: '20px' }}>Ocean Theme</h2>
+          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '16px', lineHeight: '1.6' }}>
+            Dive into the depths of tranquility with our ocean-inspired theme. 
+            Feel the calm waves and peaceful blue tones wash over your interface.
+          </Text>
+          <div style={{ marginTop: '24px' }}>
+            <Button 
+              style="Secondary" 
+              style={{ 
+                backgroundColor: 'rgba(255,255,255,0.2)', 
+                border: '1px solid rgba(255,255,255,0.3)',
+                color: 'white'
+              }}
+            >
+              Explore Ocean
+            </Button>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent 
+        value="theme2"
+        className="forest-theme"
+        style={{
+          background: 'linear-gradient(135deg, #4b6cb7 0%, #182848 100%)',
+          color: 'white',
+          minHeight: '300px'
+        }}
+      >
+        <div style={{ padding: '40px' }}>
+          <h2 style={{ color: 'white', marginBottom: '20px' }}>Forest Theme</h2>
+          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '16px', lineHeight: '1.6' }}>
+            Embrace the serenity of nature with our forest theme. 
+            Experience the deep greens and earthy tones that bring peace and grounding.
+          </Text>
+          <div style={{ marginTop: '24px' }}>
+            <Button 
+              style="Secondary"
+              style={{ 
+                backgroundColor: 'rgba(255,255,255,0.2)', 
+                border: '1px solid rgba(255,255,255,0.3)',
+                color: 'white'
+              }}
+            >
+              Explore Forest
+            </Button>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent 
+        value="theme3"
+        className="sunset-theme"
+        style={{
+          background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+          color: 'white',
+          minHeight: '300px'
+        }}
+      >
+        <div style={{ padding: '40px' }}>
+          <h2 style={{ color: 'white', marginBottom: '20px' }}>Sunset Theme</h2>
+          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '16px', lineHeight: '1.6' }}>
+            Bask in the warm glow of our sunset theme. 
+            Feel the energy and warmth of vibrant oranges and passionate pinks.
+          </Text>
+          <div style={{ marginTop: '24px' }}>
+            <Button 
+              style="Secondary"
+              style={{ 
+                backgroundColor: 'rgba(255,255,255,0.2)', 
+                border: '1px solid rgba(255,255,255,0.3)',
+                color: 'white'
+              }}
+            >
+              Explore Sunset
+            </Button>
+          </div>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Nested Tab Content
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function NestedTabContentExample() {
+  return (
+    <Tabs>
+      <div>
+        <TabItem value="products" defaultTab>Products</TabItem>
+        <TabItem value="services">Services</TabItem>
+        <TabItem value="support">Support</TabItem>
+      </div>
+      
+      <TabContent value="products">
+        <div style={{ padding: '20px' }}>
+          <h2>Our Products</h2>
+          <Tabs style="Underlined">
+            <div>
+              <TabItem value="software" defaultTab>Software</TabItem>
+              <TabItem value="hardware">Hardware</TabItem>
+              <TabItem value="accessories">Accessories</TabItem>
+            </div>
+            
+            <TabContent value="software">
+              <div style={{ padding: '20px' }}>
+                <h3>Software Solutions</h3>
+                <Text>Explore our comprehensive range of software products designed to streamline your workflow.</Text>
+                <ul style={{ marginTop: '16px' }}>
+                  <li>Project Management Suite</li>
+                  <li>Analytics Dashboard</li>
+                  <li>Customer Relations Manager</li>
+                  <li>Inventory Tracking System</li>
+                </ul>
+              </div>
+            </TabContent>
+            
+            <TabContent value="hardware">
+              <div style={{ padding: '20px' }}>
+                <h3>Hardware Products</h3>
+                <Text>Discover our high-quality hardware solutions built for performance and reliability.</Text>
+                <ul style={{ marginTop: '16px' }}>
+                  <li>Industrial Computers</li>
+                  <li>Network Equipment</li>
+                  <li>Storage Solutions</li>
+                  <li>Monitoring Devices</li>
+                </ul>
+              </div>
+            </TabContent>
+            
+            <TabContent value="accessories">
+              <div style={{ padding: '20px' }}>
+                <h3>Accessories</h3>
+                <Text>Complete your setup with our range of professional accessories and add-ons.</Text>
+                <ul style={{ marginTop: '16px' }}>
+                  <li>Cables and Adapters</li>
+                  <li>Mounting Hardware</li>
+                  <li>Protective Cases</li>
+                  <li>Replacement Parts</li>
+                </ul>
+              </div>
+            </TabContent>
+          </Tabs>
+        </div>
+      </TabContent>
+      
+      <TabContent value="services">
+        <div style={{ padding: '20px' }}>
+          <h2>Our Services</h2>
+          <Text>We provide comprehensive services to support your business needs.</Text>
+        </div>
+      </TabContent>
+      
+      <TabContent value="support">
+        <div style={{ padding: '20px' }}>
+          <h2>Customer Support</h2>
+          <Text>Get help when you need it with our dedicated support team.</Text>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```