@tolle_/tolle-ui 0.0.1-beta

package/fesm2022/tolle_-tolle-ui.mjs

@@ -0,0 +1,3553 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as i0 from '@angular/core';
+import { Component, Input, forwardRef, Optional, HostListener, Injectable, ViewChild, ContentChildren, EventEmitter, Output, Directive, InjectionToken, inject, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { cva } from 'class-variance-authority';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import * as i1 from '@tolle/ui/select.service';
+import { Subject, Subscription } from 'rxjs';
+import { BadgeComponent as BadgeComponent$1 } from '@tolle/ui/badge.component';
+import { InputComponent as InputComponent$1 } from '@tolle/ui/input.component';
+import { startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval, subMonths, subYears, addMonths, addYears, isSameMonth, setMonth, setYear, isSameDay, isToday, isBefore, startOfDay, parse, isValid, format, isWithinInterval } from 'date-fns';
+import { SelectComponent as SelectComponent$1, SelectItemComponent as SelectItemComponent$1 } from '@tolle/ui';
+import { PaginationComponent as PaginationComponent$1 } from '@tolle/ui/pagination.component';
+import { TolleCellDirective as TolleCellDirective$1 } from '@tolle/ui/tolle-cell.directive';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+// 1. Define Component Variants (The "Recipe")
+const buttonVariants = cva(
+// Base styles applied to ALL buttons
+"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors 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", {
+    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",
+            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",
+        },
+        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",
+            "icon-xs": "h-8 w-8",
+            "icon-sm": "h-9 w-9",
+            icon: "h-10 w-10",
+            "icon-lg": "h-11 w-11",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+class ButtonComponent {
+    // Allow consumers to pass a custom class to override styles
+    class = '';
+    // Expose the variants as Inputs
+    variant = 'default';
+    size = 'default';
+    // Calculate the final string of classes
+    get computedClass() {
+        return cn(buttonVariants({ variant: this.variant, size: this.size }), this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size" }, ngImport: i0, template: `
+    <button [class]="computedClass">
+     <span class="flex items-center justify-center gap-2 w-full h-full">
+        <ng-content></ng-content>
+      </span>
+    </button>
+  `, isInline: true, styles: [":host ::ng-deep i{display:inline-flex;align-items:center;line-height:1;font-size:1.25em}:host ::ng-deep i:not(:only-child){margin-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+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: `
+    <button [class]="computedClass">
+     <span class="flex items-center justify-center gap-2 w-full h-full">
+        <ng-content></ng-content>
+      </span>
+    </button>
+  `, styles: [":host ::ng-deep i{display:inline-flex;align-items:center;line-height:1;font-size:1.25em}:host ::ng-deep i:not(:only-child){margin-right:.5rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class InputComponent {
+    cdr;
+    type = 'text';
+    placeholder = '';
+    disabled = false;
+    error = false;
+    size = 'default';
+    containerClass = '';
+    class = '';
+    // Internal State
+    value = '';
+    // CVA Callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    // --- ControlValueAccessor Implementation ---
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onInputChange(event) {
+        const val = event.target.value;
+        this.value = val;
+        this.onChange(val);
+    }
+    // --- Styling Logic ---
+    cn = cn;
+    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);
+    }
+    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: { type: "type", placeholder: "placeholder", disabled: "disabled", error: "error", size: "size", containerClass: "containerClass", class: "class" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div [class]="cn('relative flex items-center w-full group', 'size-' + size, containerClass)">
+
+      <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>
+
+      <input
+        [type]="type"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [(ngModel)]="value"
+        (blur)="onTouched()"
+        (input)="onInputChange($event)"
+        [class]="computedInputClass"
+      />
+
+      <div class="absolute right-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
+           [class.right-2.5]="size === 'xs'">
+        <ng-content select="[suffix]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: InputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-input',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div [class]="cn('relative flex items-center w-full group', 'size-' + size, containerClass)">
+
+      <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>
+
+      <input
+        [type]="type"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [(ngModel)]="value"
+        (blur)="onTouched()"
+        (input)="onInputChange($event)"
+        [class]="computedInputClass"
+      />
+
+      <div class="absolute right-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
+           [class.right-2.5]="size === 'xs'">
+        <ng-content select="[suffix]"></ng-content>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class CardComponent {
+    class = '';
+    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)">
+      <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: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-card',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="cn('rounded-xl border border-border bg-card text-card-foreground shadow', class)">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+class CardHeaderComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardHeaderComponent, isStandalone: true, selector: "tolle-card-header", inputs: { class: "class" }, ngImport: i0, template: `<div [class]="cn('flex flex-col space-y-1.5 p-6', class)"><ng-content></ng-content></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-card-header',
+                    standalone: true,
+                    template: `<div [class]="cn('flex flex-col space-y-1.5 p-6', class)"><ng-content></ng-content></div>`,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+class CardTitleComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardTitleComponent, isStandalone: true, selector: "tolle-card-title", inputs: { class: "class" }, ngImport: i0, template: `<h3 [class]="cn('font-semibold leading-none tracking-tight', class)"><ng-content></ng-content></h3>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-card-title',
+                    standalone: true,
+                    template: `<h3 [class]="cn('font-semibold leading-none tracking-tight', class)"><ng-content></ng-content></h3>`,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+class CardContentComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardContentComponent, isStandalone: true, selector: "tolle-card-content", inputs: { class: "class" }, ngImport: i0, template: `<div [class]="cn('p-6 pt-0', class)"><ng-content></ng-content></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-card-content',
+                    standalone: true,
+                    template: `<div [class]="cn('p-6 pt-0', class)"><ng-content></ng-content></div>`,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+class CardFooterComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardFooterComponent, isStandalone: true, selector: "tolle-card-footer", inputs: { class: "class" }, ngImport: i0, template: `<div [class]="cn('flex items-center p-6 pt-0', class)"><ng-content></ng-content></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-card-footer',
+                    standalone: true,
+                    template: `<div [class]="cn('flex items-center p-6 pt-0', class)"><ng-content></ng-content></div>`,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class SelectItemComponent {
+    selectService;
+    el;
+    value;
+    class = '';
+    selected = false;
+    hidden = false;
+    constructor(selectService, el) {
+        this.selectService = selectService;
+        this.el = el;
+    }
+    // Helper method for the parent to get the searchable text
+    getLabel() {
+        return this.el.nativeElement.innerText || '';
+    }
+    onClick(event) {
+        if (this.hidden)
+            return;
+        event.stopPropagation();
+        if (this.selectService) {
+            // Get the text content to show in the trigger button
+            const label = this.el.nativeElement.innerText.trim();
+            this.selectService.registerClick(this.value, label);
+        }
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectItemComponent, deps: [{ token: i1.SelectService, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectItemComponent, isStandalone: true, selector: "tolle-select-item", inputs: { value: "value", class: "class", selected: "selected" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `
+    <div
+      *ngIf="!hidden"
+      [class]="cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground  transition-colors',
+        selected ? 'bg-accent text-accent-foreground' : '',
+        class
+      )"
+    >
+      <span *ngIf="selected" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <i class="ri-check-line text-primary"></i>
+      </span>
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-select-item',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div
+      *ngIf="!hidden"
+      [class]="cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground  transition-colors',
+        selected ? 'bg-accent text-accent-foreground' : '',
+        class
+      )"
+    >
+      <span *ngIf="selected" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <i class="ri-check-line text-primary"></i>
+      </span>
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i1.SelectService, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }], propDecorators: { value: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class SelectService {
+    // Emits the value of the clicked item
+    selectedValueSource = new Subject();
+    selectedValue$ = this.selectedValueSource.asObservable();
+    // Emits the label/text of the clicked item
+    selectedLabelSource = new Subject();
+    selectedLabel$ = this.selectedLabelSource.asObservable();
+    registerClick(value, label) {
+        this.selectedValueSource.next(value);
+        this.selectedLabelSource.next(label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectService, decorators: [{
+            type: Injectable
+        }] });
+
+class SelectComponent {
+    selectService;
+    placeholder = 'Select an option';
+    class = '';
+    disabled = false;
+    searchable = false;
+    size = 'default';
+    trigger;
+    popover;
+    items;
+    sub = new Subscription();
+    searchQuery = '';
+    noResults = false;
+    isOpen = false;
+    value = null;
+    selectedLabel = '';
+    cleanupAutoUpdate;
+    onChange = () => { };
+    onTouched = () => { };
+    cn = cn;
+    constructor(selectService) {
+        this.selectService = selectService;
+        this.sub.add(this.selectService.selectedValue$.subscribe(val => {
+            this.value = val;
+            this.onChange(val);
+            this.updateItemSelection();
+        }));
+        this.sub.add(this.selectService.selectedLabel$.subscribe(label => {
+            this.selectedLabel = label;
+            this.close();
+        }));
+    }
+    // UPDATED: Centralized sizing logic for the trigger
+    get computedTriggerClass() {
+        return cn('flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all', 'disabled:opacity-50 shadow-sm transition-shadow', 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', this.class);
+    }
+    // UPDATED: Dynamic icon sizing relative to the trigger size
+    get iconClass() {
+        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]');
+    }
+    ngAfterContentInit() {
+        this.updateItemSelection();
+        this.items.changes.subscribe(() => this.updateItemSelection());
+    }
+    updateItemSelection() {
+        if (this.items) {
+            this.items.forEach(item => {
+                item.selected = item.value === this.value;
+            });
+        }
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        // Tick to ensure DOM is rendered before positioning
+        setTimeout(() => this.updatePosition());
+    }
+    close() {
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.onSearchChange('');
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+    }
+    updatePosition() {
+        if (!this.trigger || !this.popover)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(this.trigger.nativeElement, this.popover.nativeElement, () => {
+            computePosition(this.trigger.nativeElement, this.popover.nativeElement, {
+                placement: 'bottom-start',
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.popover.nativeElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    visibility: 'visible',
+                });
+            });
+        });
+    }
+    onSearchChange(query) {
+        const filter = (query || '').toLowerCase().trim();
+        let visibleCount = 0;
+        this.items.forEach(item => {
+            const text = item.getLabel().toLowerCase();
+            const isVisible = text.includes(filter);
+            item.hidden = !isVisible;
+            if (isVisible)
+                visibleCount++;
+        });
+        this.noResults = visibleCount === 0 && filter !== '';
+    }
+    onDocumentClick(event) {
+        if (this.isOpen && !this.trigger.nativeElement.contains(event.target) && !this.popover.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        this.updateItemSelection();
+        if (this.items) {
+            const found = this.items.find(i => i.value === value);
+            if (found)
+                this.selectedLabel = found.getLabel();
+        }
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, providers: [
+            SelectService,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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: `
+    <div [class]="cn('relative w-full', 'size-' + size)" #container>
+      <button
+        type="button"
+        #trigger
+        (click)="toggle()"
+        [disabled]="disabled"
+        [class]="computedTriggerClass"
+      >
+        <span class="truncate" [class.text-muted-foreground]="!selectedLabel">
+          {{ selectedLabel || placeholder }}
+        </span>
+        <i [class]="iconClass"></i>
+      </button>
+
+      <div
+        #popover
+        *ngIf="isOpen"
+        class="absolute bg-popover z-50 min-w-full overflow-hidden rounded-md border border-border text-popover-foreground bg-background shadow-md"
+        style="visibility: hidden; top: 0; left: 0;"
+      >
+        <div *ngIf="searchable" class="p-2 border-b border-border bg-popover">
+          <tolle-input
+            size="xs"
+            placeholder="Search..."
+            [(ngModel)]="searchQuery"
+            (ngModelChange)="onSearchChange($event)"
+            class="w-full">
+            <i prefix class="ri-search-line"></i>
+          </tolle-input>
+        </div>
+
+        <div class="p-1 max-h-60 overflow-y-auto">
+          <ng-content></ng-content>
+          <div *ngIf="noResults" class="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-select',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, InputComponent],
+                    providers: [
+                        SelectService,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div [class]="cn('relative w-full', 'size-' + size)" #container>
+      <button
+        type="button"
+        #trigger
+        (click)="toggle()"
+        [disabled]="disabled"
+        [class]="computedTriggerClass"
+      >
+        <span class="truncate" [class.text-muted-foreground]="!selectedLabel">
+          {{ selectedLabel || placeholder }}
+        </span>
+        <i [class]="iconClass"></i>
+      </button>
+
+      <div
+        #popover
+        *ngIf="isOpen"
+        class="absolute bg-popover z-50 min-w-full overflow-hidden rounded-md border border-border text-popover-foreground bg-background shadow-md"
+        style="visibility: hidden; top: 0; left: 0;"
+      >
+        <div *ngIf="searchable" class="p-2 border-b border-border bg-popover">
+          <tolle-input
+            size="xs"
+            placeholder="Search..."
+            [(ngModel)]="searchQuery"
+            (ngModelChange)="onSearchChange($event)"
+            class="w-full">
+            <i prefix class="ri-search-line"></i>
+          </tolle-input>
+        </div>
+
+        <div class="p-1 max-h-60 overflow-y-auto">
+          <ng-content></ng-content>
+          <div *ngIf="noResults" class="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: SelectService }], propDecorators: { placeholder: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], items: [{
+                type: ContentChildren,
+                args: [SelectItemComponent, { descendants: true }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class SelectGroupComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectGroupComponent, isStandalone: true, selector: "tolle-select-group", inputs: { class: "class" }, ngImport: i0, template: `
+    <div [class]="cn('px-2 py-1.5 text-sm font-semibold text-muted-foreground', class)">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-select-group',
+                    standalone: true,
+                    template: `
+    <div [class]="cn('px-2 py-1.5 text-sm font-semibold text-muted-foreground', class)">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class SelectSeparatorComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectSeparatorComponent, isStandalone: true, selector: "tolle-select-separator", inputs: { class: "class" }, ngImport: i0, template: `
+    <div [class]="cn('-mx-1 my-1 h-px bg-border', class)"></div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-select-separator',
+                    standalone: true,
+                    template: `
+    <div [class]="cn('-mx-1 my-1 h-px bg-border', class)"></div>
+  `,
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class SwitchComponent {
+    cdr;
+    class = '';
+    disabled = false;
+    size = 'default';
+    checked = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    get sizeClasses() {
+        const sizes = {
+            xs: {
+                track: 'h-4 w-7',
+                thumb: 'h-3 w-3',
+                translate: 'translate-x-3'
+            },
+            sm: {
+                track: 'h-5 w-9',
+                thumb: 'h-4 w-4',
+                translate: 'translate-x-4'
+            },
+            default: {
+                track: 'h-6 w-11',
+                thumb: 'h-5 w-5',
+                translate: 'translate-x-5'
+            },
+            lg: {
+                track: 'h-7 w-[3.25rem]',
+                thumb: 'h-6 w-6',
+                translate: 'translate-x-6'
+            }
+        };
+        return sizes[this.size];
+    }
+    cn = cn;
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.onChange(this.checked);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    writeValue(value) {
+        this.checked = value;
+        this.cdr.markForCheck();
+    }
+    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: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "tolle-switch", inputs: { class: "class", disabled: "disabled", size: "size" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SwitchComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked"
+      [disabled]="disabled"
+      (click)="toggle()"
+      [class]="cn(
+    'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+    sizeClasses.track,
+    checked ? 'bg-primary' : 'bg-input',
+    class
+  )"
+    >
+  <span
+    [class]="cn(
+      'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',
+      sizeClasses.thumb,
+      checked ? sizeClasses.translate : 'translate-x-0'
+    )"
+  ></span>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-switch',
+                    standalone: true,
+                    imports: [CommonModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwitchComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked"
+      [disabled]="disabled"
+      (click)="toggle()"
+      [class]="cn(
+    'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+    sizeClasses.track,
+    checked ? 'bg-primary' : 'bg-input',
+    class
+  )"
+    >
+  <span
+    [class]="cn(
+      'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',
+      sizeClasses.thumb,
+      checked ? sizeClasses.translate : 'translate-x-0'
+    )"
+  ></span>
+    </button>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class BadgeComponent {
+    variant = 'default';
+    size = 'default';
+    removable = false; // Toggle the "Pill" remove icon
+    class = '';
+    onRemove = new EventEmitter();
+    cn = cn;
+    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', 
+        // 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
+        this.size === 'xs' && 'px-1.5 py-0 text-[10px]', this.size === 'sm' && 'px-2 py-0 text-[11px]', this.size === 'default' && 'text-xs', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "tolle-badge", inputs: { variant: "variant", size: "size", removable: "removable", class: "class" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: `
+    <div [class]="computedClass">
+      <ng-content select="[prefix]"></ng-content>
+
+      <span class="truncate">
+        <ng-content></ng-content>
+      </span>
+
+      <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"
+      >
+        <i class="ri-close-line text-[1.1em]"></i>
+      </button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-badge',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="computedClass">
+      <ng-content select="[prefix]"></ng-content>
+
+      <span class="truncate">
+        <ng-content></ng-content>
+      </span>
+
+      <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"
+      >
+        <i class="ri-close-line text-[1.1em]"></i>
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], onRemove: [{
+                type: Output
+            }] } });
+
+class SkeletonComponent {
+    variant = 'rect';
+    class = '';
+    cn = cn;
+    get computedClass() {
+        return cn(
+        // The background matches the Google Dark Mode "Muted" color
+        'animate-pulse bg-muted rounded-md', this.variant === 'circle' && 'rounded-full', this.variant === 'pill' && 'rounded-full', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SkeletonComponent, isStandalone: true, selector: "tolle-skeleton", inputs: { variant: "variant", class: "class" }, ngImport: i0, template: `
+    <div [class]="computedClass"></div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-skeleton',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="computedClass"></div>
+  `,
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class CheckboxComponent {
+    cdr;
+    class = '';
+    disabled = false;
+    size = 'default';
+    checked = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    cn = cn;
+    get sizeClasses() {
+        return cn(this.size === 'xs' && 'h-3.5 w-3.5', this.size === 'sm' && 'h-4 w-4', this.size === 'default' && 'h-5 w-5', this.size === 'lg' && 'h-6 w-6');
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.onChange(this.checked);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    writeValue(value) {
+        this.checked = value;
+        this.cdr.markForCheck();
+    }
+    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: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckboxComponent, isStandalone: true, selector: "tolle-checkbox", inputs: { class: "class", disabled: "disabled", size: "size" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div
+      (click)="toggle()"
+      [class]="cn(
+        'group flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-primary ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        checked ? 'bg-primary text-primary-foreground' : 'bg-transparent',
+        sizeClasses,
+        class
+      )"
+    >
+      <i
+        *ngIf="checked"
+        class="ri-check-line font-bold"
+        [class]="size === 'xs' ? 'text-[10px]' : 'text-[14px]'"
+      ></i>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-checkbox',
+                    standalone: true,
+                    imports: [CommonModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div
+      (click)="toggle()"
+      [class]="cn(
+        'group flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-primary ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        checked ? 'bg-primary text-primary-foreground' : 'bg-transparent',
+        sizeClasses,
+        class
+      )"
+    >
+      <i
+        *ngIf="checked"
+        class="ri-check-line font-bold"
+        [class]="size === 'xs' ? 'text-[10px]' : 'text-[14px]'"
+      ></i>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class TooltipDirective {
+    el;
+    content = '';
+    placement = 'top';
+    tooltipEl = null;
+    cleanup;
+    constructor(el) {
+        this.el = el;
+    }
+    show() {
+        if (!this.content)
+            return;
+        // 1. Create Tooltip Element
+        this.tooltipEl = document.createElement('div');
+        this.tooltipEl.className = cn('absolute z-[100] px-2 py-1 text-xs font-medium text-white bg-black rounded shadow-md pointer-events-none');
+        this.tooltipEl.innerText = this.content;
+        document.body.appendChild(this.tooltipEl);
+        // 2. Position it using Floating UI
+        this.cleanup = autoUpdate(this.el.nativeElement, this.tooltipEl, () => {
+            computePosition(this.el.nativeElement, this.tooltipEl, {
+                placement: this.placement,
+                middleware: [offset(8), flip(), shift({ padding: 5 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.tooltipEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        });
+    }
+    hide() {
+        if (this.tooltipEl) {
+            this.tooltipEl.remove();
+            this.tooltipEl = null;
+        }
+        if (this.cleanup) {
+            this.cleanup();
+        }
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[tolleTooltip]", inputs: { content: ["tolleTooltip", "content"], placement: "placement" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focusout": "hide()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tolleTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
+                type: Input,
+                args: ['tolleTooltip']
+            }], placement: [{
+                type: Input
+            }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+// projects/tolle/src/lib/toast.service.ts
+class ToastService {
+    toasts = [];
+    toastSubject = new Subject();
+    toasts$ = this.toastSubject.asObservable();
+    constructor() {
+        setInterval(() => this.tick(), 100);
+    }
+    show(toast) {
+        const duration = toast.duration || 3000;
+        const newToast = {
+            ...toast,
+            id: Date.now(),
+            duration,
+            remainingTime: duration,
+            isPaused: false
+        };
+        this.toasts.push(newToast);
+        this.notify();
+    }
+    tick() {
+        let changed = false;
+        this.toasts.forEach(t => {
+            if (!t.isPaused) {
+                t.remainingTime -= 100;
+                changed = true;
+            }
+        });
+        const initialCount = this.toasts.length;
+        this.toasts = this.toasts.filter(t => t.remainingTime > 0);
+        if (changed || this.toasts.length !== initialCount) {
+            this.notify();
+        }
+    }
+    setPaused(id, paused) {
+        const toast = this.toasts.find(t => t.id === id);
+        if (toast) {
+            toast.isPaused = paused;
+            this.notify();
+        }
+    }
+    remove(id) {
+        this.toasts = this.toasts.filter(t => t.id !== id);
+        this.notify();
+    }
+    notify() {
+        this.toastSubject.next([...this.toasts]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const TOLLE_CONFIG = new InjectionToken('TolleConfig');
+function provideTolleConfig(config) {
+    return [
+        {
+            provide: TOLLE_CONFIG,
+            useValue: config
+        }
+    ];
+}
+
+class MultiSelectComponent {
+    selectService;
+    placeholder = 'Select options...';
+    size = 'default';
+    searchable = false;
+    disabled = false;
+    class = '';
+    trigger;
+    popover;
+    items;
+    value = [];
+    selectedItems = [];
+    isOpen = false;
+    searchQuery = '';
+    noResults = false;
+    cleanup;
+    constructor(selectService) {
+        this.selectService = selectService;
+        this.selectService.selectedValue$.subscribe(val => {
+            if (val !== undefined && this.isOpen)
+                this.toggleValue(val);
+        });
+    }
+    ngAfterContentInit() {
+        this.syncItems();
+        this.items.changes.subscribe(() => this.syncItems());
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        setTimeout(() => this.updatePosition());
+    }
+    close() {
+        this.isOpen = false;
+        if (this.cleanup)
+            this.cleanup();
+    }
+    updatePosition() {
+        this.cleanup = autoUpdate(this.trigger.nativeElement, this.popover.nativeElement, () => {
+            computePosition(this.trigger.nativeElement, this.popover.nativeElement, {
+                placement: 'bottom-start',
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.popover.nativeElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    visibility: 'visible',
+                });
+            });
+        });
+    }
+    toggleValue(val) {
+        const index = this.value.indexOf(val);
+        index > -1 ? this.value.splice(index, 1) : this.value.push(val);
+        this.syncItems();
+        this.onChange([...this.value]); // Return new array reference for Change Detection
+    }
+    selectAll() {
+        this.value = this.items.map(i => i.value);
+        this.syncItems();
+        this.onChange([...this.value]);
+    }
+    clearAll() {
+        this.value = [];
+        this.syncItems();
+        this.onChange([]);
+    }
+    removeValue(event, val) {
+        event.stopPropagation();
+        this.toggleValue(val);
+    }
+    syncItems() {
+        if (!this.items)
+            return;
+        this.selectedItems = [];
+        this.items.forEach(item => {
+            item.selected = this.value.includes(item.value);
+            if (item.selected)
+                this.selectedItems.push({ label: item.getLabel(), value: item.value });
+        });
+    }
+    onSearchChange(q) {
+        const filter = (q || '').toLowerCase();
+        let visibleCount = 0;
+        this.items.forEach(item => {
+            const isVisible = item.getLabel().toLowerCase().includes(filter);
+            item.hidden = !isVisible;
+            if (isVisible)
+                visibleCount++;
+        });
+        this.noResults = visibleCount === 0 && filter !== '';
+    }
+    onClickOutside(event) {
+        if (this.isOpen && !this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) { this.value = Array.isArray(v) ? v : []; this.syncItems(); }
+    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: MultiSelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "tolle-multi-select", inputs: { placeholder: "placeholder", size: "size", searchable: "searchable", disabled: "disabled", class: "class" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+            SelectService,
+            { provide: NG_VALUE_ACCESSOR, useExisting: MultiSelectComponent, 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: `
+    <div [class]="cn('relative w-full', 'size-' + size)" #container>
+      <button #trigger type="button" (click)="toggle()" [disabled]="disabled"
+              [class]="cn('flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-all h-auto', class)">
+        <div class="flex flex-wrap gap-1 items-center max-w-[95%]">
+          <ng-container *ngIf="value?.length; else placeholderTpl">
+            <tolle-badge *ngFor="let item of selectedItems" size="xs" variant="secondary" [removable]="true" (onRemove)="removeValue($event, item.value)">
+              {{ item.label }}
+            </tolle-badge>
+          </ng-container>
+          <ng-template #placeholderTpl><span class="text-muted-foreground">{{ placeholder }}</span></ng-template>
+        </div>
+        <i [class]="cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform', isOpen ? 'rotate-180' : '')"></i>
+      </button>
+
+      <div #popover *ngIf="isOpen" class="absolute bg-popover z-50 min-w-full rounded-md border border-border shadow-md overflow-hidden" style="visibility: hidden;">
+
+        <div class="p-2 border-b border-border space-y-2 bg-popover">
+          <tolle-input *ngIf="searchable" size="xs" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="onSearchChange($event)">
+            <i prefix class="ri-search-line"></i>
+          </tolle-input>
+
+          <div class="flex items-center justify-between px-1">
+            <button type="button" (click)="selectAll()" class="text-[10px] font-bold uppercase text-primary hover:underline">Select All</button>
+            <button type="button" (click)="clearAll()" class="text-[10px] font-bold uppercase text-muted-foreground hover:underline">Clear</button>
+          </div>
+        </div>
+
+        <div class="p-1 max-h-60 overflow-y-auto">
+          <ng-content></ng-content>
+          <div *ngIf="noResults" class="py-4 text-center text-xs text-muted-foreground">No results found for "{{searchQuery}}"</div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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$1, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent$1, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-multi-select',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, BadgeComponent$1, InputComponent$1],
+                    providers: [
+                        SelectService,
+                        { provide: NG_VALUE_ACCESSOR, useExisting: MultiSelectComponent, multi: true }
+                    ],
+                    template: `
+    <div [class]="cn('relative w-full', 'size-' + size)" #container>
+      <button #trigger type="button" (click)="toggle()" [disabled]="disabled"
+              [class]="cn('flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-all h-auto', class)">
+        <div class="flex flex-wrap gap-1 items-center max-w-[95%]">
+          <ng-container *ngIf="value?.length; else placeholderTpl">
+            <tolle-badge *ngFor="let item of selectedItems" size="xs" variant="secondary" [removable]="true" (onRemove)="removeValue($event, item.value)">
+              {{ item.label }}
+            </tolle-badge>
+          </ng-container>
+          <ng-template #placeholderTpl><span class="text-muted-foreground">{{ placeholder }}</span></ng-template>
+        </div>
+        <i [class]="cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform', isOpen ? 'rotate-180' : '')"></i>
+      </button>
+
+      <div #popover *ngIf="isOpen" class="absolute bg-popover z-50 min-w-full rounded-md border border-border shadow-md overflow-hidden" style="visibility: hidden;">
+
+        <div class="p-2 border-b border-border space-y-2 bg-popover">
+          <tolle-input *ngIf="searchable" size="xs" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="onSearchChange($event)">
+            <i prefix class="ri-search-line"></i>
+          </tolle-input>
+
+          <div class="flex items-center justify-between px-1">
+            <button type="button" (click)="selectAll()" class="text-[10px] font-bold uppercase text-primary hover:underline">Select All</button>
+            <button type="button" (click)="clearAll()" class="text-[10px] font-bold uppercase text-muted-foreground hover:underline">Clear</button>
+          </div>
+        </div>
+
+        <div class="p-1 max-h-60 overflow-y-auto">
+          <ng-content></ng-content>
+          <div *ngIf="noResults" class="py-4 text-center text-xs text-muted-foreground">No results found for "{{searchQuery}}"</div>
+        </div>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: SelectService }], propDecorators: { placeholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], items: [{
+                type: ContentChildren,
+                args: [SelectItemComponent, { descendants: true }]
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class CalendarComponent {
+    class = '';
+    disablePastDates = false;
+    currentView = 'date';
+    viewDate = new Date();
+    selectedDate = null;
+    weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    daysInMonth = [];
+    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    years = [];
+    navBtnClass = cn('h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 border border-input rounded-md flex items-center justify-center hover:bg-accent hover:text-accent-foreground transition-all');
+    onTouched = () => { };
+    onChange = () => { };
+    cn = cn;
+    ngOnInit() {
+        this.generateDays();
+        this.generateYears();
+    }
+    generateDays() {
+        const start = startOfWeek(startOfMonth(this.viewDate));
+        const end = endOfWeek(endOfMonth(this.viewDate));
+        this.daysInMonth = eachDayOfInterval({ start, end });
+    }
+    generateYears() {
+        const currentYear = this.viewDate.getFullYear();
+        // Generates a 16-year window centered roughly on current view
+        this.years = Array.from({ length: 16 }, (_, i) => currentYear - 6 + i);
+    }
+    setView(view) {
+        this.currentView = view;
+        // If switching to year view, ensure the year grid is centered on current view year
+        if (view === 'year') {
+            this.generateYears();
+        }
+    }
+    prev() {
+        if (this.currentView === 'date') {
+            this.viewDate = subMonths(this.viewDate, 1);
+            this.generateDays();
+        }
+        else if (this.currentView === 'year') {
+            this.viewDate = subYears(this.viewDate, 16);
+            this.generateYears();
+        }
+        else if (this.currentView === 'month') {
+            this.viewDate = subYears(this.viewDate, 1);
+        }
+    }
+    next() {
+        if (this.currentView === 'date') {
+            this.viewDate = addMonths(this.viewDate, 1);
+            this.generateDays();
+        }
+        else if (this.currentView === 'year') {
+            this.viewDate = addYears(this.viewDate, 16);
+            this.generateYears();
+        }
+        else if (this.currentView === 'month') {
+            this.viewDate = addYears(this.viewDate, 1);
+        }
+    }
+    selectDate(date) {
+        if (this.isDateDisabled(date))
+            return;
+        this.selectedDate = date;
+        if (!isSameMonth(date, this.viewDate)) {
+            this.viewDate = date;
+            this.generateDays();
+        }
+        this.onChange(date);
+        this.onTouched();
+    }
+    selectMonth(monthIndex) {
+        this.viewDate = setMonth(this.viewDate, monthIndex);
+        this.currentView = 'date';
+        this.generateDays();
+    }
+    selectYear(year) {
+        this.viewDate = setYear(this.viewDate, year);
+        this.currentView = 'date'; // Jump straight back to date view for efficiency
+        this.generateDays();
+    }
+    getDayClass(date) {
+        const isSelected = this.selectedDate && isSameDay(date, this.selectedDate);
+        const isTodayDate = isToday(date);
+        const isOutside = !isSameMonth(date, this.viewDate);
+        const isDisabled = this.isDateDisabled(date);
+        return cn('h-9 w-9 p-0 font-normal text-sm rounded-md transition-all flex items-center justify-center', !isSelected && !isDisabled && 'hover:bg-accent hover:text-accent-foreground', isSelected && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', !isSelected && isTodayDate && 'bg-accent text-accent-foreground', (isOutside || isDisabled) && 'text-muted-foreground opacity-50', isDisabled && 'cursor-not-allowed');
+    }
+    isDateDisabled(date) {
+        return this.disablePastDates ? isBefore(date, startOfDay(new Date())) : false;
+    }
+    // CVA Implementation
+    writeValue(obj) {
+        if (obj) {
+            const date = new Date(obj);
+            if (!isNaN(date.getTime())) {
+                this.selectedDate = date;
+                this.viewDate = date;
+                this.generateDays();
+                this.generateYears();
+            }
+        }
+    }
+    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: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CalendarComponent, isStandalone: true, selector: "tolle-calendar", inputs: { class: "class", disablePastDates: "disablePastDates" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CalendarComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block w-fit', class)">
+
+      <div class="flex items-center justify-between pt-1 pb-4 gap-2">
+
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            (click)="setView('month')"
+            [class]="cn(
+              'text-sm font-semibold px-2 py-1 rounded transition-colors',
+              currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
+            )"
+          >
+            {{ viewDate | date: 'MMMM' }}
+          </button>
+
+          <button
+            type="button"
+            (click)="setView('year')"
+            [class]="cn(
+              'text-sm font-semibold px-2 py-1 rounded transition-colors',
+              currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
+            )"
+          >
+            {{ viewDate | date: 'yyyy' }}
+          </button>
+        </div>
+
+        <div class="flex items-center space-x-1">
+          <button type="button" (click)="prev()" [class]="navBtnClass">
+            <i class="ri-arrow-left-s-line text-lg"></i>
+          </button>
+          <button type="button" (click)="next()" [class]="navBtnClass">
+            <i class="ri-arrow-right-s-line text-lg"></i>
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+        <div class="grid grid-cols-7 gap-1 w-full">
+          <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
+            {{ day }}
+          </span>
+        </div>
+        <div class="grid grid-cols-7 gap-1 w-full">
+          <button
+            *ngFor="let date of daysInMonth"
+            type="button"
+            (click)="selectDate(date)"
+            [disabled]="isDateDisabled(date)"
+            [class]="getDayClass(date)"
+          >
+            {{ date | date: 'd' }}
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button
+          *ngFor="let month of months; let i = index"
+          type="button"
+          (click)="selectMonth(i)"
+          [class]="cn(
+            'text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
+            i === viewDate.getMonth() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
+          )"
+        >
+          {{ month }}
+        </button>
+      </div>
+
+      <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button
+          *ngFor="let year of years"
+          type="button"
+          (click)="selectYear(year)"
+          [class]="cn(
+            'text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
+            year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
+          )"
+        >
+          {{ year }}
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-calendar',
+                    standalone: true,
+                    imports: [CommonModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CalendarComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block w-fit', class)">
+
+      <div class="flex items-center justify-between pt-1 pb-4 gap-2">
+
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            (click)="setView('month')"
+            [class]="cn(
+              'text-sm font-semibold px-2 py-1 rounded transition-colors',
+              currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
+            )"
+          >
+            {{ viewDate | date: 'MMMM' }}
+          </button>
+
+          <button
+            type="button"
+            (click)="setView('year')"
+            [class]="cn(
+              'text-sm font-semibold px-2 py-1 rounded transition-colors',
+              currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
+            )"
+          >
+            {{ viewDate | date: 'yyyy' }}
+          </button>
+        </div>
+
+        <div class="flex items-center space-x-1">
+          <button type="button" (click)="prev()" [class]="navBtnClass">
+            <i class="ri-arrow-left-s-line text-lg"></i>
+          </button>
+          <button type="button" (click)="next()" [class]="navBtnClass">
+            <i class="ri-arrow-right-s-line text-lg"></i>
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+        <div class="grid grid-cols-7 gap-1 w-full">
+          <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
+            {{ day }}
+          </span>
+        </div>
+        <div class="grid grid-cols-7 gap-1 w-full">
+          <button
+            *ngFor="let date of daysInMonth"
+            type="button"
+            (click)="selectDate(date)"
+            [disabled]="isDateDisabled(date)"
+            [class]="getDayClass(date)"
+          >
+            {{ date | date: 'd' }}
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button
+          *ngFor="let month of months; let i = index"
+          type="button"
+          (click)="selectMonth(i)"
+          [class]="cn(
+            'text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
+            i === viewDate.getMonth() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
+          )"
+        >
+          {{ month }}
+        </button>
+      </div>
+
+      <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button
+          *ngFor="let year of years"
+          type="button"
+          (click)="selectYear(year)"
+          [class]="cn(
+            'text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
+            year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
+          )"
+        >
+          {{ year }}
+        </button>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], disablePastDates: [{
+                type: Input
+            }] } });
+
+class MaskedInputComponent {
+    el;
+    cdr;
+    mask = '';
+    placeholder = '';
+    type = 'text';
+    disabled = false;
+    class = '';
+    error = false;
+    size = 'default';
+    returnRaw = false;
+    inputEl;
+    hasPrefix = false;
+    hasSuffix = false;
+    displayValue = '';
+    tokens = {
+        '0': /\d/, '9': /\d/, 'a': /[a-z]/i, 'A': /[a-z]/i, '*': /[a-z0-9]/i
+    };
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(el, cdr) {
+        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]');
+        if (this.hasPrefix !== !!prefix || this.hasSuffix !== !!suffix) {
+            this.hasPrefix = !!prefix;
+            this.hasSuffix = !!suffix;
+            this.cdr.detectChanges();
+        }
+    }
+    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);
+    }
+    // --- Masking Logic ---
+    onInput(event) {
+        const input = event.target;
+        const raw = this.unmask(input.value);
+        const masked = this.applyMask(raw);
+        this.displayValue = masked;
+        input.value = masked;
+        this.returnRaw ? this.onChange(raw) : this.onChange(masked);
+    }
+    applyMask(rawValue) {
+        let rawIndex = 0;
+        let formatted = '';
+        for (let i = 0; i < this.mask.length; i++) {
+            if (rawIndex >= rawValue.length)
+                break;
+            const maskChar = this.mask[i];
+            const rawChar = rawValue[rawIndex];
+            if (this.tokens[maskChar]) {
+                if (this.tokens[maskChar].test(rawChar)) {
+                    formatted += rawChar;
+                    rawIndex++;
+                }
+                else {
+                    rawIndex++;
+                    i--;
+                }
+            }
+            else {
+                formatted += maskChar;
+                if (rawChar === maskChar)
+                    rawIndex++;
+            }
+        }
+        return formatted;
+    }
+    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; }
+    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: [
+            {
+                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="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>
+
+      <input
+        #inputEl
+        [type]="type"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [value]="displayValue"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        [class]="computedInputClass"
+      />
+
+      <div class="absolute right-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
+           [class.right-2.5]="size === 'xs'">
+        <ng-content select="[suffix]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-masked-input',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MaskedInputComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div [class]="cn('relative flex items-center w-full group', 'size-' + size, class)">
+
+      <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>
+
+      <input
+        #inputEl
+        [type]="type"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [value]="displayValue"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        [class]="computedInputClass"
+      />
+
+      <div class="absolute right-3 flex items-center justify-center text-muted-foreground group-focus-within:text-primary transition-colors"
+           [class.right-2.5]="size === 'xs'">
+        <ng-content select="[suffix]"></ng-content>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { mask: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], returnRaw: [{
+                type: Input
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl', { static: true }]
+            }] } });
+
+class DatePickerComponent {
+    cdr;
+    placeholder = 'MM/DD/YYYY';
+    disabled = false;
+    class = '';
+    disablePastDates = false;
+    triggerContainer;
+    popover;
+    value = null;
+    inputValue = '';
+    isOpen = false;
+    cleanupAutoUpdate;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    // --- Logic ---
+    onInputChange(str) {
+        if (str?.length === 10) {
+            const parsed = parse(str, 'MM/dd/yyyy', new Date());
+            if (isValid(parsed)) {
+                this.value = startOfDay(parsed);
+                this.onChange(this.value);
+            }
+        }
+        else if (!str) {
+            this.value = null;
+            this.onChange(null);
+        }
+    }
+    onCalendarChange(date) {
+        this.value = date;
+        this.inputValue = format(date, 'MM/dd/yyyy');
+        this.onChange(this.value);
+        this.close();
+    }
+    togglePopover(event) {
+        event.stopPropagation(); // Prevent bubbling to document
+        if (this.disabled)
+            return;
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        setTimeout(() => this.updatePosition());
+    }
+    close() {
+        this.isOpen = false;
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+    }
+    clear(event) {
+        event.stopPropagation(); // CRITICAL: Stop the calendar from opening
+        this.value = null;
+        this.inputValue = '';
+        this.onChange(null);
+        this.cdr.markForCheck();
+    }
+    // --- Positioning ---
+    updatePosition() {
+        if (!this.triggerContainer || !this.popover)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(this.triggerContainer.nativeElement, this.popover.nativeElement, () => {
+            computePosition(this.triggerContainer.nativeElement, this.popover.nativeElement, {
+                placement: 'bottom-end', // Aligned to the right where the icon is
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.popover.nativeElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    visibility: 'visible',
+                });
+            });
+        });
+    }
+    onClickOutside(event) {
+        if (this.isOpen &&
+            !this.triggerContainer.nativeElement.contains(event.target) &&
+            !this.popover.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    // --- CVA ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(val) {
+        if (val) {
+            const date = new Date(val);
+            if (isValid(date)) {
+                this.value = startOfDay(date);
+                this.inputValue = format(this.value, 'MM/dd/yyyy');
+            }
+        }
+        else {
+            this.value = null;
+            this.inputValue = '';
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "tolle-date-picker", inputs: { placeholder: "placeholder", disabled: "disabled", class: "class", disablePastDates: "disablePastDates" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "triggerContainer", first: true, predicate: ["triggerContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+    <div class="relative w-full" #triggerContainer>
+      <tolle-masked-input
+        #maskInput
+        [mask]="'00/00/0000'"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [(ngModel)]="inputValue"
+        (ngModelChange)="onInputChange($event)"
+        [class]="cn(class)"
+      >
+        <div suffix class="flex items-center gap-1.5 cursor-pointer">
+          <i
+            *ngIf="value && !disabled"
+            (click)="clear($event)"
+            class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
+          ></i>
+
+          <i
+            (click)="togglePopover($event)"
+            class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+          ></i>
+        </div>
+      </tolle-masked-input>
+
+      <div
+        #popover
+        *ngIf="isOpen"
+        class="absolute bg-popover z-50 max-w-max left-0 right-0 overflow-hidden rounded-md border border-border text-popover-foreground bg-background shadow-md"
+        style="visibility: hidden; top: 0; left: 0;"
+      >
+        <tolle-calendar
+          [(ngModel)]="value"
+          (ngModelChange)="onCalendarChange($event)"
+          [disablePastDates]="disablePastDates"
+        ></tolle-calendar>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-date-picker',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, MaskedInputComponent, CalendarComponent],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div class="relative w-full" #triggerContainer>
+      <tolle-masked-input
+        #maskInput
+        [mask]="'00/00/0000'"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [(ngModel)]="inputValue"
+        (ngModelChange)="onInputChange($event)"
+        [class]="cn(class)"
+      >
+        <div suffix class="flex items-center gap-1.5 cursor-pointer">
+          <i
+            *ngIf="value && !disabled"
+            (click)="clear($event)"
+            class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
+          ></i>
+
+          <i
+            (click)="togglePopover($event)"
+            class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+          ></i>
+        </div>
+      </tolle-masked-input>
+
+      <div
+        #popover
+        *ngIf="isOpen"
+        class="absolute bg-popover z-50 max-w-max left-0 right-0 overflow-hidden rounded-md border border-border text-popover-foreground bg-background shadow-md"
+        style="visibility: hidden; top: 0; left: 0;"
+      >
+        <tolle-calendar
+          [(ngModel)]="value"
+          (ngModelChange)="onCalendarChange($event)"
+          [disablePastDates]="disablePastDates"
+        ></tolle-calendar>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disablePastDates: [{
+                type: Input
+            }], triggerContainer: [{
+                type: ViewChild,
+                args: ['triggerContainer']
+            }], popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class PaginationComponent {
+    class = '';
+    showPageLinks = true;
+    showPageOptions = true;
+    showCurrentPageInfo = true;
+    currentPageInfoTemplate;
+    totalRecords = 0;
+    currentPageSize = 10;
+    currentPage = 1;
+    pageSizeOptions = [10, 20, 30, 50];
+    onPageNumberChange = new EventEmitter();
+    onPageSizeChange = new EventEmitter();
+    totalPages = 0;
+    first = 0;
+    last = 0;
+    displayPageIndex = [];
+    pageReport = '';
+    initialized = false;
+    cd = inject(ChangeDetectorRef);
+    cn = cn;
+    navBtnClass = 'h-8 w-8 p-0 flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed';
+    ngOnInit() {
+        this.initializePagination();
+    }
+    ngOnChanges(changes) {
+        // Only re-init if meaningful data changes
+        if (changes['totalRecords'] || changes['currentPage'] || changes['currentPageSize']) {
+            this.initializePagination();
+        }
+    }
+    initializePagination() {
+        this.calcPagination();
+        if (!this.initialized) {
+            this.initialized = true;
+        }
+        this.cd.detectChanges();
+    }
+    nextPage() {
+        if (this.totalPages > this.currentPage) {
+            this.currentPage++;
+            this.emitChange();
+        }
+    }
+    previousPage() {
+        if (this.currentPage > 1) {
+            this.currentPage--;
+            this.emitChange();
+        }
+    }
+    selectPage(page) {
+        if (this.currentPage === page)
+            return;
+        this.currentPage = page;
+        this.emitChange();
+    }
+    sizeChange(size) {
+        this.currentPageSize = size;
+        this.currentPage = 1; // Reset to page 1 on size change
+        this.emitChange();
+    }
+    emitChange() {
+        this.calcPagination();
+        this.onPageNumberChange.emit(this.currentPage);
+        this.onPageSizeChange.emit(this.currentPageSize);
+        this.cd.detectChanges();
+    }
+    calcPagination() {
+        this.totalPages = Math.ceil(this.totalRecords / this.currentPageSize) || 0;
+        // Bounds check
+        if (this.currentPage > this.totalPages && this.totalPages > 0) {
+            this.currentPage = this.totalPages;
+        }
+        this.first = this.totalRecords === 0 ? 0 : (this.currentPage - 1) * this.currentPageSize + 1;
+        this.last = Math.min(this.totalRecords, this.currentPage * this.currentPageSize);
+        // Calculate Sliding Window for Page Numbers (Max 5 visible)
+        const pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
+        if (this.totalPages <= 5) {
+            this.displayPageIndex = pages;
+        }
+        else {
+            let start = Math.max(0, this.currentPage - 3);
+            let end = start + 5;
+            if (end > this.totalPages) {
+                end = this.totalPages;
+                start = end - 5;
+            }
+            this.displayPageIndex = pages.slice(start, end);
+        }
+        // Template Parsing
+        if (this.currentPageInfoTemplate) {
+            this.pageReport = this.currentPageInfoTemplate.replace(/{first}|{last}|{totalRecords}|{currentPage}|{currentPageSize}|{totalPages}/g, (match) => {
+                switch (match) {
+                    case '{first}': return `${this.first}`;
+                    case '{last}': return `${this.last}`;
+                    case '{totalRecords}': return `${this.totalRecords}`;
+                    case '{totalPages}': return `${this.totalPages}`;
+                    case '{currentPage}': return `${this.currentPage}`;
+                    case '{currentPageSize}': return `${this.currentPageSize}`;
+                    default: return match;
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PaginationComponent, isStandalone: true, selector: "tolle-pagination", inputs: { class: "class", showPageLinks: "showPageLinks", showPageOptions: "showPageOptions", showCurrentPageInfo: "showCurrentPageInfo", currentPageInfoTemplate: "currentPageInfoTemplate", totalRecords: "totalRecords", currentPageSize: "currentPageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions" }, outputs: { onPageNumberChange: "onPageNumberChange", onPageSizeChange: "onPageSizeChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="cn('flex items-center justify-between px-2 py-4', class)">
+
+      <div *ngIf="showCurrentPageInfo" class="text-sm text-muted-foreground">
+        <ng-container *ngIf="currentPageInfoTemplate; else defaultReport">
+          {{ pageReport }}
+        </ng-container>
+        <ng-template #defaultReport>
+          Showing {{ first }} to {{ last }} of {{ totalRecords }} entries
+        </ng-template>
+      </div>
+
+      <div class="flex items-center space-x-6 lg:space-x-8">
+
+        <div *ngIf="showPageOptions" class="flex items-center space-x-2">
+          <p class="text-sm font-medium">Rows per page</p>
+          <tolle-select
+            class="w-[70px]"
+            size="sm"
+            [ngModel]="currentPageSize"
+            (ngModelChange)="sizeChange($event)"
+          >
+            <tolle-select-item *ngFor="let opt of pageSizeOptions" [value]="opt">
+              {{ opt }}
+            </tolle-select-item>
+          </tolle-select>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <div *ngIf="!showPageLinks" class="flex w-[100px] items-center justify-center text-sm font-medium">
+            Page {{ currentPage }} of {{ totalPages }}
+          </div>
+
+          <div *ngIf="showPageLinks" class="flex items-center space-x-1">
+            <button
+              (click)="previousPage()"
+              [disabled]="currentPage === 1"
+              [class]="navBtnClass"
+            >
+              <i class="ri-arrow-left-s-line"></i>
+            </button>
+
+            <button
+              *ngFor="let page of displayPageIndex"
+              (click)="selectPage(page)"
+              [class]="cn(
+                'h-8 w-8 text-sm rounded-md flex items-center justify-center transition-colors',
+                currentPage === page
+                  ? 'bg-primary text-primary-foreground font-medium'
+                  : 'hover:bg-accent hover:text-accent-foreground'
+              )"
+            >
+              {{ page }}
+            </button>
+
+            <button
+              (click)="nextPage()"
+              [disabled]="currentPage === totalPages || totalPages === 0"
+              [class]="navBtnClass"
+            >
+              <i class="ri-arrow-right-s-line"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectComponent$1, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size"] }, { kind: "component", type: SelectItemComponent$1, selector: "tolle-select-item", inputs: ["value", "class", "selected"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-pagination',
+                    standalone: true,
+                    imports: [CommonModule, SelectComponent$1, SelectItemComponent$1, FormsModule],
+                    template: `
+    <div [class]="cn('flex items-center justify-between px-2 py-4', class)">
+
+      <div *ngIf="showCurrentPageInfo" class="text-sm text-muted-foreground">
+        <ng-container *ngIf="currentPageInfoTemplate; else defaultReport">
+          {{ pageReport }}
+        </ng-container>
+        <ng-template #defaultReport>
+          Showing {{ first }} to {{ last }} of {{ totalRecords }} entries
+        </ng-template>
+      </div>
+
+      <div class="flex items-center space-x-6 lg:space-x-8">
+
+        <div *ngIf="showPageOptions" class="flex items-center space-x-2">
+          <p class="text-sm font-medium">Rows per page</p>
+          <tolle-select
+            class="w-[70px]"
+            size="sm"
+            [ngModel]="currentPageSize"
+            (ngModelChange)="sizeChange($event)"
+          >
+            <tolle-select-item *ngFor="let opt of pageSizeOptions" [value]="opt">
+              {{ opt }}
+            </tolle-select-item>
+          </tolle-select>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <div *ngIf="!showPageLinks" class="flex w-[100px] items-center justify-center text-sm font-medium">
+            Page {{ currentPage }} of {{ totalPages }}
+          </div>
+
+          <div *ngIf="showPageLinks" class="flex items-center space-x-1">
+            <button
+              (click)="previousPage()"
+              [disabled]="currentPage === 1"
+              [class]="navBtnClass"
+            >
+              <i class="ri-arrow-left-s-line"></i>
+            </button>
+
+            <button
+              *ngFor="let page of displayPageIndex"
+              (click)="selectPage(page)"
+              [class]="cn(
+                'h-8 w-8 text-sm rounded-md flex items-center justify-center transition-colors',
+                currentPage === page
+                  ? 'bg-primary text-primary-foreground font-medium'
+                  : 'hover:bg-accent hover:text-accent-foreground'
+              )"
+            >
+              {{ page }}
+            </button>
+
+            <button
+              (click)="nextPage()"
+              [disabled]="currentPage === totalPages || totalPages === 0"
+              [class]="navBtnClass"
+            >
+              <i class="ri-arrow-right-s-line"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], showPageLinks: [{
+                type: Input
+            }], showPageOptions: [{
+                type: Input
+            }], showCurrentPageInfo: [{
+                type: Input
+            }], currentPageInfoTemplate: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], currentPageSize: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], onPageNumberChange: [{
+                type: Output
+            }], onPageSizeChange: [{
+                type: Output
+            }] } });
+
+class DataTableComponent {
+    data = [];
+    columns = [];
+    searchable = true;
+    paginate = true;
+    pageSize = 10;
+    expandable = false;
+    size = 'default';
+    // Track which rows are open
+    expandedRows = new Set();
+    // Use ContentChildren to grab the tolleCell templates from the user's HTML
+    cellTemplates;
+    // Keep this as an Input for the main expansion slot
+    expandedTemplate;
+    filteredData = [];
+    pagedData = [];
+    searchTerm = '';
+    currentPage = 1;
+    sortKey = '';
+    sortDir = null;
+    // 2. Map Size to Padding for Cells
+    get cellPaddingClass() {
+        switch (this.size) {
+            case 'xs': return 'p-1 px-4'; // Ultra-compact
+            case 'sm': return 'p-2 px-4'; // Dense
+            case 'lg': return 'p-6 px-4'; // Spacious
+            default: return 'p-4'; // Standard (16px)
+        }
+    }
+    // 3. Map Size to Padding for Header (usually slightly shorter than cells)
+    get headerPaddingClass() {
+        switch (this.size) {
+            case 'xs': return 'h-7 px-4';
+            case 'sm': return 'h-9 px-4';
+            case 'lg': return 'h-14 px-4';
+            default: return 'h-12 px-4';
+        }
+    }
+    // 4. Map Size to Font Sizes
+    get fontSizeClass() {
+        switch (this.size) {
+            case 'xs': return 'text-[11px]';
+            case 'sm': return 'text-xs';
+            case 'lg': return 'text-base';
+            default: return 'text-sm';
+        }
+    }
+    cn = cn;
+    ngOnInit() { this.refreshTable(); }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            this.refreshTable();
+        }
+    }
+    // --- Search & Sort & Page Logic ---
+    // (Your existing implementation of applySearch, applySort, and updatePage goes here)
+    refreshTable() { this.applySearch(); this.applySort(); this.updatePage(); }
+    onSearch() { this.currentPage = 1; this.refreshTable(); }
+    applySearch() {
+        if (!this.searchTerm) {
+            this.filteredData = [...this.data];
+            return;
+        }
+        const q = this.searchTerm.toLowerCase();
+        this.filteredData = this.data.filter(row => Object.values(row).some(val => String(val).toLowerCase().includes(q)));
+    }
+    applySort() {
+        if (!this.sortKey || !this.sortDir)
+            return;
+        this.filteredData.sort((a, b) => {
+            const valA = a[this.sortKey];
+            const valB = b[this.sortKey];
+            if (valA < valB)
+                return this.sortDir === 'asc' ? -1 : 1;
+            if (valA > valB)
+                return this.sortDir === 'asc' ? 1 : -1;
+            return 0;
+        });
+    }
+    updatePage() {
+        if (!this.paginate) {
+            this.pagedData = this.filteredData;
+            return;
+        }
+        const start = (this.currentPage - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        this.pagedData = this.filteredData.slice(start, end);
+    }
+    // --- Helpers ---
+    toggleSort(key) {
+        if (this.sortKey === key) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+        }
+        else {
+            this.sortKey = key;
+            this.sortDir = 'asc';
+        }
+        this.refreshTable();
+    }
+    getSortIcon(key) {
+        if (this.sortKey !== key || !this.sortDir)
+            return 'ri-arrow-up-down-line opacity-30';
+        return this.sortDir === 'asc' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
+    }
+    toggleRow(index) {
+        if (this.expandedRows.has(index))
+            this.expandedRows.delete(index);
+        else
+            this.expandedRows.add(index);
+    }
+    // Helper to find the right cell template
+    getTemplate(key) {
+        return this.cellTemplates?.find(t => t.name === key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataTableComponent, isStandalone: true, selector: "tolle-data-table", inputs: { data: "data", columns: "columns", searchable: "searchable", paginate: "paginate", pageSize: "pageSize", expandable: "expandable", size: "size", expandedTemplate: "expandedTemplate" }, queries: [{ propertyName: "cellTemplates", predicate: TolleCellDirective$1 }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="space-y-4">
+      <div *ngIf="searchable" class="flex items-center py-2">
+        <tolle-input
+          [size]="size === 'lg' ? 'default' : 'sm'"
+          class="max-w-sm"
+          placeholder="Filter records..."
+          [(ngModel)]="searchTerm"
+          (ngModelChange)="onSearch()">
+          <i prefix class="ri-search-line"></i>
+        </tolle-input>
+      </div>
+
+      <div class="rounded-md border border-border bg-background overflow-hidden shadow-sm">
+        <table class="w-full text-sm">
+          <thead class="border-b bg-muted/30">
+            <tr>
+              <th *ngIf="expandable" [class]="cn('px-4', size === 'xs' ? 'w-[32px]' : 'w-[48px]')"></th>
+              <th *ngFor="let col of columns"
+                  [class]="cn(
+                  'font-medium text-muted-foreground transition-all',
+                  headerPaddingClass,
+                  fontSizeClass,
+                  col.class
+                )">
+                <div *ngIf="col.sortable; else simpleHeader" (click)="toggleSort(col.key)" class="flex items-center gap-1 cursor-pointer hover:text-foreground">
+                  {{ col.label }}
+                  <i [class]="getSortIcon(col.key)"></i>
+                </div>
+                <ng-template #simpleHeader>{{ col.label }}</ng-template>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-border">
+            <ng-container *ngFor="let row of pagedData; let i = index">
+              <tr class="hover:bg-muted/50 transition-colors">
+                <td *ngIf="expandable" class="px-4">
+                  <button (click)="toggleRow(i)"
+                          [class]="cn(
+                      'flex items-center justify-center rounded-md hover:bg-accent text-muted-foreground hover:text-foreground',
+                      size === 'xs' ? 'h-6 w-6' : 'h-8 w-8'
+                    )">
+                    <i [class]="expandedRows.has(i) ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line'"></i>
+                  </button>
+                </td>
+
+                <td *ngFor="let col of columns"
+                    [class]="cn(
+                    'align-middle transition-all',
+                    cellPaddingClass,
+                    fontSizeClass,
+                    col.class
+                  )">
+                  <ng-container *ngIf="getTemplate(col.key) as cell; else defaultValue">
+                    <ng-container *ngTemplateOutlet="cell.template; context: { $implicit: row[col.key], row: row }"></ng-container>
+                  </ng-container>
+                  <ng-template #defaultValue>
+                    <span class="text-foreground">{{ row[col.key] }}</span>
+                  </ng-template>
+                </td>
+              </tr>
+
+              <tr *ngIf="expandedRows.has(i)" class="bg-muted/10">
+                <td [attr.colspan]="columns.length + (expandable ? 1 : 0)" class="p-0">
+                   <div class="p-6 border-b border-dashed border-border">
+                      <ng-container *ngIf="expandedTemplate; else defaultExpanded">
+                        <ng-container *ngTemplateOutlet="expandedTemplate; context: { row: row }"></ng-container>
+                      </ng-container>
+                      <ng-template #defaultExpanded>
+                        <div class="text-xs text-muted-foreground italic">No details available.</div>
+                      </ng-template>
+                   </div>
+                </td>
+              </tr>
+            </ng-container>
+          </tbody>
+        </table>
+      </div>
+
+      <tolle-pagination
+        *ngIf="paginate"
+        [totalRecords]="filteredData.length"
+        [currentPage]="currentPage"
+        [currentPageSize]="pageSize"
+        (onPageNumberChange)="updatePage()"
+        (onPageSizeChange)="updatePage()"
+      ></tolle-pagination>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent$1, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-data-table',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, PaginationComponent$1, InputComponent$1],
+                    template: `
+    <div class="space-y-4">
+      <div *ngIf="searchable" class="flex items-center py-2">
+        <tolle-input
+          [size]="size === 'lg' ? 'default' : 'sm'"
+          class="max-w-sm"
+          placeholder="Filter records..."
+          [(ngModel)]="searchTerm"
+          (ngModelChange)="onSearch()">
+          <i prefix class="ri-search-line"></i>
+        </tolle-input>
+      </div>
+
+      <div class="rounded-md border border-border bg-background overflow-hidden shadow-sm">
+        <table class="w-full text-sm">
+          <thead class="border-b bg-muted/30">
+            <tr>
+              <th *ngIf="expandable" [class]="cn('px-4', size === 'xs' ? 'w-[32px]' : 'w-[48px]')"></th>
+              <th *ngFor="let col of columns"
+                  [class]="cn(
+                  'font-medium text-muted-foreground transition-all',
+                  headerPaddingClass,
+                  fontSizeClass,
+                  col.class
+                )">
+                <div *ngIf="col.sortable; else simpleHeader" (click)="toggleSort(col.key)" class="flex items-center gap-1 cursor-pointer hover:text-foreground">
+                  {{ col.label }}
+                  <i [class]="getSortIcon(col.key)"></i>
+                </div>
+                <ng-template #simpleHeader>{{ col.label }}</ng-template>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-border">
+            <ng-container *ngFor="let row of pagedData; let i = index">
+              <tr class="hover:bg-muted/50 transition-colors">
+                <td *ngIf="expandable" class="px-4">
+                  <button (click)="toggleRow(i)"
+                          [class]="cn(
+                      'flex items-center justify-center rounded-md hover:bg-accent text-muted-foreground hover:text-foreground',
+                      size === 'xs' ? 'h-6 w-6' : 'h-8 w-8'
+                    )">
+                    <i [class]="expandedRows.has(i) ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line'"></i>
+                  </button>
+                </td>
+
+                <td *ngFor="let col of columns"
+                    [class]="cn(
+                    'align-middle transition-all',
+                    cellPaddingClass,
+                    fontSizeClass,
+                    col.class
+                  )">
+                  <ng-container *ngIf="getTemplate(col.key) as cell; else defaultValue">
+                    <ng-container *ngTemplateOutlet="cell.template; context: { $implicit: row[col.key], row: row }"></ng-container>
+                  </ng-container>
+                  <ng-template #defaultValue>
+                    <span class="text-foreground">{{ row[col.key] }}</span>
+                  </ng-template>
+                </td>
+              </tr>
+
+              <tr *ngIf="expandedRows.has(i)" class="bg-muted/10">
+                <td [attr.colspan]="columns.length + (expandable ? 1 : 0)" class="p-0">
+                   <div class="p-6 border-b border-dashed border-border">
+                      <ng-container *ngIf="expandedTemplate; else defaultExpanded">
+                        <ng-container *ngTemplateOutlet="expandedTemplate; context: { row: row }"></ng-container>
+                      </ng-container>
+                      <ng-template #defaultExpanded>
+                        <div class="text-xs text-muted-foreground italic">No details available.</div>
+                      </ng-template>
+                   </div>
+                </td>
+              </tr>
+            </ng-container>
+          </tbody>
+        </table>
+      </div>
+
+      <tolle-pagination
+        *ngIf="paginate"
+        [totalRecords]="filteredData.length"
+        [currentPage]="currentPage"
+        [currentPageSize]="pageSize"
+        (onPageNumberChange)="updatePage()"
+        (onPageSizeChange)="updatePage()"
+      ></tolle-pagination>
+    </div>
+  `
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], paginate: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [TolleCellDirective$1]
+            }], expandedTemplate: [{
+                type: Input
+            }] } });
+
+class TolleCellDirective {
+    template;
+    name; // The column key this template belongs to
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TolleCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TolleCellDirective, isStandalone: true, selector: "[tolleCell]", inputs: { name: ["tolleCell", "name"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TolleCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tolleCell]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{
+                type: Input,
+                args: ['tolleCell']
+            }] } });
+
+class AccordionItemComponent {
+    title = '';
+    class = '';
+    id;
+    isOpen = false;
+    // This will be set by the parent Accordion component
+    onToggle;
+    toggle() {
+        if (this.onToggle) {
+            this.onToggle(this.id);
+        }
+        else {
+            this.isOpen = !this.isOpen;
+        }
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AccordionItemComponent, isStandalone: true, selector: "tolle-accordion-item", inputs: { title: "title", class: "class", id: "id" }, ngImport: i0, template: `
+    <div [class]="cn('flex flex-col border-b border-border', class)">
+      <button
+        type="button"
+        (click)="toggle()"
+        class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>i]:rotate-180"
+        [attr.data-state]="isOpen ? 'open' : 'closed'"
+      >
+        <span class="text-left">{{ title }}</span>
+        <i class="ri-arrow-down-s-line text-muted-foreground transition-transform"></i>
+      </button>
+
+      <div
+        *ngIf="isOpen"
+        class="pb-4 text-sm text-muted-foreground overflow-hidden"
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-accordion-item',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="cn('flex flex-col border-b border-border', class)">
+      <button
+        type="button"
+        (click)="toggle()"
+        class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>i]:rotate-180"
+        [attr.data-state]="isOpen ? 'open' : 'closed'"
+      >
+        <span class="text-left">{{ title }}</span>
+        <i class="ri-arrow-down-s-line text-muted-foreground transition-transform"></i>
+      </button>
+
+      <div
+        *ngIf="isOpen"
+        class="pb-4 text-sm text-muted-foreground overflow-hidden"
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class AccordionComponent {
+    type = 'single';
+    class = '';
+    items;
+    ngAfterContentInit() {
+        this.items.forEach((item, index) => {
+            // Assign unique ID if none provided
+            if (item.id === undefined)
+                item.id = index;
+            // Hook into the item's toggle event
+            item.onToggle = (id) => this.handleToggle(id);
+        });
+    }
+    handleToggle(selectedId) {
+        this.items.forEach(item => {
+            if (item.id === selectedId) {
+                item.isOpen = !item.isOpen;
+            }
+            else {
+                // If type is 'single', close all other items
+                if (this.type === 'single') {
+                    item.isOpen = false;
+                }
+            }
+        });
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AccordionComponent, isStandalone: true, selector: "tolle-accordion", inputs: { type: "type", class: "class" }, queries: [{ propertyName: "items", predicate: AccordionItemComponent }], ngImport: i0, template: `
+    <div [class]="cn('w-full border-t border-border', class)">
+      <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: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-accordion',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="cn('w-full border-t border-border', class)">
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], items: [{
+                type: ContentChildren,
+                args: [AccordionItemComponent]
+            }] } });
+
+class ModalRef {
+    overlay;
+    modal;
+    stack;
+    _afterClosed$ = new Subject();
+    afterClosed$ = this._afterClosed$.asObservable();
+    constructor(overlay, modal, stack) {
+        this.overlay = overlay;
+        this.modal = modal;
+        this.stack = stack;
+        this.stack.register(this);
+        // Handle Backdrop Click
+        this.overlay.backdropClick().subscribe(() => {
+            if (this.modal.backdropClose) {
+                this.close();
+            }
+        });
+    }
+    /**
+     * Closes the modal instantly.
+     * @param result Data to pass back to the caller
+     */
+    close(result) {
+        this._afterClosed$.next(result);
+        this._afterClosed$.complete();
+        this.overlay.dispose(); // Instant disposal (No animation timer)
+        this.stack.unregister(this);
+    }
+}
+
+class ModalComponent {
+    ref;
+    contentType = 'string';
+    content;
+    modalClasses = '';
+    constructor(ref) {
+        this.ref = ref;
+    }
+    ngOnInit() {
+        this.content = this.ref.modal.content;
+        this.modalClasses = this.getModalSizeCss();
+        this.determineContentType();
+    }
+    getModalSizeCss() {
+        const { size } = this.ref.modal;
+        return cn(
+        // Base classes: Added 'w-full' and 'mx-auto'
+        'bg-background border border-border shadow-lg relative flex flex-col w-full mx-auto overflow-hidden', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'rounded-lg', 
+        // Sizing scale with explicit max-widths
+        size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[544px]', size === 'lg' && 'max-w-[1024px]');
+    }
+    determineContentType() {
+        if (typeof this.content === 'string')
+            this.contentType = 'string';
+        else if (this.content instanceof TemplateRef)
+            this.contentType = 'template';
+        else
+            this.contentType = 'component';
+    }
+    get asTemplate() { return this.content; }
+    get asComponent() { return this.content; }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, deps: [{ token: ModalRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ModalComponent, isStandalone: true, selector: "tolle-modal", ngImport: i0, template: `
+    <div [class]="modalClasses" class="pointer-events-auto" (mousedown)="$event.stopPropagation()">
+
+      <div class="flex items-center justify-between p-6 border-b border-border">
+        <h3 *ngIf="ref.modal.title" class="text-lg font-semibold text-foreground tracking-tight">
+          {{ ref.modal.title }}
+        </h3>
+        <button (click)="ref.close()" class="ml-auto p-1 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors">
+          <i class="ri-close-line text-2xl"></i>
+        </button>
+      </div>
+
+      <div class="p-6 overflow-y-auto max-h-[80vh] text-foreground">
+        <ng-container [ngSwitch]="contentType">
+          <div *ngSwitchCase="'string'">{{ content }}</div>
+
+          <ng-container *ngSwitchCase="'template'">
+            <ng-container *ngTemplateOutlet="asTemplate; context: ref.modal.context"></ng-container>
+          </ng-container>
+
+          <ng-container *ngSwitchCase="'component'">
+            <ng-container *ngComponentOutlet="asComponent"></ng-container>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-modal', standalone: true, imports: [CommonModule], template: `
+    <div [class]="modalClasses" class="pointer-events-auto" (mousedown)="$event.stopPropagation()">
+
+      <div class="flex items-center justify-between p-6 border-b border-border">
+        <h3 *ngIf="ref.modal.title" class="text-lg font-semibold text-foreground tracking-tight">
+          {{ ref.modal.title }}
+        </h3>
+        <button (click)="ref.close()" class="ml-auto p-1 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors">
+          <i class="ri-close-line text-2xl"></i>
+        </button>
+      </div>
+
+      <div class="p-6 overflow-y-auto max-h-[80vh] text-foreground">
+        <ng-container [ngSwitch]="contentType">
+          <div *ngSwitchCase="'string'">{{ content }}</div>
+
+          <ng-container *ngSwitchCase="'template'">
+            <ng-container *ngTemplateOutlet="asTemplate; context: ref.modal.context"></ng-container>
+          </ng-container>
+
+          <ng-container *ngSwitchCase="'component'">
+            <ng-container *ngComponentOutlet="asComponent"></ng-container>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [{ type: ModalRef }] });
+
+class ModalStackService {
+    _stack = new Set();
+    register(ref) {
+        this._stack.add(ref);
+    }
+    unregister(ref) {
+        this._stack.delete(ref);
+    }
+    /** Instantly closes all open modals */
+    closeAll() {
+        this._stack.forEach(ref => ref.close());
+        this._stack.clear();
+    }
+    get activeCount() {
+        return this._stack.size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalStackService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalStackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ModalService {
+    overlay;
+    injector;
+    stack;
+    constructor(overlay, injector, stack) {
+        this.overlay = overlay;
+        this.injector = injector;
+        this.stack = stack;
+    }
+    open(config) {
+        // 1. Create the Overlay (DOM placeholder)
+        const overlayRef = this.createOverlay();
+        // 2. Create the Controller (Ref)
+        const modalRef = new ModalRef(overlayRef, config, this.stack);
+        // 3. Create Injector to allow the Component to access the Ref
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [{ provide: ModalRef, useValue: modalRef }]
+        });
+        // 4. Attach the UI Component to the Overlay
+        const portal = new ComponentPortal(ModalComponent, null, injector);
+        overlayRef.attach(portal);
+        return modalRef;
+    }
+    /** Global helper to close everything */
+    closeAll() {
+        this.stack.closeAll();
+    }
+    // modal.service.ts
+    createOverlay() {
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm'],
+            panelClass: [
+                'w-full',
+                'h-full',
+                'flex',
+                'items-center',
+                'justify-center',
+                'pointer-events-none'
+            ],
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position()
+                .global()
+                .centerHorizontally()
+                .centerVertically()
+        });
+        return this.overlay.create(config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }, { token: ModalStackService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: ModalStackService }] });
+
+class Modal {
+    /** The content to display (String, Component, or Template) */
+    content;
+    /** Optional title for the standard header */
+    title;
+    /** * Predefined size scale.
+     * - xs: 320px (Mobile alerts)
+     * - sm: 425px (Standard dialogs)
+     * - default: 544px (Forms)
+     * - lg: 90% / 1024px (Data tables)
+     * - fullscreen: 100vw/100vh (Complex workflows)
+     */
+    size = 'default';
+    /** * If true (default), clicking the backdrop closes the modal.
+     * Set to false for "blocking" modals (e.g., Terms of Service).
+     */
+    backdropClose = true;
+    /** * Data to pass to a Component content.
+     * Accessed via @Input() in the child component.
+     */
+    data;
+    /** * Context to pass to a TemplateRef content.
+     * Accessed via `let-val` in the HTML.
+     */
+    context;
+}
+
+class ButtonGroupComponent {
+    class = '';
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonGroupComponent, isStandalone: true, selector: "tolle-button-group", inputs: { class: "class" }, ngImport: i0, template: `
+    <div [class]="cn('inline-flex items-center -space-x-px rounded-md shadow-sm', class)">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:inline-block}:host ::ng-deep tolle-button:first-child button{@apply rounded-r-none;}:host ::ng-deep tolle-button:not(:first-child):not(:last-child) button{@apply rounded-none border-l-0;}:host ::ng-deep tolle-button:last-child:not(:first-child) button{@apply rounded-l-none border-l-0;}:host ::ng-deep tolle-button button:hover,:host ::ng-deep tolle-button button:focus{@apply z-10 relative;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-button-group', standalone: true, imports: [CommonModule], template: `
+    <div [class]="cn('inline-flex items-center -space-x-px rounded-md shadow-sm', class)">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:inline-block}:host ::ng-deep tolle-button:first-child button{@apply rounded-r-none;}:host ::ng-deep tolle-button:not(:first-child):not(:last-child) button{@apply rounded-none border-l-0;}:host ::ng-deep tolle-button:last-child:not(:first-child) button{@apply rounded-l-none border-l-0;}:host ::ng-deep tolle-button button:hover,:host ::ng-deep tolle-button button:focus{@apply z-10 relative;}\n"] }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class RangeCalendarComponent {
+    class = '';
+    disablePastDates = false;
+    rangeSelect = new EventEmitter(); // Emits whenever selection changes
+    currentView = 'date';
+    viewDate = new Date();
+    // The Range Value
+    value = { start: null, end: null };
+    weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    daysInMonth = [];
+    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    years = [];
+    navBtnClass = cn('h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 border border-input rounded-md flex items-center justify-center hover:bg-accent hover:text-accent-foreground transition-all');
+    onTouched = () => { };
+    onChange = () => { };
+    cn = cn;
+    ngOnInit() {
+        this.generateDays();
+        this.generateYears();
+    }
+    // --- Date Generation Logic (Same as Calendar) ---
+    generateDays() {
+        const start = startOfWeek(startOfMonth(this.viewDate));
+        const end = endOfWeek(endOfMonth(this.viewDate));
+        this.daysInMonth = eachDayOfInterval({ start, end });
+    }
+    generateYears() {
+        const currentYear = this.viewDate.getFullYear();
+        this.years = Array.from({ length: 16 }, (_, i) => currentYear - 6 + i);
+    }
+    setView(view) {
+        this.currentView = view;
+        if (view === 'year')
+            this.generateYears();
+    }
+    prev() {
+        if (this.currentView === 'date') {
+            this.viewDate = subMonths(this.viewDate, 1);
+            this.generateDays();
+        }
+        else if (this.currentView === 'year') {
+            this.viewDate = subYears(this.viewDate, 16);
+            this.generateYears();
+        }
+        else if (this.currentView === 'month') {
+            this.viewDate = subYears(this.viewDate, 1);
+        }
+    }
+    next() {
+        if (this.currentView === 'date') {
+            this.viewDate = addMonths(this.viewDate, 1);
+            this.generateDays();
+        }
+        else if (this.currentView === 'year') {
+            this.viewDate = addYears(this.viewDate, 16);
+            this.generateYears();
+        }
+        else if (this.currentView === 'month') {
+            this.viewDate = addYears(this.viewDate, 1);
+        }
+    }
+    // --- Range Selection Logic ---
+    selectDate(date) {
+        if (this.isDateDisabled(date))
+            return;
+        const { start, end } = this.value;
+        // 1. If start exists but end doesn't
+        if (start && !end) {
+            if (isBefore(date, start)) {
+                // User clicked earlier date -> Reset start
+                this.value = { start: date, end: null };
+            }
+            else {
+                // User clicked later date -> Complete range
+                this.value = { start, end: date };
+            }
+        }
+        // 2. If neither exist OR both exist (reset)
+        else {
+            this.value = { start: date, end: null };
+        }
+        if (!isSameMonth(date, this.viewDate)) {
+            this.viewDate = date;
+            this.generateDays();
+        }
+        this.onChange(this.value);
+        this.rangeSelect.emit(this.value);
+        this.onTouched();
+    }
+    selectMonth(monthIndex) {
+        this.viewDate = setMonth(this.viewDate, monthIndex);
+        this.currentView = 'date';
+        this.generateDays();
+    }
+    selectYear(year) {
+        this.viewDate = setYear(this.viewDate, year);
+        this.currentView = 'date';
+        this.generateDays();
+    }
+    // --- Visual Styling for Range ---
+    getDayClass(date) {
+        const { start, end } = this.value;
+        const isOutside = !isSameMonth(date, this.viewDate);
+        const isDisabled = this.isDateDisabled(date);
+        // Range Checks
+        const isStart = start && isSameDay(date, start);
+        const isEnd = end && isSameDay(date, end);
+        const isInside = start && end && isWithinInterval(date, { start, end });
+        const isTodayDate = isToday(date);
+        return cn(
+        // Base: h-9 w-9, but we remove margins/rounding for the 'strip' effect
+        'h-9 w-9 p-0 font-normal text-sm transition-all flex items-center justify-center relative z-10', 
+        // Default State (Not selected, Not disabled)
+        !isInside && !isStart && !isEnd && !isDisabled && 'hover:bg-accent hover:text-accent-foreground rounded-md', 
+        // The "Caps": Start and End
+        (isStart || isEnd) && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', 
+        // The "Strip": Dates between start and end
+        isInside && !isStart && !isEnd && 'bg-accent text-accent-foreground rounded-none', 
+        // Connecting the Caps to the Strip (Rectangular inside edges)
+        isStart && end && 'rounded-l-md rounded-r-none', isEnd && start && 'rounded-r-md rounded-l-none', 
+        // If no end date yet, Start should be fully rounded
+        isStart && !end && 'rounded-md', 
+        // Muted/Disabled logic
+        !isInside && isTodayDate && !isStart && !isEnd && 'bg-accent/50 text-accent-foreground rounded-md', (isOutside || isDisabled) && 'text-muted-foreground opacity-50', isDisabled && 'cursor-not-allowed');
+    }
+    isDateDisabled(date) {
+        return this.disablePastDates ? isBefore(date, startOfDay(new Date())) : false;
+    }
+    // --- CVA Implementation ---
+    writeValue(val) {
+        if (val) {
+            this.value = val;
+            if (val.start)
+                this.viewDate = val.start;
+            this.generateDays();
+            this.generateYears();
+        }
+    }
+    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: RangeCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RangeCalendarComponent, isStandalone: true, selector: "tolle-range-calendar", inputs: { class: "class", disablePastDates: "disablePastDates" }, outputs: { rangeSelect: "rangeSelect" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RangeCalendarComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block min-w-fit', class)">
+
+      <div class="flex items-center justify-between pt-1 pb-4 gap-2">
+        <div class="flex items-center gap-1">
+          <button type="button" (click)="setView('month')"
+            [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            {{ viewDate | date: 'MMMM' }}
+          </button>
+          <button type="button" (click)="setView('year')"
+            [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            {{ viewDate | date: 'yyyy' }}
+          </button>
+        </div>
+        <div class="flex items-center space-x-1">
+          <button type="button" (click)="prev()" [class]="navBtnClass"><i class="ri-arrow-left-s-line text-lg"></i></button>
+          <button type="button" (click)="next()" [class]="navBtnClass"><i class="ri-arrow-right-s-line text-lg"></i></button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+        <div class="grid grid-cols-7 gap-y-1 w-full">
+          <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
+            {{ day }}
+          </span>
+        </div>
+        <div class="grid grid-cols-7 gap-y-1 w-full">
+          <button
+            *ngFor="let date of daysInMonth"
+            type="button"
+            (click)="selectDate(date)"
+            [disabled]="isDateDisabled(date)"
+            [class]="getDayClass(date)"
+          >
+            {{ date | date: 'd' }}
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button *ngFor="let month of months; let i = index" type="button" (click)="selectMonth(i)"
+          [class]="cn('text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', i === viewDate.getMonth() ? 'bg-primary text-primary-foreground' : '')">
+          {{ month }}
+        </button>
+      </div>
+
+      <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button *ngFor="let year of years" type="button" (click)="selectYear(year)"
+          [class]="cn('text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground' : '')">
+          {{ year }}
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeCalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-range-calendar',
+                    standalone: true,
+                    imports: [CommonModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RangeCalendarComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block min-w-fit', class)">
+
+      <div class="flex items-center justify-between pt-1 pb-4 gap-2">
+        <div class="flex items-center gap-1">
+          <button type="button" (click)="setView('month')"
+            [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            {{ viewDate | date: 'MMMM' }}
+          </button>
+          <button type="button" (click)="setView('year')"
+            [class]="cn('text-sm font-semibold px-2 py-1 rounded transition-colors', currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground')">
+            {{ viewDate | date: 'yyyy' }}
+          </button>
+        </div>
+        <div class="flex items-center space-x-1">
+          <button type="button" (click)="prev()" [class]="navBtnClass"><i class="ri-arrow-left-s-line text-lg"></i></button>
+          <button type="button" (click)="next()" [class]="navBtnClass"><i class="ri-arrow-right-s-line text-lg"></i></button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+        <div class="grid grid-cols-7 gap-y-1 w-full">
+          <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
+            {{ day }}
+          </span>
+        </div>
+        <div class="grid grid-cols-7 gap-y-1 w-full">
+          <button
+            *ngFor="let date of daysInMonth"
+            type="button"
+            (click)="selectDate(date)"
+            [disabled]="isDateDisabled(date)"
+            [class]="getDayClass(date)"
+          >
+            {{ date | date: 'd' }}
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button *ngFor="let month of months; let i = index" type="button" (click)="selectMonth(i)"
+          [class]="cn('text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', i === viewDate.getMonth() ? 'bg-primary text-primary-foreground' : '')">
+          {{ month }}
+        </button>
+      </div>
+
+      <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+        <button *ngFor="let year of years" type="button" (click)="selectYear(year)"
+          [class]="cn('text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors', year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground' : '')">
+          {{ year }}
+        </button>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], disablePastDates: [{
+                type: Input
+            }], rangeSelect: [{
+                type: Output
+            }] } });
+
+class DateRangePickerComponent {
+    cdr;
+    disabled = false;
+    placeholder = 'Pick a date range';
+    class = '';
+    disablePastDates = false;
+    // Standardized Sizes
+    size = 'default';
+    triggerContainer;
+    popover;
+    value = { start: null, end: null };
+    isOpen = false;
+    cleanupAutoUpdate;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    get displayValue() {
+        if (!this.value.start)
+            return '';
+        const startStr = format(this.value.start, 'MMM dd, yyyy'); // Using date-fns format
+        if (!this.value.end)
+            return startStr;
+        const endStr = format(this.value.end, 'MMM dd, yyyy');
+        return `${startStr} - ${endStr}`;
+    }
+    onCalendarSelect(range) {
+        this.value = range;
+        this.onChange(this.value);
+        // Close only if range is complete
+        if (range.start && range.end) {
+            this.onChange(this.value);
+            // Small delay for UX
+            setTimeout(() => this.close(), 150);
+        }
+    }
+    togglePopover(event) {
+        if (this.disabled)
+            return;
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        setTimeout(() => this.updatePosition());
+    }
+    close() {
+        this.isOpen = false;
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+    }
+    clear(event) {
+        event.stopPropagation(); // Stop button click
+        this.value = { start: null, end: null };
+        this.onChange(this.value);
+    }
+    // --- Floating UI Positioning ---
+    updatePosition() {
+        if (!this.triggerContainer || !this.popover)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(this.triggerContainer.nativeElement, this.popover.nativeElement, () => {
+            computePosition(this.triggerContainer.nativeElement, this.popover.nativeElement, {
+                placement: 'bottom-start', // Aligned to the right where the icon is
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.popover.nativeElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    visibility: 'visible',
+                });
+            });
+        });
+    }
+    onClickOutside(event) {
+        if (this.isOpen &&
+            !this.triggerContainer.nativeElement.contains(event.target) &&
+            !this.popover.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(val) {
+        if (val) {
+            this.value = { ...val };
+        }
+        else {
+            this.value = { start: null, end: null };
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateRangePickerComponent, isStandalone: true, selector: "tolle-date-range-picker", inputs: { disabled: "disabled", placeholder: "placeholder", class: "class", disablePastDates: "disablePastDates", size: "size" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateRangePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "triggerContainer", first: true, predicate: ["triggerContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+    <div class="relative w-full" #triggerContainer>
+      <tolle-input [placeholder]="placeholder" [disabled]="disabled" [ngModel]="displayValue">
+        <div suffix class="flex items-center gap-1.5 cursor-pointer">
+          <i
+            *ngIf="(value.start || value.end) && !disabled"
+            (click)="clear($event)"
+            class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
+          ></i>
+
+          <i
+            (click)="togglePopover($event)"
+            class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+          ></i>
+        </div>
+      </tolle-input>
+      <div
+        #popover
+        *ngIf="isOpen"
+        class="absolute z-50 min-w-72"
+        style="visibility: hidden; top: 0; left: 0;"
+      >
+        <tolle-range-calendar
+          [ngModel]="value"
+          (rangeSelect)="onCalendarSelect($event)"
+          [disablePastDates]="disablePastDates"
+        ></tolle-range-calendar>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.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$1, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-date-range-picker',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, RangeCalendarComponent, InputComponent$1],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateRangePickerComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div class="relative w-full" #triggerContainer>
+      <tolle-input [placeholder]="placeholder" [disabled]="disabled" [ngModel]="displayValue">
+        <div suffix class="flex items-center gap-1.5 cursor-pointer">
+          <i
+            *ngIf="(value.start || value.end) && !disabled"
+            (click)="clear($event)"
+            class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
+          ></i>
+
+          <i
+            (click)="togglePopover($event)"
+            class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+          ></i>
+        </div>
+      </tolle-input>
+      <div
+        #popover
+        *ngIf="isOpen"
+        class="absolute z-50 min-w-72"
+        style="visibility: hidden; top: 0; left: 0;"
+      >
+        <tolle-range-calendar
+          [ngModel]="value"
+          (rangeSelect)="onCalendarSelect($event)"
+          [disablePastDates]="disablePastDates"
+        ></tolle-range-calendar>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disablePastDates: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], triggerContainer: [{
+                type: ViewChild,
+                args: ['triggerContainer']
+            }], popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of tolle
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+//# sourceMappingURL=tolle_-tolle-ui.mjs.map