@mohityadav0903/branintelle-mcp 2.0.0 → 2.0.2

package/components-data.cjs

@@ -0,0 +1,157 @@
+/**
+ * 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.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Load raw API data
+const rawApiData = JSON.parse(
+  fs.readFileSync(path.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 = {};
+for (const [name, data] of Object.entries(rawApiData)) {
+  components[formatComponentName(name)] = formatComponent(name, data);
+}
+
+module.exports = components;

package/components-data.js

@@ -1,246 +1,223 @@
 /**
  * Branintelle UI Library - Component Metadata
- * Auto-generated component documentation with props, examples, and patterns
+ * 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
-  // ======================
-  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']
-  },
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
 
-  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']
-  },
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
-  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']
-  },
+// Load raw API data
+const rawApiData = JSON.parse(
+  readFileSync(join(__dirname, 'real-component-api.cjs.json'), 'utf-8')
+);
 
-  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']
-  },
+// Helper to convert kebab-case to PascalCase
+function formatComponentName(kebabName) {
+  return kebabName
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('') + 'Component';
+}
 
-  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']
-  }
-};
+// 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';
+}
 
-// Add all other components...
-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']
-};
+// 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
+  }));
 
-export const USAGE_PATTERNS = {
+  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);
+}
+
+// Usage patterns
+const USAGE_PATTERNS = {
   'primary-actions': {
-    name: 'Primary Actions',
-    description: 'Main call-to-action buttons',
-    components: ['CustomButton', 'ApproveButton'],
-    example: `// Primary action button
-<bi-custom-button
-  [label]="'Submit Form'"
-  [isActive]="formValid"
-  [isLoading]="isSubmitting"
-  (onClick)="submitForm()">
+    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 and badges',
-    components: ['StatusPill', 'PillBadge'],
-    example: `// Status pill with icon
-<bi-status-pill
-  [statusText]="item.status"
-  [statusImage]="getStatusIcon(item.status)"
-  [statusColor]="getStatusColor(item.status)"
-  [statusTextColor]="getStatusTextColor(item.status)">
+    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>`
-  },
-  'multi-step-forms': {
-    name: 'Multi-Step Forms',
-    description: 'Guided workflows with step indicators',
-    components: ['VerticalStepper', 'VerticalStages'],
-    example: `// Vertical stepper for workflow
-<bi-vertical-stepper
-  [steps]="formSteps"
-  [activeStep]="currentStepIndex"
-  (stepClick)="navigateToStep($event)">
-</bi-vertical-stepper>`
   },
   'data-display': {
-    name: 'Data Display',
-    description: 'Tables and lists for displaying data',
-    components: ['ScrollableDataTable', 'CollapsableTable'],
-    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)">
+  (action)="handleAction($event)">
 </bi-scrollable-data-table>`
   },
   'form-inputs': {
-    name: 'Form Inputs',
-    description: 'Input controls for forms',
-    components: ['SingleSelectDropdown', 'MultiSelectDropdown', 'SearchBar'],
-    example: `// Dropdown with search
-<bi-single-select-dropdown
-  [options]="options"
-  [selectedValue]="value"
-  (selectionChange)="onValueChange($event)">
+    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>`
+  },
+  '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 };

package/mcp-server.js

@@ -184,7 +184,13 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
     if (name === 'get_component_docs') {
       const componentNames = args?.components || [];
       const docs = componentNames.map(name => {
-        const comp = COMPONENTS_DATA[name];
+        // Normalize component name (accept both "CustomButton" and "CustomButtonComponent")
+        let lookupName = name;
+        if (!name.endsWith('Component')) {
+          lookupName = name + 'Component';
+        }
+        
+        const comp = COMPONENTS_DATA[lookupName];
         if (!comp) return { name, error: 'Component not found' };
 
         return {
@@ -192,13 +198,12 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
           category: comp.category,
           selector: comp.selector,
           description: comp.description,
-          import: `import { ${comp.name}Component } from '@mohityadav0903/branintelle-ui-lib';`,
+          import: `import { ${comp.name} } from '@mohityadav0903/branintelle-ui-lib';`,
           inputs: comp.inputs,
           outputs: comp.outputs,
           interfaces: comp.interfaces,
-          example: comp.example,
-          usagePattern: comp.usagePattern,
-          designTokens: comp.tokens,
+          types: comp.types,
+          usageExample: comp.usageExample,
           package: '@mohityadav0903/branintelle-ui-lib',
           version: '1.7.0'
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohityadav0903/branintelle-mcp",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "description": "MCP server for Branintelle UI Library - provides component documentation via Model Context Protocol",
   "main": "mcp-server.js",