@urbint/cl 1.0.1

package/mcp-server/src/registry/components.ts

@@ -0,0 +1,1446 @@
+/**
+ * Urbint Component Library - Component Registry
+ * Complete metadata for all components in the design system
+ */
+
+export interface ComponentProp {
+  name: string;
+  type: string;
+  required: boolean;
+  default?: string;
+  description: string;
+}
+
+export interface ComponentExample {
+  title: string;
+  description?: string;
+  code: string;
+}
+
+export interface ComponentMetadata {
+  name: string;
+  displayName: string;
+  description: string;
+  category: 'layout' | 'typography' | 'form' | 'feedback' | 'data-display' | 'overlay' | 'action' | 'utility';
+  importPath: string;
+  props: ComponentProp[];
+  examples: ComponentExample[];
+  relatedComponents?: string[];
+  tags: string[];
+}
+
+export const componentRegistry: ComponentMetadata[] = [
+  // ===== LAYOUT COMPONENTS =====
+  {
+    name: 'Box',
+    displayName: 'Box',
+    description: 'The most fundamental layout component. A polymorphic container with style props for padding, margin, colors, shadows, and flexbox.',
+    category: 'layout',
+    importPath: "import { Box } from '@urbint/cl';",
+    props: [
+      { name: 'p', type: "SpacingToken | number", required: false, description: "Padding all sides ('xs', 'sm', 'md', 'lg', 'xl', '2xl', etc.)" },
+      { name: 'px', type: "SpacingToken | number", required: false, description: 'Horizontal padding' },
+      { name: 'py', type: "SpacingToken | number", required: false, description: 'Vertical padding' },
+      { name: 'pt', type: "SpacingToken | number", required: false, description: 'Padding top' },
+      { name: 'pb', type: "SpacingToken | number", required: false, description: 'Padding bottom' },
+      { name: 'pl', type: "SpacingToken | number", required: false, description: 'Padding left' },
+      { name: 'pr', type: "SpacingToken | number", required: false, description: 'Padding right' },
+      { name: 'm', type: "SpacingToken | number", required: false, description: 'Margin all sides' },
+      { name: 'mx', type: "SpacingToken | number", required: false, description: 'Horizontal margin' },
+      { name: 'my', type: "SpacingToken | number", required: false, description: 'Vertical margin' },
+      { name: 'gap', type: "SpacingToken | number", required: false, description: 'Gap between children' },
+      { name: 'bg', type: 'string', required: false, description: 'Background color' },
+      { name: 'rounded', type: "'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'", required: false, description: 'Border radius' },
+      { name: 'shadow', type: "'5' | '10' | '20' | '30' | '40'", required: false, description: 'Shadow elevation' },
+      { name: 'w', type: 'number | string', required: false, description: 'Width' },
+      { name: 'h', type: 'number | string', required: false, description: 'Height' },
+      { name: 'flex', type: 'number', required: false, description: 'Flex value' },
+      { name: 'flexDirection', type: "'row' | 'column'", required: false, description: 'Flex direction' },
+      { name: 'alignItems', type: 'FlexAlignType', required: false, description: 'Cross-axis alignment' },
+      { name: 'justifyContent', type: 'FlexJustify', required: false, description: 'Main-axis alignment' },
+    ],
+    examples: [
+      {
+        title: 'Basic Box with Spacing Tokens',
+        code: `<Box p="lg" bg="brand.blue" rounded="md" shadow="10">
+  <Text color="white">Content</Text>
+</Box>`
+      },
+      {
+        title: 'Flex Container',
+        code: `<Box flexDirection="row" gap="md" alignItems="center">
+  <Avatar name="John" />
+  <Text>John Doe</Text>
+</Box>`
+      }
+    ],
+    relatedComponents: ['VStack', 'HStack', 'Center'],
+    tags: ['container', 'layout', 'spacing', 'flexbox']
+  },
+
+  {
+    name: 'HStack',
+    displayName: 'HStack',
+    description: 'Horizontal stack layout that arranges children in a row with consistent spacing.',
+    category: 'layout',
+    importPath: "import { HStack } from '@urbint/cl';",
+    props: [
+      { name: 'space', type: "SpacingToken | number", required: false, default: "'none'", description: "Gap between children ('xs', 'sm', 'md', 'lg', 'xl', etc.)" },
+      { name: 'alignItems', type: 'FlexAlignType', required: false, default: "'center'", description: 'Cross-axis alignment' },
+      { name: 'justifyContent', type: 'FlexJustify', required: false, default: "'flex-start'", description: 'Main-axis alignment' },
+      { name: 'wrap', type: 'boolean', required: false, default: 'false', description: 'Allow wrapping to next line' },
+      { name: 'reversed', type: 'boolean', required: false, default: 'false', description: 'Reverse order' },
+      { name: 'px', type: "SpacingToken | number", required: false, description: 'Horizontal padding' },
+      { name: 'py', type: "SpacingToken | number", required: false, description: 'Vertical padding' },
+    ],
+    examples: [
+      {
+        title: 'Basic HStack',
+        code: `<HStack space="sm" alignItems="center">
+  <Avatar name="John" />
+  <Text>John Doe</Text>
+</HStack>`
+      },
+      {
+        title: 'Button Row',
+        code: `<HStack space="xl" justifyContent="flex-end">
+  <Button variant="ghost">Cancel</Button>
+  <Button variant="primary">Submit</Button>
+</HStack>`
+      }
+    ],
+    relatedComponents: ['VStack', 'Box', 'Center'],
+    tags: ['horizontal', 'row', 'stack', 'layout', 'spacing']
+  },
+
+  {
+    name: 'VStack',
+    displayName: 'VStack',
+    description: 'Vertical stack layout that arranges children in a column with consistent spacing.',
+    category: 'layout',
+    importPath: "import { VStack } from '@urbint/cl';",
+    props: [
+      { name: 'space', type: "SpacingToken | number", required: false, default: "'none'", description: "Gap between children ('xs', 'sm', 'md', 'lg', 'xl', etc.)" },
+      { name: 'alignItems', type: 'FlexAlignType', required: false, default: "'stretch'", description: 'Cross-axis alignment' },
+      { name: 'justifyContent', type: 'FlexJustify', required: false, default: "'flex-start'", description: 'Main-axis alignment' },
+      { name: 'px', type: "SpacingToken | number", required: false, description: 'Horizontal padding' },
+      { name: 'py', type: "SpacingToken | number", required: false, description: 'Vertical padding' },
+    ],
+    examples: [
+      {
+        title: 'Form Layout',
+        code: `<VStack space="lg">
+  <Input label="Email" />
+  <Input label="Password" isPassword />
+  <Button>Sign In</Button>
+</VStack>`
+      },
+      {
+        title: 'Card Content',
+        code: `<VStack space="md">
+  <Heading as="h2">Title</Heading>
+  <Text>Description text here</Text>
+  <Button variant="primary">Action</Button>
+</VStack>`
+      }
+    ],
+    relatedComponents: ['HStack', 'Box', 'Center'],
+    tags: ['vertical', 'column', 'stack', 'layout', 'spacing']
+  },
+
+  {
+    name: 'Center',
+    displayName: 'Center',
+    description: 'Centers children both horizontally and vertically.',
+    category: 'layout',
+    importPath: "import { Center } from '@urbint/cl';",
+    props: [
+      { name: 'h', type: 'number | string', required: false, description: 'Height of the container' },
+      { name: 'w', type: 'number | string', required: false, description: 'Width of the container' },
+    ],
+    examples: [
+      {
+        title: 'Centered Spinner',
+        code: `<Center h={200}>
+  <Spinner />
+</Center>`
+      }
+    ],
+    relatedComponents: ['Box', 'VStack', 'HStack'],
+    tags: ['center', 'align', 'layout']
+  },
+
+  {
+    name: 'Grid',
+    displayName: 'Grid',
+    description: 'Grid layout for arranging items in rows and columns.',
+    category: 'layout',
+    importPath: "import { Grid, GridItem } from '@urbint/cl';",
+    props: [
+      { name: 'columns', type: 'number', required: false, default: '1', description: 'Number of columns' },
+      { name: 'gap', type: "SpacingToken | number", required: false, default: "'none'", description: "Gap between items ('xs', 'sm', 'md', 'lg', etc.)" },
+      { name: 'rowGap', type: "SpacingToken | number", required: false, description: 'Gap between rows' },
+      { name: 'columnGap', type: "SpacingToken | number", required: false, description: 'Gap between columns' },
+    ],
+    examples: [
+      {
+        title: 'Three Column Grid',
+        code: `<Grid columns={3} gap="lg">
+  <GridItem><Card>1</Card></GridItem>
+  <GridItem><Card>2</Card></GridItem>
+  <GridItem><Card>3</Card></GridItem>
+</Grid>`
+      }
+    ],
+    relatedComponents: ['Box', 'VStack', 'HStack'],
+    tags: ['grid', 'columns', 'layout', 'responsive']
+  },
+
+  {
+    name: 'Divider',
+    displayName: 'Divider',
+    description: 'Visual separator between content sections.',
+    category: 'layout',
+    importPath: "import { Divider } from '@urbint/cl';",
+    props: [
+      { name: 'orientation', type: "'horizontal' | 'vertical'", required: false, default: "'horizontal'", description: 'Direction of the divider' },
+      { name: 'thickness', type: 'number', required: false, default: '1', description: 'Line thickness in pixels' },
+      { name: 'color', type: 'string', required: false, default: 'border.disabled', description: 'Divider color' },
+    ],
+    examples: [
+      {
+        title: 'Horizontal Divider',
+        code: `<VStack>
+  <Text>Above</Text>
+  <Divider />
+  <Text>Below</Text>
+</VStack>`
+      },
+      {
+        title: 'Vertical Divider',
+        code: `<HStack>
+  <Text>Left</Text>
+  <Divider orientation="vertical" />
+  <Text>Right</Text>
+</HStack>`
+      }
+    ],
+    relatedComponents: ['VStack', 'HStack'],
+    tags: ['separator', 'line', 'divider']
+  },
+
+  // ===== TYPOGRAPHY COMPONENTS =====
+  {
+    name: 'Text',
+    displayName: 'Text',
+    description: 'Primary text component with variants for body, caption, label, and small text.',
+    category: 'typography',
+    importPath: "import { Text } from '@urbint/cl';",
+    props: [
+      { name: 'variant', type: "'body' | 'caption' | 'label' | 'small'", required: false, default: "'body'", description: 'Text style variant' },
+      { name: 'weight', type: "'regular' | 'medium' | 'semiBold' | 'bold'", required: false, default: "'regular'", description: 'Font weight' },
+      { name: 'color', type: 'string', required: false, default: 'text.primary', description: 'Text color' },
+      { name: 'align', type: "'left' | 'center' | 'right'", required: false, default: "'left'", description: 'Text alignment' },
+      { name: 'numberOfLines', type: 'number', required: false, description: 'Maximum number of lines' },
+    ],
+    examples: [
+      {
+        title: 'Text Variants',
+        code: `<VStack space="sm">
+  <Text variant="body">Regular body text</Text>
+  <Text variant="caption" color="text.secondary">Secondary caption</Text>
+  <Text variant="label" weight="semiBold">Label text</Text>
+  <Text variant="small">Small text</Text>
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Heading', 'Link'],
+    tags: ['text', 'typography', 'paragraph', 'body']
+  },
+
+  {
+    name: 'Heading',
+    displayName: 'Heading',
+    description: 'Semantic heading component for titles (h1-h4).',
+    category: 'typography',
+    importPath: "import { Heading } from '@urbint/cl';",
+    props: [
+      { name: 'as', type: "'h1' | 'h2' | 'h3' | 'h4'", required: false, default: "'h2'", description: 'Heading level' },
+      { name: 'color', type: 'string', required: false, default: 'text.primary', description: 'Heading color' },
+      { name: 'align', type: "'left' | 'center' | 'right'", required: false, default: "'left'", description: 'Text alignment' },
+    ],
+    examples: [
+      {
+        title: 'Heading Levels',
+        code: `<VStack space="md">
+  <Heading as="h1">Page Title (h1)</Heading>
+  <Heading as="h2">Section Title (h2)</Heading>
+  <Heading as="h3">Subsection (h3)</Heading>
+  <Heading as="h4">Minor Heading (h4)</Heading>
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Text', 'Link'],
+    tags: ['heading', 'title', 'typography', 'h1', 'h2', 'h3', 'h4']
+  },
+
+  {
+    name: 'Link',
+    displayName: 'Link',
+    description: 'Interactive text link for navigation.',
+    category: 'typography',
+    importPath: "import { Link } from '@urbint/cl';",
+    props: [
+      { name: 'href', type: 'string', required: false, description: 'URL to navigate to' },
+      { name: 'onPress', type: '() => void', required: false, description: 'Press handler for custom navigation' },
+      { name: 'isExternal', type: 'boolean', required: false, default: 'false', description: 'Open in new tab/window' },
+      { name: 'color', type: 'string', required: false, default: 'brand.blue', description: 'Link color' },
+    ],
+    examples: [
+      {
+        title: 'Link Types',
+        code: `<VStack space="sm">
+  <Link href="/about">Internal Link</Link>
+  <Link href="https://example.com" isExternal>External Link</Link>
+  <Link onPress={() => navigate('/home')}>Custom Navigation</Link>
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Text', 'Button'],
+    tags: ['link', 'navigation', 'anchor', 'url']
+  },
+
+  // ===== FORM COMPONENTS =====
+  {
+    name: 'Button',
+    displayName: 'Button',
+    description: 'Primary action component with multiple variants and states.',
+    category: 'form',
+    importPath: "import { Button } from '@urbint/cl';",
+    props: [
+      { name: 'variant', type: "'primary' | 'secondary' | 'ghost' | 'danger' | 'outline'", required: false, default: "'primary'", description: 'Button style variant' },
+      { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Button size' },
+      { name: 'isLoading', type: 'boolean', required: false, default: 'false', description: 'Show loading spinner' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable the button' },
+      { name: 'leftIcon', type: 'ReactNode', required: false, description: 'Icon before text' },
+      { name: 'rightIcon', type: 'ReactNode', required: false, description: 'Icon after text' },
+      { name: 'onPress', type: '() => void', required: false, description: 'Press handler' },
+    ],
+    examples: [
+      {
+        title: 'Button Variants',
+        code: `<HStack space="md">
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button variant="danger">Danger</Button>
+  <Button variant="outline">Outline</Button>
+</HStack>`
+      },
+      {
+        title: 'Button with Icon',
+        code: `<Button leftIcon={<Icon name="plus" />}>
+  Add Item
+</Button>`
+      },
+      {
+        title: 'Loading Button',
+        code: `<Button isLoading>
+  Saving...
+</Button>`
+      }
+    ],
+    relatedComponents: ['Pressable', 'Link', 'Fab'],
+    tags: ['button', 'action', 'submit', 'click', 'form']
+  },
+
+  {
+    name: 'Input',
+    displayName: 'Input',
+    description: 'Text input field with label, validation, and icon support.',
+    category: 'form',
+    importPath: "import { Input } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Input label text' },
+      { name: 'placeholder', type: 'string', required: false, description: 'Placeholder text' },
+      { name: 'value', type: 'string', required: false, description: 'Controlled input value' },
+      { name: 'onChange', type: '(value: string) => void', required: false, description: 'Change handler' },
+      { name: 'isInvalid', type: 'boolean', required: false, default: 'false', description: 'Show error state' },
+      { name: 'errorMessage', type: 'string', required: false, description: 'Error message to display' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable the input' },
+      { name: 'isPassword', type: 'boolean', required: false, default: 'false', description: 'Password input type' },
+      { name: 'leftElement', type: 'ReactNode', required: false, description: 'Left icon or element' },
+      { name: 'rightElement', type: 'ReactNode', required: false, description: 'Right icon or element' },
+      { name: 'showFocusBorder', type: 'boolean', required: false, default: 'false', description: 'Show border highlight on focus' },
+    ],
+    examples: [
+      {
+        title: 'Basic Input',
+        code: `<Input
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChange={setEmail}
+/>`
+      },
+      {
+        title: 'Password Input',
+        code: `<Input
+  label="Password"
+  isPassword
+  placeholder="Enter password"
+/>`
+      },
+      {
+        title: 'Input with Error',
+        code: `<Input
+  label="Username"
+  isInvalid
+  errorMessage="Username is already taken"
+/>`
+      },
+      {
+        title: 'Search Input',
+        code: `<Input
+  leftElement={<Icon name="search" />}
+  placeholder="Search..."
+/>`
+      }
+    ],
+    relatedComponents: ['Textarea', 'FormControl', 'Select'],
+    tags: ['input', 'text', 'form', 'field', 'textfield']
+  },
+
+  {
+    name: 'Select',
+    displayName: 'Select',
+    description: 'Dropdown selection with single/multi-select and searchable modes.',
+    category: 'form',
+    importPath: "import { Select } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Select label' },
+      { name: 'placeholder', type: 'string', required: false, default: "'Select an option'", description: 'Placeholder text' },
+      { name: 'options', type: 'SelectOption[]', required: true, description: 'Array of options' },
+      { name: 'value', type: 'string | string[]', required: false, description: 'Selected value(s)' },
+      { name: 'defaultValue', type: 'string | string[]', required: false, description: 'Default selected value(s)' },
+      { name: 'onChange', type: '(value: string | string[]) => void', required: false, description: 'Change handler' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable select' },
+      { name: 'isMultiple', type: 'boolean', required: false, default: 'false', description: 'Enable multiple selection' },
+      { name: 'isSearchable', type: 'boolean', required: false, default: 'false', description: 'Enable search/filter' },
+      { name: 'searchPlaceholder', type: 'string', required: false, default: "'Search...'", description: 'Search input placeholder' },
+      { name: 'noResultsText', type: 'string', required: false, default: "'No results found'", description: 'Text when no options match' },
+      { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Select size' },
+      { name: 'variant', type: "'outline' | 'filled'", required: false, default: "'outline'", description: 'Select variant' },
+    ],
+    examples: [
+      {
+        title: 'Basic Select',
+        code: `<Select
+  label="Country"
+  placeholder="Select country"
+  options={[
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+  ]}
+  value={country}
+  onChange={setCountry}
+/>`
+      },
+      {
+        title: 'Multi-Select',
+        code: `<Select
+  label="Technologies"
+  isMultiple
+  options={[
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'angular', label: 'Angular' },
+  ]}
+  value={selectedTechs}
+  onChange={setSelectedTechs}
+/>`
+      },
+      {
+        title: 'Searchable Select',
+        code: `<Select
+  label="Country"
+  isSearchable
+  searchPlaceholder="Type to search..."
+  options={countryOptions}
+/>`
+      }
+    ],
+    relatedComponents: ['Input', 'Checkbox', 'Radio'],
+    tags: ['select', 'dropdown', 'picker', 'form', 'multiselect', 'searchable']
+  },
+
+  {
+    name: 'DatePicker',
+    displayName: 'DatePicker',
+    description: 'Date and time picker with date-only, time-only, and datetime modes.',
+    category: 'form',
+    importPath: "import { DatePicker } from '@urbint/cl';",
+    props: [
+      { name: 'mode', type: "'date' | 'time' | 'datetime'", required: false, default: "'date'", description: 'Picker mode' },
+      { name: 'value', type: 'Date', required: false, description: 'Controlled value' },
+      { name: 'defaultValue', type: 'Date', required: false, description: 'Default value' },
+      { name: 'onChange', type: '(date: Date) => void', required: false, description: 'Change handler' },
+      { name: 'placeholder', type: 'string', required: false, description: 'Placeholder text' },
+      { name: 'label', type: 'string', required: false, description: 'Label text' },
+      { name: 'minDate', type: 'Date', required: false, description: 'Minimum selectable date' },
+      { name: 'maxDate', type: 'Date', required: false, description: 'Maximum selectable date' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable picker' },
+      { name: 'isInvalid', type: 'boolean', required: false, default: 'false', description: 'Error state' },
+      { name: 'errorMessage', type: 'string', required: false, description: 'Error message' },
+      { name: 'use24HourFormat', type: 'boolean', required: false, default: 'false', description: 'Use 24-hour time format' },
+      { name: 'firstDayOfWeek', type: '0 | 1', required: false, default: '0', description: 'First day (0=Sunday, 1=Monday)' },
+      { name: 'showNowButton', type: 'boolean', required: false, default: 'true', description: 'Show "Now" button in time modes' },
+    ],
+    examples: [
+      {
+        title: 'Date Picker',
+        code: `<DatePicker
+  label="Date of Birth"
+  mode="date"
+  placeholder="Select date"
+  value={date}
+  onChange={setDate}
+/>`
+      },
+      {
+        title: 'Time Picker',
+        code: `<DatePicker
+  label="Appointment Time"
+  mode="time"
+  placeholder="Select time"
+  use24HourFormat={false}
+/>`
+      },
+      {
+        title: 'DateTime Picker',
+        code: `<DatePicker
+  label="Event Start"
+  mode="datetime"
+  placeholder="Select date & time"
+  showNowButton={true}
+/>`
+      },
+      {
+        title: 'With Min/Max Date',
+        code: `<DatePicker
+  label="Future Date"
+  mode="date"
+  minDate={new Date()}
+  maxDate={new Date(2026, 11, 31)}
+/>`
+      }
+    ],
+    relatedComponents: ['Input', 'Select', 'FormControl'],
+    tags: ['date', 'time', 'datetime', 'picker', 'calendar', 'form']
+  },
+
+  {
+    name: 'Checkbox',
+    displayName: 'Checkbox',
+    description: 'Boolean selection control for single or multiple options.',
+    category: 'form',
+    importPath: "import { Checkbox } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Checkbox label' },
+      { name: 'isChecked', type: 'boolean', required: false, description: 'Controlled checked state' },
+      { name: 'defaultChecked', type: 'boolean', required: false, default: 'false', description: 'Initial checked state' },
+      { name: 'onChange', type: '(checked: boolean) => void', required: false, description: 'Change handler' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable checkbox' },
+      { name: 'isIndeterminate', type: 'boolean', required: false, default: 'false', description: 'Partial selection state' },
+    ],
+    examples: [
+      {
+        title: 'Basic Checkbox',
+        code: `<Checkbox
+  label="I accept the terms"
+  isChecked={accepted}
+  onChange={setAccepted}
+/>`
+      },
+      {
+        title: 'Checkbox States',
+        code: `<VStack space="sm">
+  <Checkbox label="Default" />
+  <Checkbox label="Checked" defaultChecked />
+  <Checkbox label="Disabled" isDisabled />
+  <Checkbox label="Indeterminate" isIndeterminate />
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Radio', 'Switch', 'FormControl'],
+    tags: ['checkbox', 'toggle', 'boolean', 'form', 'selection']
+  },
+
+  {
+    name: 'Radio',
+    displayName: 'Radio & RadioGroup',
+    description: 'Single selection from a group of options.',
+    category: 'form',
+    importPath: "import { Radio, RadioGroup } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Group label (RadioGroup)' },
+      { name: 'value', type: 'string', required: false, description: 'Selected value (RadioGroup)' },
+      { name: 'onChange', type: '(value: string) => void', required: false, description: 'Change handler (RadioGroup)' },
+    ],
+    examples: [
+      {
+        title: 'Radio Group',
+        code: `<RadioGroup
+  label="Select size"
+  value={size}
+  onChange={setSize}
+>
+  <Radio value="sm" label="Small" />
+  <Radio value="md" label="Medium" />
+  <Radio value="lg" label="Large" />
+</RadioGroup>`
+      }
+    ],
+    relatedComponents: ['Checkbox', 'Select', 'FormControl'],
+    tags: ['radio', 'selection', 'single', 'form', 'option']
+  },
+
+  {
+    name: 'Switch',
+    displayName: 'Switch',
+    description: 'Toggle switch for binary on/off states.',
+    category: 'form',
+    importPath: "import { Switch } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Switch label' },
+      { name: 'isChecked', type: 'boolean', required: false, description: 'Controlled state' },
+      { name: 'defaultChecked', type: 'boolean', required: false, default: 'false', description: 'Initial state' },
+      { name: 'onChange', type: '(checked: boolean) => void', required: false, description: 'Change handler' },
+      { name: 'colorScheme', type: "'primary' | 'success' | 'danger'", required: false, default: "'primary'", description: 'Active color' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable switch' },
+    ],
+    examples: [
+      {
+        title: 'Basic Switch',
+        code: `<Switch
+  label="Enable notifications"
+  isChecked={enabled}
+  onChange={setEnabled}
+/>`
+      },
+      {
+        title: 'Color Schemes',
+        code: `<VStack space="md">
+  <Switch label="Primary" colorScheme="primary" defaultChecked />
+  <Switch label="Success" colorScheme="success" defaultChecked />
+  <Switch label="Danger" colorScheme="danger" defaultChecked />
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Checkbox', 'Radio'],
+    tags: ['switch', 'toggle', 'boolean', 'form', 'on-off']
+  },
+
+  {
+    name: 'Textarea',
+    displayName: 'Textarea',
+    description: 'Multi-line text input field.',
+    category: 'form',
+    importPath: "import { Textarea } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Textarea label' },
+      { name: 'placeholder', type: 'string', required: false, description: 'Placeholder text' },
+      { name: 'rows', type: 'number', required: false, default: '4', description: 'Visible rows' },
+      { name: 'maxLength', type: 'number', required: false, description: 'Maximum characters' },
+      { name: 'showCount', type: 'boolean', required: false, default: 'false', description: 'Show character count' },
+      { name: 'value', type: 'string', required: false, description: 'Controlled value' },
+      { name: 'onChange', type: '(value: string) => void', required: false, description: 'Change handler' },
+    ],
+    examples: [
+      {
+        title: 'Basic Textarea',
+        code: `<Textarea
+  label="Description"
+  placeholder="Enter description..."
+  rows={4}
+  value={description}
+  onChange={setDescription}
+/>`
+      },
+      {
+        title: 'With Character Count',
+        code: `<Textarea
+  label="Notes"
+  maxLength={500}
+  showCount
+/>`
+      }
+    ],
+    relatedComponents: ['Input', 'FormControl'],
+    tags: ['textarea', 'multiline', 'text', 'form']
+  },
+
+  {
+    name: 'Slider',
+    displayName: 'Slider',
+    description: 'Range value selector for numeric inputs.',
+    category: 'form',
+    importPath: "import { Slider } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Slider label' },
+      { name: 'value', type: 'number', required: false, description: 'Current value' },
+      { name: 'onChange', type: '(value: number) => void', required: false, description: 'Change handler' },
+      { name: 'min', type: 'number', required: false, default: '0', description: 'Minimum value' },
+      { name: 'max', type: 'number', required: false, default: '100', description: 'Maximum value' },
+      { name: 'step', type: 'number', required: false, default: '1', description: 'Step increment' },
+      { name: 'showValue', type: 'boolean', required: false, default: 'false', description: 'Show current value' },
+    ],
+    examples: [
+      {
+        title: 'Volume Slider',
+        code: `<Slider
+  label="Volume"
+  value={volume}
+  onChange={setVolume}
+  min={0}
+  max={100}
+  showValue
+/>`
+      }
+    ],
+    relatedComponents: ['Input', 'FormControl'],
+    tags: ['slider', 'range', 'numeric', 'form']
+  },
+
+  {
+    name: 'FormControl',
+    displayName: 'FormControl',
+    description: 'Wrapper for form elements with label, helper text, and error handling.',
+    category: 'form',
+    importPath: "import { FormControl } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: false, description: 'Form field label' },
+      { name: 'helperText', type: 'string', required: false, description: 'Helper text below field' },
+      { name: 'errorMessage', type: 'string', required: false, description: 'Error message to display' },
+      { name: 'isRequired', type: 'boolean', required: false, default: 'false', description: 'Show required indicator' },
+      { name: 'isInvalid', type: 'boolean', required: false, default: 'false', description: 'Error state' },
+    ],
+    examples: [
+      {
+        title: 'FormControl with Input',
+        code: `<FormControl
+  label="Email"
+  helperText="We'll never share your email"
+  isRequired
+>
+  <Input placeholder="Enter email" />
+</FormControl>`
+      },
+      {
+        title: 'FormControl with Error',
+        code: `<FormControl
+  label="Password"
+  isInvalid
+  errorMessage="Password must be at least 8 characters"
+>
+  <Input isPassword />
+</FormControl>`
+      }
+    ],
+    relatedComponents: ['Input', 'Select', 'Textarea', 'Checkbox'],
+    tags: ['form', 'control', 'label', 'validation', 'error']
+  },
+
+  // ===== FEEDBACK COMPONENTS =====
+  {
+    name: 'Alert',
+    displayName: 'Alert',
+    description: 'Status messages for info, success, warning, and error states.',
+    category: 'feedback',
+    importPath: "import { Alert } from '@urbint/cl';",
+    props: [
+      { name: 'status', type: "'info' | 'success' | 'warning' | 'error'", required: false, default: "'info'", description: 'Alert type' },
+      { name: 'title', type: 'string', required: true, description: 'Alert title' },
+      { name: 'description', type: 'string', required: false, description: 'Alert description' },
+      { name: 'isClosable', type: 'boolean', required: false, default: 'false', description: 'Show close button' },
+      { name: 'onClose', type: '() => void', required: false, description: 'Close handler' },
+    ],
+    examples: [
+      {
+        title: 'Alert Statuses',
+        code: `<VStack space="md">
+  <Alert status="info" title="Update available" description="A new version is ready." />
+  <Alert status="success" title="Saved!" />
+  <Alert status="warning" title="Warning" description="Please review before continuing." />
+  <Alert status="error" title="Error" description="Something went wrong." isClosable />
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Toast'],
+    tags: ['alert', 'message', 'notification', 'status', 'feedback']
+  },
+
+  {
+    name: 'Toast',
+    displayName: 'Toast',
+    description: 'Non-blocking notification messages.',
+    category: 'feedback',
+    importPath: "import { useToast, ToastProvider } from '@urbint/cl';",
+    props: [
+      { name: 'title', type: 'string', required: true, description: 'Toast title' },
+      { name: 'description', type: 'string', required: false, description: 'Toast description' },
+      { name: 'status', type: "'info' | 'success' | 'warning' | 'error'", required: false, default: "'info'", description: 'Toast type' },
+      { name: 'duration', type: 'number', required: false, default: '5000', description: 'Auto-dismiss duration (ms)' },
+      { name: 'position', type: "'top' | 'bottom'", required: false, default: "'top'", description: 'Screen position' },
+    ],
+    examples: [
+      {
+        title: 'Using Toast',
+        code: `// Wrap app with ToastProvider
+<ToastProvider>
+  <App />
+</ToastProvider>
+
+// Use in components
+function MyComponent() {
+  const toast = useToast();
+  
+  const handleSave = () => {
+    toast.show({
+      title: 'Saved successfully',
+      status: 'success',
+      duration: 3000,
+    });
+  };
+}`
+      }
+    ],
+    relatedComponents: ['Alert'],
+    tags: ['toast', 'notification', 'snackbar', 'message', 'feedback']
+  },
+
+  {
+    name: 'Progress',
+    displayName: 'Progress',
+    description: 'Progress indicator in linear or circular variant.',
+    category: 'feedback',
+    importPath: "import { Progress } from '@urbint/cl';",
+    props: [
+      { name: 'value', type: 'number', required: false, description: 'Progress value 0-100' },
+      { name: 'variant', type: "'linear' | 'circular'", required: false, default: "'linear'", description: 'Progress style' },
+      { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Progress size' },
+      { name: 'colorScheme', type: "'primary' | 'success' | 'warning'", required: false, default: "'primary'", description: 'Color' },
+      { name: 'showLabel', type: 'boolean', required: false, default: 'false', description: 'Show percentage label' },
+      { name: 'isIndeterminate', type: 'boolean', required: false, default: 'false', description: 'Indeterminate mode' },
+    ],
+    examples: [
+      {
+        title: 'Progress Variants',
+        code: `<VStack space="md">
+  <Progress value={75} />
+  <Progress value={50} variant="circular" showLabel />
+  <Progress isIndeterminate />
+</VStack>`
+      }
+    ],
+    relatedComponents: ['Spinner', 'Skeleton'],
+    tags: ['progress', 'loading', 'percentage', 'feedback']
+  },
+
+  {
+    name: 'Spinner',
+    displayName: 'Spinner',
+    description: 'Loading spinner indicator.',
+    category: 'feedback',
+    importPath: "import { Spinner } from '@urbint/cl';",
+    props: [
+      { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", required: false, default: "'md'", description: 'Spinner size' },
+      { name: 'color', type: 'string', required: false, default: 'brand.blue', description: 'Spinner color' },
+      { name: 'label', type: 'string', required: false, default: "'Loading'", description: 'Accessibility label' },
+    ],
+    examples: [
+      {
+        title: 'Spinner Sizes',
+        code: `<HStack space="lg">
+  <Spinner size="xs" />
+  <Spinner size="sm" />
+  <Spinner size="md" />
+  <Spinner size="lg" />
+  <Spinner size="xl" />
+</HStack>`
+      }
+    ],
+    relatedComponents: ['Progress', 'Skeleton'],
+    tags: ['spinner', 'loading', 'indicator', 'feedback']
+  },
+
+  {
+    name: 'Skeleton',
+    displayName: 'Skeleton',
+    description: 'Loading placeholder with optional animation.',
+    category: 'feedback',
+    importPath: "import { Skeleton, SkeletonText, SkeletonCircle } from '@urbint/cl';",
+    props: [
+      { name: 'width', type: "number | string", required: false, default: "'100%'", description: 'Skeleton width' },
+      { name: 'height', type: 'number', required: false, default: '16', description: 'Skeleton height' },
+      { name: 'animation', type: "'pulse' | 'wave' | 'none'", required: false, default: "'pulse'", description: 'Animation type' },
+    ],
+    examples: [
+      {
+        title: 'Skeleton Loading State',
+        code: `<HStack space="md">
+  <SkeletonCircle size={48} />
+  <VStack space="sm" flex={1}>
+    <Skeleton height={16} width="70%" />
+    <Skeleton height={14} width="40%" />
+  </VStack>
+</HStack>`
+      }
+    ],
+    relatedComponents: ['Spinner', 'Progress'],
+    tags: ['skeleton', 'loading', 'placeholder', 'feedback']
+  },
+
+  // ===== DATA DISPLAY COMPONENTS =====
+  {
+    name: 'Avatar',
+    displayName: 'Avatar',
+    description: 'User profile image with fallback to initials.',
+    category: 'data-display',
+    importPath: "import { Avatar, AvatarGroup } from '@urbint/cl';",
+    props: [
+      { name: 'src', type: 'string', required: false, description: 'Image URL' },
+      { name: 'name', type: 'string', required: false, description: 'Name for generating initials' },
+      { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", required: false, default: "'md'", description: 'Avatar size' },
+      { name: 'showBadge', type: 'boolean', required: false, default: 'false', description: 'Show status badge' },
+      { name: 'badgeColor', type: 'string', required: false, default: 'success', description: 'Badge color' },
+    ],
+    examples: [
+      {
+        title: 'Avatar Variants',
+        code: `<HStack space="md">
+  <Avatar name="John Doe" />
+  <Avatar src="https://example.com/avatar.jpg" name="Jane" />
+  <Avatar name="Bob Smith" size="lg" showBadge />
+</HStack>`
+      },
+      {
+        title: 'Avatar Group',
+        code: `<AvatarGroup max={3}>
+  <Avatar name="John" />
+  <Avatar name="Jane" />
+  <Avatar name="Bob" />
+  <Avatar name="Alice" />
+</AvatarGroup>`
+      }
+    ],
+    relatedComponents: ['Image', 'Badge'],
+    tags: ['avatar', 'profile', 'user', 'image']
+  },
+
+  {
+    name: 'Badge',
+    displayName: 'Badge',
+    description: 'Status indicator labels with color variants.',
+    category: 'data-display',
+    importPath: "import { Badge } from '@urbint/cl';",
+    props: [
+      { name: 'variant', type: "'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple'", required: false, default: "'gray'", description: 'Badge color' },
+      { name: 'size', type: "'sm' | 'md'", required: false, default: "'md'", description: 'Badge size' },
+    ],
+    examples: [
+      {
+        title: 'Badge Variants',
+        code: `<HStack space="sm">
+  <Badge variant="gray">Default</Badge>
+  <Badge variant="red">Critical</Badge>
+  <Badge variant="orange">Warning</Badge>
+  <Badge variant="yellow">Pending</Badge>
+  <Badge variant="green">Active</Badge>
+  <Badge variant="blue">Info</Badge>
+  <Badge variant="purple">New</Badge>
+</HStack>`
+      }
+    ],
+    relatedComponents: ['Avatar', 'Card'],
+    tags: ['badge', 'tag', 'status', 'label']
+  },
+
+  {
+    name: 'Card',
+    displayName: 'Card',
+    description: 'Content container with header, body, and footer sections.',
+    category: 'data-display',
+    importPath: "import { Card, CardHeader, CardBody, CardFooter } from '@urbint/cl';",
+    props: [
+      { name: 'variant', type: "'elevated' | 'outline' | 'filled'", required: false, default: "'elevated'", description: 'Card style' },
+      { name: 'padding', type: "'none' | 'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Internal padding' },
+      { name: 'shadow', type: "'5' | '10' | '20' | '30' | '40'", required: false, default: "'20'", description: 'Shadow elevation' },
+      { name: 'isPressable', type: 'boolean', required: false, default: 'false', description: 'Make card tappable' },
+      { name: 'onPress', type: '() => void', required: false, description: 'Press handler' },
+    ],
+    examples: [
+      {
+        title: 'Full Card',
+        code: `<Card variant="elevated">
+  <CardHeader>
+    <Heading as="h3">Card Title</Heading>
+  </CardHeader>
+  <CardBody>
+    <Text>Card content goes here.</Text>
+  </CardBody>
+  <CardFooter>
+    <Button variant="ghost">Cancel</Button>
+    <Button>Submit</Button>
+  </CardFooter>
+</Card>`
+      }
+    ],
+    relatedComponents: ['Box', 'Modal'],
+    tags: ['card', 'container', 'panel', 'surface']
+  },
+
+  {
+    name: 'Table',
+    displayName: 'Table',
+    description: 'Data table with header and body rows.',
+    category: 'data-display',
+    importPath: "import { Table, TableHead, TableBody, TableRow, TableCell } from '@urbint/cl';",
+    props: [],
+    examples: [
+      {
+        title: 'Basic Table',
+        code: `<Table>
+  <TableHead>
+    <TableRow>
+      <TableCell isHeader>Name</TableCell>
+      <TableCell isHeader>Status</TableCell>
+      <TableCell isHeader>Role</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell><Badge variant="green">Active</Badge></TableCell>
+      <TableCell>Admin</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`
+      }
+    ],
+    relatedComponents: ['Card'],
+    tags: ['table', 'data', 'grid', 'rows', 'columns']
+  },
+
+  {
+    name: 'Icon',
+    displayName: 'Icon',
+    description: 'SVG icon component with size and color props.',
+    category: 'data-display',
+    importPath: "import { Icon } from '@urbint/cl';",
+    props: [
+      { name: 'name', type: 'IconName', required: true, description: 'Icon name' },
+      { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", required: false, default: "'md'", description: 'Icon size' },
+      { name: 'color', type: 'string', required: false, default: 'text.primary', description: 'Icon color' },
+    ],
+    examples: [
+      {
+        title: 'Common Icons',
+        code: `<HStack space="md">
+  <Icon name="check" />
+  <Icon name="close" color="error" />
+  <Icon name="search" size="lg" />
+  <Icon name="user" />
+  <Icon name="settings" />
+</HStack>`
+      }
+    ],
+    relatedComponents: ['Button'],
+    tags: ['icon', 'svg', 'symbol', 'graphic']
+  },
+
+  // ===== OVERLAY COMPONENTS =====
+  {
+    name: 'Modal',
+    displayName: 'Modal',
+    description: 'Dialog overlay for important content.',
+    category: 'overlay',
+    importPath: "import { Modal, ModalHeader, ModalBody, ModalFooter, useDisclosure } from '@urbint/cl';",
+    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'", required: false, default: "'md'", description: 'Modal size' },
+      { name: 'closeOnOverlayClick', type: 'boolean', required: false, default: 'true', description: 'Close on backdrop click' },
+    ],
+    examples: [
+      {
+        title: 'Basic Modal',
+        code: `function MyComponent() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      
+      <Modal isOpen={isOpen} onClose={onClose} size="md">
+        <ModalHeader>Modal Title</ModalHeader>
+        <ModalBody>
+          <Text>Modal content goes here.</Text>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="ghost" onPress={onClose}>Cancel</Button>
+          <Button>Confirm</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+}`
+      }
+    ],
+    relatedComponents: ['AlertDialog', 'Drawer', 'useDisclosure'],
+    tags: ['modal', 'dialog', 'popup', 'overlay']
+  },
+
+  {
+    name: 'Drawer',
+    displayName: 'Drawer',
+    description: 'Slide-out panel from any edge of the screen.',
+    category: 'overlay',
+    importPath: "import { Drawer, DrawerHeader, DrawerBody, DrawerFooter, useDisclosure } from '@urbint/cl';",
+    props: [
+      { name: 'isOpen', type: 'boolean', required: true, description: 'Open state' },
+      { name: 'onClose', type: '() => void', required: true, description: 'Close handler' },
+      { name: 'title', type: 'string', required: false, description: 'Drawer title' },
+      { name: 'placement', type: "'left' | 'right' | 'top' | 'bottom'", required: false, default: "'right'", description: 'Position' },
+      { name: 'size', type: "'sm' | 'md' | 'lg' | 'full'", required: false, default: "'md'", description: 'Drawer size' },
+    ],
+    examples: [
+      {
+        title: 'Navigation Drawer',
+        code: `function MyComponent() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  return (
+    <>
+      <Button onPress={onOpen}>Open Menu</Button>
+      
+      <Drawer isOpen={isOpen} onClose={onClose} title="Menu" placement="left">
+        <DrawerBody>
+          <VStack space="md">
+            <Link>Profile</Link>
+            <Link>Settings</Link>
+            <Link>Logout</Link>
+          </VStack>
+        </DrawerBody>
+      </Drawer>
+    </>
+  );
+}`
+      }
+    ],
+    relatedComponents: ['Modal', 'ActionSheet', 'useDisclosure'],
+    tags: ['drawer', 'sidebar', 'panel', 'navigation', 'overlay']
+  },
+
+  {
+    name: 'AlertDialog',
+    displayName: 'AlertDialog',
+    description: 'Confirmation dialog for destructive actions.',
+    category: 'overlay',
+    importPath: "import { AlertDialog, useDisclosure } from '@urbint/cl';",
+    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', required: false, description: 'Dialog description' },
+      { name: 'confirmLabel', type: 'string', required: false, default: "'Confirm'", description: 'Confirm button text' },
+      { name: 'confirmVariant', type: 'ButtonVariant', required: false, default: "'primary'", description: 'Confirm button style' },
+    ],
+    examples: [
+      {
+        title: 'Delete Confirmation',
+        code: `function DeleteButton() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  return (
+    <>
+      <Button variant="danger" onPress={onOpen}>Delete</Button>
+      
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        onConfirm={handleDelete}
+        title="Delete Item?"
+        description="This action cannot be undone."
+        confirmLabel="Delete"
+        confirmVariant="danger"
+      />
+    </>
+  );
+}`
+      }
+    ],
+    relatedComponents: ['Modal', 'useDisclosure'],
+    tags: ['alert', 'confirm', 'dialog', 'destructive', 'overlay']
+  },
+
+  {
+    name: 'Popover',
+    displayName: 'Popover',
+    description: 'Floating content attached to a trigger element.',
+    category: 'overlay',
+    importPath: "import { Popover, PopoverTrigger, PopoverContent } from '@urbint/cl';",
+    props: [
+      { name: 'placement', type: "'top' | 'bottom' | 'left' | 'right'", required: false, default: "'bottom'", description: 'Position relative to trigger' },
+      { name: 'isOpen', type: 'boolean', required: false, description: 'Controlled open state' },
+      { name: 'onClose', type: '() => void', required: false, description: 'Close handler' },
+    ],
+    examples: [
+      {
+        title: 'Basic Popover',
+        code: `<Popover placement="bottom">
+  <PopoverTrigger>
+    <Button>Open Popover</Button>
+  </PopoverTrigger>
+  <PopoverContent>
+    <Text>Popover content here</Text>
+  </PopoverContent>
+</Popover>`
+      }
+    ],
+    relatedComponents: ['Tooltip', 'Menu'],
+    tags: ['popover', 'floating', 'dropdown', 'overlay']
+  },
+
+  {
+    name: 'Tooltip',
+    displayName: 'Tooltip',
+    description: 'Hover hints for additional information.',
+    category: 'overlay',
+    importPath: "import { Tooltip } from '@urbint/cl';",
+    props: [
+      { name: 'label', type: 'string', required: true, description: 'Tooltip text' },
+      { name: 'placement', type: "'top' | 'bottom' | 'left' | 'right'", required: false, default: "'top'", description: 'Position' },
+      { name: 'hasArrow', type: 'boolean', required: false, default: 'true', description: 'Show arrow pointer' },
+    ],
+    examples: [
+      {
+        title: 'Basic Tooltip',
+        code: `<Tooltip label="This is a helpful tip">
+  <Button>Hover me</Button>
+</Tooltip>`
+      }
+    ],
+    relatedComponents: ['Popover'],
+    tags: ['tooltip', 'hint', 'help', 'hover']
+  },
+
+  {
+    name: 'Menu',
+    displayName: 'Menu',
+    description: 'Dropdown menu with action items.',
+    category: 'overlay',
+    importPath: "import { Menu, MenuTrigger, MenuContent, MenuItem } from '@urbint/cl';",
+    props: [],
+    examples: [
+      {
+        title: 'Action Menu',
+        code: `<Menu>
+  <MenuTrigger>
+    <Button rightIcon={<Icon name="chevron-down" />}>Options</Button>
+  </MenuTrigger>
+  <MenuContent>
+    <MenuItem onPress={handleEdit}>Edit</MenuItem>
+    <MenuItem onPress={handleDuplicate}>Duplicate</MenuItem>
+    <MenuItem onPress={handleDelete} isDestructive>Delete</MenuItem>
+  </MenuContent>
+</Menu>`
+      }
+    ],
+    relatedComponents: ['Popover', 'Select'],
+    tags: ['menu', 'dropdown', 'actions', 'context']
+  },
+
+  {
+    name: 'ActionSheet',
+    displayName: 'ActionSheet',
+    description: 'Bottom sheet for mobile action selection.',
+    category: 'overlay',
+    importPath: "import { ActionSheet, useDisclosure } from '@urbint/cl';",
+    props: [
+      { name: 'isOpen', type: 'boolean', required: true, description: 'Open state' },
+      { name: 'onClose', type: '() => void', required: true, description: 'Close handler' },
+      { name: 'actions', type: 'ActionItem[]', required: true, description: 'Array of action items' },
+    ],
+    examples: [
+      {
+        title: 'Action Sheet',
+        code: `function MyComponent() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  return (
+    <>
+      <Button onPress={onOpen}>Show Actions</Button>
+      
+      <ActionSheet
+        isOpen={isOpen}
+        onClose={onClose}
+        actions={[
+          { label: 'Edit', onPress: handleEdit },
+          { label: 'Share', onPress: handleShare },
+          { label: 'Delete', onPress: handleDelete, isDestructive: true },
+        ]}
+      />
+    </>
+  );
+}`
+      }
+    ],
+    relatedComponents: ['Modal', 'Drawer'],
+    tags: ['actionsheet', 'bottom-sheet', 'mobile', 'actions']
+  },
+
+  // ===== ACTION COMPONENTS =====
+  {
+    name: 'Pressable',
+    displayName: 'Pressable',
+    description: 'Base pressable component with press feedback.',
+    category: 'action',
+    importPath: "import { Pressable } from '@urbint/cl';",
+    props: [
+      { name: 'onPress', type: '() => void', required: false, description: 'Press handler' },
+      { name: 'onLongPress', type: '() => void', required: false, description: 'Long press handler' },
+      { name: 'isDisabled', type: 'boolean', required: false, default: 'false', description: 'Disable press' },
+    ],
+    examples: [
+      {
+        title: 'Pressable Card',
+        code: `<Pressable onPress={handlePress} onLongPress={handleLongPress}>
+  <Card>
+    <Text>Tap me</Text>
+  </Card>
+</Pressable>`
+      }
+    ],
+    relatedComponents: ['Button', 'Link'],
+    tags: ['pressable', 'touchable', 'interactive', 'click']
+  },
+
+  {
+    name: 'Fab',
+    displayName: 'Fab',
+    description: 'Floating action button for primary actions.',
+    category: 'action',
+    importPath: "import { Fab } from '@urbint/cl';",
+    props: [
+      { name: 'icon', type: 'ReactNode', required: true, description: 'FAB icon' },
+      { name: 'label', type: 'string', required: false, description: 'Extended FAB text' },
+      { name: 'position', type: "'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'", required: false, default: "'bottom-right'", description: 'Screen position' },
+      { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'FAB size' },
+      { name: 'onPress', type: '() => void', required: false, description: 'Press handler' },
+    ],
+    examples: [
+      {
+        title: 'Floating Action Button',
+        code: `<Fab
+  icon={<Icon name="plus" color="white" />}
+  onPress={handleAdd}
+  position="bottom-right"
+/>`
+      },
+      {
+        title: 'Extended FAB',
+        code: `<Fab
+  icon={<Icon name="plus" />}
+  label="Add Item"
+  position="bottom-right"
+/>`
+      }
+    ],
+    relatedComponents: ['Button'],
+    tags: ['fab', 'floating', 'action', 'button', 'primary']
+  },
+
+  {
+    name: 'Accordion',
+    displayName: 'Accordion',
+    description: 'Expandable content sections.',
+    category: 'action',
+    importPath: "import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from '@urbint/cl';",
+    props: [
+      { name: 'defaultIndex', type: 'string[]', required: false, default: '[]', description: 'Initially expanded items' },
+      { name: 'allowMultiple', type: 'boolean', required: false, default: 'false', description: 'Allow multiple open sections' },
+      { name: 'onChange', type: '(index: string[]) => void', required: false, description: 'Change handler' },
+    ],
+    examples: [
+      {
+        title: 'FAQ Accordion',
+        code: `<Accordion defaultIndex={['faq-1']} allowMultiple>
+  <AccordionItem value="faq-1">
+    <AccordionButton>What is Urbint CL?</AccordionButton>
+    <AccordionPanel>
+      <Text>Enterprise-ready React Native component library.</Text>
+    </AccordionPanel>
+  </AccordionItem>
+  <AccordionItem value="faq-2">
+    <AccordionButton>How do I install it?</AccordionButton>
+    <AccordionPanel>
+      <Text>npm install @urbint/cl</Text>
+    </AccordionPanel>
+  </AccordionItem>
+</Accordion>`
+      }
+    ],
+    relatedComponents: ['Card'],
+    tags: ['accordion', 'collapsible', 'expand', 'faq']
+  },
+
+  // ===== UTILITY COMPONENTS =====
+  {
+    name: 'Portal',
+    displayName: 'Portal',
+    description: 'Render children outside the parent component hierarchy.',
+    category: 'utility',
+    importPath: "import { Portal } from '@urbint/cl';",
+    props: [],
+    examples: [
+      {
+        title: 'Portal Usage',
+        code: `<Portal>
+  <Modal>...</Modal>
+</Portal>`
+      }
+    ],
+    relatedComponents: ['Modal', 'Drawer'],
+    tags: ['portal', 'render', 'utility']
+  },
+];
+
+// Helper functions for component lookup
+export function getComponentByName(name: string): ComponentMetadata | undefined {
+  return componentRegistry.find(
+    (c) => c.name.toLowerCase() === name.toLowerCase()
+  );
+}
+
+export function getComponentsByCategory(category: ComponentMetadata['category']): ComponentMetadata[] {
+  return componentRegistry.filter((c) => c.category === category);
+}
+
+export function searchComponents(query: string): ComponentMetadata[] {
+  const lowerQuery = query.toLowerCase();
+  return componentRegistry.filter(
+    (c) =>
+      c.name.toLowerCase().includes(lowerQuery) ||
+      c.displayName.toLowerCase().includes(lowerQuery) ||
+      c.description.toLowerCase().includes(lowerQuery) ||
+      c.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))
+  );
+}
+
+export function getAllCategories(): ComponentMetadata['category'][] {
+  return ['layout', 'typography', 'form', 'feedback', 'data-display', 'overlay', 'action', 'utility'];
+}
+