@iblai/mcp 1.0.0

package/dist/tools/component-info.js

@@ -0,0 +1,1323 @@
+export const componentInfoTool = {
+    name: 'get_component_info',
+    description: 'Get detailed information about a specific UI component from web-containers',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            componentName: {
+                type: 'string',
+                description: 'Name of the component (e.g., Button, Card, Dialog, Profile, NotificationDropdown)',
+            },
+        },
+        required: ['componentName'],
+    },
+};
+const components = {
+    // ============================================================================
+    // UI PRIMITIVES (Radix UI-based)
+    // ============================================================================
+    Button: `# Button Component
+
+\`\`\`typescript
+import { Button } from '@iblai/web-containers';
+
+interface ButtonProps {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  asChild?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+}
+
+// Examples
+<Button>Click me</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline" size="sm">Small Outline</Button>
+<Button size="icon"><Icon /></Button>
+<Button asChild><a href="/page">Link Button</a></Button>
+
+// With loading state
+<Button disabled={isLoading}>
+  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+  Submit
+</Button>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/button.tsx\``,
+    Card: `# Card Component
+
+\`\`\`typescript
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter
+} from '@iblai/web-containers';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description text</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Main content goes here</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+
+// With custom styling
+<Card className="w-[350px]">
+  <CardHeader className="pb-2">
+    <CardTitle className="text-lg">Compact Card</CardTitle>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+</Card>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/card.tsx\``,
+    Dialog: `# Dialog Component
+
+\`\`\`typescript
+import {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from '@iblai/web-containers';
+
+// Controlled dialog
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogTrigger asChild>
+    <Button>Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription>
+        Description of what this dialog does.
+      </DialogDescription>
+    </DialogHeader>
+    <div className="py-4">
+      {/* Dialog content */}
+    </div>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button onClick={handleSubmit}>Submit</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+
+// Uncontrolled dialog
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+    </DialogHeader>
+    Content here
+  </DialogContent>
+</Dialog>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/dialog.tsx\``,
+    Input: `# Input Component
+
+\`\`\`typescript
+import { Input } from '@iblai/web-containers';
+import { Label } from '@iblai/web-containers';
+
+// Basic usage
+<Input
+  type="text"
+  placeholder="Enter text..."
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// With label
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input
+    id="email"
+    type="email"
+    placeholder="name@example.com"
+  />
+</div>
+
+// Different types
+<Input type="password" placeholder="Password" />
+<Input type="number" placeholder="0" />
+<Input type="search" placeholder="Search..." />
+<Input type="file" />
+
+// States
+<Input disabled placeholder="Disabled input" />
+<Input className="border-red-500" placeholder="Error state" />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/input.tsx\``,
+    Label: `# Label Component
+
+\`\`\`typescript
+import { Label } from '@iblai/web-containers';
+
+<Label htmlFor="email">Email Address</Label>
+
+// With required indicator
+<Label htmlFor="name">
+  Name <span className="text-red-500">*</span>
+</Label>
+
+// Disabled state
+<Label htmlFor="disabled" className="text-muted-foreground">
+  Disabled Field
+</Label>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/label.tsx\``,
+    Textarea: `# Textarea Component
+
+\`\`\`typescript
+import { Textarea } from '@iblai/web-containers';
+
+<Textarea
+  placeholder="Type your message here..."
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// With rows
+<Textarea rows={5} placeholder="Longer text area" />
+
+// Disabled
+<Textarea disabled placeholder="Cannot edit" />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/textarea.tsx\``,
+    Select: `# Select Component
+
+\`\`\`typescript
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from '@iblai/web-containers';
+
+// Basic usage
+<Select value={value} onValueChange={setValue}>
+  <SelectTrigger className="w-[200px]">
+    <SelectValue placeholder="Select option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="option1">Option 1</SelectItem>
+    <SelectItem value="option2">Option 2</SelectItem>
+    <SelectItem value="option3">Option 3</SelectItem>
+  </SelectContent>
+</Select>
+
+// With groups
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select..." />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>Fruits</SelectLabel>
+      <SelectItem value="apple">Apple</SelectItem>
+      <SelectItem value="banana">Banana</SelectItem>
+    </SelectGroup>
+    <SelectSeparator />
+    <SelectGroup>
+      <SelectLabel>Vegetables</SelectLabel>
+      <SelectItem value="carrot">Carrot</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+
+// Disabled state
+<Select disabled>
+  <SelectTrigger>
+    <SelectValue placeholder="Disabled" />
+  </SelectTrigger>
+</Select>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/select.tsx\``,
+    Checkbox: `# Checkbox Component
+
+\`\`\`typescript
+import { Checkbox } from '@iblai/web-containers';
+import { Label } from '@iblai/web-containers';
+
+// Basic usage
+<div className="flex items-center space-x-2">
+  <Checkbox
+    id="terms"
+    checked={checked}
+    onCheckedChange={setChecked}
+  />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>
+
+// Disabled
+<Checkbox disabled />
+
+// Indeterminate state
+<Checkbox checked="indeterminate" />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/checkbox.tsx\``,
+    RadioGroup: `# RadioGroup Component
+
+\`\`\`typescript
+import { RadioGroup, RadioGroupItem } from '@iblai/web-containers';
+import { Label } from '@iblai/web-containers';
+
+<RadioGroup value={value} onValueChange={setValue}>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option1" id="r1" />
+    <Label htmlFor="r1">Option 1</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option2" id="r2" />
+    <Label htmlFor="r2">Option 2</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option3" id="r3" />
+    <Label htmlFor="r3">Option 3</Label>
+  </div>
+</RadioGroup>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/radio-group.tsx\``,
+    Switch: `# Switch Component
+
+\`\`\`typescript
+import { Switch } from '@iblai/web-containers';
+import { Label } from '@iblai/web-containers';
+
+<div className="flex items-center space-x-2">
+  <Switch
+    id="airplane-mode"
+    checked={enabled}
+    onCheckedChange={setEnabled}
+  />
+  <Label htmlFor="airplane-mode">Airplane Mode</Label>
+</div>
+
+// Disabled
+<Switch disabled />
+
+// With different sizes via className
+<Switch className="scale-75" />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/switch.tsx\``,
+    Tabs: `# Tabs Component
+
+\`\`\`typescript
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from '@iblai/web-containers';
+
+// Controlled
+<Tabs value={tab} onValueChange={setTab}>
+  <TabsList>
+    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Content for Tab 1</TabsContent>
+  <TabsContent value="tab2">Content for Tab 2</TabsContent>
+  <TabsContent value="tab3">Content for Tab 3</TabsContent>
+</Tabs>
+
+// Uncontrolled with default
+<Tabs defaultValue="tab1" className="w-full">
+  <TabsList className="grid w-full grid-cols-3">
+    <TabsTrigger value="tab1">Account</TabsTrigger>
+    <TabsTrigger value="tab2">Password</TabsTrigger>
+    <TabsTrigger value="tab3">Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">...</TabsContent>
+  <TabsContent value="tab2">...</TabsContent>
+  <TabsContent value="tab3">...</TabsContent>
+</Tabs>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/tabs.tsx\``,
+    Avatar: `# Avatar Component
+
+\`\`\`typescript
+import { Avatar, AvatarImage, AvatarFallback, AvatarImageBordered } from '@iblai/web-containers';
+
+// Basic usage
+<Avatar>
+  <AvatarImage src={user.avatar} alt={user.name} />
+  <AvatarFallback>{user.initials}</AvatarFallback>
+</Avatar>
+
+// With custom size
+<Avatar className="h-12 w-12">
+  <AvatarImage src={user.avatar} />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+
+// Bordered variant
+<Avatar>
+  <AvatarImageBordered src={user.avatar} alt={user.name} />
+  <AvatarFallback>AB</AvatarFallback>
+</Avatar>
+
+// Multiple avatars (avatar group)
+<div className="flex -space-x-4">
+  <Avatar className="border-2 border-background">
+    <AvatarImage src="/user1.jpg" />
+    <AvatarFallback>U1</AvatarFallback>
+  </Avatar>
+  <Avatar className="border-2 border-background">
+    <AvatarImage src="/user2.jpg" />
+    <AvatarFallback>U2</AvatarFallback>
+  </Avatar>
+</div>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/avatar.tsx\``,
+    Badge: `# Badge Component
+
+\`\`\`typescript
+import { Badge, badgeVariants } from '@iblai/web-containers';
+
+// Variants
+<Badge>Default</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Destructive</Badge>
+<Badge variant="outline">Outline</Badge>
+
+// As link
+<Badge className={badgeVariants({ variant: "outline" })} asChild>
+  <a href="/link">Link Badge</a>
+</Badge>
+
+// Custom colors
+<Badge className="bg-green-500">Success</Badge>
+<Badge className="bg-yellow-500">Warning</Badge>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/badge.tsx\``,
+    Tooltip: `# Tooltip Component
+
+\`\`\`typescript
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@iblai/web-containers';
+
+// Wrap your app or component tree with TooltipProvider
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover me</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Tooltip content here</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+
+// With delay
+<TooltipProvider delayDuration={300}>
+  <Tooltip>
+    <TooltipTrigger>Delayed</TooltipTrigger>
+    <TooltipContent>Shows after 300ms</TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+
+// Positioning
+<Tooltip>
+  <TooltipTrigger>Trigger</TooltipTrigger>
+  <TooltipContent side="right" align="start">
+    Right aligned tooltip
+  </TooltipContent>
+</Tooltip>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/tooltip.tsx\``,
+    Popover: `# Popover Component
+
+\`\`\`typescript
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@iblai/web-containers';
+
+<Popover>
+  <PopoverTrigger asChild>
+    <Button variant="outline">Open Popover</Button>
+  </PopoverTrigger>
+  <PopoverContent className="w-80">
+    <div className="grid gap-4">
+      <div className="space-y-2">
+        <h4 className="font-medium">Dimensions</h4>
+        <p className="text-sm text-muted-foreground">
+          Set the dimensions for the layer.
+        </p>
+      </div>
+      <div className="grid gap-2">
+        <Input placeholder="Width" />
+        <Input placeholder="Height" />
+      </div>
+    </div>
+  </PopoverContent>
+</Popover>
+
+// With positioning
+<Popover>
+  <PopoverTrigger>Click</PopoverTrigger>
+  <PopoverContent side="right" align="start">
+    Content
+  </PopoverContent>
+</Popover>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/popover.tsx\``,
+    DropdownMenu: `# DropdownMenu Component
+
+\`\`\`typescript
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from '@iblai/web-containers';
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open Menu</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56">
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuGroup>
+      <DropdownMenuItem>
+        Profile
+        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuItem>Settings</DropdownMenuItem>
+    </DropdownMenuGroup>
+    <DropdownMenuSeparator />
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>
+        <DropdownMenuItem>Email</DropdownMenuItem>
+        <DropdownMenuItem>Message</DropdownMenuItem>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem className="text-red-600">
+      Log out
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/dropdown-menu.tsx\``,
+    Table: `# Table Component
+
+\`\`\`typescript
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from '@iblai/web-containers';
+
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    {invoices.map((invoice) => (
+      <TableRow key={invoice.id}>
+        <TableCell className="font-medium">{invoice.id}</TableCell>
+        <TableCell>{invoice.status}</TableCell>
+        <TableCell>{invoice.method}</TableCell>
+        <TableCell className="text-right">{invoice.amount}</TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={3}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/table.tsx\``,
+    Skeleton: `# Skeleton Component
+
+\`\`\`typescript
+import { Skeleton } from '@iblai/web-containers';
+
+// Loading card
+<div className="space-y-3">
+  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-[250px]" />
+    <Skeleton className="h-4 w-[200px]" />
+  </div>
+</div>
+
+// Loading text
+<div className="space-y-2">
+  <Skeleton className="h-4 w-full" />
+  <Skeleton className="h-4 w-3/4" />
+</div>
+
+// Loading avatar
+<div className="flex items-center space-x-4">
+  <Skeleton className="h-12 w-12 rounded-full" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-[200px]" />
+    <Skeleton className="h-4 w-[150px]" />
+  </div>
+</div>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/skeleton.tsx\``,
+    Separator: `# Separator Component
+
+\`\`\`typescript
+import { Separator } from '@iblai/web-containers';
+
+// Horizontal (default)
+<div>
+  <p>Above</p>
+  <Separator className="my-4" />
+  <p>Below</p>
+</div>
+
+// Vertical
+<div className="flex h-5 items-center space-x-4">
+  <span>Item 1</span>
+  <Separator orientation="vertical" />
+  <span>Item 2</span>
+  <Separator orientation="vertical" />
+  <span>Item 3</span>
+</div>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/separator.tsx\``,
+    Calendar: `# Calendar Component
+
+\`\`\`typescript
+import { Calendar, CalendarDayButton } from '@iblai/web-containers';
+
+// Single date selection
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  className="rounded-md border"
+/>
+
+// Date range
+<Calendar
+  mode="range"
+  selected={dateRange}
+  onSelect={setDateRange}
+/>
+
+// Multiple dates
+<Calendar
+  mode="multiple"
+  selected={dates}
+  onSelect={setDates}
+/>
+
+// With disabled dates
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  disabled={(date) => date < new Date()}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/calendar.tsx\``,
+    Pagination: `# Pagination Component
+
+\`\`\`typescript
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationEllipsis,
+} from '@iblai/web-containers';
+
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href="#" />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#" isActive>2</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">3</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href="#" />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/pagination.tsx\``,
+    Toggle: `# Toggle Component
+
+\`\`\`typescript
+import { Toggle, toggleVariants } from '@iblai/web-containers';
+import { Bold, Italic, Underline } from 'lucide-react';
+
+// Basic toggle
+<Toggle aria-label="Toggle bold">
+  <Bold className="h-4 w-4" />
+</Toggle>
+
+// With variants
+<Toggle variant="outline" aria-label="Toggle">
+  Toggle
+</Toggle>
+
+// Controlled
+<Toggle pressed={bold} onPressedChange={setBold}>
+  <Bold className="h-4 w-4" />
+</Toggle>
+
+// Toggle group (using multiple toggles)
+<div className="flex gap-1">
+  <Toggle><Bold className="h-4 w-4" /></Toggle>
+  <Toggle><Italic className="h-4 w-4" /></Toggle>
+  <Toggle><Underline className="h-4 w-4" /></Toggle>
+</div>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/toggle.tsx\``,
+    Toast: `# Toast / Toaster Component
+
+\`\`\`typescript
+import { Toaster, toast } from '@iblai/web-containers';
+// OR using sonner directly
+import { Toaster } from '@iblai/web-containers';
+import { toast } from 'sonner';
+
+// Add Toaster to your layout
+<Toaster />
+
+// Usage
+toast('Event has been created');
+toast.success('Successfully saved!');
+toast.error('Something went wrong');
+toast.warning('Warning message');
+toast.info('Information');
+
+// With description
+toast('Event created', {
+  description: 'Your event has been scheduled.',
+});
+
+// With action
+toast('Event created', {
+  action: {
+    label: 'Undo',
+    onClick: () => console.log('Undo'),
+  },
+});
+
+// Promise toast
+toast.promise(saveData(), {
+  loading: 'Saving...',
+  success: 'Data saved!',
+  error: 'Could not save.',
+});
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/sonner.tsx\``,
+    Chart: `# Chart Components (Recharts wrapper)
+
+\`\`\`typescript
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+} from '@iblai/web-containers';
+import { Bar, BarChart, XAxis, YAxis } from 'recharts';
+
+const chartConfig: ChartConfig = {
+  desktop: { label: 'Desktop', color: '#2563eb' },
+  mobile: { label: 'Mobile', color: '#60a5fa' },
+};
+
+<ChartContainer config={chartConfig} className="h-[300px]">
+  <BarChart data={data}>
+    <XAxis dataKey="month" />
+    <YAxis />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" />
+  </BarChart>
+</ChartContainer>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/ui/chart.tsx\``,
+    // ============================================================================
+    // FEATURE COMPONENTS
+    // ============================================================================
+    Profile: `# Profile Component
+
+Complete user profile management with multiple tabs.
+
+\`\`\`typescript
+import { Profile } from '@iblai/web-containers';
+
+<Profile
+  username={username}
+  tenantKey={tenantKey}
+  tabs={['basic', 'social', 'education', 'experience', 'resume', 'security', 'advanced']}
+  onSave={handleSave}
+/>
+\`\`\`
+
+**Available Tabs**:
+- \`basic\`: Name, title, about, profile image
+- \`social\`: Social media links (LinkedIn, Twitter, etc.)
+- \`education\`: Education history with institutions
+- \`experience\`: Work experience with companies
+- \`resume\`: Resume/CV upload
+- \`security\`: Password change
+- \`advanced\`: Custom domain, SMTP, API settings
+
+**Related Components**:
+- \`InviteUserDialog\` - Dialog to invite users
+- \`InvitedUsersDialog\` - View invited users
+- \`LocalLLMTab\` - Local LLM settings (Tauri desktop only)
+- \`IntegrationsTab\` - API integrations
+- \`UsersTab\`, \`CoursesTab\`, \`ProgramsTab\` - Invite management
+
+**File Location**: \`packages/web-containers/src/components/profile/index.tsx\``,
+    InviteUserDialog: `# InviteUserDialog Component
+
+Dialog for inviting new users to the platform.
+
+\`\`\`typescript
+import { InviteUserDialog } from '@iblai/web-containers';
+
+<InviteUserDialog
+  open={open}
+  onOpenChange={setOpen}
+  tenantKey={tenantKey}
+  onSuccess={() => {
+    toast.success('User invited successfully');
+    refetch();
+  }}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/profile/invite-user.tsx\``,
+    LocalLLMTab: `# LocalLLMTab Component
+
+Settings for local LLM (Ollama) in Tauri desktop app.
+
+\`\`\`typescript
+import { LocalLLMTab, isLocalLLMEnabled, setLocalLLMEnabled } from '@iblai/web-containers';
+
+<LocalLLMTab
+  isAvailable={isTauriApp}
+  state={downloadState}
+  ollamaStatus={ollamaStatus}
+  onStartDownload={handleDownload}
+  onCancelDownload={handleCancel}
+  onInstallOllama={handleInstall}
+  onCheckStatus={checkStatus}
+  onResetState={resetState}
+/>
+
+// Check if local LLM is enabled
+const enabled = isLocalLLMEnabled();
+
+// Enable/disable
+setLocalLLMEnabled(true);
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/profile/local-llm/local-llm-tab.tsx\``,
+    NotificationDropdown: `# NotificationDropdown Component
+
+Notification bell dropdown with unread count.
+
+\`\`\`typescript
+import { NotificationDropdown } from '@iblai/web-containers';
+
+<NotificationDropdown
+  org={tenantKey}
+  userId={username}
+  isAdmin={isAdmin}
+  onViewNotifications={() => router.push('/notifications')}
+/>
+\`\`\`
+
+**Props**:
+- \`org\`: Tenant/organization key
+- \`userId\`: Current user's username
+- \`isAdmin\`: Whether user is admin (shows admin features)
+- \`onViewNotifications\`: Callback when "View All" is clicked
+
+**Related Components**:
+- \`NotificationDisplay\` - Individual notification item
+- \`SendNotificationDialog\` - Send notifications (admin)
+- \`AlertsTab\` - Manage notification alerts
+- \`EditAlertDialog\` - Edit alert settings
+
+**File Location**: \`packages/web-containers/src/components/notifications/index.ts\``,
+    SendNotificationDialog: `# SendNotificationDialog Component
+
+Dialog for admins to send notifications to users.
+
+\`\`\`typescript
+import { SendNotificationDialog } from '@iblai/web-containers';
+
+<SendNotificationDialog
+  open={open}
+  onOpenChange={setOpen}
+  tenantKey={tenantKey}
+  onSuccess={() => toast.success('Notification sent')}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/notifications/send-notification-dialog.tsx\``,
+    AlertsTab: `# AlertsTab Component
+
+Manage notification alert configurations.
+
+\`\`\`typescript
+import { AlertsTab } from '@iblai/web-containers';
+
+<AlertsTab tenantKey={tenantKey} />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/notifications/alerts-tab.tsx\``,
+    AnalyticsLayout: `# Analytics Components
+
+Complete analytics dashboard with charts and filters.
+
+\`\`\`typescript
+import {
+  AnalyticsLayout,
+  AnalyticsOverview,
+  AnalyticsUsersStats,
+  AnalyticsTopicsStats,
+  AnalyticsFinancialStats,
+  AnalyticsTranscriptsStats,
+  AnalyticsReports,
+  ChartFiltersProvider,
+  useChartFilters,
+  AnalyticsSettingsProvider,
+  useAnalyticsSettings,
+  StatCard,
+  ChartCardWrapper,
+  EmptyStats,
+  TimeFilter,
+  CustomDateRangePicker,
+  AccessTimeHeatmap,
+  GroupsFilterDropdown,
+} from '@iblai/web-containers';
+
+// Usage
+<ChartFiltersProvider>
+  <AnalyticsSettingsProvider>
+    <AnalyticsLayout>
+      <AnalyticsOverview />
+    </AnalyticsLayout>
+  </AnalyticsSettingsProvider>
+</ChartFiltersProvider>
+
+// Using hooks for custom analytics
+const { filters, setFilters, dateRange, setDateRange } = useChartFilters();
+const { settings, updateSettings } = useAnalyticsSettings();
+\`\`\`
+
+**Analytics Hooks**:
+- \`useOverview()\` - Overview data
+- \`useUsers()\` - User statistics
+- \`useTopics()\` - Topic statistics
+- \`useFinancial()\` - Financial data
+- \`useTranscripts()\` - Transcript data
+- \`useReports()\` - Reports data
+
+**File Location**: \`packages/web-containers/src/components/analytics/index.ts\``,
+    LoginButton: `# LoginButton Component
+
+Button that redirects to Auth SPA for login.
+
+\`\`\`typescript
+import { LoginButton } from '@iblai/web-containers';
+
+<LoginButton
+  authUrl="https://auth.example.com"
+  appName="mentor"
+  platformKey={tenantKey}
+  label="Sign In"
+  variant="default"
+/>
+\`\`\`
+
+**Props**:
+- \`authUrl\`: Auth SPA base URL
+- \`appName\`: App identifier for redirect
+- \`platformKey\`: Tenant key
+- \`label\`: Button text (default: "Login")
+- \`variant\`: Button variant
+
+**File Location**: \`packages/web-containers/src/components/auth-buttons/login-button.tsx\``,
+    SignupButton: `# SignupButton Component
+
+Button that redirects to tenant join/signup flow.
+
+\`\`\`typescript
+import { SignupButton } from '@iblai/web-containers';
+
+<SignupButton
+  authUrl="https://auth.example.com"
+  tenantKey={tenantKey}
+  label="Create Account"
+  variant="outline"
+/>
+\`\`\`
+
+**Props**:
+- \`authUrl\`: Auth SPA base URL
+- \`tenantKey\`: Tenant to join
+- \`label\`: Button text (default: "Sign Up")
+- \`variant\`: Button variant
+
+**File Location**: \`packages/web-containers/src/components/auth-buttons/signup-button.tsx\``,
+    Markdown: `# Markdown Component
+
+Render markdown content with custom styling.
+
+\`\`\`typescript
+import { Markdown, markdownComponents, CopyButtonIcon } from '@iblai/web-containers';
+
+<Markdown content={markdownString} />
+
+// With custom components
+<Markdown
+  content={content}
+  components={{
+    ...markdownComponents,
+    // Override specific elements
+    h1: ({ children }) => <h1 className="custom-h1">{children}</h1>,
+  }}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/markdown/index.tsx\``,
+    RichTextEditor: `# RichTextEditor Component
+
+TipTap-based rich text editor.
+
+\`\`\`typescript
+import { RichTextEditor } from '@iblai/web-containers';
+
+<RichTextEditor
+  content={content}
+  onChange={setContent}
+  placeholder="Start typing..."
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/rich-text-editor.tsx\``,
+    SearchableMultiSelect: `# SearchableMultiSelect Component
+
+Searchable dropdown with multiple selection.
+
+\`\`\`typescript
+import { SearchableMultiSelect } from '@iblai/web-containers';
+
+<SearchableMultiSelect
+  options={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+  ]}
+  selected={selectedValues}
+  onChange={setSelectedValues}
+  placeholder="Select options..."
+  searchPlaceholder="Search..."
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/searchable-multiselect.tsx\``,
+    TenantSwitcher: `# TenantSwitcher Component
+
+Dropdown to switch between tenants/organizations.
+
+\`\`\`typescript
+import { TenantSwitcher } from '@iblai/web-containers';
+
+<TenantSwitcher
+  currentTenant={currentTenant}
+  tenants={userTenants}
+  onSwitch={handleTenantSwitch}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/tenant-switch/index.tsx\``,
+    TopBanner: `# TopBanner Component
+
+Sticky banner at the top of the page.
+
+\`\`\`typescript
+import { TopBanner, TopBannerProps } from '@iblai/web-containers';
+
+<TopBanner
+  message="Your trial expires in 7 days"
+  type="warning"
+  action={{
+    label: "Upgrade",
+    onClick: handleUpgrade,
+  }}
+  onDismiss={handleDismiss}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/top-banner/index.tsx\``,
+    Loader: `# Loader Component
+
+Spinning loader with gradient animation.
+
+\`\`\`typescript
+import { Loader } from '@iblai/web-containers';
+
+<Loader />
+
+// Custom size
+<Loader className="h-8 w-8" />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/loader.tsx\``,
+    Spinner: `# Spinner Component
+
+Alternative spinner component.
+
+\`\`\`typescript
+import { Spinner } from '@iblai/web-containers';
+
+<Spinner />
+<Spinner size="sm" />
+<Spinner size="lg" />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/spinner/index.tsx\``,
+    TimeTrackingProvider: `# TimeTrackingProvider Component
+
+Context provider for time tracking functionality.
+
+\`\`\`typescript
+import { TimeTrackingProvider } from '@iblai/web-containers';
+
+<TimeTrackingProvider
+  intervalSeconds={30}
+  enabled={true}
+  onTimeUpdate={(url, timeSpent) => {
+    // Send to analytics
+  }}
+>
+  {children}
+</TimeTrackingProvider>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/time-tracking-provider.tsx\``,
+    UserProfileDropdown: `# UserProfileDropdown Component
+
+User menu dropdown with profile and logout options.
+
+\`\`\`typescript
+import { UserProfileDropdown } from '@iblai/web-containers';
+
+<UserProfileDropdown
+  user={userData}
+  onProfileClick={() => router.push('/profile')}
+  onLogout={handleLogout}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/user-profile-dropdown/index.tsx\``,
+    AdvancedPagination: `# AdvancedPagination Component
+
+Enhanced pagination with page size selector.
+
+\`\`\`typescript
+import { AdvancedPagination } from '@iblai/web-containers';
+
+<AdvancedPagination
+  currentPage={page}
+  totalPages={totalPages}
+  pageSize={pageSize}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/advance-pagination.tsx\``,
+    ContentViewWrapper: `# ContentViewWrapper Component
+
+Container wrapper for page content.
+
+\`\`\`typescript
+import { ContentViewWrapper } from '@iblai/web-containers';
+
+<ContentViewWrapper>
+  {children}
+</ContentViewWrapper>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/content-view-wrapper.tsx\``,
+    Version: `# Version Component
+
+Display app version information.
+
+\`\`\`typescript
+import { Version } from '@iblai/web-containers';
+
+<Version />
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/version.tsx\``,
+    SsoLogin: `# SsoLogin Component
+
+SSO callback handler for authentication.
+
+\`\`\`typescript
+import { SsoLogin } from '@iblai/web-containers';
+
+// In your sso-login page
+export default function SsoLoginPage() {
+  return <SsoLogin onSuccess={handleSuccess} onError={handleError} />;
+}
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/sso-login.tsx\``,
+    ErrorPage: `# ErrorPage Component
+
+Full-page error display.
+
+\`\`\`typescript
+import { ErrorPage } from '@iblai/web-containers/next';
+
+<ErrorPage
+  statusCode={404}
+  title="Page Not Found"
+  description="The page you're looking for doesn't exist."
+/>
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/error/error-page.tsx\``,
+    ClientErrorPage: `# ClientErrorPage Component
+
+Client-side error boundary page.
+
+\`\`\`typescript
+// app/error.tsx
+'use client';
+
+import { ClientErrorPage } from '@iblai/web-containers/next';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return <ClientErrorPage error={error} reset={reset} />;
+}
+\`\`\`
+
+**File Location**: \`packages/web-containers/src/components/error/client-error-page.tsx\``,
+};
+export function getComponentInfo(componentName) {
+    const info = components[componentName];
+    if (!info) {
+        const allComponents = Object.keys(components).sort();
+        return `Component "${componentName}" not found.
+
+**Available UI Primitives (${allComponents.filter((c) => ['Button', 'Card', 'Dialog', 'Input', 'Label', 'Textarea', 'Select', 'Checkbox', 'RadioGroup', 'Switch', 'Tabs', 'Avatar', 'Badge', 'Tooltip', 'Popover', 'DropdownMenu', 'Table', 'Skeleton', 'Separator', 'Calendar', 'Pagination', 'Toggle', 'Toast', 'Chart'].includes(c)).length}):**
+Button, Card, Dialog, Input, Label, Textarea, Select, Checkbox, RadioGroup, Switch, Tabs, Avatar, Badge, Tooltip, Popover, DropdownMenu, Table, Skeleton, Separator, Calendar, Pagination, Toggle, Toast, Chart
+
+**Available Feature Components (${allComponents.filter((c) => !['Button', 'Card', 'Dialog', 'Input', 'Label', 'Textarea', 'Select', 'Checkbox', 'RadioGroup', 'Switch', 'Tabs', 'Avatar', 'Badge', 'Tooltip', 'Popover', 'DropdownMenu', 'Table', 'Skeleton', 'Separator', 'Calendar', 'Pagination', 'Toggle', 'Toast', 'Chart'].includes(c)).length}):**
+Profile, InviteUserDialog, LocalLLMTab, NotificationDropdown, SendNotificationDialog, AlertsTab, AnalyticsLayout, LoginButton, SignupButton, Markdown, RichTextEditor, SearchableMultiSelect, TenantSwitcher, TopBanner, Loader, Spinner, TimeTrackingProvider, UserProfileDropdown, AdvancedPagination, ContentViewWrapper, Version, SsoLogin, ErrorPage, ClientErrorPage`;
+    }
+    return info;
+}
+//# sourceMappingURL=component-info.js.map