@mohityadav0903/branintelle-mcp 1.0.0 → 2.0.1

package/components-data.js

@@ -0,0 +1,1107 @@
+/**
+ * Branintelle UI Library - Complete Component Metadata
+ * All 36 components with inputs, outputs, interfaces, and examples
+ */
+
+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']
+  }
+};
+
+// 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 = {
+  '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>`
+  },
+  '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>`
+  },
+  '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
+  [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>`
+  },
+  '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>`
+  },
+  '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>`
+  }
+};