@tolle_/tolle-ui 0.0.18-beta → 0.0.21-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, ViewChild, Injectable, Optional, HostListener, 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';
@@ -18,56 +18,48 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-const buttonVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background active:scale-[0.98]", {
+const buttonVariants = cva("tolle-button-base inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background active:scale-[0.98]", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/90",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "underline-offset-4 hover:underline text-primary",
+            link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
             default: "h-10 px-4 py-2",
             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" }
+        busy: { true: "tolle-button--busy 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;
     get computedClass() {
         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);
+        }), 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" }, host: { classAttribute: "tolle-button-wrapper inline-block align-middle" }, ngImport: i0, template: `
     <button
       [class]="computedClass"
       [disabled]="disabled || busy"
@@ -80,15 +72,19 @@ 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, 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,
-            args: [{ selector: 'tolle-button', standalone: true, imports: [CommonModule], template: `
+            args: [{
+                    selector: 'tolle-button',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
     <button
       [class]="computedClass"
       [disabled]="disabled || busy"
@@ -101,29 +97,30 @@ 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"] }]
+  `,
+                    host: {
+                        'class': 'tolle-button-wrapper inline-block align-middle'
+                    }
+                }]
         }], propDecorators: { class: [{
                 type: Input
             }], variant: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], block: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], busy: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }] } });
 
 class InputComponent {
     cdr;
+    inputElement;
     id = `input-${Math.random().toString(36).substr(2, 9)}`;
     label = '';
     hint = '';
@@ -137,12 +134,20 @@ class InputComponent {
     disabled = false;
     readonly = false;
     error = false;
+    // Focus behavior
+    hideHintOnFocus = true;
     value = '';
     onChange = () => { };
     onTouched = () => { };
+    isFocused = false;
     constructor(cdr) {
         this.cdr = cdr;
     }
+    ngAfterViewInit() {
+        if (this.inputElement?.nativeElement.hasAttribute('autofocus')) {
+            setTimeout(() => this.inputElement.nativeElement.focus());
+        }
+    }
     writeValue(value) {
         this.value = value;
         this.cdr.markForCheck();
@@ -160,66 +165,132 @@ class InputComponent {
         this.value = val;
         this.onChange(val);
     }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+    }
+    focusInput() {
+        if (!this.disabled && this.inputElement) {
+            this.inputElement.nativeElement.focus();
+        }
+    }
     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("group relative flex items-center w-full rounded-md border transition-all shadow-sm", "bg-background ring-offset-background", 
+        return cn(
+        // Base styles
+        "group relative flex items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        // Border and shadow
+        "border-input shadow-sm", 
         // 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 (Focus ring disabled for Readonly/Disabled)
-        !(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 bg-muted/30", this.readonly && "cursor-default bg-muted/10 border-dashed focus-within:ring-0", this.containerClass);
+        this.size === 'xs' && "h-8 px-2 gap-1.5 text-xs", this.size === 'sm' && "h-9 px-3 gap-2 text-sm", this.size === 'default' && "h-10 px-3 gap-2 text-sm", this.size === 'lg' && "h-11 px-4 gap-3 text-base", 
+        // Focus state - SIMPLE AND ELEGANT LIKE ZARDUI
+        // The magic happens in CSS: border darkens automatically on focus
+        !(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.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);
+        return cn(
+        // Base styles
+        "flex-1 bg-transparent border-none p-0", "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: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", type: "type", placeholder: "placeholder", size: "size", containerClass: "containerClass", class: "class", disabled: "disabled", readonly: "readonly", error: "error" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", type: "type", placeholder: "placeholder", size: "size", containerClass: "containerClass", class: "class", disabled: "disabled", readonly: "readonly", error: "error", hideHintOnFocus: "hideHintOnFocus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: `
     <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"
-      >
+        [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <div [class]="computedContainerClass">
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
         <input
+          #inputElement
           [id]="id"
           [type]="type"
           [placeholder]="placeholder"
           [disabled]="disabled"
           [readOnly]="readonly"
           [(ngModel)]="value"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           (input)="onInputChange($event)"
           [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
         />
 
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
       <ng-container *ngIf="!disabled">
-        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
           {{ hint }}
         </p>
-        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive px-1"
+        >
           {{ errorMessage }}
         </p>
       </ng-container>
@@ -244,46 +315,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <label
         *ngIf="label"
         [for]="id"
-        [class.opacity-50]="disabled"
-        class="text-sm font-medium text-foreground leading-none transition-opacity"
-      >
+        [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <div [class]="computedContainerClass">
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+      <div
+        [class]="computedContainerClass"
+        (click)="focusInput()"
+      >
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[prefix]"></ng-content>
         </div>
 
         <input
+          #inputElement
           [id]="id"
           [type]="type"
           [placeholder]="placeholder"
           [disabled]="disabled"
           [readOnly]="readonly"
           [(ngModel)]="value"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           (input)="onInputChange($event)"
           [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
         />
 
-        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
           <ng-content select="[suffix]"></ng-content>
         </div>
       </div>
 
       <ng-container *ngIf="!disabled">
-        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
           {{ hint }}
         </p>
-        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive px-1"
+        >
           {{ errorMessage }}
         </p>
       </ng-container>
     </div>
   `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -307,6 +394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], hideHintOnFocus: [{
+                type: Input
             }] } });
 
 class CardComponent {
@@ -314,7 +403,7 @@ class CardComponent {
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "tolle-card", inputs: { class: "class" }, ngImport: i0, template: `
-    <div [class]="cn('rounded-xl border border-border bg-card text-card-foreground shadow', class)">
+    <div [class]="cn('rounded-md border border-border bg-card text-card-foreground shadow', class)">
       <ng-content></ng-content>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -326,7 +415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     template: `
-    <div [class]="cn('rounded-xl border border-border bg-card text-card-foreground shadow', class)">
+    <div [class]="cn('rounded-md border border-border bg-card text-card-foreground shadow', class)">
       <ng-content></ng-content>
     </div>
   `,
@@ -505,6 +594,7 @@ class SelectComponent {
     readonly = false;
     trigger;
     popover;
+    container;
     items;
     sub = new Subscription();
     searchQuery = '';
@@ -528,15 +618,38 @@ class SelectComponent {
             this.close();
         }));
     }
-    // UPDATED: Centralized sizing logic for the trigger
+    // SIMPLIFIED: Zardui-inspired trigger styling
     get computedTriggerClass() {
-        return cn('flex w-full items-center justify-between rounded-md border transition-all shadow-sm', 'bg-background ring-offset-background placeholder:text-muted-foreground', 
+        return cn(
+        // Base styles
+        'flex w-full items-center justify-between rounded-md border transition-all duration-200', 'bg-background text-foreground', 
+        // Border and shadow
+        'border-input shadow-sm', 
         // Sizing
         this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', 
-        // Interaction States (Focus ring disabled for Readonly/Disabled)
-        !(this.readonly || this.disabled) && 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1', 
-        // Colors & Borders (Matching your Hex-based theme logic)
-        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30 border-input', this.readonly && 'cursor-default bg-muted/10 border-dashed border-input focus:ring-0', !this.disabled && !this.readonly && 'border-input hover:border-accent cursor-pointer', this.class);
+        // Focus state - SIMPLE LIKE ZARDUI
+        !(this.readonly || this.disabled) && [
+            'focus:outline-none',
+            'focus:ring-4',
+            'focus:ring-ring/30',
+            'focus:ring-offset-0',
+            'focus:shadow-none',
+            // Border darkens on focus automatically
+            'focus:border-primary/80'
+        ], 
+        // Hover state
+        !(this.readonly || this.disabled) && 'hover:border-accent', 
+        // Disabled state
+        this.disabled && [
+            'cursor-not-allowed opacity-50',
+            'border-opacity-50'
+        ], 
+        // Readonly state
+        this.readonly && [
+            'cursor-default',
+            'border-dashed',
+            !this.disabled && 'focus:ring-0 focus:border-opacity-100'
+        ], this.class);
     }
     // UPDATED: Dynamic icon sizing relative to the trigger size
     get iconClass() {
@@ -562,6 +675,8 @@ class SelectComponent {
     }
     open() {
         this.isOpen = true;
+        // Trigger focus on the button for focus styling
+        this.trigger.nativeElement.focus();
         // Tick to ensure DOM is rendered before positioning
         setTimeout(() => this.updatePosition());
     }
@@ -630,7 +745,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "items", predicate: SelectItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "items", predicate: SelectItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
     <div [class]="cn('w-full', 'size-' + size)" #container>
       <button
         type="button"
@@ -670,7 +785,7 @@ class SelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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,
@@ -746,6 +861,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
             }], items: [{
                 type: ContentChildren,
                 args: [SelectItemComponent, { descendants: true }]
@@ -938,7 +1056,7 @@ class BadgeComponent {
     get computedClass() {
         return cn(
         // Base styles - Pills are always rounded-full
-        'inline-flex items-center justify-center rounded-full border px-2 py-0.5 font-medium transition-colors gap-1', 
+        'inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium transition-colors gap-1', 
         // Variants (Google Dark Mode theme)
         this.variant === 'default' && 'border-transparent bg-primary text-primary-foreground', this.variant === 'secondary' && 'border-transparent bg-secondary text-secondary-foreground', this.variant === 'outline' && 'text-foreground border-border bg-transparent', this.variant === 'destructive' && 'border-transparent bg-destructive text-destructive-foreground', 
         // Sizing
@@ -956,7 +1074,7 @@ class BadgeComponent {
       <button
         *ngIf="removable"
         (click)="onRemove.emit($event)"
-        class="ml-1 -mr-1 rounded-full p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
+        class="ml-1 -mr-1 rounded-md p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
       >
         <i class="ri-close-line text-[1.1em]"></i>
       </button>
@@ -980,7 +1098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <button
         *ngIf="removable"
         (click)="onRemove.emit($event)"
-        class="ml-1 -mr-1 rounded-full p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
+        class="ml-1 -mr-1 rounded-md p-0.5 hover:bg-foreground/20 transition-colors outline-none focus:ring-1 focus:ring-ring"
       >
         <i class="ri-close-line text-[1.1em]"></i>
       </button>
@@ -1365,93 +1483,212 @@ class ThemeService {
         else {
             this.disableDarkMode();
         }
-        // 2. Apply Brand Config - This will generate full palette
-        if (this.config) {
-            this.applyBrandConfig(this.config);
+        const savedPrimary = localStorage.getItem('tolle-primary-color');
+        if (savedPrimary) {
+            this.setPrimaryColor(savedPrimary, false);
+        }
+        else if (this.config?.primaryColor) {
+            this.setPrimaryColor(this.config.primaryColor, false);
+        }
+        // Set radius from config
+        if (this.config?.radius) {
+            this.setRadius(this.config.radius, false);
         }
     }
     /**
-     * Applies the brand identity variables with full shade palette
+     * Sets the border radius for all components
      */
-    applyBrandConfig(config) {
+    setRadius(radius, persist = true) {
         if (!isPlatformBrowser(this.platformId))
             return;
         const root = this.document.documentElement;
-        // Set primary color if provided
-        if (config.primaryColor) {
-            this.renderer.setStyle(root, '--primary', config.primaryColor);
-            this.generatePrimaryShades(config.primaryColor);
+        // Set the CSS variable
+        this.renderer.setStyle(root, '--radius', radius);
+        // Also update the dynamic styles to include radius calculations
+        this.updateRadiusInDynamicStyles(radius);
+        // Persist if needed
+        if (persist) {
+            localStorage.setItem('tolle-radius', radius);
         }
-        // Set border radius if provided
-        if (config.radius) {
-            this.renderer.setStyle(root, '--radius', config.radius);
+    }
+    /**
+     * Updates the radius calculations in dynamic styles
+     */
+    updateRadiusInDynamicStyles(radius) {
+        const existingStyle = this.document.getElementById(this.styleId);
+        if (existingStyle) {
+            let css = existingStyle.textContent || '';
+            // Update or add radius calculations
+            if (css.includes('--radius:')) {
+                // Replace existing radius declarations
+                css = css.replace(/--radius:[^;]+;/g, `--radius: ${radius};`);
+            }
+            else {
+                // Add radius to the beginning of :root
+                css = css.replace(/:root\s*{/, `:root {\n      --radius: ${radius};`);
+            }
+            // Update the calculated radius values in the CSS
+            const radiusCalcRegex = /calc\(var\(--radius[^)]+\)/g;
+            css = css.replace(radiusCalcRegex, (match) => {
+                if (match.includes('- 2px')) {
+                    return `calc(${radius} - 2px)`;
+                }
+                else if (match.includes('- 4px')) {
+                    return `calc(${radius} - 4px)`;
+                }
+                return match;
+            });
+            existingStyle.textContent = css;
         }
     }
     /**
      * Generates full primary color palette (50-900) based on base color
-     * Uses color-mix() for consistency with your existing approach
      */
     generatePrimaryShades(baseColor) {
+        // Convert hex to RGB
+        const rgb = this.hexToRgb(baseColor);
+        const rgbString = rgb ? `${rgb.r} ${rgb.g} ${rgb.b}` : '37 99 235';
+        // Create lighter ring colors in RGB
+        const ringLight = this.lightenColor(baseColor, 40);
+        const ringLightRgb = this.hexToRgb(ringLight);
+        const ringLightRgbString = ringLightRgb ? `${ringLightRgb.r} ${ringLightRgb.g} ${ringLightRgb.b}` : '96 165 250';
+        const ringDark = this.lightenColor(baseColor, 20);
+        const ringDarkRgb = this.hexToRgb(ringDark);
+        const ringDarkRgbString = ringDarkRgb ? `${ringDarkRgb.r} ${ringDarkRgb.g} ${ringDarkRgb.b}` : '147 197 253';
+        // Get current radius or use default
+        const root = this.document.documentElement;
+        const currentRadius = getComputedStyle(root).getPropertyValue('--radius').trim() || '0.5rem';
         const css = `
+      /* Override primary colors - this needs to come AFTER your main CSS */
       :root {
-        /* Primary Shades */
-        --primary-50: color-mix(in srgb, ${baseColor}, white 90%);
-        --primary-100: color-mix(in srgb, ${baseColor}, white 80%);
-        --primary-200: color-mix(in srgb, ${baseColor}, white 60%);
-        --primary-300: color-mix(in srgb, ${baseColor}, white 40%);
-        --primary-400: color-mix(in srgb, ${baseColor}, white 20%);
-        --primary-500: ${baseColor};
-        --primary-600: color-mix(in srgb, ${baseColor}, black 20%);
-        --primary-700: color-mix(in srgb, ${baseColor}, black 40%);
-        --primary-800: color-mix(in srgb, ${baseColor}, black 60%);
-        --primary-900: color-mix(in srgb, ${baseColor}, black 80%);
-
-        /* Your existing derived colors - updated to use new shades */
-        --primary-foreground: white;
-        --secondary: color-mix(in srgb, var(--primary-200), transparent 40%);
-        --secondary-foreground: var(--primary-900);
-        --muted: color-mix(in srgb, var(--primary-50), #f3f4f6 50%);
-        --muted-foreground: color-mix(in srgb, var(--primary-400), #4b5563 60%);
-        --accent: color-mix(in srgb, var(--primary-100), transparent 70%);
-        --accent-foreground: var(--primary-700);
-        --ring: color-mix(in srgb, var(--primary-300), transparent 50%);
+        /* Primary in RGB format for Tailwind opacity support */
+        --primary: ${rgbString};
+        --primary-foreground: ${this.getContrastColorRgb(baseColor)};
+
+        /* Radius */
+        --radius: ${currentRadius};
+
+        /* Primary shades for light mode */
+        --primary-50: ${this.hexToRgbString(this.lightenColor(baseColor, 90))};
+        --primary-100: ${this.hexToRgbString(this.lightenColor(baseColor, 80))};
+        --primary-200: ${this.hexToRgbString(this.lightenColor(baseColor, 60))};
+        --primary-300: ${this.hexToRgbString(this.lightenColor(baseColor, 40))};
+        --primary-400: ${this.hexToRgbString(this.lightenColor(baseColor, 20))};
+        --primary-500: ${rgbString};
+        --primary-600: ${this.hexToRgbString(this.darkenColor(baseColor, 20))};
+        --primary-700: ${this.hexToRgbString(this.darkenColor(baseColor, 40))};
+        --primary-800: ${this.hexToRgbString(this.darkenColor(baseColor, 60))};
+        --primary-900: ${this.hexToRgbString(this.darkenColor(baseColor, 80))};
+
+        /* Update ring color to be lighter */
+        --ring: ${ringLightRgbString};
       }
 
       .dark {
-        /* Dark mode variants */
-        --primary-50: color-mix(in srgb, ${baseColor}, black 85%);
-        --primary-100: color-mix(in srgb, ${baseColor}, black 75%);
-        --primary-200: color-mix(in srgb, ${baseColor}, black 65%);
-        --primary-300: color-mix(in srgb, ${baseColor}, black 55%);
-        --primary-400: color-mix(in srgb, ${baseColor}, black 45%);
-        --primary-500: ${baseColor};
-        --primary-600: color-mix(in srgb, ${baseColor}, white 20%);
-        --primary-700: color-mix(in srgb, ${baseColor}, white 35%);
-        --primary-800: color-mix(in srgb, ${baseColor}, white 50%);
-        --primary-900: color-mix(in srgb, ${baseColor}, white 65%);
-
-        /* Dark mode derived colors */
-        --primary-foreground: color-mix(in srgb, ${baseColor}, white 90%);
-        --secondary: color-mix(in srgb, var(--primary-900), transparent 70%);
-        --secondary-foreground: var(--primary-100);
-        --muted: color-mix(in srgb, var(--primary-950), #1f2937 50%);
-        --muted-foreground: color-mix(in srgb, var(--primary-300), #9ca3af 40%);
-        --accent: color-mix(in srgb, var(--primary-800), transparent 80%);
-        --accent-foreground: var(--primary-200);
-        --ring: color-mix(in srgb, var(--primary-600), transparent 60%);
+        /* For dark mode, we keep the primary color but adjust shades */
+        --primary: ${rgbString};
+        --primary-foreground: ${this.getContrastColorRgb(baseColor)};
+
+        /* Dark mode shades */
+        --primary-50: ${this.hexToRgbString(this.darkenColor(baseColor, 85))};
+        --primary-100: ${this.hexToRgbString(this.darkenColor(baseColor, 75))};
+        --primary-200: ${this.hexToRgbString(this.darkenColor(baseColor, 65))};
+        --primary-300: ${this.hexToRgbString(this.darkenColor(baseColor, 55))};
+        --primary-400: ${this.hexToRgbString(this.darkenColor(baseColor, 45))};
+        --primary-500: ${rgbString};
+        --primary-600: ${this.hexToRgbString(this.lightenColor(baseColor, 20))};
+        --primary-700: ${this.hexToRgbString(this.lightenColor(baseColor, 35))};
+        --primary-800: ${this.hexToRgbString(this.lightenColor(baseColor, 50))};
+        --primary-900: ${this.hexToRgbString(this.lightenColor(baseColor, 65))};
+
+        /* Update ring color for dark mode - lighter variant */
+        --ring: ${ringDarkRgbString};
       }
     `;
         this.injectDynamicStyles(css);
     }
+    /**
+     * Convert hex color to RGB object
+     */
+    hexToRgb(hex) {
+        // Remove # if present
+        const cleanedHex = hex.replace('#', '');
+        let r = 0, g = 0, b = 0;
+        if (cleanedHex.length === 3) {
+            r = parseInt(cleanedHex[0] + cleanedHex[0], 16);
+            g = parseInt(cleanedHex[1] + cleanedHex[1], 16);
+            b = parseInt(cleanedHex[2] + cleanedHex[2], 16);
+            return { r, g, b };
+        }
+        if (cleanedHex.length === 6) {
+            r = parseInt(cleanedHex.substring(0, 2), 16);
+            g = parseInt(cleanedHex.substring(2, 4), 16);
+            b = parseInt(cleanedHex.substring(4, 6), 16);
+            return { r, g, b };
+        }
+        return null;
+    }
+    /**
+     * Convert hex to RGB string format for CSS (space-separated)
+     */
+    hexToRgbString(hexColor) {
+        const rgb = this.hexToRgb(hexColor);
+        return rgb ? `${rgb.r} ${rgb.g} ${rgb.b}` : '37 99 235';
+    }
+    /**
+     * Get contrast color in RGB format
+     */
+    getContrastColorRgb(hexColor) {
+        const contrast = this.getContrastColor(hexColor);
+        const rgb = this.hexToRgb(contrast);
+        return rgb ? `${rgb.r} ${rgb.g} ${rgb.b}` : '255 255 255';
+    }
+    /**
+     * Lighten a hex color by a percentage
+     */
+    lightenColor(color, percent) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return color;
+        // Lighten by percentage
+        const r = Math.min(255, Math.floor(rgb.r + (255 - rgb.r) * (percent / 100)));
+        const g = Math.min(255, Math.floor(rgb.g + (255 - rgb.g) * (percent / 100)));
+        const b = Math.min(255, Math.floor(rgb.b + (255 - rgb.b) * (percent / 100)));
+        // Convert back to hex
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    }
+    /**
+     * Darken a hex color by a percentage
+     */
+    darkenColor(color, percent) {
+        const rgb = this.hexToRgb(color);
+        if (!rgb)
+            return color;
+        const factor = 1 - (percent / 100);
+        const r = Math.max(0, Math.floor(rgb.r * factor));
+        const g = Math.max(0, Math.floor(rgb.g * factor));
+        const b = Math.max(0, Math.floor(rgb.b * factor));
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    /**
+     * Calculate contrast color (black or white) based on background color
+     */
+    getContrastColor(hexColor) {
+        const rgb = this.hexToRgb(hexColor);
+        if (!rgb)
+            return '#ffffff';
+        // Calculate relative luminance
+        const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+        // Return black for light colors, white for dark colors
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
     injectDynamicStyles(css) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        // Remove existing dynamic styles
         const existingStyle = this.document.getElementById(this.styleId);
         if (existingStyle) {
             existingStyle.remove();
         }
-        // Create and inject new styles
         const styleElement = this.document.createElement('style');
         styleElement.id = this.styleId;
         styleElement.textContent = css;
@@ -1471,9 +1708,61 @@ class ThemeService {
         localStorage.setItem('tolle-theme', 'light');
         this.isDarkSubject.next(false);
     }
+    setPrimaryColor(color, persist = true) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.generatePrimaryShades(color);
+        // Also set inline for immediate update
+        const rgb = this.hexToRgb(color);
+        if (rgb) {
+            this.renderer.setStyle(this.document.documentElement, '--primary', `${rgb.r} ${rgb.g} ${rgb.b}`);
+        }
+        if (persist) {
+            localStorage.setItem('tolle-primary-color', color);
+        }
+    }
     get currentTheme() {
         return this.isDarkSubject.value ? 'dark' : 'light';
     }
+    get primaryColor() {
+        if (!isPlatformBrowser(this.platformId))
+            return null;
+        const root = this.document.documentElement;
+        const cssValue = getComputedStyle(root).getPropertyValue('--primary').trim();
+        if (cssValue && cssValue !== '') {
+            // Convert RGB string back to hex for external use
+            const rgbParts = cssValue.split(' ').map(Number);
+            if (rgbParts.length === 3) {
+                return `#${rgbParts[0].toString(16).padStart(2, '0')}${rgbParts[1].toString(16).padStart(2, '0')}${rgbParts[2].toString(16).padStart(2, '0')}`;
+            }
+        }
+        return localStorage.getItem('tolle-primary-color');
+    }
+    get radius() {
+        if (!isPlatformBrowser(this.platformId))
+            return null;
+        const root = this.document.documentElement;
+        const cssValue = getComputedStyle(root).getPropertyValue('--radius').trim();
+        if (cssValue && cssValue !== '') {
+            return cssValue;
+        }
+        return localStorage.getItem('tolle-radius') || '0.5rem';
+    }
+    /**
+     * Applies the brand identity variables with full shade palette
+     */
+    applyBrandConfig(config) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Set primary color if provided
+        if (config.primaryColor) {
+            this.setPrimaryColor(config.primaryColor, false);
+        }
+        // Set border radius if provided
+        if (config.radius) {
+            this.setRadius(config.radius, false);
+        }
+    }
     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' });
 }
@@ -1655,7 +1944,7 @@ class MultiSelectComponent {
         </div>
       </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.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"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, 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.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"] }, { 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: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2038,18 +2327,26 @@ 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;
+    hideHintOnFocus = true;
     inputEl;
     hasPrefix = false;
     hasSuffix = false;
     displayValue = '';
+    isFocused = false;
     tokens = {
         '0': /\d/, '9': /\d/, 'a': /[a-z]/i, 'A': /[a-z]/i, '*': /[a-z0-9]/i
     };
@@ -2059,7 +2356,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 +2365,76 @@ class MaskedInputComponent {
             this.cdr.detectChanges();
         }
     }
+    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
+        "group relative flex items-center w-full rounded-md border transition-all duration-200", "bg-background", 
+        // Border and shadow
+        "border-input shadow-sm", 
+        // Sizing
+        this.size === 'xs' && "h-8 px-2 gap-1.5 text-xs", this.size === 'sm' && "h-9 px-3 gap-2 text-sm", this.size === 'default' && "h-10 px-3 gap-2 text-sm", this.size === 'lg' && "h-11 px-4 gap-3 text-base", 
+        // Focus state - SIMPLE LIKE ZARDUI
+        !(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.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(
+        // Base styles
+        "flex-1 bg-transparent border-none p-0", "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);
+    }
+    focusInput() {
+        if (!this.disabled && this.inputEl) {
+            this.inputEl.nativeElement.focus();
+        }
+    }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
     }
     // --- 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);
@@ -2107,47 +2468,90 @@ class MaskedInputComponent {
         }
         return formatted;
     }
-    unmask(val) { return val.replace(/[^a-zA-Z0-9]/g, ''); }
+    unmask(val) {
+        return val.replace(/[^a-zA-Z0-9]/g, '');
+    }
     writeValue(value) {
         this.displayValue = value ? this.applyMask(this.unmask(value.toString())) : '';
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    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", hideHintOnFocus: "hideHintOnFocus" }, 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]="computedLabelClass"
+      >
+        {{ 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"
+        (click)="focusInput()"
+      >
+        <!-- Prefix Icon -->
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
+          <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)="onBlur()"
+          (focus)="onFocus()"
+          [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
+        />
 
-      <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 duration-200">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          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 +2567,74 @@ 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]="computedLabelClass"
+      >
+        {{ 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"
+        (click)="focusInput()"
+      >
+        <!-- Prefix Icon -->
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors duration-200">
+          <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)="onBlur()"
+          (focus)="onFocus()"
+          [class]="computedInputClass"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
+        />
 
-      <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 duration-200">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          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,14 +2642,20 @@ 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: [{
                 type: Input
             }], returnRaw: [{
                 type: Input
+            }], hideHintOnFocus: [{
+                type: Input
             }], inputEl: [{
                 type: ViewChild,
                 args: ['inputEl', { static: true }]
@@ -2356,7 +2808,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", "hideHintOnFocus"] }, { 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,
@@ -2948,7 +3400,7 @@ class DataTableComponent {
         (onPageSizeChange)="updatePage()"
       ></tolle-pagination>
     </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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { 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: DataTableComponent, decorators: [{
             type: Component,
@@ -3858,7 +4310,7 @@ class DateRangePickerComponent {
         ></tolle-range-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: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
+  `, 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: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { 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: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -4076,30 +4528,69 @@ class TextareaComponent {
     label = '';
     placeholder = '';
     hint = '';
+    errorMessage = '';
     rows = 3;
     maxLength;
     showCharacterCount = false;
     autoGrow = false;
     error = false;
     className = '';
+    // Focus behavior
+    hideHintOnFocus = true;
+    hideCharacterCountOnFocus = false;
     // New States
     disabled = false;
     readonly = false;
     value = '';
+    isFocused = false;
     onChange = () => { };
     onTouched = () => { };
     ngAfterViewInit() {
         if (this.autoGrow)
             this.resize();
     }
+    get computedLabelClass() {
+        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+    }
     get textareaClasses() {
-        return cn('flex w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 shadow-sm', 'placeholder:text-muted-foreground focus-visible:outline-none', 
-        // Focus States (Disabled only when readonly or disabled is true)
-        !(this.readonly || this.disabled) && 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', 
-        // 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);
+        return cn(
+        // Base styles
+        'flex w-full rounded-md border bg-background px-3 py-2 text-sm', 'ring-offset-background transition-all duration-200', 'placeholder:text-muted-foreground', 
+        // Border and shadow
+        'border-input shadow-sm', 
+        // Minimum height
+        'min-h-[80px]', 
+        // Focus state - SIMPLE LIKE ZARDUI
+        !(this.readonly || this.disabled) && [
+            'focus:outline-none',
+            'focus:ring-4',
+            'focus:ring-ring/30',
+            'focus:ring-offset-0',
+            'focus:shadow-none',
+            // Border darkens on focus automatically
+            'focus:border-primary/80'
+        ], 
+        // Error state
+        this.error && [
+            'border-destructive',
+            !(this.readonly || this.disabled) && [
+                'focus:border-destructive/80',
+                'focus: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:ring-0 focus:border-opacity-100'
+        ], 
+        // Scrollbar styling
+        'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', this.className);
     }
     handleInput(event) {
         if (this.readonly || this.disabled)
@@ -4110,6 +4601,13 @@ class TextareaComponent {
         if (this.autoGrow)
             this.resize();
     }
+    onFocus() {
+        this.isFocused = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        this.onTouched();
+    }
     resize() {
         const textarea = this.textareaElement.nativeElement;
         textarea.style.height = 'auto';
@@ -4120,11 +4618,17 @@ class TextareaComponent {
         if (this.autoGrow)
             setTimeout(() => this.resize());
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "tolle-textarea", inputs: { id: "id", label: "label", placeholder: "placeholder", hint: "hint", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoGrow: "autoGrow", error: "error", className: "className", disabled: "disabled", readonly: "readonly" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "tolle-textarea", inputs: { id: "id", label: "label", placeholder: "placeholder", hint: "hint", errorMessage: "errorMessage", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoGrow: "autoGrow", error: "error", className: "className", hideHintOnFocus: "hideHintOnFocus", hideCharacterCountOnFocus: "hideCharacterCountOnFocus", disabled: "disabled", readonly: "readonly" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
@@ -4132,9 +4636,11 @@ class TextareaComponent {
             }
         ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: `
     <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
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass"
+      >
         {{ label }}
       </label>
 
@@ -4148,16 +4654,37 @@ class TextareaComponent {
           [rows]="rows"
           [(ngModel)]="value"
           (input)="handleInput($event)"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           [class]="textareaClasses"
           [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
           [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
+          [attr.maxlength]="maxLength"
         ></textarea>
       </div>
 
-      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
-        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
-        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+      <div *ngIf="(showCharacterCount || hint || errorMessage) && !disabled" class="flex justify-between items-center px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive"
+        >
+          {{ errorMessage }}
+        </p>
+        <p
+          *ngIf="showCharacterCount"
+          class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideCharacterCountOnFocus"
+        >
           {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
         </p>
       </div>
@@ -4179,9 +4706,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
     <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
+        *ngIf="label"
+        [for]="id"
+        [class]="computedLabelClass"
+      >
         {{ label }}
       </label>
 
@@ -4195,16 +4724,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [rows]="rows"
           [(ngModel)]="value"
           (input)="handleInput($event)"
-          (blur)="onTouched()"
+          (blur)="onBlur()"
+          (focus)="onFocus()"
           [class]="textareaClasses"
           [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
           [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+          [attr.aria-invalid]="error"
+          [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
+          [attr.maxlength]="maxLength"
         ></textarea>
       </div>
 
-      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
-        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
-        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+      <div *ngIf="(showCharacterCount || hint || errorMessage) && !disabled" class="flex justify-between items-center px-1">
+        <p
+          *ngIf="hint && !error"
+          class="text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus"
+        >
+          {{ hint }}
+        </p>
+        <p
+          *ngIf="error && errorMessage"
+          [id]="id + '-error'"
+          class="text-xs text-destructive"
+        >
+          {{ errorMessage }}
+        </p>
+        <p
+          *ngIf="showCharacterCount"
+          class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideCharacterCountOnFocus"
+        >
           {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
         </p>
       </div>
@@ -4222,6 +4772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
+            }], errorMessage: [{
+                type: Input
             }], rows: [{
                 type: Input
             }], maxLength: [{
@@ -4234,12 +4786,989 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], className: [{
                 type: Input
+            }], hideHintOnFocus: [{
+                type: Input
+            }], hideCharacterCountOnFocus: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
                 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;
+    isLast = false;
+    class = '';
+    cn = cn;
+    get computedClass() {
+        return cn(
+        // Base styles (matching input container)
+        'relative flex h-10 w-10 items-center justify-center', 'transition-all duration-200', 'text-center font-medium select-none', 
+        // Border styling - exactly like input
+        'border border-input shadow-sm bg-background', 
+        // FOCUS STYLING - EXACTLY LIKE INPUT COMPONENT
+        this.isActive && [
+            // Darker border on focus
+            'border-primary/80',
+            // Remove shadow on focus
+            'shadow-none',
+            // Focus ring with same styling as input
+            'ring-4',
+            'ring-ring/30',
+            'ring-offset-0',
+            // Ensure it's above other slots
+            'z-10'
+        ], 
+        // Filled state
+        this.char && !this.isActive && 'border-primary/60', 
+        // Border radius
+        this.isFirst && 'rounded-l-md', this.isLast && 'rounded-r-md', 
+        // Remove left border for all but first slot
+        !this.isFirst && '-ml-px', this.class);
+    }
+    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]="computedClass">
+      <span class="text-lg font-medium">{{ char || '' }}</span>
+      <div *ngIf="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-6 w-0.5 animate-caret-blink bg-foreground"></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]="computedClass">
+      <span class="text-lg font-medium">{{ char || '' }}</span>
+      <div *ngIf="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-6 w-0.5 animate-caret-blink bg-foreground"></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 +5777,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