@tolle_/tolle-ui 0.0.18-beta → 0.0.19-beta

package/fesm2022/{tolle_-tolle-ui.mjs → tolle-ui.mjs}

@@ -1,9 +1,9 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector } from '@angular/core';
+import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { CommonModule, isPlatformBrowser, DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
 import { cva } from 'class-variance-authority';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -33,26 +33,22 @@ const buttonVariants = cva("inline-flex items-center justify-center rounded-md t
             xs: "h-8 px-2 py-1 text-xs",
             sm: "h-9 rounded-md px-3",
             lg: "h-11 rounded-md px-8",
-            // RESTORED: Square icon button variants
             "icon-xs": "h-8 w-8",
             "icon-sm": "h-9 w-9",
             icon: "h-10 w-10",
             "icon-lg": "h-11 w-11",
         },
-        block: { true: "w-full flex" },
         busy: { true: "relative !cursor-wait !pointer-events-none" }
     },
     defaultVariants: {
         variant: "default",
         size: "default",
-        block: false,
     },
 });
 class ButtonComponent {
     class = '';
     variant = 'default';
     size = 'default';
-    block = false;
     disabled = false;
     busy = false;
     readonly = false;
@@ -60,14 +56,11 @@ class ButtonComponent {
         return cn(buttonVariants({
             variant: this.variant,
             size: this.size,
-            block: this.block,
             busy: this.busy
-        }), 
-        // Adds 'size-icon-sm', 'size-xs', etc. for the CSS selectors to work
-        'size-' + this.size, this.class);
+        }), 'size-' + this.size, this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size", block: "block", disabled: "disabled", busy: "busy", readonly: "readonly" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size", disabled: "disabled", busy: "busy", readonly: "readonly" }, ngImport: i0, template: `
     <button
       [class]="computedClass"
       [disabled]="disabled || busy"
@@ -80,11 +73,11 @@ class ButtonComponent {
         </svg>
       </div>
 
-      <span class="flex items-center justify-center w-full h-full" [class.invisible]="busy">
+      <span class="flex items-center justify-center w-full h-full pointer-events-none" [class.invisible]="busy">
         <ng-content></ng-content>
       </span>
     </button>
-  `, isInline: true, styles: [":host{display:inline-block}:host(.w-full){display:block}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [":host{display:inline-block;vertical-align:middle}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -101,19 +94,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </svg>
       </div>
 
-      <span class="flex items-center justify-center w-full h-full" [class.invisible]="busy">
+      <span class="flex items-center justify-center w-full h-full pointer-events-none" [class.invisible]="busy">
         <ng-content></ng-content>
       </span>
     </button>
-  `, styles: [":host{display:inline-block}:host(.w-full){display:block}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"] }]
+  `, styles: [":host{display:inline-block;vertical-align:middle}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"] }]
         }], propDecorators: { class: [{
                 type: Input
             }], variant: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], block: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], busy: [{
@@ -170,7 +161,7 @@ class InputComponent {
         // Colors & Borders
         this.error ? "border-destructive focus-within:ring-destructive" : "border-input", 
         // Disabled vs Readonly styling
-        this.disabled && "cursor-not-allowed opacity-50 bg-muted/30", this.readonly && "cursor-default bg-muted/10 border-dashed focus-within:ring-0", this.containerClass);
+        this.disabled && "cursor-not-allowed opacity-50", this.readonly && "cursor-default border-dashed focus-within:ring-0", this.containerClass);
     }
     get computedInputClass() {
         return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", this.class);
@@ -1365,6 +1356,16 @@ class ThemeService {
         else {
             this.disableDarkMode();
         }
+        const savedPrimary = localStorage.getItem('tolle-primary-color');
+        if (savedPrimary) {
+            this.setPrimaryColor(savedPrimary, false);
+        }
+        else if (this.config?.primaryColor) {
+            this.setPrimaryColor(this.config.primaryColor, false);
+        }
+        if (this.config?.radius) {
+            this.renderer.setStyle(this.document.documentElement, '--radius', this.config.radius);
+        }
         // 2. Apply Brand Config - This will generate full palette
         if (this.config) {
             this.applyBrandConfig(this.config);
@@ -1471,9 +1472,23 @@ class ThemeService {
         localStorage.setItem('tolle-theme', 'light');
         this.isDarkSubject.next(false);
     }
+    setPrimaryColor(color, persist = true) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Update CSS variables + palette
+        this.renderer.setStyle(this.document.documentElement, '--primary', color);
+        this.generatePrimaryShades(color);
+        // Persist user preference
+        if (persist) {
+            localStorage.setItem('tolle-primary-color', color);
+        }
+    }
     get currentTheme() {
         return this.isDarkSubject.value ? 'dark' : 'light';
     }
+    get primaryColor() {
+        return localStorage.getItem('tolle-primary-color');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: TOLLE_CONFIG, optional: true }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
@@ -2038,11 +2053,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class MaskedInputComponent {
     el;
     cdr;
+    id = `masked-input-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    hint = '';
+    errorMessage = '';
     mask = '';
     placeholder = '';
     type = 'text';
     disabled = false;
+    readonly = false;
     class = '';
+    containerClass = '';
     error = false;
     size = 'default';
     returnRaw = false;
@@ -2059,7 +2080,6 @@ class MaskedInputComponent {
         this.el = el;
         this.cdr = cdr;
     }
-    // FIXED DETECTION: Check the actual DOM nodes projected into the component
     ngAfterContentChecked() {
         const prefix = this.el.nativeElement.querySelector('[prefix]');
         const suffix = this.el.nativeElement.querySelector('[suffix]');
@@ -2069,11 +2089,24 @@ class MaskedInputComponent {
             this.cdr.detectChanges();
         }
     }
+    get computedContainerClass() {
+        return cn("group relative flex items-center w-full rounded-md border transition-all shadow-sm", "bg-background ring-offset-background", 
+        // Sizing
+        this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", 
+        // Interaction States (Inherited from Input focus style)
+        !(this.readonly || this.disabled) && "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1", 
+        // Colors & Borders
+        this.error ? "border-destructive focus-within:ring-destructive" : "border-input", 
+        // Disabled vs Readonly styling
+        this.disabled && "cursor-not-allowed opacity-50", this.readonly && "cursor-default border-dashed focus-within:ring-0", this.containerClass);
+    }
     get computedInputClass() {
-        return cn("flex w-full rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all", 'disabled:opacity-50 shadow-sm transition-shadow', this.size === 'xs' && "h-8 text-xs px-2", this.size === 'sm' && "h-9 px-3", this.size === 'default' && "h-10 px-3", this.size === 'lg' && "h-11 px-4 text-base", "group-has-[[prefix]]:pl-10 group-has-[[suffix]]:pr-10", this.size === 'xs' && "group-has-[[prefix]]:pl-8 group-has-[[suffix]]:pr-8", this.error && "border-destructive focus-visible:ring-destructive", this.class);
+        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", this.class);
     }
     // --- Masking Logic ---
     onInput(event) {
+        if (this.readonly || this.disabled)
+            return;
         const input = event.target;
         const raw = this.unmask(input.value);
         const masked = this.applyMask(raw);
@@ -2114,40 +2147,64 @@ class MaskedInputComponent {
     }
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaskedInputComponent, isStandalone: true, selector: "tolle-masked-input", inputs: { mask: "mask", placeholder: "placeholder", type: "type", disabled: "disabled", class: "class", error: "error", size: "size", returnRaw: "returnRaw" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaskedInputComponent, isStandalone: true, selector: "tolle-masked-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", mask: "mask", placeholder: "placeholder", type: "type", disabled: "disabled", readonly: "readonly", class: "class", containerClass: "containerClass", error: "error", size: "size", returnRaw: "returnRaw" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaskedInputComponent),
                 multi: true
             }
         ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }], ngImport: i0, template: `
-    <div [class]="cn('relative flex items-center w-full group', 'size-' + size, class)">
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class.opacity-50]="disabled"
+        class="text-sm font-medium text-foreground leading-none transition-opacity"
+      >
+        {{ label }}
+      </label>
 
-      <div class="absolute left-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
-           [class.left-2.5]="size === 'xs'">
-        <ng-content select="[prefix]"></ng-content>
-      </div>
+      <div [class]="computedContainerClass">
+        <!-- Prefix Icon -->
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
 
-      <input
-        #inputEl
-        [type]="type"
-        [placeholder]="placeholder"
-        [disabled]="disabled"
-        [value]="displayValue"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        [class]="computedInputClass"
-      />
+        <input
+          #inputEl
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [value]="displayValue"
+          (input)="onInput($event)"
+          (blur)="onTouched()"
+          [class]="computedInputClass"
+        />
 
-      <div class="absolute right-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
-           [class.right-2.5]="size === 'xs'">
-        <ng-content select="[suffix]"></ng-content>
+        <!-- Suffix Icon -->
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+          {{ 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: "ngmodule", type: FormsModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedInputComponent, decorators: [{
             type: Component,
@@ -2163,32 +2220,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-    <div [class]="cn('relative flex items-center w-full group', 'size-' + size, class)">
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class.opacity-50]="disabled"
+        class="text-sm font-medium text-foreground leading-none transition-opacity"
+      >
+        {{ label }}
+      </label>
 
-      <div class="absolute left-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
-           [class.left-2.5]="size === 'xs'">
-        <ng-content select="[prefix]"></ng-content>
-      </div>
+      <div [class]="computedContainerClass">
+        <!-- Prefix Icon -->
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
 
-      <input
-        #inputEl
-        [type]="type"
-        [placeholder]="placeholder"
-        [disabled]="disabled"
-        [value]="displayValue"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        [class]="computedInputClass"
-      />
+        <input
+          #inputEl
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [value]="displayValue"
+          (input)="onInput($event)"
+          (blur)="onTouched()"
+          [class]="computedInputClass"
+        />
 
-      <div class="absolute right-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
-           [class.right-2.5]="size === 'xs'">
-        <ng-content select="[suffix]"></ng-content>
+        <!-- Suffix Icon -->
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
     </div>
   `
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { mask: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], mask: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -2196,8 +2282,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], class: [{
                 type: Input
+            }], containerClass: [{
+                type: Input
             }], error: [{
                 type: Input
             }], size: [{
@@ -2356,7 +2446,7 @@ class DatePickerComponent {
         ></tolle-calendar>
       </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: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["mask", "placeholder", "type", "disabled", "class", "error", "size", "returnRaw"] }, { kind: "component", type: CalendarComponent, selector: "tolle-calendar", inputs: ["class", "disablePastDates"] }] });
+  `, 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: MaskedInputComponent, selector: "tolle-masked-input", inputs: ["id", "label", "hint", "errorMessage", "mask", "placeholder", "type", "disabled", "readonly", "class", "containerClass", "error", "size", "returnRaw"] }, { kind: "component", type: CalendarComponent, selector: "tolle-calendar", inputs: ["class", "disablePastDates"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -4099,7 +4189,7 @@ class TextareaComponent {
         // Border colors
         this.error ? 'border-destructive' : 'border-input', 
         // Disabled vs Readonly styles
-        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30', this.readonly && 'cursor-default bg-muted/10 border-dashed focus-visible:ring-0', 'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', 'min-h-[80px]', this.className);
+        this.disabled && 'cursor-not-allowed opacity-50', this.readonly && 'cursor-default border-dashed focus-visible:ring-0', 'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', 'min-h-[80px]', this.className);
     }
     handleInput(event) {
         if (this.readonly || this.disabled)
@@ -4240,6 +4330,967 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+const alertVariants = cva("relative w-full rounded-lg border p-4 transition-all duration-300 [&>i~div]:pl-7 [&>i]:absolute [&>i]:left-4 [&>i]:top-4 [&>i]:text-foreground", {
+    variants: {
+        variant: {
+            default: "bg-background text-foreground",
+            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>i]:text-destructive",
+            success: "border-emerald-500/50 text-emerald-700 dark:text-emerald-400 [&>i]:text-emerald-600",
+            warning: "border-amber-500/50 text-amber-700 dark:text-amber-400 [&>i]:text-amber-600",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+class AlertComponent {
+    variant = 'default';
+    title;
+    class = '';
+    dismissible = false;
+    onClose = new EventEmitter();
+    dismissed = false;
+    isDismissing = false;
+    alertVariants = alertVariants;
+    cn = cn;
+    dismiss() {
+        this.isDismissing = true;
+        // Wait for animation to finish before removing from DOM
+        setTimeout(() => {
+            this.dismissed = true;
+            this.onClose.emit();
+        }, 300);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertComponent, isStandalone: true, selector: "tolle-alert", inputs: { variant: "variant", title: "title", class: "class", dismissible: "dismissible" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    <div
+      *ngIf="!dismissed"
+      [class]="cn(alertVariants({ variant }), class)"
+      [class.opacity-0]="isDismissing"
+      [class.scale-95]="isDismissing"
+      role="alert"
+    >
+      <ng-content select="[icon]"></ng-content>
+
+      <button
+        *ngIf="dismissible"
+        (click)="dismiss()"
+        class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 group-hover:opacity-100"
+        [class.opacity-100]="dismissible"
+      >
+        <i class="ri-close-line text-lg"></i>
+      </button>
+
+      <div>
+        <h5 *ngIf="title" class="mb-1 font-medium leading-none tracking-tight">
+          {{ title }}
+        </h5>
+        <div class="text-sm [&_p]:leading-relaxed">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-alert',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div
+      *ngIf="!dismissed"
+      [class]="cn(alertVariants({ variant }), class)"
+      [class.opacity-0]="isDismissing"
+      [class.scale-95]="isDismissing"
+      role="alert"
+    >
+      <ng-content select="[icon]"></ng-content>
+
+      <button
+        *ngIf="dismissible"
+        (click)="dismiss()"
+        class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 group-hover:opacity-100"
+        [class.opacity-100]="dismissible"
+      >
+        <i class="ri-close-line text-lg"></i>
+      </button>
+
+      <div>
+        <h5 *ngIf="title" class="mb-1 font-medium leading-none tracking-tight">
+          {{ title }}
+        </h5>
+        <div class="text-sm [&_p]:leading-relaxed">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }] } });
+
+class AvatarComponent {
+    cdr;
+    src;
+    alt = '';
+    size = 'default';
+    shape = 'circle';
+    // We remove @Input() class because standard class="" attributes
+    // on the tag will now work automatically with the host bindings.
+    isLoading = true;
+    hasError = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    onLoad() {
+        this.isLoading = false;
+        this.cdr.detectChanges();
+    }
+    onError() {
+        this.isLoading = false;
+        this.hasError = true;
+        this.cdr.detectChanges();
+    }
+    // Apply styles directly to the <tolle-avatar> tag
+    get hostClasses() {
+        return cn(
+        // Layout & Shape
+        "relative flex shrink-0 overflow-hidden bg-muted", this.shape === 'circle' ? 'rounded-full' : 'rounded-md', 
+        // Sizes
+        this.size === 'sm' && "h-8 w-8 text-xs", this.size === 'default' && "h-10 w-10", this.size === 'lg' && "h-16 w-16 text-lg", this.size === 'xl' && "h-24 w-24 text-xl");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "tolle-avatar", inputs: { src: "src", alt: "alt", size: "size", shape: "shape" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `
+    <!-- Image Layer -->
+    <img *ngIf="src && !hasError"
+         [src]="src"
+         [alt]="alt"
+         (load)="onLoad()"
+         (error)="onError()"
+         [class.opacity-0]="isLoading"
+         class="h-full w-full object-cover transition-opacity duration-300" />
+
+    <!-- Fallback Layer -->
+    <div *ngIf="hasError || !src || isLoading" class="flex h-full w-full items-center justify-center bg-muted">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-avatar',
+                    standalone: true,
+                    imports: [NgIf],
+                    template: `
+    <!-- Image Layer -->
+    <img *ngIf="src && !hasError"
+         [src]="src"
+         [alt]="alt"
+         (load)="onLoad()"
+         (error)="onError()"
+         [class.opacity-0]="isLoading"
+         class="h-full w-full object-cover transition-opacity duration-300" />
+
+    <!-- Fallback Layer -->
+    <div *ngIf="hasError || !src || isLoading" class="flex h-full w-full items-center justify-center bg-muted">
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AvatarFallbackComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarFallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarFallbackComponent, isStandalone: true, selector: "tolle-avatar-fallback", ngImport: i0, template: `
+    <div class="flex h-full w-full items-center justify-center bg-muted text-muted-foreground font-medium uppercase">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarFallbackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-avatar-fallback', standalone: true, imports: [], template: `
+    <div class="flex h-full w-full items-center justify-center bg-muted text-muted-foreground font-medium uppercase">
+      <ng-content></ng-content>
+    </div>
+  ` }]
+        }] });
+
+class BreadcrumbComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BreadcrumbComponent, isStandalone: true, selector: "tolle-breadcrumb", inputs: { class: "class" }, ngImport: i0, template: `
+    <nav aria-label="breadcrumb" [class]="cn('flex flex-wrap items-center break-words text-sm text-muted-foreground', class)">
+      <ol class="flex flex-wrap items-center gap-1.5 break-words">
+        <ng-content></ng-content>
+      </ol>
+    </nav>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-breadcrumb', standalone: true, imports: [], template: `
+    <nav aria-label="breadcrumb" [class]="cn('flex flex-wrap items-center break-words text-sm text-muted-foreground', class)">
+      <ol class="flex flex-wrap items-center gap-1.5 break-words">
+        <ng-content></ng-content>
+      </ol>
+    </nav>
+  ` }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class BreadcrumbLinkComponent {
+    active = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BreadcrumbLinkComponent, isStandalone: true, selector: "tolle-breadcrumb-link", inputs: { active: "active" }, ngImport: i0, template: `
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+
+    <ng-container *ngIf="active; else linkTemplate">
+      <span
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        class="font-normal text-foreground"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </span>
+    </ng-container>
+
+    <ng-template #linkTemplate>
+      <div class="transition-colors hover:text-foreground cursor-pointer">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-breadcrumb-link', standalone: true, imports: [
+                        NgIf,
+                        NgTemplateOutlet
+                    ], template: `
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+
+    <ng-container *ngIf="active; else linkTemplate">
+      <span
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        class="font-normal text-foreground"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </span>
+    </ng-container>
+
+    <ng-template #linkTemplate>
+      <div class="transition-colors hover:text-foreground cursor-pointer">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+    </ng-template>
+  ` }]
+        }], propDecorators: { active: [{
+                type: Input
+            }] } });
+
+class BreadcrumbSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BreadcrumbSeparatorComponent, isStandalone: true, selector: "tolle-breadcrumb-separator", ngImport: i0, template: `
+    <li role="presentation" aria-hidden="true" class="[&>i]:size-3.5">
+      <ng-content>
+        <i class="ri-arrow-right-s-line"></i>
+      </ng-content>
+    </li>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-breadcrumb-separator', standalone: true, imports: [], template: `
+    <li role="presentation" aria-hidden="true" class="[&>i]:size-3.5">
+      <ng-content>
+        <i class="ri-arrow-right-s-line"></i>
+      </ng-content>
+    </li>
+  ` }]
+        }] });
+
+class BreadcrumbItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "tolle-breadcrumb-item", ngImport: i0, template: `
+    <li class="inline-flex items-center gap-1.5">
+      <ng-content></ng-content>
+    </li>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-breadcrumb-item', standalone: true, imports: [], template: `
+    <li class="inline-flex items-center gap-1.5">
+      <ng-content></ng-content>
+    </li>
+  ` }]
+        }] });
+
+const emptyStateVariants = cva("flex flex-col items-center justify-center text-center animate-in fade-in duration-500", {
+    variants: {
+        variant: {
+            default: "min-h-[400px] rounded-md border border-dashed border-border p-8 bg-background/50",
+            minimal: "p-4 min-h-[200px]",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+class EmptyStateComponent {
+    variant = 'default';
+    title = 'No items found';
+    description;
+    class = '';
+    emptyStateVariants = emptyStateVariants;
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyStateComponent, isStandalone: true, selector: "tolle-empty-state", inputs: { variant: "variant", title: "title", description: "description", class: "class" }, ngImport: i0, template: `
+    <div [class]="cn(emptyStateVariants({ variant }), class)">
+
+      <div [class]="cn(
+        'flex items-center justify-center rounded-full bg-muted',
+        variant === 'minimal' ? 'h-12 w-12' : 'h-20 w-20'
+      )">
+        <ng-content select="[icon]">
+          <i [class]="cn(
+            'ri-inbox-line text-muted-foreground/60',
+            variant === 'minimal' ? 'text-xl' : 'text-3xl'
+          )"></i>
+        </ng-content>
+      </div>
+
+      <h3 [class]="cn(
+        'font-semibold text-foreground',
+        variant === 'minimal' ? 'mt-2 text-sm' : 'mt-4 text-lg'
+      )">
+        {{ title }}
+      </h3>
+
+      <p *ngIf="description" [class]="cn(
+        'text-muted-foreground',
+        variant === 'minimal' ? 'mt-1 text-xs' : 'mb-6 mt-2 max-w-sm text-sm'
+      )">
+        {{ description }}
+      </p>
+
+      <div *ngIf="variant !== 'minimal'" class="flex items-center justify-center gap-3">
+        <ng-content select="[actions]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-empty-state',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="cn(emptyStateVariants({ variant }), class)">
+
+      <div [class]="cn(
+        'flex items-center justify-center rounded-full bg-muted',
+        variant === 'minimal' ? 'h-12 w-12' : 'h-20 w-20'
+      )">
+        <ng-content select="[icon]">
+          <i [class]="cn(
+            'ri-inbox-line text-muted-foreground/60',
+            variant === 'minimal' ? 'text-xl' : 'text-3xl'
+          )"></i>
+        </ng-content>
+      </div>
+
+      <h3 [class]="cn(
+        'font-semibold text-foreground',
+        variant === 'minimal' ? 'mt-2 text-sm' : 'mt-4 text-lg'
+      )">
+        {{ title }}
+      </h3>
+
+      <p *ngIf="description" [class]="cn(
+        'text-muted-foreground',
+        variant === 'minimal' ? 'mt-1 text-xs' : 'mb-6 mt-2 max-w-sm text-sm'
+      )">
+        {{ description }}
+      </p>
+
+      <div *ngIf="variant !== 'minimal'" class="flex items-center justify-center gap-3">
+        <ng-content select="[actions]"></ng-content>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class OtpComponent {
+    cdr;
+    length = 6;
+    disabled = false;
+    auto = false; // The toggle for automatic slot generation
+    value = '';
+    isFocused = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    onInputChange(event) {
+        const val = event.target.value.replace(/\D/g, '');
+        this.value = val;
+        this.onChange(val);
+        this.cdr.markForCheck();
+    }
+    // Visual logic for the automated slots
+    getSlotClass(index) {
+        const isActive = this.isFocused && this.value.length === index;
+        return cn('relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all bg-background', index === 0 && 'rounded-l-md border-l', index === this.length - 1 && 'rounded-r-md', isActive && 'z-30 ring-2 ring-ring ring-offset-background');
+    }
+    writeValue(value) { this.value = value || ''; this.cdr.markForCheck(); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OtpComponent, isStandalone: true, selector: "tolle-otp", inputs: { length: "length", disabled: "disabled", auto: "auto" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OtpComponent),
+                multi: true
+            }], ngImport: i0, template: `
+    <div class="relative flex items-center gap-2">
+      <input
+        #hiddenInput
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        [maxLength]="length"
+        class="absolute inset-0 opacity-0 cursor-default z-20"
+        [(ngModel)]="value"
+        (input)="onInputChange($event)"
+        (focus)="isFocused = true"
+        (blur)="isFocused = false"
+        [disabled]="disabled"
+      />
+
+      <div *ngIf="auto" class="flex items-center gap-2 pointer-events-none">
+        <div class="flex items-center">
+          <div *ngFor="let _ of [].constructor(length); let i = index"
+               [class]="getSlotClass(i)"
+          >
+            {{ value[i] || '' }}
+            <div *ngIf="isFocused && value.length === i" class="absolute inset-0 flex items-center justify-center">
+              <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="!auto" class="flex items-center gap-2 pointer-events-none">
+        <ng-content></ng-content>
+      </div>
+    </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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-otp',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OtpComponent),
+                            multi: true
+                        }],
+                    template: `
+    <div class="relative flex items-center gap-2">
+      <input
+        #hiddenInput
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        [maxLength]="length"
+        class="absolute inset-0 opacity-0 cursor-default z-20"
+        [(ngModel)]="value"
+        (input)="onInputChange($event)"
+        (focus)="isFocused = true"
+        (blur)="isFocused = false"
+        [disabled]="disabled"
+      />
+
+      <div *ngIf="auto" class="flex items-center gap-2 pointer-events-none">
+        <div class="flex items-center">
+          <div *ngFor="let _ of [].constructor(length); let i = index"
+               [class]="getSlotClass(i)"
+          >
+            {{ value[i] || '' }}
+            <div *ngIf="isFocused && value.length === i" class="absolute inset-0 flex items-center justify-center">
+              <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="!auto" class="flex items-center gap-2 pointer-events-none">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { length: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], auto: [{
+                type: Input
+            }] } });
+
+class OtpSlotComponent {
+    char = '';
+    isActive = false;
+    isFirst = false; // New Input
+    isLast = false; // New Input
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OtpSlotComponent, isStandalone: true, selector: "tolle-otp-slot", inputs: { char: "char", isActive: "isActive", isFirst: "isFirst", isLast: "isLast", class: "class" }, ngImport: i0, template: `
+    <div [class]="cn(
+      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all',
+      'bg-background',
+      isFirst ? 'rounded-l-md border-l' : '',
+      isLast ? 'rounded-r-md' : '',
+      isActive ? 'z-10 ring-2 ring-ring ring-offset-background' : '',
+      class
+    )">
+      {{ char || '' }}
+      <div *ngIf="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-otp-slot',
+                    standalone: true,
+                    imports: [NgIf],
+                    template: `
+    <div [class]="cn(
+      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all',
+      'bg-background',
+      isFirst ? 'rounded-l-md border-l' : '',
+      isLast ? 'rounded-r-md' : '',
+      isActive ? 'z-10 ring-2 ring-ring ring-offset-background' : '',
+      class
+    )">
+      {{ char || '' }}
+      <div *ngIf="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { char: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], isFirst: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class OtpGroupComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OtpGroupComponent, isStandalone: true, selector: "tolle-otp-group", ngImport: i0, template: `
+    <div class="flex items-center"><ng-content></ng-content></div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-otp-group', standalone: true, imports: [], template: `
+    <div class="flex items-center"><ng-content></ng-content></div>
+  ` }]
+        }] });
+
+class PopoverComponent {
+    placement = 'bottom';
+    onOpen = new EventEmitter();
+    onClose = new EventEmitter();
+    triggerEl;
+    popoverEl;
+    isOpen = false;
+    cleanup;
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        this.onOpen.emit();
+        setTimeout(() => this.updatePosition());
+    }
+    close() {
+        this.isOpen = false;
+        this.onClose.emit();
+        if (this.cleanup)
+            this.cleanup();
+    }
+    updatePosition() {
+        if (!this.triggerEl || !this.popoverEl)
+            return;
+        this.cleanup = autoUpdate(this.triggerEl.nativeElement, this.popoverEl.nativeElement, () => {
+            computePosition(this.triggerEl.nativeElement, this.popoverEl.nativeElement, {
+                placement: this.placement,
+                middleware: [offset(8), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.popoverEl.nativeElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        });
+    }
+    onClickOutside(event) {
+        if (this.isOpen &&
+            !this.triggerEl.nativeElement.contains(event.target) &&
+            !this.popoverEl?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    ngOnDestroy() {
+        if (this.cleanup)
+            this.cleanup();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "tolle-popover", inputs: { placement: "placement" }, outputs: { onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popoverEl", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+    <div class="inline-block" #trigger (click)="toggle()">
+      <ng-content select="[trigger]"></ng-content>
+    </div>
+
+    <div
+      *ngIf="isOpen"
+      #popover
+      class="absolute top-0 left-0 w-max z-[9999]"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-popover',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div class="inline-block" #trigger (click)="toggle()">
+      <ng-content select="[trigger]"></ng-content>
+    </div>
+
+    <div
+      *ngIf="isOpen"
+      #popover
+      class="absolute top-0 left-0 w-max z-[9999]"
+    >
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { placement: [{
+                type: Input
+            }], onOpen: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], triggerEl: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], popoverEl: [{
+                type: ViewChild,
+                args: ['popover']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class PopoverContentComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PopoverContentComponent, isStandalone: true, selector: "tolle-popover-content", inputs: { class: "class" }, ngImport: i0, template: `
+    <div
+      [class]="cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        'animate-in fade-in zoom-in-95 duration-200',
+        class
+      )"
+      role="dialog"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-popover-content',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div
+      [class]="cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        'animate-in fade-in zoom-in-95 duration-200',
+        class
+      )"
+      role="dialog"
+    >
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class RadioService {
+    selectedValueSource = new BehaviorSubject(null);
+    selectedValue$ = this.selectedValueSource.asObservable();
+    disabledSource = new BehaviorSubject(false);
+    disabled$ = this.disabledSource.asObservable();
+    select(value) {
+        if (!this.disabledSource.value) {
+            this.selectedValueSource.next(value);
+        }
+    }
+    setDisabled(isDisabled) {
+        this.disabledSource.next(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioService, decorators: [{
+            type: Injectable
+        }] });
+
+class RadioGroupComponent {
+    radioService;
+    class = '';
+    disabled = false;
+    name = `radio-group-${Math.random().toString(36).substring(2, 9)}`;
+    value;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(radioService) {
+        this.radioService = radioService;
+        this.radioService.selectedValue$.subscribe(val => {
+            this.value = val;
+            this.onChange(val);
+        });
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.radioService.setDisabled(isDisabled);
+    }
+    ngOnChanges() {
+        this.radioService.setDisabled(this.disabled);
+    }
+    writeValue(value) {
+        this.value = value;
+        this.radioService.select(value);
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioGroupComponent, deps: [{ token: RadioService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioGroupComponent, isStandalone: true, selector: "tolle-radio-group", inputs: { class: "class", disabled: "disabled", name: "name" }, providers: [
+            RadioService,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioGroupComponent),
+                multi: true
+            }
+        ], usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="cn('grid gap-2', class)" role="radiogroup">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-radio-group',
+                    standalone: true,
+                    imports: [CommonModule],
+                    providers: [
+                        RadioService,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioGroupComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div [class]="cn('grid gap-2', class)" role="radiogroup">
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: RadioService }], propDecorators: { class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class RadioItemComponent {
+    radioService;
+    cdr;
+    value;
+    disabled = false;
+    class = '';
+    isSelected = false;
+    groupDisabled = false;
+    sub = new Subscription();
+    get isEffectiveDisabled() {
+        return this.disabled || this.groupDisabled;
+    }
+    // Inject ChangeDetectorRef to ensure UI updates when service emits
+    constructor(radioService, cdr) {
+        this.radioService = radioService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        // Listen for selection changes
+        this.sub.add(this.radioService.selectedValue$.subscribe(val => {
+            this.isSelected = (val === this.value);
+            this.cdr.markForCheck(); // Trigger UI refresh
+        }));
+        // Listen for group-level disabled state
+        this.sub.add(this.radioService.disabled$.subscribe(dis => {
+            this.groupDisabled = dis;
+            this.cdr.markForCheck(); // Trigger UI refresh
+        }));
+    }
+    select() {
+        this.radioService.select(this.value);
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe(); // Clean up subscriptions
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioItemComponent, deps: [{ token: RadioService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioItemComponent, isStandalone: true, selector: "tolle-radio-item", inputs: { value: "value", disabled: "disabled", class: "class" }, ngImport: i0, template: `
+    <div
+      (click)="!isEffectiveDisabled && select()"
+      [class]="cn(
+        'flex items-center space-x-2 group py-1',
+        isEffectiveDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+      )"
+    >
+      <div [class]="cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary transition-all flex items-center justify-center',
+        'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        !isEffectiveDisabled && 'group-hover:border-primary/70',
+        isSelected ? 'bg-background' : 'bg-transparent',
+        class
+      )">
+        <div
+          *ngIf="isSelected"
+          class="h-2.5 w-2.5 rounded-full bg-primary animate-in zoom-in-50 duration-200"
+        ></div>
+      </div>
+
+      <label class="text-sm font-medium leading-none select-none" [class.cursor-pointer]="!isEffectiveDisabled">
+        <ng-content></ng-content>
+      </label>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-radio-item',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div
+      (click)="!isEffectiveDisabled && select()"
+      [class]="cn(
+        'flex items-center space-x-2 group py-1',
+        isEffectiveDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+      )"
+    >
+      <div [class]="cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary transition-all flex items-center justify-center',
+        'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        !isEffectiveDisabled && 'group-hover:border-primary/70',
+        isSelected ? 'bg-background' : 'bg-transparent',
+        class
+      )">
+        <div
+          *ngIf="isSelected"
+          class="h-2.5 w-2.5 rounded-full bg-primary animate-in zoom-in-50 duration-200"
+        ></div>
+      </div>
+
+      <label class="text-sm font-medium leading-none select-none" [class.cursor-pointer]="!isEffectiveDisabled">
+        <ng-content></ng-content>
+      </label>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: RadioService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -4248,5 +5299,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
-//# sourceMappingURL=tolle_-tolle-ui.mjs.map
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+//# sourceMappingURL=tolle-ui.mjs.map