@tolle_/tolle-ui 18.2.21 → 18.2.22

package/fesm2022/tolle-ui.mjs

@@ -676,6 +676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class SelectComponent {
     selectService;
+    cdr;
     placeholder = 'Select an option';
     class = '';
     disabled = false;
@@ -687,6 +688,8 @@ class SelectComponent {
     container;
     items;
     sub = new Subscription();
+    itemsChangeSub;
+    pendingValue = undefined;
     searchQuery = '';
     noResults = false;
     isOpen = false;
@@ -696,8 +699,9 @@ class SelectComponent {
     onChange = () => { };
     onTouched = () => { };
     cn = cn;
-    constructor(selectService) {
+    constructor(selectService, cdr) {
         this.selectService = selectService;
+        this.cdr = cdr;
         this.sub.add(this.selectService.selectedValue$.subscribe(val => {
             this.value = val;
             this.onChange(val);
@@ -729,8 +733,24 @@ class SelectComponent {
         return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]', (this.disabled || this.readonly) && 'opacity-30');
     }
     ngAfterContentInit() {
+        // Subscribe to items changes to handle dynamic content
+        this.itemsChangeSub = this.items.changes.subscribe(() => {
+            this.updateItemSelection();
+            this.applyPendingValue();
+        });
+        // Apply initial selection if items are already available
         this.updateItemSelection();
-        this.items.changes.subscribe(() => this.updateItemSelection());
+        this.applyPendingValue();
+    }
+    applyPendingValue() {
+        if (this.pendingValue !== undefined && this.items && this.items.length > 0) {
+            const found = this.items.find(i => i.value === this.pendingValue);
+            if (found) {
+                this.selectedLabel = found.getLabel();
+                this.cdr.markForCheck();
+            }
+            this.pendingValue = undefined;
+        }
     }
     updateItemSelection() {
         if (this.items) {
@@ -739,6 +759,15 @@ class SelectComponent {
             });
         }
     }
+    syncSelectedLabel() {
+        if (this.items) {
+            const found = this.items.find(i => i.value === this.value);
+            if (found) {
+                this.selectedLabel = found.getLabel();
+                this.cdr.markForCheck();
+            }
+        }
+    }
     _outsideClickHandler = (event) => {
         if (!this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
             this.close();
@@ -752,7 +781,7 @@ class SelectComponent {
     open() {
         this.isOpen = true;
         this.trigger.nativeElement.focus();
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             this.updatePosition();
             document.addEventListener('mousedown', this._outsideClickHandler);
         });
@@ -811,10 +840,16 @@ class SelectComponent {
     writeValue(value) {
         this.value = value;
         this.updateItemSelection();
-        if (this.items) {
+        if (this.items && this.items.length > 0) {
             const found = this.items.find(i => i.value === value);
-            if (found)
+            if (found) {
                 this.selectedLabel = found.getLabel();
+                this.cdr.markForCheck();
+            }
+        }
+        else {
+            // Queue the value for when items become available
+            this.pendingValue = value;
         }
     }
     registerOnChange(fn) { this.onChange = fn; }
@@ -822,11 +857,12 @@ class SelectComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     ngOnDestroy() {
         this.sub.unsubscribe();
+        this.itemsChangeSub?.unsubscribe();
         if (this.cleanupAutoUpdate)
             this.cleanupAutoUpdate();
         document.removeEventListener('mousedown', this._outsideClickHandler);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size", readonly: "readonly" }, providers: [
             SelectService,
             {
@@ -851,7 +887,7 @@ class SelectComponent {
 
       <div
         #popover
-        *ngIf="isOpen"
+        [class.hidden-dropdown]="!isOpen"
         class="fixed bg-popover z-[999] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
         style="visibility: hidden; top: 0; left: 0;">
         <div *ngIf="searchable" class="p-2 border-b border-border bg-popover h-auto">
@@ -873,23 +909,18 @@ class SelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
+  `, isInline: true, styles: [".hidden-dropdown{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error", "hideHintOnFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'tolle-select',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, InputComponent],
-                    providers: [
+            args: [{ selector: 'tolle-select', standalone: true, imports: [CommonModule, FormsModule, InputComponent], providers: [
                         SelectService,
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true
                         }
-                    ],
-                    template: `
+                    ], template: `
     <div [class]="cn('relative w-full', 'size-' + size)" #container>
       <button
         type="button"
@@ -906,7 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <div
         #popover
-        *ngIf="isOpen"
+        [class.hidden-dropdown]="!isOpen"
         class="fixed bg-popover z-[999] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
         style="visibility: hidden; top: 0; left: 0;">
         <div *ngIf="searchable" class="p-2 border-b border-border bg-popover h-auto">
@@ -928,9 +959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [{ type: SelectService }], propDecorators: { placeholder: [{
+  `, styles: [".hidden-dropdown{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: SelectService }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], class: [{
                 type: Input
@@ -1323,6 +1353,335 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+class TagInputComponent {
+    cdr;
+    tagInputElement;
+    id = `tag-input-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    hint = '';
+    errorMessage = '';
+    placeholder = 'Type and press Enter...';
+    size = 'default';
+    class = '';
+    // State inputs
+    disabled = false;
+    readonly = false;
+    error = false;
+    // Tag-specific inputs
+    delimiter = ',';
+    maxTags = null;
+    allowDuplicates = false;
+    tagPrefix = '';
+    tagSuffix = '';
+    tags = [];
+    inputValue = '';
+    isFocused = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    writeValue(values) {
+        this.tags = Array.isArray(values) ? [...values] : [];
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onKeydown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        const key = event.key;
+        // Enter creates a tag
+        if (key === 'Enter') {
+            event.preventDefault();
+            this.commitInput();
+            return;
+        }
+        // Delimiter creates a tag (strip the delimiter)
+        if (key === this.delimiter) {
+            event.preventDefault();
+            this.commitInput();
+            return;
+        }
+        // Backspace on empty input removes the last tag
+        if (key === 'Backspace' && this.inputValue === '') {
+            if (this.tags.length > 0) {
+                this.removeTag(this.tags.length - 1);
+            }
+            return;
+        }
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+        this.commitInput();
+    }
+    onFocus() {
+        this.isFocused = true;
+    }
+    removeTag(index, event) {
+        if (this.disabled || this.readonly)
+            return;
+        if (event) {
+            event.stopPropagation();
+        }
+        this.tags.splice(index, 1);
+        this.emitChange();
+        this.focusInput();
+    }
+    focusInput() {
+        if (!this.disabled && this.tagInputElement) {
+            this.tagInputElement.nativeElement.focus();
+        }
+    }
+    commitInput() {
+        const value = this.inputValue.trim();
+        if (value === '') {
+            return;
+        }
+        // Check max tags
+        if (this.maxTags != null && this.tags.length >= this.maxTags) {
+            this.inputValue = '';
+            return;
+        }
+        // Check duplicates (case-insensitive)
+        if (!this.allowDuplicates) {
+            const exists = this.tags.some(t => t.toLowerCase() === value.toLowerCase());
+            if (exists) {
+                this.inputValue = '';
+                return;
+            }
+        }
+        this.tags.push(value);
+        this.inputValue = '';
+        this.emitChange();
+    }
+    emitChange() {
+        this.onChange([...this.tags]);
+        this.cdr.markForCheck();
+    }
+    cn = cn;
+    get computedLabelClass() {
+        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+    }
+    get computedContainerClass() {
+        return cn(
+        // Base styles — flex-wrap so tags flow onto multiple lines
+        "group relative flex flex-wrap items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        // Border and shadow
+        "border-input shadow-sm", 
+        // Sizing — min-h instead of fixed h so tags can wrap
+        this.size === 'xs' && "min-h-8 px-2 py-1 gap-1 text-xs", this.size === 'sm' && "min-h-9 px-3 py-1 gap-1.5 text-sm", this.size === 'default' && "min-h-10 px-3 py-1.5 gap-2 text-sm", this.size === 'lg' && "min-h-11 px-4 py-2 gap-3 text-base", 
+        // Focus state
+        !(this.readonly || this.disabled) && [
+            "focus-within:border-primary/80",
+            "focus-within:ring-4",
+            "focus-within:ring-ring/30",
+            "focus-within:ring-offset-0",
+            "focus-within:shadow-none",
+        ], 
+        // Error state
+        this.error && [
+            "border-destructive",
+            !(this.readonly || this.disabled) && [
+                "focus-within:border-destructive/80",
+                "focus-within:ring-destructive/30"
+            ]
+        ], 
+        // Disabled state
+        this.disabled && [
+            "cursor-not-allowed opacity-50",
+            "border-opacity-50"
+        ], 
+        // Readonly state
+        this.readonly && [
+            "cursor-default",
+            "border-dashed",
+            !this.disabled && "focus-within:ring-0 focus-within:border-opacity-100"
+        ], this.class);
+    }
+    get computedInputClass() {
+        return cn(
+        // Base styles — inline within the flex-wrap container
+        "flex-1 bg-transparent border-none p-0 min-w-[80px]", "placeholder:text-muted-foreground", 
+        // Remove all default focus styles
+        "focus:outline-none focus:ring-0 focus:shadow-none", 
+        // Text sizing
+        this.size === 'xs' && "text-xs", this.size === 'sm' && "text-sm", this.size === 'default' && "text-sm", this.size === 'lg' && "text-base", 
+        // Cursor states
+        this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", 
+        // Text color
+        "text-foreground", 
+        // Selection color
+        "selection:bg-primary/20 selection:text-foreground", this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TagInputComponent, isStandalone: true, selector: "tolle-tag-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", placeholder: "placeholder", size: "size", class: "class", disabled: "disabled", readonly: "readonly", error: "error", delimiter: "delimiter", maxTags: "maxTags", allowDuplicates: "allowDuplicates", tagPrefix: "tagPrefix", tagSuffix: "tagSuffix" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TagInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "tagInputElement", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass">
+        {{ label }}
+      </label>
+
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <tolle-badge
+          *ngFor="let tag of tags; let i = index"
+          size="xs"
+          variant="secondary"
+          [removable]="!disabled && !readonly"
+          (onRemove)="removeTag(i, $event)">
+          {{ tagPrefix }}{{ tag }}{{ tagSuffix }}
+        </tolle-badge>
+
+        <input
+          #tagInput
+          [id]="id"
+          type="text"
+          [placeholder]="tags.length === 0 ? placeholder : ''"
+          [disabled]="disabled"
+          [readOnly]="readonly || (maxTags != null && tags.length >= maxTags)"
+          [(ngModel)]="inputValue"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
+          [class]="computedInputClass"
+        />
+      </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          class="text-xs text-destructive px-1"
+        >
+          {{ errorMessage }}
+        </p>
+      </ng-container>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-tag-input',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, BadgeComponent],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TagInputComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass">
+        {{ label }}
+      </label>
+
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <tolle-badge
+          *ngFor="let tag of tags; let i = index"
+          size="xs"
+          variant="secondary"
+          [removable]="!disabled && !readonly"
+          (onRemove)="removeTag(i, $event)">
+          {{ tagPrefix }}{{ tag }}{{ tagSuffix }}
+        </tolle-badge>
+
+        <input
+          #tagInput
+          [id]="id"
+          type="text"
+          [placeholder]="tags.length === 0 ? placeholder : ''"
+          [disabled]="disabled"
+          [readOnly]="readonly || (maxTags != null && tags.length >= maxTags)"
+          [(ngModel)]="inputValue"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
+          [class]="computedInputClass"
+        />
+      </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          class="text-xs text-destructive px-1"
+        >
+          {{ errorMessage }}
+        </p>
+      </ng-container>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tagInputElement: [{
+                type: ViewChild,
+                args: ['tagInput']
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], delimiter: [{
+                type: Input
+            }], maxTags: [{
+                type: Input
+            }], allowDuplicates: [{
+                type: Input
+            }], tagPrefix: [{
+                type: Input
+            }], tagSuffix: [{
+                type: Input
+            }] } });
+
 class TooltipDirective {
     el;
     content = '';
@@ -1459,9 +1818,9 @@ class ToastContainerComponent {
     getVariantClasses(variant = 'default') {
         switch (variant) {
             case 'destructive':
-                return 'border-destructive/50 bg-destructive/5 dark:bg-destructive/10 text-destructive dark:text-red-400';
+                return 'border-destructive/50 bg-destructive/5 dark:bg-red-950 text-destructive dark:text-red-400';
             case 'success':
-                return 'border-emerald-500/50 bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400';
+                return 'border-emerald-500/50 bg-emerald-50 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-400';
             default:
                 return 'bg-background text-foreground border-border';
         }
@@ -4652,7 +5011,7 @@ class ModalComponent {
         // Base classes: Added 'w-full' and 'mx-auto'
         'bg-background border border-border shadow-lg relative flex flex-col w-full mx-auto ', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'rounded-md', 
         // Sizing scale with explicit max-widths
-        size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[544px]', size === 'lg' && 'max-w-[1024px]');
+        size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[544px]', size === 'lg' && 'max-w-[1024px]', size === 'xl' && 'max-w-[1280px]');
     }
     determineContentType() {
         if (typeof this.content === 'string')
@@ -4816,6 +5175,7 @@ class Modal {
      * - sm: 425px (Standard dialogs)
      * - default: 544px (Forms)
      * - lg: 90% / 1024px (Data tables)
+     * - xl: 1280px (Large forms, dashboards)
      * - fullscreen: 100vw/100vh (Complex workflows)
      */
     size = 'default';
@@ -13641,5 +14001,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InputComponent, LabelComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PopoverComponent, PopoverContentComponent, ProgressComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, ScrollAreaComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, SidebarComponent, SkeletonComponent, SliderComponent, SwitchComponent, TOLLE_CONFIG, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InputComponent, LabelComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PopoverComponent, PopoverContentComponent, ProgressComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, ScrollAreaComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, SidebarComponent, SkeletonComponent, SliderComponent, SwitchComponent, TOLLE_CONFIG, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagInputComponent, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle-ui.mjs.map