@mohityadav0903/branintelle-mcp 2.0.1 → 2.1.0

package/components-data.js

@@ -1,1107 +1,223 @@
 /**
- * Branintelle UI Library - Complete Component Metadata
- * All 36 components with inputs, outputs, interfaces, and examples
+ * Branintelle UI Library - Component Metadata
+ * AUTO-GENERATED FROM SOURCE CODE - DO NOT MANUALLY EDIT
+ * 
+ * This file contains REAL component APIs extracted directly from TypeScript source files.
+ * Every @Input(), @Output(), interface, and type is verified against the actual codebase.
  */
 
-export const COMPONENTS_DATA = {
-  // ======================
-  // BUTTONS (5)
-  // ======================
-  CustomButton: {
-    name: 'CustomButton',
-    category: 'Buttons',
-    selector: 'bi-custom-button',
-    description: 'Primary action button with loading states and customizable styling',
-    inputs: {
-      label: { type: 'string', required: true, description: 'Button text label' },
-      isActive: { type: 'boolean', default: true, description: 'Enable/disable button state' },
-      isLoading: { type: 'boolean', default: false, description: 'Show loading spinner' },
-      width: { type: 'string', default: 'auto', description: 'Button width (e.g., "200px", "100%")' },
-      height: { type: 'string', default: 'auto', description: 'Button height' },
-      fontSize: { type: 'string', default: '16px', description: 'Font size for label' },
-      padding: { type: 'string', default: '12px 24px', description: 'Button padding' }
-    },
-    outputs: {
-      onClick: { type: 'EventEmitter<void>', description: 'Emitted when button is clicked' }
-    },
-    example: `<bi-custom-button
-  [label]="'Submit'"
-  [isActive]="true"
-  [isLoading]="isSubmitting"
-  [width]="'200px'"
-  (onClick)="handleSubmit()">
-</bi-custom-button>`,
-    usagePattern: 'primary-actions',
-    tokens: ['--violet-500', '--white', '--body-large-size']
-  },
-
-  ApproveButton: {
-    name: 'ApproveButton',
-    category: 'Buttons',
-    selector: 'bi-approve-button',
-    description: 'Approve action button with checkmark icon',
-    inputs: {
-      label: { type: 'string', required: true, description: 'Button label text' },
-      isActive: { type: 'boolean', default: true, description: 'Enable/disable state' },
-      width: { type: 'string', default: 'auto', description: 'Button width' }
-    },
-    outputs: {
-      onClick: { type: 'EventEmitter<void>', description: 'Emitted on button click' }
-    },
-    example: `<bi-approve-button
-  [label]="'Approve'"
-  [isActive]="canApprove"
-  (onClick)="handleApproval()">
-</bi-approve-button>`,
-    usagePattern: 'primary-actions',
-    tokens: ['--positive-high', '--white']
-  },
-
-  CancelButton: {
-    name: 'CancelButton',
-    category: 'Buttons',
-    selector: 'bi-cancel-button',
-    description: 'Cancel/dismiss button with configurable styling',
-    inputs: {
-      config: { type: 'CancelButtonConfig', required: true, description: 'Button configuration object' }
-    },
-    outputs: {
-      onClick: { type: 'EventEmitter<void>', description: 'Click event' }
-    },
-    interfaces: {
-      CancelButtonConfig: `{
-  label: string;
-  width?: string;
-  height?: string;
-}`
-    },
-    example: `<bi-cancel-button
-  [config]="{label: 'Cancel', width: '120px'}"
-  (onClick)="handleCancel()">
-</bi-cancel-button>`,
-    usagePattern: 'primary-actions',
-    tokens: ['--text-300', '--stroke-1']
-  },
-
-  BackButton: {
-    name: 'BackButton',
-    category: 'Buttons',
-    selector: 'bi-back-button',
-    description: 'Navigation back button with arrow icon',
-    inputs: {
-      label: { type: 'string', default: 'Back', description: 'Button label' },
-      showIcon: { type: 'boolean', default: true, description: 'Show back arrow icon' }
-    },
-    outputs: {
-      onClick: { type: 'EventEmitter<void>', description: 'Back button clicked' }
-    },
-    example: `<bi-back-button
-  [label]="'Go Back'"
-  (onClick)="navigateBack()">
-</bi-back-button>`,
-    usagePattern: 'primary-actions',
-    tokens: ['--violet-500', '--body-large-size']
-  },
-
-  ButtonImage: {
-    name: 'ButtonImage',
-    category: 'Buttons',
-    selector: 'bi-button-image',
-    description: 'Button with image/icon support',
-    inputs: {
-      imageSrc: { type: 'string', required: true, description: 'Image source path' },
-      label: { type: 'string', required: false, description: 'Optional button label' },
-      width: { type: 'string', default: 'auto', description: 'Button width' }
-    },
-    outputs: {},
-    example: `<bi-button-image
-  [imageSrc]="'assets/icons/upload.svg'"
-  [label]="'Upload'">
-</bi-button-image>`,
-    usagePattern: 'primary-actions',
-    tokens: ['--violet-500']
-  },
-
-  // ======================
-  // STATUS (3)
-  // ======================
-  StatusPill: {
-    name: 'StatusPill',
-    category: 'Status',
-    selector: 'bi-status-pill',
-    description: 'Status indicator pill with icon and colored background',
-    inputs: {
-      statusText: { type: 'string', required: true, description: 'Status text to display' },
-      statusImage: { type: 'string', required: false, description: 'Path to status icon image' },
-      statusColor: { type: 'string', required: true, description: 'Background color (hex)' },
-      statusTextColor: { type: 'string', required: true, description: 'Text color (hex)' }
-    },
-    outputs: {},
-    example: `<bi-status-pill
-  [statusText]="'Approved'"
-  [statusImage]="'assets/images/icons/check_green.svg'"
-  [statusColor]="'#beddc6'"
-  [statusTextColor]="'#2c9148'">
-</bi-status-pill>`,
-    usagePattern: 'status-indicators',
-    tokens: ['--positive-high', '--positive-low', '--body-medium-size']
-  },
-
-  PillBadge: {
-    name: 'PillBadge',
-    category: 'Status',
-    selector: 'bi-pill-badge',
-    description: 'Small badge for counts and indicators',
-    inputs: {
-      count: { type: 'number', required: true, description: 'Count to display' },
-      color: { type: 'string', default: '#544d7c', description: 'Badge background color' }
-    },
-    outputs: {},
-    example: `<bi-pill-badge
-  [count]="5"
-  [color]="'#544d7c'">
-</bi-pill-badge>`,
-    usagePattern: 'status-indicators',
-    tokens: ['--violet-500', '--white']
-  },
-
-  PillBox: {
-    name: 'PillBox',
-    category: 'Status',
-    selector: 'bi-pill-box',
-    description: 'Tag-style pill component',
-    inputs: {
-      text: { type: 'string', required: true, description: 'Pill text' },
-      backgroundColor: { type: 'string', required: true, description: 'Background color' },
-      textColor: { type: 'string', required: true, description: 'Text color' }
-    },
-    outputs: {},
-    example: `<bi-pill-box
-  [text]="'Premium'"
-  [backgroundColor]="'#f0f2ff'"
-  [textColor]="'#544d7c'">
-</bi-pill-box>`,
-    usagePattern: 'status-indicators',
-    tokens: ['--selected-low', '--violet-500']
-  },
-
-  // ======================
-  // PROGRESS (2)
-  // ======================
-  ProgressBar: {
-    name: 'ProgressBar',
-    category: 'Progress',
-    selector: 'bi-progress-bar',
-    description: 'Linear progress indicator',
-    inputs: {
-      progress: { type: 'number', required: true, description: 'Progress percentage (0-100)' },
-      height: { type: 'string', default: '8px', description: 'Bar height' },
-      color: { type: 'string', default: '#544d7c', description: 'Progress bar color' }
-    },
-    outputs: {},
-    example: `<bi-progress-bar
-  [progress]="75"
-  [height]="'10px'"
-  [color]="'#544d7c'">
-</bi-progress-bar>`,
-    usagePattern: 'status-indicators',
-    tokens: ['--violet-500', '--violet-100']
-  },
-
-  SegmentedProgressBar: {
-    name: 'SegmentedProgressBar',
-    category: 'Progress',
-    selector: 'bi-segmented-progress-bar',
-    description: 'Multi-segment progress bar',
-    inputs: {
-      segments: { type: 'ProgressSegment[]', required: true, description: 'Array of progress segments' },
-      height: { type: 'string', default: '8px', description: 'Bar height' }
-    },
-    outputs: {},
-    interfaces: {
-      ProgressSegment: `{
-  value: number;
-  color: string;
-  label?: string;
-}`
-    },
-    example: `<bi-segmented-progress-bar
-  [segments]="progressSegments"
-  [height]="'12px'">
-</bi-segmented-progress-bar>
-
-// Component
-progressSegments = [
-  { value: 30, color: '#2c9148', label: 'Complete' },
-  { value: 50, color: '#544d7c', label: 'In Progress' },
-  { value: 20, color: '#dedfe0', label: 'Remaining' }
-];`,
-    usagePattern: 'status-indicators',
-    tokens: ['--violet-500', '--positive-high', '--stroke-1']
-  },
-
-  // ======================
-  // NAVIGATION (3)
-  // ======================
-  VerticalStepper: {
-    name: 'VerticalStepper',
-    category: 'Navigation',
-    selector: 'bi-vertical-stepper',
-    description: 'Vertical step indicator for multi-step workflows',
-    inputs: {
-      steps: { type: 'Step[]', required: true, description: 'Array of step objects with label, status, substeps' },
-      activeStep: { type: 'number', default: 0, description: 'Currently active step index' }
-    },
-    outputs: {
-      stepClick: { type: 'EventEmitter<number>', description: 'Emitted when step is clicked' }
-    },
-    interfaces: {
-      Step: `{
-  label: string;
-  status: 'completed' | 'active' | 'pending';
-  substeps?: { label: string; status: string }[];
-}`
-    },
-    example: `<bi-vertical-stepper
-  [steps]="workflowSteps"
-  [activeStep]="currentStep"
-  (stepClick)="onStepChange($event)">
-</bi-vertical-stepper>
-
-// Component
-workflowSteps: Step[] = [
-  { label: 'Brief Details', status: 'completed' },
-  { label: 'Requirements', status: 'active' },
-  { label: 'Review', status: 'pending' }
-];`,
-    usagePattern: 'multi-step-forms',
-    tokens: ['--violet-500', '--positive-high', '--text-300']
-  },
-
-  CustomBreadcrumb: {
-    name: 'CustomBreadcrumb',
-    category: 'Navigation',
-    selector: 'bi-custom-breadcrumb',
-    description: 'Breadcrumb navigation component',
-    inputs: {
-      items: { type: 'string[]', required: true, description: 'Breadcrumb items array' },
-      separator: { type: 'string', default: '/', description: 'Separator character' }
-    },
-    outputs: {
-      itemClick: { type: 'EventEmitter<number>', description: 'Breadcrumb item clicked' }
-    },
-    example: `<bi-custom-breadcrumb
-  [items]="['Home', 'Products', 'Details']"
-  [separator]="'>'"
-  (itemClick)="navigateTo($event)">
-</bi-custom-breadcrumb>`,
-    usagePattern: 'navigation',
-    tokens: ['--text-300', '--violet-500']
-  },
-
-  HeaderTabs: {
-    name: 'HeaderTabs',
-    category: 'Navigation',
-    selector: 'bi-header-tabs',
-    description: 'Tab navigation with status counts',
-    inputs: {
-      tabs: { type: 'StatusItem[]', required: true, description: 'Array of tab items with counts' },
-      activeTab: { type: 'number', default: 0, description: 'Active tab index' }
-    },
-    outputs: {
-      tabChange: { type: 'EventEmitter<number>', description: 'Tab changed event' }
-    },
-    interfaces: {
-      StatusItem: `{
-  label: string;
-  count?: number;
-  status?: string;
-}`
-    },
-    example: `<bi-header-tabs
-  [tabs]="statusTabs"
-  [activeTab]="0"
-  (tabChange)="onTabChange($event)">
-</bi-header-tabs>
-
-// Component
-statusTabs = [
-  { label: 'All', count: 42 },
-  { label: 'Active', count: 15 },
-  { label: 'Completed', count: 27 }
-];`,
-    usagePattern: 'navigation',
-    tokens: ['--violet-500', '--text-300', '--stroke-1']
-  },
-
-  // ======================
-  // TEXT (2)
-  // ======================
-  TitleHeaderSubtext: {
-    name: 'TitleHeaderSubtext',
-    category: 'Text',
-    selector: 'bi-title-header-subtext',
-    description: 'Title with subtitle component',
-    inputs: {
-      title: { type: 'string', required: true, description: 'Main title text' },
-      subtitle: { type: 'string', required: true, description: 'Subtitle text' }
-    },
-    outputs: {},
-    example: `<bi-title-header-subtext
-  [title]="'Dashboard'"
-  [subtitle]="'Overview of your projects'">
-</bi-title-header-subtext>`,
-    usagePattern: 'content',
-    tokens: ['--text-600', '--text-300', '--heading-large-size']
-  },
-
-  HelpText: {
-    name: 'HelpText',
-    category: 'Text',
-    selector: 'bi-help-text',
-    description: 'Helper text with info icon',
-    inputs: {
-      text: { type: 'string', required: true, description: 'Help text content' }
-    },
-    outputs: {},
-    example: `<bi-help-text
-  [text]="'Enter a valid email address'">
-</bi-help-text>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--text-300', '--body-small-size']
-  },
-
-  // ======================
-  // FORMS (2)
-  // ======================
-  SearchBar: {
-    name: 'SearchBar',
-    category: 'Forms',
-    selector: 'bi-search-bar',
-    description: 'Search input with icon',
-    inputs: {
-      placeholder: { type: 'string', default: 'Search...', description: 'Placeholder text' },
-      value: { type: 'string', required: false, description: 'Search value' }
-    },
-    outputs: {
-      searchChange: { type: 'EventEmitter<string>', description: 'Search value changed' },
-      searchSubmit: { type: 'EventEmitter<string>', description: 'Search submitted' }
-    },
-    example: `<bi-search-bar
-  [placeholder]="'Search products...'"
-  [value]="searchQuery"
-  (searchChange)="onSearch($event)">
-</bi-search-bar>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--stroke-1', '--text-400', '--body-medium-size']
-  },
-
-  Checklist: {
-    name: 'Checklist',
-    category: 'Forms',
-    selector: 'bi-checklist',
-    description: 'Checklist with selectable items',
-    inputs: {
-      items: { type: 'any[]', required: true, description: 'Checklist items' },
-      selectedItems: { type: 'any[]', required: false, description: 'Pre-selected items' }
-    },
-    outputs: {
-      selectionChange: { type: 'EventEmitter<any[]>', description: 'Selection changed' }
-    },
-    example: `<bi-checklist
-  [items]="taskList"
-  [selectedItems]="completedTasks"
-  (selectionChange)="onTasksChange($event)">
-</bi-checklist>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--violet-500', '--stroke-1']
-  },
-
-  // ======================
-  // CARDS (4)
-  // ======================
-  HorizontalCard: {
-    name: 'HorizontalCard',
-    category: 'Cards',
-    selector: 'bi-horizontal-card',
-    description: 'Horizontal layout card',
-    inputs: {
-      items: { type: 'HorizontalCardItem[]', required: true, description: 'Card items array' }
-    },
-    outputs: {
-      itemClick: { type: 'EventEmitter<any>', description: 'Card item clicked' }
-    },
-    interfaces: {
-      HorizontalCardItem: `{
-  title: string;
-  value: string;
-  icon?: string;
-}`
-    },
-    example: `<bi-horizontal-card
-  [items]="cardItems"
-  (itemClick)="handleClick($event)">
-</bi-horizontal-card>`,
-    usagePattern: 'data-display',
-    tokens: ['--stroke-1', '--text-500', '--text-300']
-  },
-
-  InfoActionCard: {
-    name: 'InfoActionCard',
-    category: 'Cards',
-    selector: 'bi-info-action-card',
-    description: 'Card with action buttons',
-    inputs: {
-      cardData: { type: 'InfoActionCardInput', required: true, description: 'Card configuration' },
-      size: { type: 'CardSize', default: 'medium', description: 'Card size' }
-    },
-    outputs: {
-      actionClick: { type: 'EventEmitter<string>', description: 'Action button clicked' }
-    },
-    interfaces: {
-      InfoActionCardInput: `{
-  title: string;
-  description: string;
-  actions: { label: string; value: string }[];
-}`,
-      CardSize: `'small' | 'medium' | 'large'`
-    },
-    example: `<bi-info-action-card
-  [cardData]="{
-    title: 'Confirm Action',
-    description: 'Are you sure?',
-    actions: [{label: 'Confirm', value: 'confirm'}]
-  }"
-  (actionClick)="onAction($event)">
-</bi-info-action-card>`,
-    usagePattern: 'content',
-    tokens: ['--stroke-1', '--violet-500']
-  },
-
-  ProgressDisplayCard: {
-    name: 'ProgressDisplayCard',
-    category: 'Cards',
-    selector: 'bi-progress-display-card',
-    description: 'Card showing progress information',
-    inputs: {
-      title: { type: 'string', required: true, description: 'Card title' },
-      progress: { type: 'number', required: true, description: 'Progress percentage' },
-      description: { type: 'string', required: false, description: 'Additional description' }
-    },
-    outputs: {},
-    example: `<bi-progress-display-card
-  [title]="'Project Completion'"
-  [progress]="75"
-  [description]="'3 of 4 tasks done'">
-</bi-progress-display-card>`,
-    usagePattern: 'data-display',
-    tokens: ['--violet-500', '--text-500']
-  },
-
-  ProfileImageList: {
-    name: 'ProfileImageList',
-    category: 'Cards',
-    selector: 'bi-profile-image-list',
-    description: 'Avatar stack component',
-    inputs: {
-      users: { type: 'ProfileUser[]', required: true, description: 'Array of user profile objects' },
-      maxDisplay: { type: 'number', default: 4, description: 'Maximum avatars to display' }
-    },
-    outputs: {},
-    interfaces: {
-      ProfileUser: `{
-  name: string;
-  imageUrl?: string;
-  initials?: string;
-}`
-    },
-    example: `<bi-profile-image-list
-  [users]="teamMembers"
-  [maxDisplay]="3">
-</bi-profile-image-list>`,
-    usagePattern: 'data-display',
-    tokens: ['--violet-500', '--white']
-  },
-
-  // ======================
-  // DROPDOWNS (5)
-  // ======================
-  SingleSelectDropdown: {
-    name: 'SingleSelectDropdown',
-    category: 'Dropdowns',
-    selector: 'bi-single-select-dropdown',
-    description: 'Single selection dropdown with search',
-    inputs: {
-      options: { type: 'DropdownItem[]', required: true, description: 'List of dropdown options' },
-      selectedValue: { type: 'string', required: false, description: 'Currently selected value' },
-      placeholder: { type: 'string', default: 'Select...', description: 'Placeholder text' },
-      searchable: { type: 'boolean', default: true, description: 'Enable search functionality' }
-    },
-    outputs: {
-      selectionChange: { type: 'EventEmitter<string>', description: 'Emitted when selection changes' }
-    },
-    interfaces: {
-      DropdownItem: `{
-  label: string;
-  value: string;
-  disabled?: boolean;
-}`
-    },
-    example: `<bi-single-select-dropdown
-  [options]="categoryOptions"
-  [selectedValue]="selectedCategory"
-  [placeholder]="'Select category'"
-  (selectionChange)="onCategoryChange($event)">
-</bi-single-select-dropdown>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--stroke-1', '--violet-500', '--hover']
-  },
-
-  MultiSelectDropdown: {
-    name: 'MultiSelectDropdown',
-    category: 'Dropdowns',
-    selector: 'bi-multi-select-dropdown',
-    description: 'Multi-selection dropdown with chips',
-    inputs: {
-      options: { type: 'MultiSelectOption[]', required: true, description: 'Dropdown options' },
-      selectedValues: { type: 'string[]', required: false, description: 'Selected values array' },
-      placeholder: { type: 'string', default: 'Select multiple...', description: 'Placeholder' }
-    },
-    outputs: {
-      selectionChange: { type: 'EventEmitter<string[]>', description: 'Selection array changed' }
-    },
-    interfaces: {
-      MultiSelectOption: `{
-  label: string;
-  value: string;
-  disabled?: boolean;
-}`
-    },
-    example: `<bi-multi-select-dropdown
-  [options]="tagOptions"
-  [selectedValues]="selectedTags"
-  (selectionChange)="onTagsChange($event)">
-</bi-multi-select-dropdown>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--stroke-1', '--violet-500', '--selected-low']
-  },
-
-  DropdownWithStatus: {
-    name: 'DropdownWithStatus',
-    category: 'Dropdowns',
-    selector: 'bi-dropdown-with-status',
-    description: 'Dropdown with status indicators',
-    inputs: {
-      options: { type: 'StatusDropdownItem[]', required: true, description: 'Options with status' },
-      selectedValue: { type: 'string', required: false, description: 'Selected value' }
-    },
-    outputs: {
-      selectionChange: { type: 'EventEmitter<string>', description: 'Selection changed' }
-    },
-    interfaces: {
-      StatusDropdownItem: `{
-  label: string;
-  value: string;
-  status: string;
-  statusColor: string;
-}`
-    },
-    example: `<bi-dropdown-with-status
-  [options]="statusOptions"
-  [selectedValue]="currentStatus"
-  (selectionChange)="onStatusChange($event)">
-</bi-dropdown-with-status>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--stroke-1', '--positive-high', '--negative-high']
-  },
-
-  MultilineOptionDropdown: {
-    name: 'MultilineOptionDropdown',
-    category: 'Dropdowns',
-    selector: 'bi-multiline-option-dropdown',
-    description: 'Dropdown with multiline options',
-    inputs: {
-      options: { type: 'MultilineDropdownItem[]', required: true, description: 'Multiline options' },
-      selectedValue: { type: 'string', required: false, description: 'Selected value' }
-    },
-    outputs: {
-      selectionChange: { type: 'EventEmitter<string>', description: 'Selection event' }
-    },
-    interfaces: {
-      MultilineDropdownItem: `{
-  title: string;
-  subtitle: string;
-  value: string;
-}`
-    },
-    example: `<bi-multiline-option-dropdown
-  [options]="vendorOptions"
-  [selectedValue]="selectedVendor"
-  (selectionChange)="onVendorSelect($event)">
-</bi-multiline-option-dropdown>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--stroke-1', '--text-500', '--text-300']
-  },
-
-  ExpandableMenuDropdown: {
-    name: 'ExpandableMenuDropdown',
-    category: 'Dropdowns',
-    selector: 'bi-expandable-menu-dropdown',
-    description: 'Nested menu dropdown with expandable sections',
-    inputs: {
-      menuItems: { type: 'MenuDropdownItem[]', required: true, description: 'Nested menu structure' }
-    },
-    outputs: {
-      itemSelect: { type: 'EventEmitter<any>', description: 'Menu item selected' }
-    },
-    interfaces: {
-      MenuDropdownItem: `{
-  label: string;
-  value: string;
-  children?: MenuDropdownItem[];
-}`
-    },
-    example: `<bi-expandable-menu-dropdown
-  [menuItems]="navigationMenu"
-  (itemSelect)="onMenuSelect($event)">
-</bi-expandable-menu-dropdown>`,
-    usagePattern: 'navigation',
-    tokens: ['--stroke-1', '--hover', '--violet-500']
-  },
-
-  // ======================
-  // OVERLAYS (2)
-  // ======================
-  CustomTooltip: {
-    name: 'CustomTooltip',
-    category: 'Overlays',
-    selector: 'bi-custom-tooltip',
-    description: 'Customizable tooltip component',
-    inputs: {
-      text: { type: 'string', required: true, description: 'Tooltip text' },
-      position: { type: 'string', default: 'top', description: 'Tooltip position' }
-    },
-    outputs: {},
-    example: `<bi-custom-tooltip
-  [text]="'Click to edit'"
-  [position]="'right'">
-  <button>Edit</button>
-</bi-custom-tooltip>`,
-    usagePattern: 'content',
-    tokens: ['--violet-800', '--white', '--body-small-size']
-  },
-
-  ConfirmWarning: {
-    name: 'ConfirmWarning',
-    category: 'Overlays',
-    selector: 'bi-confirm-warning',
-    description: 'Confirmation dialog with warning',
-    inputs: {
-      title: { type: 'string', required: true, description: 'Dialog title' },
-      message: { type: 'string', required: true, description: 'Warning message' },
-      confirmLabel: { type: 'string', default: 'Confirm', description: 'Confirm button label' },
-      cancelLabel: { type: 'string', default: 'Cancel', description: 'Cancel button label' }
-    },
-    outputs: {
-      confirm: { type: 'EventEmitter<void>', description: 'User confirmed' },
-      cancel: { type: 'EventEmitter<void>', description: 'User cancelled' }
-    },
-    example: `<bi-confirm-warning
-  [title]="'Delete Item'"
-  [message]="'This action cannot be undone'"
-  (confirm)="deleteItem()"
-  (cancel)="closeDialog()">
-</bi-confirm-warning>`,
-    usagePattern: 'content',
-    tokens: ['--negative-high', '--stroke-1']
-  },
-
-  // ======================
-  // WORKFLOWS (3)
-  // ======================
-  VerticalStages: {
-    name: 'VerticalStages',
-    category: 'Workflows',
-    selector: 'bi-vertical-stages',
-    description: 'Vertical stage indicator for workflows',
-    inputs: {
-      stages: { type: 'StageItem[]', required: true, description: 'Workflow stages' },
-      currentStage: { type: 'number', default: 0, description: 'Current stage index' }
-    },
-    outputs: {},
-    interfaces: {
-      StageItem: `{
-  label: string;
-  status: 'completed' | 'current' | 'pending';
-}`
-    },
-    example: `<bi-vertical-stages
-  [stages]="workflowStages"
-  [currentStage]="2">
-</bi-vertical-stages>`,
-    usagePattern: 'multi-step-forms',
-    tokens: ['--violet-500', '--positive-high', '--text-300']
-  },
-
-  UserSelection: {
-    name: 'UserSelection',
-    category: 'Workflows',
-    selector: 'bi-user-selection',
-    description: 'User selection component with search',
-    inputs: {
-      users: { type: 'UserSelectionUser[]', required: true, description: 'Available users' },
-      selectedUsers: { type: 'any[]', required: false, description: 'Pre-selected users' }
-    },
-    outputs: {
-      selectionChange: { type: 'EventEmitter<any[]>', description: 'User selection changed' }
-    },
-    interfaces: {
-      UserSelectionUser: `{
-  id: string;
-  name: string;
-  email: string;
-  avatar?: string;
-}`
-    },
-    example: `<bi-user-selection
-  [users]="allUsers"
-  [selectedUsers]="assignedUsers"
-  (selectionChange)="onUsersChange($event)">
-</bi-user-selection>`,
-    usagePattern: 'form-inputs',
-    tokens: ['--stroke-1', '--violet-500']
-  },
-
-  Accordion: {
-    name: 'Accordion',
-    category: 'Workflows',
-    selector: 'bi-accordion',
-    description: 'Collapsible accordion component',
-    inputs: {
-      items: { type: 'AccordionMenu[]', required: true, description: 'Accordion items' },
-      config: { type: 'AccordionConfig', required: false, description: 'Accordion configuration' }
-    },
-    outputs: {
-      itemClick: { type: 'EventEmitter<any>', description: 'Accordion item clicked' }
-    },
-    interfaces: {
-      AccordionMenu: `{
-  label: string;
-  value: string;
-  children?: AccordionSubmenu[];
-}`,
-      AccordionSubmenu: `{
-  label: string;
-  value: string;
-}`,
-      AccordionConfig: `{
-  allowMultiple?: boolean;
-  expandFirst?: boolean;
-}`
-    },
-    example: `<bi-accordion
-  [items]="menuItems"
-  [config]="{allowMultiple: false}"
-  (itemClick)="onItemSelect($event)">
-</bi-accordion>`,
-    usagePattern: 'navigation',
-    tokens: ['--stroke-1', '--hover', '--violet-500']
-  },
-
-  // ======================
-  // FILTERS (2)
-  // ======================
-  GeoTagFilter: {
-    name: 'GeoTagFilter',
-    category: 'Filters',
-    selector: 'bi-geo-tag-filter',
-    description: 'Geographic tag filter with tabs',
-    inputs: {
-      tabs: { type: 'FilterTab[]', required: true, description: 'Filter tabs' },
-      options: { type: 'FilterOption[]', required: true, description: 'Filter options' }
-    },
-    outputs: {
-      filterChange: { type: 'EventEmitter<any>', description: 'Filter selection changed' }
-    },
-    interfaces: {
-      FilterTab: `{
-  label: string;
-  value: string;
-}`,
-      FilterOption: `{
-  label: string;
-  value: string;
-  count?: number;
-}`
-    },
-    example: `<bi-geo-tag-filter
-  [tabs]="regionTabs"
-  [options]="locationOptions"
-  (filterChange)="onFilterChange($event)">
-</bi-geo-tag-filter>`,
-    usagePattern: 'data-display',
-    tokens: ['--violet-500', '--stroke-1', '--selected-low']
-  },
-
-  TableActionMenu: {
-    name: 'TableActionMenu',
-    category: 'Filters',
-    selector: 'bi-table-action-menu',
-    description: 'Action menu for table rows',
-    inputs: {
-      actions: { type: 'ActionMenuItem[]', required: true, description: 'Available actions' }
-    },
-    outputs: {
-      actionSelect: { type: 'EventEmitter<string>', description: 'Action selected' }
-    },
-    interfaces: {
-      ActionMenuItem: `{
-  label: string;
-  value: string;
-  icon?: string;
-  destructive?: boolean;
-}`
-    },
-    example: `<bi-table-action-menu
-  [actions]="rowActions"
-  (actionSelect)="handleAction($event)">
-</bi-table-action-menu>`,
-    usagePattern: 'data-display',
-    tokens: ['--stroke-1', '--hover', '--negative-high']
-  },
-
-  // ======================
-  // TABLES (3)
-  // ======================
-  ScrollableDataTable: {
-    name: 'ScrollableDataTable',
-    category: 'Tables',
-    selector: 'bi-scrollable-data-table',
-    description: 'Feature-rich data table with sorting, filtering, and virtual scrolling',
-    inputs: {
-      columns: { type: 'TableColumn[]', required: true, description: 'Column definitions' },
-      data: { type: 'any[]', required: true, description: 'Table data rows' },
-      enableSort: { type: 'boolean', default: true, description: 'Enable column sorting' },
-      enableFilter: { type: 'boolean', default: true, description: 'Enable filtering' },
-      maxHeight: { type: 'string', default: '500px', description: 'Maximum table height' }
-    },
-    outputs: {
-      rowClick: { type: 'EventEmitter<any>', description: 'Emitted when row is clicked' },
-      sortChange: { type: 'EventEmitter<{column: string, direction: string}>', description: 'Sort change event' }
-    },
-    interfaces: {
-      TableColumn: `{
-  key: string;
-  label: string;
-  sortable?: boolean;
-  width?: string;
-  align?: 'left' | 'center' | 'right';
-}`
-    },
-    example: `<bi-scrollable-data-table
-  [columns]="tableColumns"
-  [data]="tableData"
-  [enableSort]="true"
-  [maxHeight]="'600px'"
-  (rowClick)="handleRowClick($event)">
-</bi-scrollable-data-table>
-
-// Component
-tableColumns: TableColumn[] = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'status', label: 'Status', width: '120px' },
-  { key: 'amount', label: 'Amount', align: 'right' }
-];`,
-    usagePattern: 'data-display',
-    tokens: ['--stroke-1', '--hover', '--text-400', '--body-medium-size']
-  },
-
-  CollapsableTable: {
-    name: 'CollapsableTable',
-    category: 'Tables',
-    selector: 'bi-collapsable-table',
-    description: 'Budget table with collapsible rows and Excel export',
-    inputs: {
-      data: { type: 'any', required: true, description: 'Hierarchical table data' },
-      columns: { type: 'string[]', required: true, description: 'Month column names' },
-      editable: { type: 'boolean', default: true, description: 'Enable inline editing' }
-    },
-    outputs: {
-      dataChange: { type: 'EventEmitter<any>', description: 'Data modified' },
-      export: { type: 'EventEmitter<void>', description: 'Export triggered' }
-    },
-    example: `<bi-collapsable-table
-  [data]="budgetData"
-  [columns]="monthColumns"
-  [editable]="true"
-  (dataChange)="onBudgetChange($event)">
-</bi-collapsable-table>`,
-    usagePattern: 'data-display',
-    tokens: ['--stroke-1', '--violet-100', '--text-400']
-  },
-
-  CollapsableTableSmall: {
-    name: 'CollapsableTableSmall',
-    category: 'Tables',
-    selector: 'bi-collapsable-table-small',
-    description: 'Compact collapsible budget table',
-    inputs: {
-      data: { type: 'any', required: true, description: 'Table data' },
-      columns: { type: 'string[]', required: true, description: 'Column headers' },
-      compact: { type: 'boolean', default: true, description: 'Use compact layout' }
-    },
-    outputs: {
-      dataChange: { type: 'EventEmitter<any>', description: 'Data updated' }
-    },
-    example: `<bi-collapsable-table-small
-  [data]="compactBudgetData"
-  [columns]="quarters"
-  (dataChange)="onDataUpdate($event)">
-</bi-collapsable-table-small>`,
-    usagePattern: 'data-display',
-    tokens: ['--stroke-1', '--violet-100', '--body-small-size']
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Load raw API data
+const rawApiData = JSON.parse(
+  readFileSync(join(__dirname, 'real-component-api.cjs.json'), 'utf-8')
+);
+
+// Helper to convert kebab-case to PascalCase
+function formatComponentName(kebabName) {
+  return kebabName
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('') + 'Component';
+}
+
+// Categorize components
+function categorizeComponent(name) {
+  if (name.includes('button')) return 'Buttons';
+  if (name.includes('dropdown') || name.includes('select')) return 'Dropdowns';
+  if (name.includes('table')) return 'Tables';
+  if (name.includes('pill') || name === 'status-pill') return 'Status & Pills';
+  if (name.includes('progress')) return 'Progress';
+  if (name.includes('card')) return 'Cards';
+  if (name.includes('stepper') || name.includes('stages')) return 'Stages & Workflows';
+  if (name.includes('search') || name.includes('filter') || name === 'checklist') return 'Search & Filters';
+  if (name === 'accordion') return 'Accordion & Expandable';
+  if (name.includes('tooltip')) return 'Tooltips & Overlays';
+  if (name === 'confirm-warning') return 'Dialogs & Modals';
+  if (name.includes('breadcrumb') || name.includes('tabs')) return 'Navigation & Breadcrumb';
+  if (name.includes('user')) return 'User Management';
+  if (name.includes('text') || name.includes('header')) return 'Text & Headers';
+  if (name.includes('menu')) return 'Filters & Menus';
+  return 'Components';
+}
+
+// Generate description
+function generateDescription(name, data) {
+  const descriptions = {
+    'custom-button': 'Primary action button with loading state and custom styling',
+    'approve-button': 'Specialized approve button with loading state',
+    'cancel-button': 'Cancel button with configurable styling',
+    'back-button': 'Navigation back button',
+    'button-image': 'Button with image/icon and text',
+    'status-pill': 'Status indicator pill with icon and customizable colors',
+    'pill-badge': 'Badge with icon and text',
+    'pill-box': 'Simple colored text pill',
+    'progress-bar': 'Linear progress bar with numeric values',
+    'segmented-progress-bar': 'Multi-segment progress bar with legend',
+    'vertical-stepper': 'Vertical step indicator for multi-step workflows',
+    'custom-breadcrumb': 'Breadcrumb navigation component',
+    'title-header-subtext': 'Header with title, description, and optional pill',
+    'help-text': 'Help text component',
+    'header-tabs': 'Tabbed navigation with status icons and counts',
+    'search-bar': 'Search input with clear functionality',
+    'checklist': 'Checkbox list with search',
+    'horizontal-card': 'Horizontal card layout with multiple data fields',
+    'info-action-card': 'Action card with image, title, and description',
+    'progress-display-card': 'Card displaying progress information',
+    'profile-image-list': 'List of user profile images with overflow indicator',
+    'single-select-dropdown': 'Single selection dropdown',
+    'multi-select-dropdown': 'Multiple selection dropdown with chips',
+    'dropdown-with-status': 'Dropdown with status indicators',
+    'multiline-option-dropdown': 'Advanced dropdown with multi-line options and search',
+    'expandable-menu-dropdown': 'Collapsible menu with icons',
+    'custom-tooltip': 'Custom tooltip with numeric values',
+    'confirm-warning': 'Confirmation dialog with customizable buttons',
+    'vertical-stages': 'Vertical workflow stages with user assignment',
+    'user-selection': 'User selection component with search and load more',
+    'accordion': 'Accordion menu with submenu items',
+    'geo-tag-filter': 'Multi-tab filter with apply/reset functionality',
+    'table-action-menu': 'Context menu for table actions',
+    'scrollable-data-table': 'Advanced data table with grouping, sorting, search, and infinite scroll',
+    'collapsable-table': 'Budget table with collapsible groups and Excel export',
+    'collapsable-table-small': 'Compact budget table with collapsible groups'
+  };
+  return descriptions[name] || `${formatComponentName(name)}`;
+}
+
+// Generate usage example
+function generateUsageExample(name, data) {
+  const inputs = Object.entries(data.inputs || {}).slice(0, 3); // Show first 3 inputs
+  const outputs = Object.entries(data.outputs || {}).slice(0, 2); // Show first 2 outputs
+  
+  const inputBindings = inputs.map(([key, value]) => {
+    let exampleValue = value.default || '';
+    if (!exampleValue) {
+      if (value.type.includes('[]')) exampleValue = '[]';
+      else if (value.type === 'boolean') exampleValue = 'false';
+      else if (value.type === 'number') exampleValue = '0';
+      else if (value.type === 'string') exampleValue = "'example'";
+      else exampleValue = '{}';
+    }
+    return `  [${key}]="${exampleValue}"`;
+  }).join('\n');
+
+  const outputBindings = outputs.map(([key]) => {
+    return `  (${key})="on${key.charAt(0).toUpperCase() + key.slice(1)}($event)"`;
+  }).join('\n');
+
+  const allBindings = [inputBindings, outputBindings].filter(Boolean).join('\n');
+
+  return `<${data.selector}\n${allBindings}>\n</${data.selector}>`;
+}
+
+// Helper to format component data
+function formatComponent(name, data) {
+  const inputs = Object.entries(data.inputs || {}).map(([key, value]) => ({
+    name: key,
+    type: value.type,
+    required: value.required,
+    default: value.default ? value.default.replace(/^'|'$/g, '') : undefined // Remove quotes from defaults
+  }));
+
+  const outputs = Object.entries(data.outputs || {}).map(([key, value]) => ({
+    name: key,
+    type: value.type
+  }));
+
+  const interfaces = Object.entries(data.interfaces || {}).map(([key, value]) => ({
+    name: key,
+    definition: value
+  }));
+
+  const types = Object.entries(data.types || {}).map(([key, value]) => ({
+    name: key,
+    definition: value
+  }));
+
+  return {
+    name: formatComponentName(name),
+    selector: data.selector,
+    inputs,
+    outputs,
+    interfaces,
+    types,
+    category: categorizeComponent(name),
+    description: generateDescription(name, data),
+    usageExample: generateUsageExample(name, data)
+  };
+}
+
+// Build components object
+const COMPONENTS_DATA = {};
+for (const [name, data] of Object.entries(rawApiData)) {
+  COMPONENTS_DATA[formatComponentName(name)] = formatComponent(name, data);
+}
+
+// Build categories
+const COMPONENT_CATEGORIES = {};
+for (const component of Object.values(COMPONENTS_DATA)) {
+  if (!COMPONENT_CATEGORIES[component.category]) {
+    COMPONENT_CATEGORIES[component.category] = [];
   }
-};
+  COMPONENT_CATEGORIES[component.category].push(component.name);
+}
 
-// Component categories mapping
-export const COMPONENT_CATEGORIES = {
-  'Buttons': ['CustomButton', 'ApproveButton', 'CancelButton', 'BackButton', 'ButtonImage'],
-  'Status': ['StatusPill', 'PillBadge', 'PillBox'],
-  'Progress': ['ProgressBar', 'SegmentedProgressBar'],
-  'Navigation': ['VerticalStepper', 'CustomBreadcrumb', 'HeaderTabs'],
-  'Text': ['TitleHeaderSubtext', 'HelpText'],
-  'Forms': ['SearchBar', 'Checklist'],
-  'Cards': ['HorizontalCard', 'InfoActionCard', 'ProgressDisplayCard', 'ProfileImageList'],
-  'Dropdowns': ['SingleSelectDropdown', 'MultiSelectDropdown', 'DropdownWithStatus', 'MultilineOptionDropdown', 'ExpandableMenuDropdown'],
-  'Overlays': ['CustomTooltip', 'ConfirmWarning'],
-  'Workflows': ['VerticalStages', 'UserSelection', 'Accordion'],
-  'Filters': ['GeoTagFilter', 'TableActionMenu'],
-  'Tables': ['ScrollableDataTable', 'CollapsableTable', 'CollapsableTableSmall']
-};
-
-// Usage patterns with recommendations
-export const USAGE_PATTERNS = {
+// Usage patterns
+const USAGE_PATTERNS = {
   'primary-actions': {
-    name: 'Primary Actions',
-    description: 'Main call-to-action buttons for forms and workflows',
-    components: ['CustomButton', 'ApproveButton', 'CancelButton', 'BackButton'],
-    example: `// Primary action button
-<bi-custom-button
-  [label]="'Submit Form'"
-  [isActive]="formValid"
-  [isLoading]="isSubmitting"
-  (onClick)="submitForm()">
-</bi-custom-button>
-
-// Approve with confirmation
-<bi-approve-button
-  [label]="'Approve Request'"
-  [isActive]="canApprove"
-  (onClick)="handleApproval()">
-</bi-approve-button>`
+    title: 'Primary Actions',
+    description: 'Use CustomButtonComponent for primary actions and ApproveButtonComponent for approval workflows',
+    components: ['CustomButtonComponent', 'ApproveButtonComponent'],
+    example: `<bi-custom-button
+  [label]="'Save Changes'"
+  [showLoader]="isSaving"
+  (clickEvent)="onSave($event)">
+</bi-custom-button>`
   },
   'status-indicators': {
-    name: 'Status Indicators',
-    description: 'Show status with colored pills, badges, and progress bars',
-    components: ['StatusPill', 'PillBadge', 'PillBox', 'ProgressBar', 'SegmentedProgressBar'],
-    example: `// Status pill with icon
-<bi-status-pill
-  [statusText]="item.status"
-  [statusImage]="getStatusIcon(item.status)"
-  [statusColor]="getStatusColor(item.status)"
-  [statusTextColor]="getStatusTextColor(item.status)">
-</bi-status-pill>
-
-// Count badge
-<bi-pill-badge [count]="notificationCount">
-</bi-pill-badge>`
-  },
-  'multi-step-forms': {
-    name: 'Multi-Step Forms',
-    description: 'Guided workflows with step indicators and stage tracking',
-    components: ['VerticalStepper', 'VerticalStages'],
-    example: `// Vertical stepper for workflow
-<bi-vertical-stepper
-  [steps]="formSteps"
-  [activeStep]="currentStepIndex"
-  (stepClick)="navigateToStep($event)">
-</bi-vertical-stepper>
-
-// Stages indicator
-<bi-vertical-stages
-  [stages]="processStages"
-  [currentStage]="activeStage">
-</bi-vertical-stages>`
+    title: 'Status Indicators',
+    description: 'Use StatusPillComponent for workflow statuses and PillBadgeComponent for counts',
+    components: ['StatusPillComponent', 'PillBadgeComponent', 'PillBoxComponent'],
+    example: `<bi-status-pill
+  [text]="'In Progress'"
+  [backgroundColor]="'#F0F2FF'"
+  [iconSrc]="'assets/icons/in_progress.svg'">
+</bi-status-pill>`
   },
   'data-display': {
-    name: 'Data Display',
-    description: 'Tables and cards for displaying structured data',
-    components: ['ScrollableDataTable', 'CollapsableTable', 'CollapsableTableSmall', 'HorizontalCard'],
-    example: `// Data table with sorting
-<bi-scrollable-data-table
+    title: 'Data Display',
+    description: 'Use ScrollableDataTableComponent for large datasets with grouping and sorting',
+    components: ['ScrollableDataTableComponent', 'CollapsableTableComponent'],
+    example: `<bi-scrollable-data-table
+  [data]="tableData"
   [columns]="columns"
-  [data]="rows"
-  [enableSort]="true"
-  (rowClick)="viewDetails($event)">
-</bi-scrollable-data-table>
-
-// Collapsible budget table
-<bi-collapsable-table
-  [data]="budgetData"
-  [columns]="months"
-  [editable]="true"
-  (dataChange)="onBudgetUpdate($event)">
-</bi-collapsable-table>`
+  (action)="handleAction($event)">
+</bi-scrollable-data-table>`
   },
   'form-inputs': {
-    name: 'Form Inputs',
-    description: 'Input controls for forms and data entry',
-    components: ['SingleSelectDropdown', 'MultiSelectDropdown', 'SearchBar', 'Checklist', 'UserSelection'],
-    example: `// Dropdown with search
-<bi-single-select-dropdown
-  [options]="options"
-  [selectedValue]="value"
-  [searchable]="true"
-  (selectionChange)="onValueChange($event)">
-</bi-single-select-dropdown>
-
-// Multi-select with chips
-<bi-multi-select-dropdown
-  [options]="tags"
-  [selectedValues]="selectedTags"
-  (selectionChange)="onTagsUpdate($event)">
-</bi-multi-select-dropdown>`
-  },
-  'navigation': {
-    name: 'Navigation',
-    description: 'Navigation elements like breadcrumbs, tabs, and menus',
-    components: ['CustomBreadcrumb', 'HeaderTabs', 'ExpandableMenuDropdown', 'Accordion'],
-    example: `// Breadcrumb navigation
-<bi-custom-breadcrumb
-  [items]="['Home', 'Products', 'Details']"
-  (itemClick)="navigateTo($event)">
-</bi-custom-breadcrumb>
-
-// Tab navigation
-<bi-header-tabs
-  [tabs]="tabs"
-  [activeTab]="currentTab"
-  (tabChange)="onTabChange($event)">
-</bi-header-tabs>`
+    title: 'Form Inputs',
+    description: 'Use dropdown components for selection and SearchBarComponent for filtering',
+    components: ['SingleSelectDropdownComponent', 'MultiSelectDropdownComponent', 'SearchBarComponent'],
+    example: `<bi-single-select-dropdown
+  [items]="options"
+  [placeholder]="'Select option'"
+  (selectionChange)="onSelect($event)">
+</bi-single-select-dropdown>`
   },
-  'content': {
-    name: 'Content Display',
-    description: 'Text, tooltips, and informational components',
-    components: ['TitleHeaderSubtext', 'HelpText', 'CustomTooltip', 'InfoActionCard', 'ConfirmWarning'],
-    example: `// Page header
-<bi-title-header-subtext
-  [title]="'Dashboard'"
-  [subtitle]="'Overview of your projects'">
-</bi-title-header-subtext>
-
-// Tooltip
-<bi-custom-tooltip [text]="'Click to edit'">
-  <button>Edit</button>
-</bi-custom-tooltip>`
+  'multi-step-forms': {
+    title: 'Multi-step Forms',
+    description: 'Use VerticalStepperComponent for step-by-step workflows',
+    components: ['VerticalStepperComponent', 'VerticalStagesComponent'],
+    example: `<bi-vertical-stepper
+  [steps]="workflowSteps"
+  (stepClicked)="onStepChange($event)">
+</bi-vertical-stepper>`
   }
 };
+
+export { COMPONENTS_DATA, COMPONENT_CATEGORIES, USAGE_PATTERNS };