@urbint/cl 1.0.1

package/docs/data/componentData.tsx

@@ -0,0 +1,1685 @@
+/**
+ * Component Documentation Data
+ * All examples use actual components for full interactivity
+ */
+
+import React, { useState } from 'react';
+import { View, Text as RNText } from 'react-native';
+import { ComponentCategory } from '../types';
+
+// Import actual components for interactive examples
+import {
+  Box,
+  HStack,
+  VStack,
+  Center,
+  Grid,
+  Divider,
+  Text,
+  Heading,
+  Link,
+  Button,
+  Input,
+  Textarea,
+  Checkbox,
+  Radio,
+  Switch,
+  Select,
+  Slider,
+  FormControl,
+  Alert,
+  Toast,
+  Progress,
+  Spinner,
+  Skeleton,
+  Avatar,
+  Badge,
+  Card,
+  Fab,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Drawer,
+  DrawerHeader,
+  DrawerBody,
+  AlertDialog,
+  Popover,
+  Tooltip,
+  Menu,
+  ActionSheet,
+  Icon,
+  Pressable,
+} from '../../src/components';
+
+// Export component categories
+export const COMPONENT_CATEGORIES: ComponentCategory[] = [
+  {
+    name: 'Layout',
+    count: 6,
+    description: 'Foundational components for building page layouts and organizing content',
+    components: [
+      {
+        name: 'Box',
+        description: 'The most fundamental layout component. A polymorphic container with support for all style props.',
+        props: [
+          { name: 'p', type: 'SpacingToken | number', description: 'Padding on all sides' },
+          { name: 'px', type: 'SpacingToken | number', description: 'Horizontal padding' },
+          { name: 'py', type: 'SpacingToken | number', description: 'Vertical padding' },
+          { name: 'bg', type: 'string', description: 'Background color' },
+          { name: 'rounded', type: '"none" | "sm" | "md" | "lg" | "xl" | "full"', description: 'Border radius' },
+          { name: 'w', type: 'number | string', description: 'Width' },
+          { name: 'h', type: 'number | string', description: 'Height' },
+          { name: 'shadow', type: '"5" | "10" | "20" | "30" | "40"', description: 'Shadow elevation' },
+        ],
+        examples: [
+          {
+            title: 'Basic Box',
+            description: 'Box with different padding, backgrounds and border radius',
+            code: `<Box p="lg" bg="#00A0CC" rounded="md">
+  <Text color="white">Hello</Text>
+</Box>`,
+            render: () => (
+              <HStack space="md">
+                <Box p="lg" bg="#E5E7EB" rounded="md">
+                  <Text>Default</Text>
+                </Box>
+                <Box p="lg" bg="#00A0CC" rounded="md">
+                  <Text style={{ color: '#FFF' }}>Primary</Text>
+                </Box>
+                <Box p="lg" bg="#E5E7EB" rounded="full">
+                  <Text>Rounded</Text>
+                </Box>
+              </HStack>
+            ),
+          },
+          {
+            title: 'Box with Shadow',
+            description: 'Different shadow elevations',
+            code: `<Box p="lg" shadow="20" rounded="md">
+  <Text>Elevated</Text>
+</Box>`,
+            render: () => (
+              <HStack space="lg">
+                <Box p="lg" shadow="10" rounded="md" bg="#FFFFFF">
+                  <Text>Shadow 10</Text>
+                </Box>
+                <Box p="lg" shadow="20" rounded="md" bg="#FFFFFF">
+                  <Text>Shadow 20</Text>
+                </Box>
+                <Box p="lg" shadow="30" rounded="md" bg="#FFFFFF">
+                  <Text>Shadow 30</Text>
+                </Box>
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'HStack',
+        description: 'Horizontal stack layout. Arranges children in a horizontal line.',
+        props: [
+          { name: 'space', type: 'SpacingToken | number', description: 'Gap between children' },
+          { name: 'p', type: 'SpacingToken | number', description: 'Padding on all sides' },
+          { name: 'px', type: 'SpacingToken | number', description: 'Horizontal padding' },
+          { name: 'py', type: 'SpacingToken | number', description: 'Vertical padding' },
+          { name: 'alignItems', type: 'FlexAlignType', description: 'Cross-axis alignment' },
+          { name: 'justifyContent', type: 'FlexJustify', description: 'Main-axis alignment' },
+          { name: 'wrap', type: 'boolean', description: 'Allow wrapping' },
+        ],
+        examples: [
+          {
+            title: 'HStack with spacing',
+            code: `<HStack space="md" px="lg" py="sm">
+  <Box w={40} h={40} bg="#00A0CC" />
+  <Box w={40} h={40} bg="#00A0CC" />
+  <Box w={40} h={40} bg="#00A0CC" />
+</HStack>`,
+            render: () => (
+              <HStack space="md">
+                <Box style={{ width: 40, height: 40, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                <Box style={{ width: 40, height: 40, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                <Box style={{ width: 40, height: 40, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+              </HStack>
+            ),
+          },
+          {
+            title: 'HStack with alignment',
+            description: 'Different alignment options',
+            code: `<HStack space="md" justifyContent="space-between">
+  <Box />
+  <Box />
+</HStack>`,
+            render: () => (
+              <VStack space="md" style={{ width: '100%' }}>
+                <HStack space="md" justifyContent="flex-start" style={{ backgroundColor: '#F3F4F6', padding: 8, borderRadius: 4 }}>
+                  <Box style={{ width: 30, height: 30, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                  <Box style={{ width: 30, height: 30, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                  <Text variant="caption">flex-start</Text>
+                </HStack>
+                <HStack space="md" justifyContent="center" style={{ backgroundColor: '#F3F4F6', padding: 8, borderRadius: 4 }}>
+                  <Box style={{ width: 30, height: 30, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                  <Box style={{ width: 30, height: 30, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                  <Text variant="caption">center</Text>
+                </HStack>
+                <HStack space="md" justifyContent="space-between" style={{ backgroundColor: '#F3F4F6', padding: 8, borderRadius: 4 }}>
+                  <Box style={{ width: 30, height: 30, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                  <Text variant="caption">space-between</Text>
+                  <Box style={{ width: 30, height: 30, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                </HStack>
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'VStack',
+        description: 'Vertical stack layout. Arranges children in a vertical column.',
+        props: [
+          { name: 'space', type: 'SpacingToken | number', description: 'Gap between children' },
+          { name: 'p', type: 'SpacingToken | number', description: 'Padding on all sides' },
+          { name: 'px', type: 'SpacingToken | number', description: 'Horizontal padding' },
+          { name: 'py', type: 'SpacingToken | number', description: 'Vertical padding' },
+          { name: 'alignItems', type: 'FlexAlignType', description: 'Cross-axis alignment' },
+        ],
+        examples: [
+          {
+            title: 'VStack with spacing',
+            code: `<VStack space="md" px="lg">
+  <Box w={100} h={24} bg="#00A0CC" />
+  <Box w={80} h={24} bg="#00A0CC" />
+</VStack>`,
+            render: () => (
+              <VStack space="md">
+                <Box style={{ width: 150, height: 24, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                <Box style={{ width: 120, height: 24, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                <Box style={{ width: 100, height: 24, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Center',
+        description: 'Centers its child both horizontally and vertically.',
+        props: [
+          { name: 'children', type: 'ReactNode', required: true, description: 'Content to center' },
+        ],
+        examples: [
+          {
+            title: 'Centered content',
+            code: `<Center style={{ height: 100, backgroundColor: '#F3F4F6' }}>
+  <Text>Centered</Text>
+</Center>`,
+            render: () => (
+              <Center style={{ height: 80, backgroundColor: '#F3F4F6', borderRadius: 8 }}>
+                <Text weight="semiBold">Centered Content</Text>
+              </Center>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Grid',
+        description: 'CSS Grid-like layout for arranging items.',
+        props: [
+          { name: 'columns', type: 'number', default: '1', description: 'Number of columns' },
+          { name: 'gap', type: 'SpacingToken | number', default: '0', description: 'Gap between items' },
+        ],
+        examples: [
+          {
+            title: '3-column grid',
+            code: `<Grid columns={3} gap="md">
+  {items.map(item => <Box key={item} />)}
+</Grid>`,
+            render: () => (
+              <Grid columns={3} gap="sm">
+                {[1, 2, 3, 4, 5, 6].map(i => (
+                  <Box key={i} style={{ height: 40, backgroundColor: '#00A0CC', borderRadius: 4 }} />
+                ))}
+              </Grid>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Divider',
+        description: 'Visual separator between content sections.',
+        props: [
+          { name: 'orientation', type: '"horizontal" | "vertical"', default: '"horizontal"', description: 'Direction' },
+          { name: 'thickness', type: 'number', default: '1', description: 'Thickness in pixels' },
+        ],
+        examples: [
+          {
+            title: 'Horizontal Divider',
+            code: `<VStack space="md">
+  <Text>Above</Text>
+  <Divider />
+  <Text>Below</Text>
+</VStack>`,
+            render: () => (
+              <VStack space="md" style={{ width: '100%' }}>
+                <Text>Above the divider</Text>
+                <Divider />
+                <Text>Below the divider</Text>
+              </VStack>
+            ),
+          },
+          {
+            title: 'Vertical Divider',
+            code: `<HStack space="md">
+  <Text>Left</Text>
+  <Divider orientation="vertical" />
+  <Text>Right</Text>
+</HStack>`,
+            render: () => (
+              <HStack space="md" style={{ height: 40 }}>
+                <Text>Left</Text>
+                <Divider orientation="vertical" />
+                <Text>Right</Text>
+              </HStack>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Typography',
+    count: 3,
+    description: 'Text components following the Urbint type scale',
+    components: [
+      {
+        name: 'Text',
+        description: 'Primary text component with semantic variants.',
+        props: [
+          { name: 'variant', type: '"body" | "caption" | "label" | "small"', default: '"body"', description: 'Text style variant' },
+          { name: 'weight', type: '"regular" | "medium" | "semiBold" | "bold"', default: '"regular"', description: 'Font weight' },
+          { name: 'color', type: 'string', description: 'Text color' },
+          { name: 'align', type: '"left" | "center" | "right"', description: 'Text alignment' },
+        ],
+        examples: [
+          {
+            title: 'Text Variants',
+            code: `<Text variant="body">Body text</Text>
+<Text variant="caption">Caption text</Text>`,
+            render: () => (
+              <VStack space="sm">
+                <Text variant="body">Body Text (default)</Text>
+                <Text variant="caption">Caption Text (smaller, secondary)</Text>
+                <Text variant="label">Label Text</Text>
+                <Text variant="small">Small Text</Text>
+              </VStack>
+            ),
+          },
+          {
+            title: 'Text Weights',
+            code: `<Text weight="regular">Regular</Text>
+<Text weight="bold">Bold</Text>`,
+            render: () => (
+              <VStack space="sm">
+                <Text weight="regular">Regular weight</Text>
+                <Text weight="medium">Medium weight</Text>
+                <Text weight="semiBold">SemiBold weight</Text>
+                <Text weight="bold">Bold weight</Text>
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Heading',
+        description: 'Semantic heading component for page titles.',
+        props: [
+          { name: 'as', type: '"h1" | "h2" | "h3" | "h4"', required: true, description: 'Heading level' },
+          { name: 'color', type: 'string', description: 'Text color' },
+        ],
+        examples: [
+          {
+            title: 'Heading Levels',
+            code: `<Heading as="h1">Page Title</Heading>
+<Heading as="h2">Section Title</Heading>`,
+            render: () => (
+              <VStack space="md">
+                <Heading as="h1">H1 Page Title</Heading>
+                <Heading as="h2">H2 Section Title</Heading>
+                <Heading as="h3">H3 Subsection</Heading>
+                <Heading as="h4">H4 Minor Heading</Heading>
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Link',
+        description: 'Interactive text link.',
+        props: [
+          { name: 'href', type: 'string', description: 'URL to navigate to' },
+          { name: 'onPress', type: '() => void', description: 'Press handler' },
+          { name: 'isExternal', type: 'boolean', description: 'Opens in new tab' },
+        ],
+        examples: [
+          {
+            title: 'Link Styles',
+            code: `<Link href="/page">Internal Link</Link>
+<Link href="https://..." isExternal>External</Link>`,
+            render: () => (
+              <HStack space="lg">
+                <Link onPress={() => {}}>Internal Link</Link>
+                <Link onPress={() => {}} isExternal>External Link</Link>
+              </HStack>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Form Controls',
+    count: 9,
+    description: 'Form inputs and controls for user data collection',
+    components: [
+      {
+        name: 'Button',
+        description: 'Primary action component with multiple variants.',
+        props: [
+          { name: 'variant', type: '"primary" | "secondary" | "ghost" | "danger" | "outline"', default: '"primary"', description: 'Button style' },
+          { name: 'size', type: '"sm" | "md" | "lg"', default: '"md"', description: 'Button size' },
+          { name: 'isLoading', type: 'boolean', description: 'Loading state' },
+          { name: 'isDisabled', type: 'boolean', description: 'Disabled state' },
+          { name: 'onPress', type: '() => void', description: 'Press handler' },
+        ],
+        examples: [
+          {
+            title: 'Button Variants',
+            description: 'Click buttons to see press feedback',
+            code: `<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="danger">Danger</Button>`,
+            render: () => (
+              <HStack space="sm" style={{ flexWrap: 'wrap' }}>
+                <Button variant="primary" onPress={() => {}}>Primary</Button>
+                <Button variant="secondary" onPress={() => {}}>Secondary</Button>
+                <Button variant="danger" onPress={() => {}}>Danger</Button>
+                <Button variant="outline" onPress={() => {}}>Outline</Button>
+                <Button variant="ghost" onPress={() => {}}>Ghost</Button>
+              </HStack>
+            ),
+          },
+          {
+            title: 'Button Sizes',
+            code: `<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>`,
+            render: () => (
+              <HStack space="sm" style={{ alignItems: 'center' }}>
+                <Button size="sm" onPress={() => {}}>Small</Button>
+                <Button size="md" onPress={() => {}}>Medium</Button>
+                <Button size="lg" onPress={() => {}}>Large</Button>
+              </HStack>
+            ),
+          },
+          {
+            title: 'Button States',
+            code: `<Button isLoading>Loading</Button>
+<Button isDisabled>Disabled</Button>`,
+            render: () => (
+              <HStack space="sm">
+                <Button onPress={() => {}}>Normal</Button>
+                <Button isLoading onPress={() => {}}>Loading</Button>
+                <Button isDisabled>Disabled</Button>
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Input',
+        description: 'Text input field with label and validation.',
+        props: [
+          { name: 'label', type: 'string', description: 'Input label' },
+          { name: 'placeholder', type: 'string', description: 'Placeholder text' },
+          { name: 'isInvalid', type: 'boolean', description: 'Error state' },
+          { name: 'errorMessage', type: 'string', description: 'Error message' },
+          { name: 'isDisabled', type: 'boolean', description: 'Disable input' },
+          { name: 'size', type: '"sm" | "md" | "lg"', default: '"md"', description: 'Input size' },
+          { name: 'variant', type: '"outline" | "filled"', default: '"outline"', description: 'Input variant' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Input',
+            description: 'Type in the input fields to see them in action',
+            code: `<Input placeholder="Enter email..." />
+<Input placeholder="Disabled" isDisabled />`,
+            render: () => {
+              const InputDemo = () => {
+                const [value, setValue] = useState('');
+                return (
+              <VStack space="md" style={{ width: '100%' }}>
+                    <Input 
+                      placeholder="Type something..." 
+                      value={value}
+                      onChangeText={setValue}
+                    />
+                    <Input placeholder="Filled variant" variant="filled" />
+                <Input placeholder="Disabled input" isDisabled />
+                  </VStack>
+                );
+              };
+              return <InputDemo />;
+            },
+          },
+          {
+            title: 'Input Sizes',
+            code: `<Input size="sm" placeholder="Small" />
+<Input size="md" placeholder="Medium" />
+<Input size="lg" placeholder="Large" />`,
+            render: () => (
+              <VStack space="md" style={{ width: '100%' }}>
+                <Input size="sm" placeholder="Small input" />
+                <Input size="md" placeholder="Medium input" />
+                <Input size="lg" placeholder="Large input" />
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Textarea',
+        description: 'Multiline text input for longer content.',
+        props: [
+          { name: 'placeholder', type: 'string', description: 'Placeholder text' },
+          { name: 'rows', type: 'number', default: '4', description: 'Number of visible rows' },
+          { name: 'isDisabled', type: 'boolean', description: 'Disable textarea' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Textarea',
+            description: 'Type to see multiline input in action',
+            code: `<Textarea placeholder="Enter your message..." rows={4} />`,
+            render: () => {
+              const TextareaDemo = () => {
+                const [value, setValue] = useState('');
+                return (
+                  <VStack space="md" style={{ width: '100%' }}>
+                    <Textarea 
+                      placeholder="Write your message here..." 
+                      value={value}
+                      onChangeText={setValue}
+                      rows={4}
+                    />
+                  </VStack>
+                );
+              };
+              return <TextareaDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Checkbox',
+        description: 'Checkbox for boolean selections.',
+        props: [
+          { name: 'label', type: 'string', description: 'Checkbox label' },
+          { name: 'isChecked', type: 'boolean', description: 'Checked state' },
+          { name: 'onChange', type: '(checked: boolean) => void', description: 'Change handler' },
+          { name: 'isDisabled', type: 'boolean', description: 'Disable checkbox' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Checkboxes',
+            description: 'Click to toggle checkbox states',
+            code: `<Checkbox label="Accept terms" />
+<Checkbox label="Checked" isChecked />`,
+            render: () => {
+              const CheckboxDemo = () => {
+                const [checked1, setChecked1] = useState(false);
+                const [checked2, setChecked2] = useState(true);
+                const [checked3, setChecked3] = useState(false);
+                return (
+                  <VStack space="md">
+                    <Checkbox label="Accept terms and conditions" isChecked={checked1} onChange={setChecked1} />
+                    <Checkbox label="Subscribe to newsletter" isChecked={checked2} onChange={setChecked2} />
+                    <Checkbox label="Remember me" isChecked={checked3} onChange={setChecked3} />
+                    <Checkbox label="Disabled option" isDisabled />
+                  </VStack>
+                );
+              };
+              return <CheckboxDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Radio',
+        description: 'Radio button for single selection from a group.',
+        props: [
+          { name: 'label', type: 'string', description: 'Radio label' },
+          { name: 'value', type: 'string', required: true, description: 'Radio value' },
+          { name: 'isChecked', type: 'boolean', description: 'Checked state' },
+          { name: 'onChange', type: '(value: string) => void', description: 'Change handler' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Radio Group',
+            description: 'Select an option to see radio behavior',
+            code: `<Radio.Group value={value} onChange={setValue}>
+  <Radio value="option1" label="Option 1" />
+  <Radio value="option2" label="Option 2" />
+</Radio.Group>`,
+            render: () => {
+              const RadioDemo = () => {
+                const [value, setValue] = useState('option1');
+                return (
+                  <VStack space="md">
+                    <Radio value="option1" label="Option 1" isChecked={value === 'option1'} onChange={() => setValue('option1')} />
+                    <Radio value="option2" label="Option 2" isChecked={value === 'option2'} onChange={() => setValue('option2')} />
+                    <Radio value="option3" label="Option 3" isChecked={value === 'option3'} onChange={() => setValue('option3')} />
+                  </VStack>
+                );
+              };
+              return <RadioDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Switch',
+        description: 'Toggle switch for binary on/off states.',
+        props: [
+          { name: 'label', type: 'string', description: 'Switch label' },
+          { name: 'isChecked', type: 'boolean', description: 'Checked state' },
+          { name: 'onChange', type: '(checked: boolean) => void', description: 'Change handler' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Switches',
+            description: 'Toggle switches on and off',
+            code: `<Switch label="Notifications" />
+<Switch label="Dark Mode" isChecked />`,
+            render: () => {
+              const SwitchDemo = () => {
+                const [notifications, setNotifications] = useState(true);
+                const [darkMode, setDarkMode] = useState(false);
+                const [autoSave, setAutoSave] = useState(true);
+                return (
+                  <VStack space="md">
+                    <Switch label="Notifications" isChecked={notifications} onChange={setNotifications} />
+                    <Switch label="Dark Mode" isChecked={darkMode} onChange={setDarkMode} />
+                    <Switch label="Auto-save" isChecked={autoSave} onChange={setAutoSave} />
+                  </VStack>
+                );
+              };
+              return <SwitchDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Select',
+        description: 'Dropdown select with popover-style dropdown.',
+        props: [
+          { name: 'options', type: 'SelectOption[]', required: true, description: 'Array of options' },
+          { name: 'value', type: 'string', description: 'Selected value' },
+          { name: 'onChange', type: '(value: string) => void', description: 'Change handler' },
+          { name: 'placeholder', type: 'string', default: '"Select an option"', description: 'Placeholder text' },
+          { name: 'size', type: '"sm" | "md" | "lg"', default: '"md"', description: 'Select size' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Select',
+            description: 'Click to open dropdown and select an option',
+            code: `<Select
+  options={[
+    { label: 'Option 1', value: 'opt1' },
+    { label: 'Option 2', value: 'opt2' },
+  ]}
+  placeholder="Choose..."
+/>`,
+            render: () => {
+              const SelectDemo = () => {
+                const [value, setValue] = useState('');
+                return (
+                  <Select
+                    options={[
+                      { label: 'United States', value: 'us' },
+                      { label: 'United Kingdom', value: 'uk' },
+                      { label: 'Canada', value: 'ca' },
+                      { label: 'Australia', value: 'au' },
+                    ]}
+                    value={value}
+                    onChange={setValue}
+                    placeholder="Select a country..."
+                  />
+                );
+              };
+              return <SelectDemo />;
+            },
+          },
+          {
+            title: 'Custom Option Rendering',
+            description: 'Select with custom flag icons',
+            code: `<Select
+  options={options}
+  renderOption={({ option }) => (
+    <HStack><Text>{option.flag}</Text><Text>{option.label}</Text></HStack>
+  )}
+/>`,
+            render: () => {
+              const CustomSelectDemo = () => {
+                const [value, setValue] = useState('');
+                const options = [
+                  { label: 'United States', value: 'us', flag: '🇺🇸' },
+                  { label: 'United Kingdom', value: 'uk', flag: '🇬🇧' },
+                  { label: 'Canada', value: 'ca', flag: '🇨🇦' },
+                  { label: 'Australia', value: 'au', flag: '🇦🇺' },
+                ];
+                return (
+                  <Select
+                    options={options}
+                    value={value}
+                    onChange={setValue}
+                    placeholder="Select a country..."
+                    renderOption={({ option, isSelected }) => (
+                      <HStack space="sm" style={{ flex: 1 }}>
+                        <Text style={{ fontSize: 18 }}>{option.flag}</Text>
+                        <Text style={{ fontWeight: isSelected ? '600' : '400', color: isSelected ? '#00A0CC' : '#374151' }}>
+                          {option.label}
+                        </Text>
+                      </HStack>
+                    )}
+                    renderSelectedValue={({ option, placeholder }) => (
+                      option ? (
+                        <HStack space="sm">
+                          <Text style={{ fontSize: 16 }}>{option.flag}</Text>
+                          <Text>{option.label}</Text>
+                        </HStack>
+                      ) : (
+                        <Text style={{ color: '#9CA3AF' }}>{placeholder}</Text>
+                      )
+                    )}
+                  />
+                );
+              };
+              return <CustomSelectDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Slider',
+        description: 'Slider input for selecting a value from a range.',
+        props: [
+          { name: 'value', type: 'number', description: 'Current value' },
+          { name: 'min', type: 'number', default: '0', description: 'Minimum value' },
+          { name: 'max', type: 'number', default: '100', description: 'Maximum value' },
+          { name: 'step', type: 'number', default: '1', description: 'Step increment' },
+          { name: 'onChange', type: '(value: number) => void', description: 'Change handler' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Slider',
+            description: 'Drag the slider to change the value',
+            code: `<Slider value={50} min={0} max={100} onChange={setValue} />`,
+            render: () => {
+              const SliderDemo = () => {
+                const [value, setValue] = useState(50);
+                return (
+                  <VStack space="md" style={{ width: '100%' }}>
+                    <HStack justifyContent="space-between">
+                      <Text weight="semiBold">Volume</Text>
+                      <Text>{value}%</Text>
+                    </HStack>
+                    <Slider value={value} min={0} max={100} onChange={setValue} />
+                  </VStack>
+                );
+              };
+              return <SliderDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'FormControl',
+        description: 'Wrapper for form inputs providing label, help text, and error handling.',
+        props: [
+          { name: 'label', type: 'string', description: 'Form control label' },
+          { name: 'helperText', type: 'string', description: 'Helper text below input' },
+          { name: 'errorMessage', type: 'string', description: 'Error message' },
+          { name: 'isRequired', type: 'boolean', description: 'Mark as required' },
+          { name: 'isInvalid', type: 'boolean', description: 'Invalid state' },
+        ],
+        examples: [
+          {
+            title: 'FormControl with Input',
+            description: 'Complete form field with label, helper text, and validation',
+            code: `<FormControl label="Email" isRequired>
+  <Input placeholder="Enter email" />
+</FormControl>`,
+            render: () => {
+              const FormDemo = () => {
+                const [email, setEmail] = useState('');
+                const [password, setPassword] = useState('');
+                const isEmailInvalid = email.length > 0 && !email.includes('@');
+                return (
+              <VStack space="lg" style={{ width: '100%' }}>
+                    <FormControl 
+                      label="Email" 
+                      helperText="We'll never share your email" 
+                      isRequired
+                      isInvalid={isEmailInvalid}
+                      errorMessage={isEmailInvalid ? "Please enter a valid email" : undefined}
+                    >
+                      <Input 
+                        placeholder="Enter email" 
+                        value={email}
+                        onChangeText={setEmail}
+                        isInvalid={isEmailInvalid}
+                      />
+                </FormControl>
+                    <FormControl label="Password" isRequired>
+                      <Input 
+                        placeholder="Enter password" 
+                        secureTextEntry 
+                        value={password}
+                        onChangeText={setPassword}
+                      />
+                </FormControl>
+                    <Button onPress={() => {}}>Submit</Button>
+              </VStack>
+                );
+              };
+              return <FormDemo />;
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Feedback',
+    count: 5,
+    description: 'Components for displaying status and notifications',
+    components: [
+      {
+        name: 'Alert',
+        description: 'Contextual feedback messages.',
+        props: [
+          { name: 'status', type: '"info" | "success" | "warning" | "error"', default: '"info"', description: 'Alert type' },
+          { name: 'title', type: 'string', required: true, description: 'Alert title' },
+          { name: 'description', type: 'string', description: 'Alert description' },
+        ],
+        examples: [
+          {
+            title: 'Alert Variants',
+            description: 'Different alert types for various contexts',
+            code: `<Alert status="success" title="Saved!" />
+<Alert status="error" title="Error" description="Something went wrong" />`,
+            render: () => (
+              <VStack space="md">
+                <Alert status="success" title="Success" description="Your changes have been saved." />
+                <Alert status="error" title="Error" description="Something went wrong. Please try again." />
+                <Alert status="warning" title="Warning" description="Please review before continuing." />
+                <Alert status="info" title="Info" description="New updates are available." />
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Toast',
+        description: 'Brief notification messages that appear temporarily.',
+        props: [
+          { name: 'status', type: '"info" | "success" | "warning" | "error"', default: '"info"', description: 'Toast type' },
+          { name: 'title', type: 'string', required: true, description: 'Toast title' },
+          { name: 'description', type: 'string', description: 'Toast description' },
+          { name: 'duration', type: 'number', default: '3000', description: 'Display duration (ms)' },
+        ],
+        examples: [
+          {
+            title: 'Show Toast',
+            description: 'Click buttons to show different toast types',
+            code: `Toast.show({
+  status: 'success',
+  title: 'Saved!',
+  description: 'Changes have been saved.',
+})`,
+            render: () => {
+              const ToastDemo = () => {
+                const showToast = (status: 'success' | 'error' | 'warning' | 'info') => {
+                  const messages = {
+                    success: { title: 'Success!', description: 'Operation completed successfully.' },
+                    error: { title: 'Error', description: 'Something went wrong.' },
+                    warning: { title: 'Warning', description: 'Please review this action.' },
+                    info: { title: 'Info', description: 'Here is some information.' },
+                  };
+                  Toast.show({ status, ...messages[status] });
+                };
+                return (
+                  <HStack space="sm" style={{ flexWrap: 'wrap' }}>
+                    <Button variant="primary" size="sm" onPress={() => showToast('success')}>Success Toast</Button>
+                    <Button variant="danger" size="sm" onPress={() => showToast('error')}>Error Toast</Button>
+                    <Button variant="secondary" size="sm" onPress={() => showToast('warning')}>Warning Toast</Button>
+                    <Button variant="outline" size="sm" onPress={() => showToast('info')}>Info Toast</Button>
+                  </HStack>
+                );
+              };
+              return <ToastDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Progress',
+        description: 'Visual indicator of progress.',
+        props: [
+          { name: 'value', type: 'number', description: 'Progress value (0-100)' },
+          { name: 'size', type: '"sm" | "md" | "lg"', default: '"md"', description: 'Progress size' },
+          { name: 'colorScheme', type: 'string', description: 'Color scheme' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Progress',
+            description: 'Use buttons to change progress value',
+            code: `<Progress value={50} size="md" />`,
+            render: () => {
+              const ProgressDemo = () => {
+                const [value, setValue] = useState(50);
+                return (
+              <VStack space="lg" style={{ width: '100%' }}>
+                    <VStack space="sm">
+                      <HStack justifyContent="space-between">
+                        <Text weight="semiBold">Upload Progress</Text>
+                        <Text>{value}%</Text>
+                      </HStack>
+                      <Progress value={value} size="md" />
+                    </VStack>
+                    <HStack space="sm">
+                      <Button size="sm" variant="secondary" onPress={() => setValue(Math.max(0, value - 10))}>-10%</Button>
+                      <Button size="sm" variant="secondary" onPress={() => setValue(Math.min(100, value + 10))}>+10%</Button>
+                      <Button size="sm" variant="outline" onPress={() => setValue(0)}>Reset</Button>
+                    </HStack>
+                    <Divider />
+                    <Text weight="semiBold">Sizes</Text>
+                    <VStack space="md" style={{ width: '100%' }}>
+                <Progress value={25} size="sm" />
+                <Progress value={50} size="md" />
+                <Progress value={75} size="lg" />
+              </VStack>
+                  </VStack>
+                );
+              };
+              return <ProgressDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Spinner',
+        description: 'Loading indicator.',
+        props: [
+          { name: 'size', type: '"xs" | "sm" | "md" | "lg" | "xl"', default: '"md"', description: 'Spinner size' },
+          { name: 'color', type: 'string', description: 'Spinner color' },
+        ],
+        examples: [
+          {
+            title: 'Spinner Sizes',
+            code: `<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner size="lg" />`,
+            render: () => (
+              <HStack space="xl" style={{ alignItems: 'center' }}>
+                <VStack alignItems="center" space="xs">
+                  <Spinner size="xs" />
+                  <Text variant="caption">xs</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                <Spinner size="sm" />
+                  <Text variant="caption">sm</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                <Spinner size="md" />
+                  <Text variant="caption">md</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                <Spinner size="lg" />
+                  <Text variant="caption">lg</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                  <Spinner size="xl" />
+                  <Text variant="caption">xl</Text>
+                </VStack>
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Skeleton',
+        description: 'Placeholder loading state for content.',
+        props: [
+          { name: 'width', type: 'number | string', description: 'Skeleton width' },
+          { name: 'height', type: 'number | string', description: 'Skeleton height' },
+          { name: 'variant', type: '"text" | "circle" | "rect"', default: '"rect"', description: 'Skeleton shape' },
+          { name: 'isLoaded', type: 'boolean', description: 'Toggle loading state' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Skeleton',
+            description: 'Toggle loading state to see content appear',
+            code: `<Skeleton width={200} height={16} isLoaded={isLoaded}>
+  <Text>Actual content</Text>
+</Skeleton>`,
+            render: () => {
+              const SkeletonDemo = () => {
+                const [isLoaded, setIsLoaded] = useState(false);
+                return (
+                  <VStack space="lg" style={{ width: '100%' }}>
+                    <Button 
+                      size="sm" 
+                      variant="secondary" 
+                      onPress={() => setIsLoaded(!isLoaded)}
+                    >
+                      {isLoaded ? 'Show Loading' : 'Show Content'}
+                    </Button>
+                <HStack space="md">
+                      <Skeleton width={50} height={50} style={{ borderRadius: 25 }} isLoaded={isLoaded}>
+                        <Avatar name="John Doe" size="lg" />
+                      </Skeleton>
+                  <VStack space="sm" style={{ flex: 1 }}>
+                        <Skeleton width="80%" height={16} isLoaded={isLoaded}>
+                          <Text weight="semiBold">John Doe</Text>
+                        </Skeleton>
+                        <Skeleton width="60%" height={14} isLoaded={isLoaded}>
+                          <Text variant="caption">Software Engineer</Text>
+                        </Skeleton>
+                  </VStack>
+                </HStack>
+              </VStack>
+                );
+              };
+              return <SkeletonDemo />;
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Data Display',
+    count: 6,
+    description: 'Components for presenting data and content',
+    components: [
+      {
+        name: 'Avatar',
+        description: 'User profile image with fallback.',
+        props: [
+          { name: 'src', type: 'string', description: 'Image source URL' },
+          { name: 'name', type: 'string', description: 'Name for initials' },
+          { name: 'size', type: '"xs" | "sm" | "md" | "lg" | "xl"', default: '"md"', description: 'Avatar size' },
+          { name: 'showBadge', type: 'boolean', description: 'Show status badge' },
+        ],
+        examples: [
+          {
+            title: 'Avatar Sizes',
+            code: `<Avatar name="John Doe" size="sm" />
+<Avatar name="Jane" size="lg" showBadge />`,
+            render: () => (
+              <HStack space="lg" style={{ alignItems: 'center' }}>
+                <VStack alignItems="center" space="xs">
+                  <Avatar name="XS" size="xs" />
+                  <Text variant="caption">xs</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                  <Avatar name="SM User" size="sm" />
+                  <Text variant="caption">sm</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                <Avatar name="MD User" size="md" />
+                  <Text variant="caption">md</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                <Avatar name="Large" size="lg" showBadge />
+                  <Text variant="caption">lg + badge</Text>
+                </VStack>
+                <VStack alignItems="center" space="xs">
+                  <Avatar name="Extra Large" size="xl" />
+                  <Text variant="caption">xl</Text>
+                </VStack>
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Badge',
+        description: 'Small label for status indicators.',
+        props: [
+          { name: 'variant', type: '"gray" | "red" | "green" | "blue" | "purple" | "orange" | "yellow"', default: '"gray"', description: 'Badge color' },
+          { name: 'size', type: '"sm" | "md" | "lg"', default: '"md"', description: 'Badge size' },
+        ],
+        examples: [
+          {
+            title: 'Badge Variants',
+            code: `<Badge variant="green">Active</Badge>
+<Badge variant="red">Critical</Badge>`,
+            render: () => (
+              <VStack space="md">
+              <HStack space="sm" style={{ flexWrap: 'wrap' }}>
+                  <Badge variant="gray">Default</Badge>
+                <Badge variant="green">Active</Badge>
+                <Badge variant="red">Critical</Badge>
+                <Badge variant="blue">Info</Badge>
+                <Badge variant="purple">New</Badge>
+                <Badge variant="orange">Pending</Badge>
+                  <Badge variant="yellow">Warning</Badge>
+              </HStack>
+                <Divider />
+                <Text weight="semiBold">Sizes</Text>
+                <HStack space="sm" style={{ alignItems: 'center' }}>
+                  <Badge variant="blue" size="sm">Small</Badge>
+                  <Badge variant="blue" size="md">Medium</Badge>
+                  <Badge variant="blue" size="lg">Large</Badge>
+                </HStack>
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Card',
+        description: 'Container for related content.',
+        props: [
+          { name: 'variant', type: '"elevated" | "outline" | "filled"', default: '"elevated"', description: 'Card style' },
+          { name: 'padding', type: '"none" | "sm" | "md" | "lg"', default: '"md"', description: 'Internal padding' },
+        ],
+        examples: [
+          {
+            title: 'Card Variants',
+            description: 'Different card styles for various use cases',
+            code: `<Card variant="elevated">
+  <Text>Elevated card content</Text>
+</Card>`,
+            render: () => (
+              <VStack space="lg">
+                <Card variant="elevated">
+                  <VStack space="sm">
+                  <Text weight="semiBold">Elevated Card</Text>
+                    <Text variant="caption">Card with shadow elevation</Text>
+                    <HStack space="sm">
+                      <Button size="sm" variant="primary" onPress={() => {}}>Action</Button>
+                      <Button size="sm" variant="ghost" onPress={() => {}}>Cancel</Button>
+                    </HStack>
+                  </VStack>
+                </Card>
+                <Card variant="outline">
+                  <VStack space="sm">
+                  <Text weight="semiBold">Outline Card</Text>
+                    <Text variant="caption">Card with border</Text>
+                  </VStack>
+                </Card>
+                <Card variant="filled">
+                  <VStack space="sm">
+                  <Text weight="semiBold">Filled Card</Text>
+                    <Text variant="caption">Card with solid background</Text>
+                  </VStack>
+                </Card>
+              </VStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Table',
+        description: 'Data table for displaying tabular information.',
+        props: [
+          { name: 'data', type: 'object[]', required: true, description: 'Table data array' },
+          { name: 'columns', type: 'Column[]', required: true, description: 'Column definitions' },
+          { name: 'striped', type: 'boolean', description: 'Alternating row colors' },
+        ],
+        examples: [
+          {
+            title: 'Table with Status Badges',
+            code: `<Table columns={columns} data={data} />`,
+            render: () => (
+              <View style={{ borderWidth: 1, borderColor: '#E5E7EB', borderRadius: 8, overflow: 'hidden' }}>
+                <View style={{ flexDirection: 'row', backgroundColor: '#F9FAFB', borderBottomWidth: 1, borderBottomColor: '#E5E7EB' }}>
+                  <View style={{ flex: 1, padding: 12 }}><Text weight="semiBold">Name</Text></View>
+                  <View style={{ flex: 1, padding: 12 }}><Text weight="semiBold">Status</Text></View>
+                  <View style={{ flex: 1, padding: 12 }}><Text weight="semiBold">Date</Text></View>
+                </View>
+                {[
+                  { name: 'Project Alpha', status: 'Active', variant: 'green' as const, date: '2024-01-15' },
+                  { name: 'Project Beta', status: 'Pending', variant: 'orange' as const, date: '2024-01-14' },
+                  { name: 'Project Gamma', status: 'Completed', variant: 'gray' as const, date: '2024-01-13' },
+                ].map((row, i) => (
+                  <View key={i} style={{ flexDirection: 'row', borderBottomWidth: i < 2 ? 1 : 0, borderBottomColor: '#E5E7EB' }}>
+                    <View style={{ flex: 1, padding: 12 }}><Text>{row.name}</Text></View>
+                    <View style={{ flex: 1, padding: 12 }}><Badge variant={row.variant}>{row.status}</Badge></View>
+                    <View style={{ flex: 1, padding: 12 }}><Text variant="caption">{row.date}</Text></View>
+                  </View>
+                ))}
+              </View>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Icon',
+        description: 'SVG icon component with consistent sizing.',
+        props: [
+          { name: 'name', type: 'string', required: true, description: 'Icon name' },
+          { name: 'size', type: 'number', default: '24', description: 'Icon size in pixels' },
+          { name: 'color', type: 'string', description: 'Icon color' },
+        ],
+        examples: [
+          {
+            title: 'Icon Sizes and Colors',
+            code: `<Icon name="check" size={24} color="#00A0CC" />`,
+            render: () => (
+              <HStack space="lg" style={{ alignItems: 'center' }}>
+                <Icon name="check" size={16} color="#22C55E" />
+                <Icon name="close" size={20} color="#EF4444" />
+                <Icon name="info" size={24} color="#3B82F6" />
+                <Icon name="warning" size={28} color="#F59E0B" />
+                <Icon name="chevron-right" size={32} color="#6B7280" />
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Image',
+        description: 'Optimized image component with loading states.',
+        props: [
+          { name: 'src', type: 'string', required: true, description: 'Image source URL' },
+          { name: 'alt', type: 'string', required: true, description: 'Alt text' },
+          { name: 'width', type: 'number | string', description: 'Image width' },
+          { name: 'height', type: 'number | string', description: 'Image height' },
+        ],
+        examples: [
+          {
+            title: 'Image Example',
+            code: `<Image src="https://..." alt="Description" width={200} />`,
+            render: () => (
+              <Center style={{ width: 200, height: 120, backgroundColor: '#E5E7EB', borderRadius: 8 }}>
+                <Text variant="caption" color="#9CA3AF">200 × 120</Text>
+              </Center>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Actions',
+    count: 4,
+    description: 'Interactive components for user actions',
+    components: [
+      {
+        name: 'Pressable',
+        description: 'Base pressable component with press states.',
+        props: [
+          { name: 'onPress', type: '() => void', description: 'Press handler' },
+          { name: 'onLongPress', type: '() => void', description: 'Long press handler' },
+          { name: 'disabled', type: 'boolean', description: 'Disable press' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Pressable',
+            description: 'Press to see the visual feedback',
+            code: `<Pressable onPress={() => console.log('pressed')}>
+  <Text>Tap me</Text>
+</Pressable>`,
+            render: () => {
+              const PressableDemo = () => {
+                const [pressCount, setPressCount] = useState(0);
+                return (
+                  <VStack space="md" alignItems="center">
+                    <Pressable onPress={() => setPressCount(c => c + 1)}>
+                      <Box p="lg" bg="#F3F4F6" rounded="md">
+                        <Text>Tap me!</Text>
+                      </Box>
+                    </Pressable>
+                    <Text variant="caption">Press count: {pressCount}</Text>
+                  </VStack>
+                );
+              };
+              return <PressableDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Fab',
+        description: 'Floating action button for primary screen actions.',
+        props: [
+          { name: 'icon', type: 'ReactNode', required: true, description: 'FAB icon' },
+          { name: 'position', type: '"bottom-right" | "bottom-left"', default: '"bottom-right"', description: 'Position' },
+          { name: 'size', type: '"sm" | "md" | "lg"', default: '"md"', description: 'FAB size' },
+          { name: 'label', type: 'string', description: 'Extended FAB label' },
+        ],
+        examples: [
+          {
+            title: 'FAB Variants',
+            description: 'Click FABs to see interaction',
+            code: `<Fab icon={<Icon name="plus" />} />
+<Fab icon={<Icon name="plus" />} label="Add New" />`,
+            render: () => {
+              const FabDemo = () => {
+                const [count, setCount] = useState(0);
+                return (
+                  <VStack space="lg" alignItems="center">
+                    <HStack space="lg">
+                      <Fab icon={<Icon name="plus" color="#FFFFFF" />} onPress={() => setCount(c => c + 1)} />
+                      <Fab icon={<Icon name="plus" color="#FFFFFF" />} label="Add New" onPress={() => setCount(c => c + 1)} />
+                    </HStack>
+                    <Text variant="caption">Items added: {count}</Text>
+                  </VStack>
+                );
+              };
+              return <FabDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Accordion',
+        description: 'Expandable content sections.',
+        props: [
+          { name: 'defaultIndex', type: 'string[]', description: 'Initially expanded items' },
+          { name: 'allowMultiple', type: 'boolean', description: 'Allow multiple sections open' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Accordion',
+            description: 'Click sections to expand/collapse',
+            code: `<Accordion>
+  <AccordionItem value="section-1">
+    <AccordionButton>Section 1</AccordionButton>
+    <AccordionPanel>Content</AccordionPanel>
+  </AccordionItem>
+</Accordion>`,
+            render: () => (
+              <Accordion defaultIndex={['section-1']}>
+                <AccordionItem value="section-1">
+                  <AccordionButton>What is Urbint CL?</AccordionButton>
+                  <AccordionPanel>
+                    <Text variant="caption">
+                      Urbint CL is an enterprise-ready React Native component library designed for building 
+                      consistent and accessible mobile applications.
+                    </Text>
+                  </AccordionPanel>
+                </AccordionItem>
+                <AccordionItem value="section-2">
+                  <AccordionButton>How do I get started?</AccordionButton>
+                  <AccordionPanel>
+                    <Text variant="caption">
+                      Install the package via npm and import the components you need. Check the installation 
+                      guide for detailed instructions.
+                    </Text>
+                  </AccordionPanel>
+                </AccordionItem>
+                <AccordionItem value="section-3">
+                  <AccordionButton>Is it customizable?</AccordionButton>
+                  <AccordionPanel>
+                    <Text variant="caption">
+                      Yes! All components support theming and can be customized using style props or 
+                      the theming system.
+                    </Text>
+                  </AccordionPanel>
+                </AccordionItem>
+              </Accordion>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Menu',
+        description: 'Dropdown menu with selectable options.',
+        props: [
+          { name: 'trigger', type: 'ReactNode', required: true, description: 'Menu trigger' },
+          { name: 'items', type: 'MenuItem[]', required: true, description: 'Menu items' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Menu',
+            description: 'Click the button to open the menu',
+            code: `<Menu trigger={<Button>Options</Button>}>
+  <MenuItem>Profile</MenuItem>
+  <MenuItem>Settings</MenuItem>
+</Menu>`,
+            render: () => {
+              const MenuDemo = () => {
+                const [selected, setSelected] = useState('');
+                return (
+                  <VStack space="md" alignItems="flex-start">
+                    <Menu
+                      trigger={<Button variant="secondary" onPress={() => {}}>Options ▼</Button>}
+                      items={[
+                        { label: 'Profile', onPress: () => setSelected('Profile') },
+                        { label: 'Settings', onPress: () => setSelected('Settings') },
+                        { label: 'Help', onPress: () => setSelected('Help') },
+                        { label: 'Logout', onPress: () => setSelected('Logout'), destructive: true },
+                      ]}
+                    />
+                    {selected && <Text variant="caption">Last selected: {selected}</Text>}
+                  </VStack>
+                );
+              };
+              return <MenuDemo />;
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Overlay',
+    count: 7,
+    description: 'Modal dialogs, drawers, and floating UI elements',
+    components: [
+      {
+        name: 'Modal',
+        description: 'Dialog overlay for focused user interactions.',
+        props: [
+          { name: 'isOpen', type: 'boolean', required: true, description: 'Open state' },
+          { name: 'onClose', type: '() => void', required: true, description: 'Close handler' },
+          { name: 'size', type: '"sm" | "md" | "lg" | "xl" | "full"', default: '"md"', description: 'Modal size' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Modal',
+            description: 'Click to open modal dialog',
+            code: `<Modal isOpen={isOpen} onClose={onClose}>
+  <ModalHeader>Title</ModalHeader>
+  <ModalBody>Content</ModalBody>
+  <ModalFooter>
+    <Button>Confirm</Button>
+  </ModalFooter>
+</Modal>`,
+            render: () => {
+              const ModalDemo = () => {
+                const [isOpen, setIsOpen] = useState(false);
+                return (
+                  <VStack space="md">
+                    <Button onPress={() => setIsOpen(true)}>Open Modal</Button>
+                    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                      <ModalHeader>Confirm Action</ModalHeader>
+                      <ModalBody>
+                        <Text>Are you sure you want to proceed with this action?</Text>
+                      </ModalBody>
+                      <ModalFooter>
+                        <HStack space="sm">
+                          <Button variant="ghost" onPress={() => setIsOpen(false)}>Cancel</Button>
+                          <Button onPress={() => setIsOpen(false)}>Confirm</Button>
+                        </HStack>
+                      </ModalFooter>
+                    </Modal>
+                  </VStack>
+                );
+              };
+              return <ModalDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Drawer',
+        description: 'Slide-out panel from screen edge.',
+        props: [
+          { name: 'isOpen', type: 'boolean', required: true, description: 'Open state' },
+          { name: 'onClose', type: '() => void', required: true, description: 'Close handler' },
+          { name: 'placement', type: '"left" | "right" | "top" | "bottom"', default: '"right"', description: 'Position' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Drawer',
+            description: 'Click to open drawer panel',
+            code: `<Drawer isOpen={isOpen} onClose={onClose} placement="right">
+  <DrawerHeader>Menu</DrawerHeader>
+  <DrawerBody>Content</DrawerBody>
+</Drawer>`,
+            render: () => {
+              const DrawerDemo = () => {
+                const [isOpen, setIsOpen] = useState(false);
+                return (
+                  <VStack space="md">
+                    <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
+                    <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} placement="right">
+                      <DrawerHeader>Navigation</DrawerHeader>
+                      <DrawerBody>
+                        <VStack space="md">
+                          <Pressable onPress={() => setIsOpen(false)}>
+                            <Text>Home</Text>
+                          </Pressable>
+                          <Pressable onPress={() => setIsOpen(false)}>
+                            <Text>Profile</Text>
+                          </Pressable>
+                          <Pressable onPress={() => setIsOpen(false)}>
+                            <Text>Settings</Text>
+                          </Pressable>
+                        </VStack>
+                      </DrawerBody>
+                    </Drawer>
+                  </VStack>
+                );
+              };
+              return <DrawerDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'AlertDialog',
+        description: 'Confirmation dialog requiring user action.',
+        props: [
+          { name: 'isOpen', type: 'boolean', required: true, description: 'Open state' },
+          { name: 'onClose', type: '() => void', required: true, description: 'Close handler' },
+          { name: 'onConfirm', type: '() => void', required: true, description: 'Confirm handler' },
+          { name: 'title', type: 'string', required: true, description: 'Dialog title' },
+          { name: 'description', type: 'string', description: 'Dialog description' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Alert Dialog',
+            description: 'Click to show confirmation dialog',
+            code: `<AlertDialog 
+  isOpen={isOpen} 
+  title="Delete Item?"
+  onConfirm={handleDelete}
+/>`,
+            render: () => {
+              const AlertDialogDemo = () => {
+                const [isOpen, setIsOpen] = useState(false);
+                const [deleted, setDeleted] = useState(false);
+                return (
+                  <VStack space="md">
+                    <Button variant="danger" onPress={() => setIsOpen(true)}>Delete Item</Button>
+                    {deleted && <Alert status="success" title="Item deleted successfully" />}
+                    <AlertDialog
+                      isOpen={isOpen}
+                      onClose={() => setIsOpen(false)}
+                      onConfirm={() => {
+                        setDeleted(true);
+                        setIsOpen(false);
+                      }}
+                      title="Delete Item?"
+                      description="This action cannot be undone. The item will be permanently removed."
+                    />
+                  </VStack>
+                );
+              };
+              return <AlertDialogDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Popover',
+        description: 'Floating content anchored to a trigger element.',
+        props: [
+          { name: 'trigger', type: 'ReactNode', required: true, description: 'Trigger element' },
+          { name: 'placement', type: '"top" | "bottom" | "left" | "right"', default: '"bottom"', description: 'Position' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Popover',
+            description: 'Click to show popover',
+            code: `<Popover trigger={<Button>Open</Button>}>
+  <Text>Popover content</Text>
+</Popover>`,
+            render: () => (
+              <HStack space="md">
+                <Popover
+                  trigger={<Button variant="secondary" onPress={() => {}}>Show Info</Button>}
+                  placement="bottom"
+                >
+                  <VStack space="sm" p="md">
+                    <Text weight="semiBold">Popover Title</Text>
+                    <Text variant="caption">This is additional information displayed in a popover.</Text>
+                  </VStack>
+                </Popover>
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Tooltip',
+        description: 'Informational text that appears on hover/press.',
+        props: [
+          { name: 'label', type: 'string', required: true, description: 'Tooltip text' },
+          { name: 'placement', type: '"top" | "bottom" | "left" | "right"', default: '"top"', description: 'Position' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Tooltip',
+            description: 'Hover or press to see tooltip',
+            code: `<Tooltip label="Helpful tip">
+  <Button>Hover me</Button>
+</Tooltip>`,
+            render: () => (
+              <HStack space="lg">
+                <Tooltip label="This saves your progress" placement="top">
+                  <Button variant="primary" onPress={() => {}}>Save</Button>
+                </Tooltip>
+                <Tooltip label="Delete this item permanently" placement="bottom">
+                  <Button variant="danger" onPress={() => {}}>Delete</Button>
+                </Tooltip>
+              </HStack>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'ActionSheet',
+        description: 'Bottom sheet with action options.',
+        props: [
+          { name: 'isOpen', type: 'boolean', required: true, description: 'Open state' },
+          { name: 'onClose', type: '() => void', required: true, description: 'Close handler' },
+          { name: 'actions', type: 'Action[]', required: true, description: 'Action items' },
+        ],
+        examples: [
+          {
+            title: 'Interactive Action Sheet',
+            description: 'Click to show action sheet',
+            code: `<ActionSheet 
+  isOpen={isOpen} 
+  actions={[
+    { label: 'Edit', onPress: handleEdit },
+    { label: 'Delete', onPress: handleDelete, destructive: true },
+  ]}
+/>`,
+            render: () => {
+              const ActionSheetDemo = () => {
+                const [isOpen, setIsOpen] = useState(false);
+                const [lastAction, setLastAction] = useState('');
+                return (
+                  <VStack space="md">
+                    <Button onPress={() => setIsOpen(true)}>Show Actions</Button>
+                    {lastAction && <Text variant="caption">Last action: {lastAction}</Text>}
+                    <ActionSheet
+                      isOpen={isOpen}
+                      onClose={() => setIsOpen(false)}
+                      actions={[
+                        { label: 'Edit', onPress: () => { setLastAction('Edit'); setIsOpen(false); } },
+                        { label: 'Duplicate', onPress: () => { setLastAction('Duplicate'); setIsOpen(false); } },
+                        { label: 'Share', onPress: () => { setLastAction('Share'); setIsOpen(false); } },
+                        { label: 'Delete', onPress: () => { setLastAction('Delete'); setIsOpen(false); }, destructive: true },
+                      ]}
+                    />
+                  </VStack>
+                );
+              };
+              return <ActionSheetDemo />;
+            },
+          },
+        ],
+      },
+      {
+        name: 'Portal',
+        description: 'Renders children in a different part of the DOM tree.',
+        props: [
+          { name: 'children', type: 'ReactNode', required: true, description: 'Content to render' },
+        ],
+        examples: [
+          {
+            title: 'Portal Usage',
+            description: 'Portals render content outside the parent hierarchy',
+            code: `<Portal>
+  <Modal>Content escapes overflow:hidden</Modal>
+</Portal>`,
+            render: () => (
+              <Box p="lg" bg="#F3F4F6" rounded="md">
+                <Text variant="caption">
+                  Portal renders children at the root level of the app, allowing modals and 
+                  tooltips to escape overflow:hidden containers. Used internally by Modal, 
+                  Drawer, and other overlay components.
+                </Text>
+              </Box>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Utility',
+    count: 1,
+    description: 'Utility components for advanced use cases',
+    components: [
+      {
+        name: 'Portal',
+        description: 'Renders children in a different part of the DOM tree, useful for modals and overlays.',
+        props: [
+          { name: 'children', type: 'ReactNode', required: true, description: 'Content to render' },
+          { name: 'containerId', type: 'string', description: 'Target container ID' },
+        ],
+        examples: [
+          {
+            title: 'Portal Usage',
+            description: 'Portals render content outside the parent hierarchy',
+            code: `<Portal>
+  <Modal>
+    This modal escapes overflow:hidden
+  </Modal>
+</Portal>`,
+            render: () => (
+              <Box p="lg" bg="#F3F4F6" rounded="md">
+                <Text variant="caption">
+                  Portal renders children at the root level of the app, allowing modals and tooltips 
+                  to escape overflow:hidden containers.
+                </Text>
+              </Box>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+];