@tolle_/tolle-ui 18.2.24 → 18.2.25

package/registry/llms-full.txt

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