@tolle_/tolle-ui 18.2.24 → 18.2.26

package/registry/docs-content.json

@@ -0,0 +1,4214 @@
+{
+  "accordion": {
+    "category": "layout",
+    "title": "Accordion",
+    "selector": "tolle-accordion",
+    "import": "import { AccordionComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add accordion",
+    "components": [
+      {
+        "name": "AccordionComponent",
+        "selector": "tolle-accordion",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "type",
+            "type": "'single' | 'multiple'",
+            "default": "'single'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "accordion-item": {
+    "category": "layout",
+    "title": "Accordion Item",
+    "selector": "tolle-accordion-item",
+    "import": "import { AccordionItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add accordion-item",
+    "components": [
+      {
+        "name": "AccordionItemComponent",
+        "selector": "tolle-accordion-item",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "title",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string | number",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "alert": {
+    "category": "feedback",
+    "title": "Alert",
+    "selector": "tolle-alert",
+    "import": "import { AlertComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add alert",
+    "components": [
+      {
+        "name": "AlertComponent",
+        "selector": "tolle-alert",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "variant",
+            "type": "'default' | 'destructive' | 'success' | 'warning' | 'info'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "dismissible",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "onClose",
+            "type": "void"
+          }
+        ],
+        "slots": [
+          {
+            "name": "[icon]"
+          },
+          {
+            "name": ""
+          }
+        ],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "default",
+              "destructive",
+              "success",
+              "warning",
+              "info"
+            ],
+            "default": "default"
+          }
+        ]
+      }
+    ]
+  },
+  "alert-dialog": {
+    "category": "overlays",
+    "title": "Alert Dialog",
+    "selector": "tolle-alert-dialog",
+    "import": "import { AlertDialogComponent, AlertDialogTriggerComponent, AlertDialogPortalComponent, AlertDialogContentComponent, AlertDialogHeaderComponent, AlertDialogFooterComponent, AlertDialogTitleComponent, AlertDialogDescriptionComponent, AlertDialogActionComponent, AlertDialogCancelComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add alert-dialog",
+    "components": [
+      {
+        "name": "AlertDialogComponent",
+        "selector": "tolle-alert-dialog",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "open",
+            "type": "boolean",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "openChange",
+            "type": "boolean"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogTriggerComponent",
+        "selector": "tolle-alert-dialog-trigger",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogPortalComponent",
+        "selector": "tolle-alert-dialog-portal",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogContentComponent",
+        "selector": "tolle-alert-dialog-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "AlertDialogSize",
+            "default": "'lg'",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogHeaderComponent",
+        "selector": "tolle-alert-dialog-header",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogFooterComponent",
+        "selector": "tolle-alert-dialog-footer",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogTitleComponent",
+        "selector": "tolle-alert-dialog-title",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogDescriptionComponent",
+        "selector": "tolle-alert-dialog-description",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogActionComponent",
+        "selector": "tolle-alert-dialog-action",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "AlertDialogCancelComponent",
+        "selector": "tolle-alert-dialog-cancel",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "alert-dialog-dynamic": {
+    "category": "overlays",
+    "title": "Alert Dialog Dynamic",
+    "selector": "tolle-alert-dialog-dynamic",
+    "import": "import { AlertDialogDynamicComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add alert-dialog-dynamic",
+    "components": [
+      {
+        "name": "AlertDialogDynamicComponent",
+        "selector": "tolle-alert-dialog-dynamic",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "aspect-ratio": {
+    "category": "layout",
+    "title": "Aspect Ratio",
+    "selector": "tolle-aspect-ratio",
+    "import": "import { AspectRatioComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add aspect-ratio",
+    "components": [
+      {
+        "name": "AspectRatioComponent",
+        "selector": "tolle-aspect-ratio",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "ratio",
+            "type": "string | number",
+            "default": "'16 / 9'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "avatar": {
+    "category": "media",
+    "title": "Avatar",
+    "selector": "tolle-avatar",
+    "import": "import { AvatarComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add avatar",
+    "components": [
+      {
+        "name": "AvatarComponent",
+        "selector": "tolle-avatar",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "src",
+            "type": "string",
+            "description": "Image URL. When absent or failed to load, projected fallback content is shown.",
+            "required": false
+          },
+          {
+            "name": "alt",
+            "type": "string",
+            "default": "''",
+            "description": "Alternative text for the avatar image.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'sm' | 'default' | 'lg' | 'xl'",
+            "default": "'default'",
+            "description": "Size of the avatar.",
+            "required": false
+          },
+          {
+            "name": "shape",
+            "type": "'circle' | 'square'",
+            "default": "'circle'",
+            "description": "Shape of the avatar.",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the avatar via `cn()` (last-wins).",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": [
+          {
+            "name": "shape",
+            "options": [
+              "circle",
+              "square"
+            ],
+            "default": "circle"
+          },
+          {
+            "name": "size",
+            "options": [
+              "sm",
+              "default",
+              "lg",
+              "xl"
+            ],
+            "default": "default"
+          }
+        ]
+      }
+    ]
+  },
+  "avatar-fallback": {
+    "category": "media",
+    "title": "Avatar Fallback",
+    "selector": "tolle-avatar-fallback",
+    "import": "import { AvatarFallbackComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add avatar-fallback",
+    "components": [
+      {
+        "name": "AvatarFallbackComponent",
+        "selector": "tolle-avatar-fallback",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "badge": {
+    "category": "feedback",
+    "title": "Badge",
+    "selector": "tolle-badge",
+    "import": "import { BadgeComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add badge",
+    "components": [
+      {
+        "name": "BadgeComponent",
+        "selector": "tolle-badge",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "variant",
+            "type": "'default' | 'secondary' | 'outline' | 'destructive'",
+            "default": "'default'",
+            "description": "Visual style of the badge.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default'",
+            "default": "'default'",
+            "description": "Size of the badge.",
+            "required": false
+          },
+          {
+            "name": "removable",
+            "type": "boolean",
+            "default": "false",
+            "description": "Shows a trailing dismiss (×) button that emits `onRemove`.",
+            "required": false
+          },
+          {
+            "name": "removeLabel",
+            "type": "string",
+            "default": "'Remove'",
+            "description": "Accessible label for the dismiss button.",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the badge via `cn()` (last-wins).",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "onRemove",
+            "type": "MouseEvent",
+            "description": "Emitted with the click event when the dismiss button is pressed."
+          }
+        ],
+        "slots": [
+          {
+            "name": "[prefix]"
+          },
+          {
+            "name": ""
+          }
+        ],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "default",
+              "secondary",
+              "outline",
+              "destructive"
+            ],
+            "default": "default"
+          },
+          {
+            "name": "size",
+            "options": [
+              "xs",
+              "sm",
+              "default"
+            ],
+            "default": "default"
+          }
+        ]
+      }
+    ]
+  },
+  "breadcrumb": {
+    "category": "navigation",
+    "title": "Breadcrumb",
+    "selector": "tolle-breadcrumb",
+    "import": "import { BreadcrumbComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add breadcrumb",
+    "components": [
+      {
+        "name": "BreadcrumbComponent",
+        "selector": "tolle-breadcrumb",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "breadcrumb-item": {
+    "category": "navigation",
+    "title": "Breadcrumb Item",
+    "selector": "tolle-breadcrumb-item",
+    "import": "import { BreadcrumbItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add breadcrumb-item",
+    "components": [
+      {
+        "name": "BreadcrumbItemComponent",
+        "selector": "tolle-breadcrumb-item",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "breadcrumb-link": {
+    "category": "navigation",
+    "title": "Breadcrumb Link",
+    "selector": "tolle-breadcrumb-link",
+    "import": "import { BreadcrumbLinkComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add breadcrumb-link",
+    "components": [
+      {
+        "name": "BreadcrumbLinkComponent",
+        "selector": "tolle-breadcrumb-link",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "active",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "breadcrumb-separator": {
+    "category": "layout",
+    "title": "Breadcrumb Separator",
+    "selector": "tolle-breadcrumb-separator",
+    "import": "import { BreadcrumbSeparatorComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add breadcrumb-separator",
+    "components": [
+      {
+        "name": "BreadcrumbSeparatorComponent",
+        "selector": "tolle-breadcrumb-separator",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "button": {
+    "category": "actions",
+    "title": "Button",
+    "selector": "tolle-button",
+    "import": "import { ButtonComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add button",
+    "components": [
+      {
+        "name": "ButtonComponent",
+        "selector": "tolle-button",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the button via `cn()` (last-wins).",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
+            "default": "'default'",
+            "description": "Visual style of the button.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'default' | 'xs' | 'sm' | 'lg' | 'icon-xs' | 'icon-sm' | 'icon' | 'icon-lg'",
+            "default": "'default'",
+            "description": "Size of the button, including icon-only sizes.",
+            "required": false
+          },
+          {
+            "name": "type",
+            "type": "'button' | 'submit' | 'reset'",
+            "default": "'button'",
+            "description": "Native button type. Defaults to 'button' so it never submits a form unexpectedly.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "description": "Disables the button and blocks pointer events.",
+            "required": false
+          },
+          {
+            "name": "busy",
+            "type": "boolean",
+            "default": "false",
+            "description": "Shows a spinner, sets `aria-busy`, and prevents interaction while a task runs.",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "default",
+              "destructive",
+              "outline",
+              "secondary",
+              "ghost",
+              "link"
+            ],
+            "default": "default"
+          },
+          {
+            "name": "size",
+            "options": [
+              "default",
+              "xs",
+              "sm",
+              "lg",
+              "icon-xs",
+              "icon-sm",
+              "icon",
+              "icon-lg"
+            ],
+            "default": "default"
+          },
+          {
+            "name": "busy",
+            "options": [
+              "true"
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "button-group": {
+    "category": "actions",
+    "title": "Button Group",
+    "selector": "tolle-button-group",
+    "import": "import { ButtonGroupComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add button-group",
+    "components": [
+      {
+        "name": "ButtonGroupComponent",
+        "selector": "tolle-button-group",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "calendar": {
+    "category": "date-time",
+    "title": "Calendar",
+    "selector": "tolle-calendar",
+    "import": "import { CalendarComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add calendar",
+    "components": [
+      {
+        "name": "CalendarComponent",
+        "selector": "tolle-calendar",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "bordered",
+            "type": "boolean",
+            "default": "true",
+            "description": "Renders the calendar's own border, background and shadow. Set `false` when\nnesting inside a card/popover that already provides the chrome.",
+            "required": false
+          },
+          {
+            "name": "mode",
+            "type": "CalendarMode",
+            "default": "'date'",
+            "required": false
+          },
+          {
+            "name": "disablePastDates",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "showQuickActions",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "minDate",
+            "type": "Date",
+            "required": false
+          },
+          {
+            "name": "maxDate",
+            "type": "Date",
+            "required": false
+          },
+          {
+            "name": "formatMonthFn",
+            "type": "(date: Date) => string",
+            "required": false
+          },
+          {
+            "name": "formatYearFn",
+            "type": "(date: Date) => string",
+            "required": false
+          },
+          {
+            "name": "formatDateFn",
+            "type": "(date: Date) => string",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "dateSelect",
+            "type": "Date | null"
+          }
+        ],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "card": {
+    "category": "layout",
+    "title": "Card",
+    "selector": "tolle-card",
+    "import": "import { CardComponent, CardHeaderComponent, CardTitleComponent, CardDescriptionComponent, CardContentComponent, CardFooterComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add card",
+    "components": [
+      {
+        "name": "CardComponent",
+        "selector": "tolle-card",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CardHeaderComponent",
+        "selector": "tolle-card-header",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CardTitleComponent",
+        "selector": "tolle-card-title",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CardDescriptionComponent",
+        "selector": "tolle-card-description",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CardContentComponent",
+        "selector": "tolle-card-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CardFooterComponent",
+        "selector": "tolle-card-footer",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "carousel": {
+    "category": "media",
+    "title": "Carousel",
+    "selector": "tolle-carousel",
+    "import": "import { CarouselComponent, CarouselContentDirective, CarouselContainerDirective, CarouselItemDirective, CarouselPreviousDirective, CarouselNextDirective } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add carousel",
+    "components": [
+      {
+        "name": "CarouselComponent",
+        "selector": "tolle-carousel",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "opts",
+            "type": "EmblaOptionsType",
+            "default": "{}",
+            "required": false
+          },
+          {
+            "name": "plugins",
+            "type": "EmblaPluginType[]",
+            "default": "[]",
+            "required": false
+          },
+          {
+            "name": "orientation",
+            "type": "'horizontal' | 'vertical'",
+            "default": "'horizontal'",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "api",
+            "type": "EmblaCarouselType"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CarouselContentDirective",
+        "selector": "[tolleCarouselContent]",
+        "kind": "directive",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      },
+      {
+        "name": "CarouselContainerDirective",
+        "selector": "[tolleCarouselContainer]",
+        "kind": "directive",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      },
+      {
+        "name": "CarouselItemDirective",
+        "selector": "[tolleCarouselItem]",
+        "kind": "directive",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      },
+      {
+        "name": "CarouselPreviousDirective",
+        "selector": "[tolleCarouselPrevious]",
+        "kind": "directive",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      },
+      {
+        "name": "CarouselNextDirective",
+        "selector": "[tolleCarouselNext]",
+        "kind": "directive",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "checkbox": {
+    "category": "forms",
+    "title": "Checkbox",
+    "selector": "tolle-checkbox",
+    "import": "import { CheckboxComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add checkbox",
+    "components": [
+      {
+        "name": "CheckboxComponent",
+        "selector": "tolle-checkbox",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the checkbox via `cn()` (last-wins).",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "description": "Disables the checkbox and blocks toggling.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "description": "Size of the checkbox.",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": [
+          {
+            "name": "size",
+            "options": [
+              "xs",
+              "sm",
+              "default",
+              "lg"
+            ],
+            "default": "default"
+          },
+          {
+            "name": "checked",
+            "options": [
+              "true",
+              "false"
+            ],
+            "default": "false"
+          }
+        ]
+      }
+    ]
+  },
+  "collapsible": {
+    "category": "layout",
+    "title": "Collapsible",
+    "selector": "tolle-collapsible",
+    "import": "import { CollapsibleComponent, CollapsibleTriggerComponent, CollapsibleContentComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add collapsible",
+    "components": [
+      {
+        "name": "CollapsibleComponent",
+        "selector": "tolle-collapsible",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "open",
+            "type": "boolean",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "openChange",
+            "type": "boolean"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CollapsibleTriggerComponent",
+        "selector": "tolle-collapsible-trigger",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "CollapsibleContentComponent",
+        "selector": "tolle-collapsible-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "context-menu": {
+    "category": "overlays",
+    "title": "Context Menu",
+    "selector": "tolle-context-menu",
+    "import": "import { ContextMenuComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add context-menu",
+    "components": [
+      {
+        "name": "ContextMenuComponent",
+        "selector": "tolle-context-menu",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "context-menu-trigger": {
+    "category": "overlays",
+    "title": "Context Menu Trigger",
+    "selector": "[tolleContextMenuTrigger]",
+    "import": "import { ContextMenuTriggerDirective } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add context-menu-trigger",
+    "components": [
+      {
+        "name": "ContextMenuTriggerDirective",
+        "selector": "[tolleContextMenuTrigger]",
+        "kind": "directive",
+        "inputs": [
+          {
+            "name": "items",
+            "type": "ContextMenuItem[]",
+            "default": "[]",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "action",
+            "type": "string"
+          }
+        ],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "country-selector": {
+    "category": "forms",
+    "title": "Country Selector",
+    "selector": "tolle-country-selector",
+    "import": "import { CountrySelectorComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add country-selector",
+    "components": [
+      {
+        "name": "CountrySelectorComponent",
+        "selector": "tolle-country-selector",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "any",
+            "default": "`country-selector-${Math.random().toString(36).substr(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "errorMessage",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "hideHintOnFocus",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'Select country'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "defaultCountryCode",
+            "type": "string",
+            "default": "'GH'",
+            "required": false
+          },
+          {
+            "name": "returnValue",
+            "type": "'object' | 'isoAlpha2' | 'dialCode' | 'name'",
+            "default": "'isoAlpha2'",
+            "required": false
+          },
+          {
+            "name": "showName",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "externalFocused",
+            "type": "boolean | undefined",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "onSelect",
+            "type": "any"
+          },
+          {
+            "name": "onFocusChange",
+            "type": "void"
+          },
+          {
+            "name": "onBlurChange",
+            "type": "void"
+          }
+        ],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "data-table": {
+    "category": "data",
+    "title": "Data Table",
+    "selector": "tolle-data-table",
+    "import": "import { DataTableComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add data-table",
+    "components": [
+      {
+        "name": "DataTableComponent",
+        "selector": "tolle-data-table",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "data",
+            "type": "any[]",
+            "default": "[]",
+            "required": false
+          },
+          {
+            "name": "columns",
+            "type": "TableColumn[]",
+            "default": "[]",
+            "required": false
+          },
+          {
+            "name": "searchable",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "paginate",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "pageSizeOptions",
+            "type": "number[]",
+            "default": "[]",
+            "required": false
+          },
+          {
+            "name": "pageSize",
+            "type": "number",
+            "default": "10",
+            "required": false
+          },
+          {
+            "name": "expandable",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "stickyHeader",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "maxHeight",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "allowColumnHiding",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "showSettings",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "expandedTemplate",
+            "type": "TemplateRef<any>",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "date-picker": {
+    "category": "date-time",
+    "title": "Date Picker",
+    "selector": "tolle-date-picker",
+    "import": "import { DatePickerComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add date-picker",
+    "components": [
+      {
+        "name": "DatePickerComponent",
+        "selector": "tolle-date-picker",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'MM/DD/YYYY'",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disablePastDates",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "showClear",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "showQuickActions",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "minDate",
+            "type": "Date",
+            "required": false
+          },
+          {
+            "name": "maxDate",
+            "type": "Date",
+            "required": false
+          },
+          {
+            "name": "mode",
+            "type": "CalendarMode",
+            "default": "'date'",
+            "required": false
+          },
+          {
+            "name": "formatMonthFn",
+            "type": "(date: Date) => string",
+            "required": false
+          },
+          {
+            "name": "formatYearFn",
+            "type": "(date: Date) => string",
+            "required": false
+          },
+          {
+            "name": "displayFormat",
+            "type": "(date: Date, mode: CalendarMode) => string",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "date-range-picker": {
+    "category": "date-time",
+    "title": "Date Range Picker",
+    "selector": "tolle-date-range-picker",
+    "import": "import { DateRangePickerComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add date-range-picker",
+    "components": [
+      {
+        "name": "DateRangePickerComponent",
+        "selector": "tolle-date-range-picker",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'Pick a date range'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disablePastDates",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "numberOfMonths",
+            "type": "number",
+            "default": "1",
+            "description": "Consecutive months shown in the popover (e.g. `2` for a two-month picker).",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "dropdown-item": {
+    "category": "overlays",
+    "title": "Dropdown Item",
+    "selector": "tolle-dropdown-item",
+    "import": "import { DropdownItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add dropdown-item",
+    "components": [
+      {
+        "name": "DropdownItemComponent",
+        "selector": "tolle-dropdown-item",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "dropdown-label": {
+    "category": "forms",
+    "title": "Dropdown Label",
+    "selector": "tolle-dropdown-label",
+    "import": "import { DropdownLabelComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add dropdown-label",
+    "components": [
+      {
+        "name": "DropdownLabelComponent",
+        "selector": "tolle-dropdown-label",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "dropdown-menu": {
+    "category": "overlays",
+    "title": "Dropdown Menu",
+    "selector": "tolle-dropdown-menu",
+    "import": "import { DropdownMenuComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add dropdown-menu",
+    "components": [
+      {
+        "name": "DropdownMenuComponent",
+        "selector": "tolle-dropdown-menu",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "dropdown-separator": {
+    "category": "overlays",
+    "title": "Dropdown Separator",
+    "selector": "tolle-dropdown-separator",
+    "import": "import { DropdownSeparatorComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add dropdown-separator",
+    "components": [
+      {
+        "name": "DropdownSeparatorComponent",
+        "selector": "tolle-dropdown-separator",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "dropdown-trigger": {
+    "category": "overlays",
+    "title": "Dropdown Trigger",
+    "selector": "[tolleDropdownTrigger]",
+    "import": "import { DropdownTriggerDirective } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add dropdown-trigger",
+    "components": [
+      {
+        "name": "DropdownTriggerDirective",
+        "selector": "[tolleDropdownTrigger]",
+        "kind": "directive",
+        "inputs": [
+          {
+            "name": "menu",
+            "type": "DropdownMenuComponent",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "empty-state": {
+    "category": "feedback",
+    "title": "Empty State",
+    "selector": "tolle-empty-state",
+    "import": "import { EmptyStateComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add empty-state",
+    "components": [
+      {
+        "name": "EmptyStateComponent",
+        "selector": "tolle-empty-state",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "variant",
+            "type": "'default' | 'minimal'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": "'No items found'",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": "[icon]"
+          },
+          {
+            "name": "[actions]"
+          }
+        ],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "default",
+              "minimal"
+            ],
+            "default": "default"
+          }
+        ]
+      }
+    ]
+  },
+  "hover-card": {
+    "category": "overlays",
+    "title": "Hover Card",
+    "selector": "tolle-hover-card",
+    "import": "import { HoverCardComponent, HoverCardTriggerComponent, HoverCardContentComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add hover-card",
+    "components": [
+      {
+        "name": "HoverCardComponent",
+        "selector": "tolle-hover-card",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "openDelay",
+            "type": "number",
+            "default": "700",
+            "required": false
+          },
+          {
+            "name": "closeDelay",
+            "type": "number",
+            "default": "300",
+            "required": false
+          },
+          {
+            "name": "placement",
+            "type": "'top' | 'bottom' | 'left' | 'right'",
+            "default": "'bottom'",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "HoverCardTriggerComponent",
+        "selector": "tolle-hover-card-trigger",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "HoverCardContentComponent",
+        "selector": "tolle-hover-card-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "input": {
+    "category": "forms",
+    "title": "Input",
+    "selector": "tolle-input",
+    "import": "import { InputComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add input",
+    "components": [
+      {
+        "name": "InputComponent",
+        "selector": "tolle-input",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "string",
+            "default": "`input-${Math.random().toString(36).substr(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "errorMessage",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "type",
+            "type": "string",
+            "default": "'text'",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "containerClass",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "hideHintOnFocus",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": "[prefix]"
+          },
+          {
+            "name": "[suffix]"
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "label": {
+    "category": "forms",
+    "title": "Label",
+    "selector": "tolle-label",
+    "import": "import { LabelComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add label",
+    "components": [
+      {
+        "name": "LabelComponent",
+        "selector": "tolle-label",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "for",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "masked-input": {
+    "category": "forms",
+    "title": "Masked Input",
+    "selector": "tolle-masked-input",
+    "import": "import { MaskedInputComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add masked-input",
+    "components": [
+      {
+        "name": "MaskedInputComponent",
+        "selector": "tolle-masked-input",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "string",
+            "default": "`masked-input-${Math.random().toString(36).substr(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "errorMessage",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "mask",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "type",
+            "type": "string",
+            "default": "'text'",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "containerClass",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "returnRaw",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "hideHintOnFocus",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "externalFocused",
+            "type": "boolean | undefined",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": "[prefix]"
+          },
+          {
+            "name": "[suffix]"
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "modal": {
+    "category": "overlays",
+    "title": "Modal",
+    "selector": "tolle-modal",
+    "import": "import { ModalComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add modal",
+    "components": [
+      {
+        "name": "ModalComponent",
+        "selector": "tolle-modal",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "multi-select": {
+    "category": "forms",
+    "title": "Multi Select",
+    "selector": "tolle-multi-select",
+    "import": "import { MultiSelectComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add multi-select",
+    "components": [
+      {
+        "name": "MultiSelectComponent",
+        "selector": "tolle-multi-select",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'Select options...'",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "searchable",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "maxSelections",
+            "type": "number",
+            "required": false
+          },
+          {
+            "name": "maxDisplayItems",
+            "type": "number",
+            "default": "3",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "otp": {
+    "category": "forms",
+    "title": "Otp",
+    "selector": "tolle-otp",
+    "import": "import { OtpComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add otp",
+    "components": [
+      {
+        "name": "OtpComponent",
+        "selector": "tolle-otp",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "auto",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "length",
+            "type": "number",
+            "default": "6",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "otp-group": {
+    "category": "forms",
+    "title": "Otp Group",
+    "selector": "tolle-otp-group",
+    "import": "import { OtpGroupComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add otp-group",
+    "components": [
+      {
+        "name": "OtpGroupComponent",
+        "selector": "tolle-otp-group",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "otp-slot": {
+    "category": "forms",
+    "title": "Otp Slot",
+    "selector": "tolle-otp-slot",
+    "import": "import { OtpSlotComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add otp-slot",
+    "components": [
+      {
+        "name": "OtpSlotComponent",
+        "selector": "tolle-otp-slot",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "char",
+            "type": "string | undefined",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "isActive",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "isFirst",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "isLast",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "pagination": {
+    "category": "navigation",
+    "title": "Pagination",
+    "selector": "tolle-pagination",
+    "import": "import { PaginationComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add pagination",
+    "components": [
+      {
+        "name": "PaginationComponent",
+        "selector": "tolle-pagination",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "showPageLinks",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "showPageOptions",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "showCurrentPageInfo",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "currentPageInfoTemplate",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "totalRecords",
+            "type": "number",
+            "default": "0",
+            "required": false
+          },
+          {
+            "name": "currentPageSize",
+            "type": "number",
+            "default": "10",
+            "required": false
+          },
+          {
+            "name": "currentPage",
+            "type": "number",
+            "default": "1",
+            "required": false
+          },
+          {
+            "name": "pageSizeOptions",
+            "type": "number[]",
+            "default": "[10, 20, 30, 50]",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "onPageNumberChange",
+            "type": "number"
+          },
+          {
+            "name": "onPageSizeChange",
+            "type": "number"
+          }
+        ],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "phone-number-input": {
+    "category": "forms",
+    "title": "Phone Number Input",
+    "selector": "tolle-phone-number-input",
+    "import": "import { PhoneNumberInputComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add phone-number-input",
+    "components": [
+      {
+        "name": "PhoneNumberInputComponent",
+        "selector": "tolle-phone-number-input",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "any",
+            "default": "`phone-input-${Math.random().toString(36).substr(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "errorMessage",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "hideHintOnFocus",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'Phone number'",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "defaultCountryCode",
+            "type": "string",
+            "default": "'GH'",
+            "required": false
+          },
+          {
+            "name": "dataType",
+            "type": "'NumberOnly' | 'FullObject'",
+            "default": "'FullObject'",
+            "required": false
+          },
+          {
+            "name": "mask",
+            "type": "string",
+            "default": "'(000) 000-0000'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "enableCountrySelector",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "onSelect",
+            "type": "any"
+          }
+        ],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "popover": {
+    "category": "overlays",
+    "title": "Popover",
+    "selector": "tolle-popover",
+    "import": "import { PopoverComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add popover",
+    "components": [
+      {
+        "name": "PopoverComponent",
+        "selector": "tolle-popover",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "placement",
+            "type": "'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'",
+            "default": "'bottom'",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "onOpen",
+            "type": "void"
+          },
+          {
+            "name": "onClose",
+            "type": "void"
+          }
+        ],
+        "slots": [
+          {
+            "name": "[trigger]"
+          },
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "popover-content": {
+    "category": "overlays",
+    "title": "Popover Content",
+    "selector": "tolle-popover-content",
+    "import": "import { PopoverContentComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add popover-content",
+    "components": [
+      {
+        "name": "PopoverContentComponent",
+        "selector": "tolle-popover-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "progress": {
+    "category": "feedback",
+    "title": "Progress",
+    "selector": "tolle-progress",
+    "import": "import { ProgressComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add progress",
+    "components": [
+      {
+        "name": "ProgressComponent",
+        "selector": "tolle-progress",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "value",
+            "type": "number | null",
+            "default": "0",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "radio-group": {
+    "category": "forms",
+    "title": "Radio Group",
+    "selector": "tolle-radio-group",
+    "import": "import { RadioGroupComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add radio-group",
+    "components": [
+      {
+        "name": "RadioGroupComponent",
+        "selector": "tolle-radio-group",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "name",
+            "type": "any",
+            "default": "`radio-group-${Math.random().toString(36).substring(2, 9)}`",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "radio-item": {
+    "category": "forms",
+    "title": "Radio Item",
+    "selector": "tolle-radio-item",
+    "import": "import { RadioItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add radio-item",
+    "components": [
+      {
+        "name": "RadioItemComponent",
+        "selector": "tolle-radio-item",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "value",
+            "type": "any",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "range-calendar": {
+    "category": "date-time",
+    "title": "Range Calendar",
+    "selector": "tolle-range-calendar",
+    "import": "import { RangeCalendarComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add range-calendar",
+    "components": [
+      {
+        "name": "RangeCalendarComponent",
+        "selector": "tolle-range-calendar",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disablePastDates",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "bordered",
+            "type": "boolean",
+            "default": "true",
+            "description": "Renders the calendar's own border/background/shadow. Set `false` inside a\ncard/popover that already provides chrome.",
+            "required": false
+          },
+          {
+            "name": "numberOfMonths",
+            "type": "number",
+            "default": "1",
+            "description": "Number of consecutive months rendered side by side.",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "rangeSelect",
+            "type": "DateRange"
+          }
+        ],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "resizable": {
+    "category": "layout",
+    "title": "Resizable",
+    "selector": "tolle-resizable",
+    "import": "import { ResizableComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add resizable",
+    "components": [
+      {
+        "name": "ResizableComponent",
+        "selector": "tolle-resizable",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "width",
+            "type": "number",
+            "default": "300",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": "200",
+            "required": false
+          },
+          {
+            "name": "minWidth",
+            "type": "number",
+            "default": "50",
+            "required": false
+          },
+          {
+            "name": "minHeight",
+            "type": "number",
+            "default": "50",
+            "required": false
+          },
+          {
+            "name": "maxWidth",
+            "type": "number",
+            "required": false
+          },
+          {
+            "name": "maxHeight",
+            "type": "number",
+            "required": false
+          },
+          {
+            "name": "resizable",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "directions",
+            "type": "('right' | 'bottom' | 'both')[]",
+            "default": "['right', 'bottom', 'both']",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "containerClass",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "resizeStart",
+            "type": "void"
+          },
+          {
+            "name": "resize",
+            "type": "{ width: number; height: number }"
+          },
+          {
+            "name": "resizeEnd",
+            "type": "{ width: number; height: number }"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "resizable-panel": {
+    "category": "layout",
+    "title": "Resizable Panel",
+    "selector": "tolle-resizable-panel",
+    "import": "import { ResizablePanelComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add resizable-panel",
+    "components": [
+      {
+        "name": "ResizablePanelComponent",
+        "selector": "tolle-resizable-panel",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "direction",
+            "type": "'horizontal' | 'vertical'",
+            "default": "'horizontal'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "resizable-panel-item": {
+    "category": "layout",
+    "title": "Resizable Panel Item",
+    "selector": "tolle-resizable-panel-item",
+    "import": "import { ResizablePanelItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add resizable-panel-item",
+    "components": [
+      {
+        "name": "ResizablePanelItemComponent",
+        "selector": "tolle-resizable-panel-item",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "size",
+            "type": "number",
+            "default": "1",
+            "required": false
+          },
+          {
+            "name": "minSize",
+            "type": "number",
+            "default": "10",
+            "required": false
+          },
+          {
+            "name": "maxSize",
+            "type": "number",
+            "required": false
+          },
+          {
+            "name": "resizable",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "scroll-area": {
+    "category": "layout",
+    "title": "Scroll Area",
+    "selector": "tolle-scroll-area",
+    "import": "import { ScrollAreaComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add scroll-area",
+    "components": [
+      {
+        "name": "ScrollAreaComponent",
+        "selector": "tolle-scroll-area",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "string",
+            "default": "'100%'",
+            "required": false
+          },
+          {
+            "name": "orientation",
+            "type": "'vertical' | 'horizontal' | 'both'",
+            "default": "'both'",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "segment": {
+    "category": "forms",
+    "title": "Segment",
+    "selector": "tolle-segment",
+    "import": "import { SegmentedComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add segment",
+    "components": [
+      {
+        "name": "SegmentedComponent",
+        "selector": "tolle-segment",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "items",
+            "type": "SegmentItem[]",
+            "default": "[]",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "itemTemplate",
+            "type": "TemplateRef<any>",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "select": {
+    "category": "forms",
+    "title": "Select",
+    "selector": "tolle-select",
+    "import": "import { SelectComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add select",
+    "components": [
+      {
+        "name": "SelectComponent",
+        "selector": "tolle-select",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'Select an option'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "searchable",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "select-group": {
+    "category": "forms",
+    "title": "Select Group",
+    "selector": "tolle-select-group",
+    "import": "import { SelectGroupComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add select-group",
+    "components": [
+      {
+        "name": "SelectGroupComponent",
+        "selector": "tolle-select-group",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "select-item": {
+    "category": "forms",
+    "title": "Select Item",
+    "selector": "tolle-select-item",
+    "import": "import { SelectItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add select-item",
+    "components": [
+      {
+        "name": "SelectItemComponent",
+        "selector": "tolle-select-item",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "value",
+            "type": "any",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "selected",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "multiSelect",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "any",
+            "default": "`select-item-${Math.random().toString(36).substr(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "active",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "select-separator": {
+    "category": "forms",
+    "title": "Select Separator",
+    "selector": "tolle-select-separator",
+    "import": "import { SelectSeparatorComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add select-separator",
+    "components": [
+      {
+        "name": "SelectSeparatorComponent",
+        "selector": "tolle-select-separator",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "separator": {
+    "category": "layout",
+    "title": "Separator",
+    "selector": "tolle-separator",
+    "import": "import { SeparatorComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add separator",
+    "components": [
+      {
+        "name": "SeparatorComponent",
+        "selector": "tolle-separator",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "orientation",
+            "type": "'horizontal' | 'vertical'",
+            "default": "'horizontal'",
+            "description": "Orientation of the rule.",
+            "required": false
+          },
+          {
+            "name": "decorative",
+            "type": "boolean",
+            "default": "true",
+            "description": "When true, the separator is purely visual (aria-hidden, role=\"none\").",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "sheet": {
+    "category": "overlays",
+    "title": "Sheet",
+    "selector": "tolle-sheet",
+    "import": "import { SheetComponent, SheetTriggerComponent, SheetContentComponent, SheetHeaderComponent, SheetFooterComponent, SheetTitleComponent, SheetDescriptionComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add sheet",
+    "components": [
+      {
+        "name": "SheetComponent",
+        "selector": "tolle-sheet",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "isOpen",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "hasBackdrop",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "isOpenChange",
+            "type": "boolean"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "SheetTriggerComponent",
+        "selector": "tolle-sheet-trigger",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "SheetContentComponent",
+        "selector": "tolle-sheet-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "side",
+            "type": "'top' | 'bottom' | 'left' | 'right'",
+            "default": "'right'",
+            "required": false
+          },
+          {
+            "name": "rounded",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "SheetHeaderComponent",
+        "selector": "tolle-sheet-header",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "SheetFooterComponent",
+        "selector": "tolle-sheet-footer",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "SheetTitleComponent",
+        "selector": "tolle-sheet-title",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "SheetDescriptionComponent",
+        "selector": "tolle-sheet-description",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "sheet-wrapper": {
+    "category": "overlays",
+    "title": "Sheet Wrapper",
+    "selector": "tolle-sheet-wrapper",
+    "import": "import { SheetWrapperComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add sheet-wrapper",
+    "components": [
+      {
+        "name": "SheetWrapperComponent",
+        "selector": "tolle-sheet-wrapper",
+        "kind": "component",
+        "inputs": [],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "sidebar": {
+    "category": "layout",
+    "title": "Sidebar",
+    "selector": "tolle-sidebar",
+    "import": "import { SidebarComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add sidebar",
+    "components": [
+      {
+        "name": "SidebarComponent",
+        "selector": "tolle-sidebar",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "items",
+            "type": "SidebarGroup[]",
+            "default": "[]",
+            "required": false
+          },
+          {
+            "name": "collapsed",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "'default' | 'secondary' | 'ghost' | 'outline'",
+            "default": "'default'",
+            "description": "Styling variant for active items.\n- default: Solid primary background, light text (Matches Badge Default)\n- secondary: Solid secondary background\n- ghost: Transparent background, accent text (Shadcn standard)\n- outline: Bordered",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": "[header]"
+          },
+          {
+            "name": "[footer]"
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "skeleton": {
+    "category": "feedback",
+    "title": "Skeleton",
+    "selector": "tolle-skeleton",
+    "import": "import { SkeletonComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add skeleton",
+    "components": [
+      {
+        "name": "SkeletonComponent",
+        "selector": "tolle-skeleton",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "variant",
+            "type": "'rect' | 'circle' | 'pill'",
+            "default": "'rect'",
+            "description": "Shape of the skeleton placeholder.",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the skeleton via `cn()` (last-wins).",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "rect",
+              "circle",
+              "pill"
+            ],
+            "default": "rect"
+          }
+        ]
+      }
+    ]
+  },
+  "slider": {
+    "category": "forms",
+    "title": "Slider",
+    "selector": "tolle-slider",
+    "import": "import { SliderComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add slider",
+    "components": [
+      {
+        "name": "SliderComponent",
+        "selector": "tolle-slider",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "min",
+            "type": "number",
+            "default": "0",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "default": "100",
+            "required": false
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "default": "1",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "switch": {
+    "category": "forms",
+    "title": "Switch",
+    "selector": "tolle-switch",
+    "import": "import { SwitchComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add switch",
+    "components": [
+      {
+        "name": "SwitchComponent",
+        "selector": "tolle-switch",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the switch track via `cn()` (last-wins).",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "description": "Disables the switch and blocks toggling.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "description": "Size of the switch.",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": [
+          {
+            "name": "size",
+            "options": [
+              "xs",
+              "sm",
+              "default",
+              "lg"
+            ],
+            "default": "default"
+          },
+          {
+            "name": "checked",
+            "options": [
+              "true",
+              "false"
+            ],
+            "default": "false"
+          }
+        ]
+      }
+    ]
+  },
+  "tabs": {
+    "category": "layout",
+    "title": "Tabs",
+    "selector": "tolle-tabs",
+    "import": "import { TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add tabs",
+    "components": [
+      {
+        "name": "TabsComponent",
+        "selector": "tolle-tabs",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "defaultValue",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "valueChange",
+            "type": "string"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "TabsListComponent",
+        "selector": "tolle-tabs-list",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "description": "Extra Tailwind classes merged onto the tabs list via `cn()` (last-wins).",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "'default' | 'underline'",
+            "default": "'default'",
+            "description": "Visual style of the tab list.",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "default",
+              "underline"
+            ],
+            "default": "default"
+          }
+        ]
+      },
+      {
+        "name": "TabsTriggerComponent",
+        "selector": "tolle-tabs-trigger",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "value",
+            "type": "string",
+            "required": true
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "TabsContentComponent",
+        "selector": "tolle-tabs-content",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "value",
+            "type": "string",
+            "required": true
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "tag-input": {
+    "category": "forms",
+    "title": "Tag Input",
+    "selector": "tolle-tag-input",
+    "import": "import { TagInputComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add tag-input",
+    "components": [
+      {
+        "name": "TagInputComponent",
+        "selector": "tolle-tag-input",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "string",
+            "default": "`tag-input-${Math.random().toString(36).substr(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "errorMessage",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "'Type and press Enter...'",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'xs' | 'sm' | 'default' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "delimiter",
+            "type": "string",
+            "default": "','",
+            "required": false
+          },
+          {
+            "name": "maxTags",
+            "type": "number | null",
+            "default": "null",
+            "required": false
+          },
+          {
+            "name": "allowDuplicates",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "tagPrefix",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "tagSuffix",
+            "type": "string",
+            "default": "''",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "textarea": {
+    "category": "forms",
+    "title": "Textarea",
+    "selector": "tolle-textarea",
+    "import": "import { TextareaComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add textarea",
+    "components": [
+      {
+        "name": "TextareaComponent",
+        "selector": "tolle-textarea",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "any",
+            "default": "`textarea-${Math.random().toString(36).substring(2, 9)}`",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "errorMessage",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "rows",
+            "type": "number",
+            "default": "3",
+            "required": false
+          },
+          {
+            "name": "maxLength",
+            "type": "number",
+            "required": false
+          },
+          {
+            "name": "showCharacterCount",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "autoGrow",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "hideHintOnFocus",
+            "type": "boolean",
+            "default": "true",
+            "required": false
+          },
+          {
+            "name": "hideCharacterCountOnFocus",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "readonly",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "toaster": {
+    "category": "feedback",
+    "title": "Toaster",
+    "selector": "tolle-toaster",
+    "import": "import { ToastContainerComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add toaster",
+    "components": [
+      {
+        "name": "ToastContainerComponent",
+        "selector": "tolle-toaster",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "position",
+            "type": "ToastPosition",
+            "default": "'bottom-right'",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "toggle": {
+    "category": "actions",
+    "title": "Toggle",
+    "selector": "tolle-toggle",
+    "import": "import { ToggleComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add toggle",
+    "components": [
+      {
+        "name": "ToggleComponent",
+        "selector": "tolle-toggle",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "variant",
+            "type": "'default' | 'outline'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'default' | 'sm' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "pressed",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "pressedChange",
+            "type": "boolean"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": [
+          {
+            "name": "variant",
+            "options": [
+              "default",
+              "outline"
+            ],
+            "default": "default"
+          },
+          {
+            "name": "size",
+            "options": [
+              "default",
+              "sm",
+              "lg"
+            ],
+            "default": "default"
+          }
+        ]
+      }
+    ]
+  },
+  "toggle-group": {
+    "category": "actions",
+    "title": "Toggle Group",
+    "selector": "tolle-toggle-group",
+    "import": "import { ToggleGroupComponent, ToggleGroupItemComponent } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add toggle-group",
+    "components": [
+      {
+        "name": "ToggleGroupComponent",
+        "selector": "tolle-toggle-group",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "type",
+            "type": "'single' | 'multiple'",
+            "default": "'single'",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "'default' | 'outline'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "'default' | 'sm' | 'lg'",
+            "default": "'default'",
+            "required": false
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [
+          {
+            "name": "valueChange",
+            "type": "any"
+          }
+        ],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      },
+      {
+        "name": "ToggleGroupItemComponent",
+        "selector": "tolle-toggle-group-item",
+        "kind": "component",
+        "inputs": [
+          {
+            "name": "value",
+            "type": "string",
+            "required": true
+          },
+          {
+            "name": "class",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": "false",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [
+          {
+            "name": ""
+          }
+        ],
+        "variants": []
+      }
+    ]
+  },
+  "tolle-cell": {
+    "category": "data",
+    "title": "Tolle Cell",
+    "selector": "[tolleCell]",
+    "import": "import { TolleCellDirective } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add tolle-cell",
+    "components": [
+      {
+        "name": "TolleCellDirective",
+        "selector": "[tolleCell]",
+        "kind": "directive",
+        "inputs": [
+          {
+            "name": "name",
+            "type": "string",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  },
+  "tooltip": {
+    "category": "overlays",
+    "title": "Tooltip",
+    "selector": "[tolleTooltip]",
+    "import": "import { TooltipDirective } from '@tolle_/tolle-ui';",
+    "install": "npx @tolle_/cli add tooltip",
+    "components": [
+      {
+        "name": "TooltipDirective",
+        "selector": "[tolleTooltip]",
+        "kind": "directive",
+        "inputs": [
+          {
+            "name": "content",
+            "type": "string",
+            "default": "''",
+            "required": false
+          },
+          {
+            "name": "placement",
+            "type": "'top' | 'bottom' | 'left' | 'right'",
+            "default": "'top'",
+            "required": false
+          }
+        ],
+        "outputs": [],
+        "slots": [],
+        "variants": []
+      }
+    ]
+  }
+}