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

package/fesm2022/tolle_-tolle-ui.mjs

@@ -18,10 +18,7 @@ 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", {
+const buttonVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background active:scale-[0.98]", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -36,62 +33,79 @@ const buttonVariants = cva(
             xs: "h-8 px-2 py-1 text-xs",
             sm: "h-9 rounded-md px-3",
             lg: "h-11 rounded-md px-8",
+            // RESTORED: Square icon button variants
             "icon-xs": "h-8 w-8",
             "icon-sm": "h-9 w-9",
             icon: "h-10 w-10",
             "icon-lg": "h-11 w-11",
         },
-        // Added block variant
-        block: {
-            true: "w-full flex",
-        },
-        // Added readonly variant
-        readonly: {
-            true: "pointer-events-none opacity-80",
-        },
-        disabled: {
-            true: "pointer-events-none",
-        }
+        block: { true: "w-full flex" },
+        busy: { true: "relative !cursor-wait !pointer-events-none" }
     },
     defaultVariants: {
         variant: "default",
         size: "default",
         block: false,
-        readonly: false,
     },
 });
 class ButtonComponent {
-    // Allow consumers to pass a custom class to override styles
     class = '';
-    // Expose the variants as Inputs
     variant = 'default';
     size = 'default';
-    // Added new inputs
     block = false;
-    readonly = false;
     disabled = false;
-    // Calculate the final string of classes
+    busy = false;
+    readonly = false;
     get computedClass() {
-        return cn(buttonVariants({ variant: this.variant, size: this.size, block: this.block, disabled: this.disabled }), this.class);
+        return cn(buttonVariants({
+            variant: this.variant,
+            size: this.size,
+            block: this.block,
+            busy: this.busy
+        }), 
+        // Adds 'size-icon-sm', 'size-xs', etc. for the CSS selectors to work
+        'size-' + this.size, this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size", block: "block", readonly: "readonly", disabled: "disabled" }, ngImport: i0, template: `
-    <button [class]="computedClass" [disabled]="disabled" [attr.aria-readonly]="readonly">
-     <span class="flex items-center justify-center gap-2 w-full h-full">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "tolle-button", inputs: { class: "class", variant: "variant", size: "size", block: "block", disabled: "disabled", busy: "busy", readonly: "readonly" }, ngImport: i0, template: `
+    <button
+      [class]="computedClass"
+      [disabled]="disabled || busy"
+      [attr.aria-busy]="busy"
+    >
+      <div *ngIf="busy" class="absolute inset-0 flex items-center justify-center">
+        <svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+
+      <span class="flex items-center justify-center w-full h-full" [class.invisible]="busy">
         <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 }] });
+  `, isInline: true, styles: [":host{display:inline-block}:host(.w-full){display:block}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 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" [disabled]="disabled" [attr.aria-readonly]="readonly">
-     <span class="flex items-center justify-center gap-2 w-full h-full">
+    <button
+      [class]="computedClass"
+      [disabled]="disabled || busy"
+      [attr.aria-busy]="busy"
+    >
+      <div *ngIf="busy" class="absolute inset-0 flex items-center justify-center">
+        <svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+
+      <span class="flex items-center justify-center w-full h-full" [class.invisible]="busy">
         <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"] }]
+  `, styles: [":host{display:inline-block}:host(.w-full){display:block}:host ::ng-deep i{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host-context(.size-xs) ::ng-deep i,:host-context(.size-icon-xs) ::ng-deep i,:host-context(.size-sm) ::ng-deep i,:host-context(.size-icon-sm) ::ng-deep i{font-size:1rem}:host-context(.size-default) ::ng-deep i,:host-context(.size-icon) ::ng-deep i,:host-context(.size-lg) ::ng-deep i,:host-context(.size-icon-lg) ::ng-deep i{font-size:1.2rem}\n"] }]
         }], propDecorators: { class: [{
                 type: Input
             }], variant: [{
@@ -100,86 +114,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], block: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], disabled: [{
                 type: Input
+            }], busy: [{
+                type: Input
+            }], readonly: [{
+                type: Input
             }] } });
 
 class InputComponent {
     cdr;
+    id = `input-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    hint = '';
+    errorMessage = '';
     type = 'text';
     placeholder = '';
-    disabled = false;
-    error = false;
     size = 'default';
     containerClass = '';
     class = '';
-    // Internal State
+    // New States
+    disabled = false;
+    readonly = false;
+    error = false;
     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;
-    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
     }
     onInputChange(event) {
+        if (this.readonly || this.disabled)
+            return;
         const val = event.target.value;
         this.value = val;
         this.onChange(val);
     }
-    // --- Styling Logic ---
     cn = cn;
     get computedContainerClass() {
-        return cn("group relative flex items-center w-full rounded-md border border-input bg-background ring-offset-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 shadow-sm", this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", this.disabled && "cursor-not-allowed opacity-50", this.error && "border-destructive focus-within:ring-destructive", this.containerClass);
+        return cn("group relative flex items-center w-full rounded-md border transition-all shadow-sm", "bg-background ring-offset-background", 
+        // Sizing
+        this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", 
+        // Interaction States (Focus ring disabled for Readonly/Disabled)
+        !(this.readonly || this.disabled) && "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1", 
+        // Colors & Borders
+        this.error ? "border-destructive focus-within:ring-destructive" : "border-input", 
+        // Disabled vs Readonly styling
+        this.disabled && "cursor-not-allowed opacity-50 bg-muted/30", this.readonly && "cursor-default bg-muted/10 border-dashed focus-within:ring-0", this.containerClass);
     }
     get computedInputClass() {
-        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0 disabled:cursor-not-allowed", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.class);
+        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", this.class);
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", type: "type", placeholder: "placeholder", size: "size", containerClass: "containerClass", class: "class", disabled: "disabled", readonly: "readonly", error: "error" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
             }
         ], ngImport: i0, template: `
-    <div [class]="computedContainerClass">
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class.opacity-50]="disabled"
+        class="text-sm font-medium text-foreground leading-none transition-opacity"
+      >
+        {{ label }}
+      </label>
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[prefix]"></ng-content>
-      </div>
+      <div [class]="computedContainerClass">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
 
-      <input
-        [type]="type"
-        [placeholder]="placeholder"
-        [disabled]="disabled"
-        [(ngModel)]="value"
-        (blur)="onTouched()"
-        (input)="onInputChange($event)"
-        [class]="computedInputClass"
-      />
+        <input
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [(ngModel)]="value"
+          (blur)="onTouched()"
+          (input)="onInputChange($event)"
+          [class]="computedInputClass"
+        />
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[suffix]"></ng-content>
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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,
@@ -195,35 +240,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-    <div [class]="computedContainerClass">
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class.opacity-50]="disabled"
+        class="text-sm font-medium text-foreground leading-none transition-opacity"
+      >
+        {{ label }}
+      </label>
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[prefix]"></ng-content>
-      </div>
+      <div [class]="computedContainerClass">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
 
-      <input
-        [type]="type"
-        [placeholder]="placeholder"
-        [disabled]="disabled"
-        [(ngModel)]="value"
-        (blur)="onTouched()"
-        (input)="onInputChange($event)"
-        [class]="computedInputClass"
-      />
+        <input
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [(ngModel)]="value"
+          (blur)="onTouched()"
+          (input)="onInputChange($event)"
+          [class]="computedInputClass"
+        />
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[suffix]"></ng-content>
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
     </div>
   `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: Input
-            }], placeholder: [{
+            }], label: [{
                 type: Input
-            }], disabled: [{
+            }], hint: [{
                 type: Input
-            }], error: [{
+            }], errorMessage: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -231,6 +301,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], class: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], error: [{
+                type: Input
             }] } });
 
 class CardComponent {
@@ -426,6 +502,7 @@ class SelectComponent {
     disabled = false;
     searchable = false;
     size = 'default';
+    readonly = false;
     trigger;
     popover;
     items;
@@ -453,11 +530,19 @@ class SelectComponent {
     }
     // 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);
+        return cn('flex w-full items-center justify-between rounded-md border transition-all shadow-sm', 'bg-background ring-offset-background placeholder:text-muted-foreground', 
+        // Sizing
+        this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', 
+        // Interaction States (Focus ring disabled for Readonly/Disabled)
+        !(this.readonly || this.disabled) && 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1', 
+        // Colors & Borders (Matching your Hex-based theme logic)
+        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30 border-input', this.readonly && 'cursor-default bg-muted/10 border-dashed border-input focus:ring-0', !this.disabled && !this.readonly && 'border-input hover:border-accent cursor-pointer', this.class);
     }
     // 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]');
+        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]', 
+        // Hide or fade icon when interaction is blocked
+        (this.disabled || this.readonly) && 'opacity-30');
     }
     ngAfterContentInit() {
         this.updateItemSelection();
@@ -471,7 +556,7 @@ class SelectComponent {
         }
     }
     toggle() {
-        if (this.disabled)
+        if (this.disabled || this.readonly)
             return;
         this.isOpen ? this.close() : this.open();
     }
@@ -538,7 +623,7 @@ class SelectComponent {
             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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size", readonly: "readonly" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, providers: [
             SelectService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -585,7 +670,7 @@ class SelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -653,6 +738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], trigger: [{
                 type: ViewChild,
                 args: ['trigger']
@@ -1568,7 +1655,7 @@ class MultiSelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2513,7 +2600,7 @@ class PaginationComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size"] }, { kind: "component", type: SelectItemComponent, selector: "tolle-select-item", inputs: ["value", "class", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size", "readonly"] }, { kind: "component", type: SelectItemComponent, selector: "tolle-select-item", inputs: ["value", "class", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -2642,6 +2729,16 @@ class DataTableComponent {
     pageSize = 10;
     expandable = false;
     size = 'default';
+    // --- NEW INPUTS FOR COLUMN HIDING ---
+    allowColumnHiding = true;
+    showSettings = true; // Set to false to hide the gear icon/menu entirely
+    // Track visibility state: { 'columnKey': true/false }
+    columnVisibility = {};
+    showColumnMenu = false;
+    // Filter columns based on visibility state
+    get activeColumns() {
+        return this.columns.filter(col => this.columnVisibility[col.key]);
+    }
     // Track which rows are open
     expandedRows = new Set();
     // Use ContentChildren to grab the tolleCell templates from the user's HTML
@@ -2687,11 +2784,25 @@ class DataTableComponent {
         if (changes['data']) {
             this.refreshTable();
         }
+        if (changes['columns']) {
+            this.initializeVisibility();
+        }
+    }
+    initializeVisibility() {
+        // Default all columns to visible if not already set
+        this.columns.forEach(col => {
+            if (this.columnVisibility[col.key] === undefined) {
+                this.columnVisibility[col.key] = true;
+            }
+        });
     }
     // --- 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(); }
+    toggleColumn(key) {
+        this.columnVisibility[key] = !this.columnVisibility[key];
+    }
     applySearch() {
         if (!this.searchTerm) {
             this.filteredData = [...this.data];
@@ -2749,7 +2860,7 @@ class DataTableComponent {
         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 }], usesOnChanges: true, ngImport: i0, template: `
+    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", allowColumnHiding: "allowColumnHiding", showSettings: "showSettings", expandedTemplate: "expandedTemplate" }, queries: [{ propertyName: "cellTemplates", predicate: TolleCellDirective }], usesOnChanges: true, ngImport: i0, template: `
     <div class="space-y-4">
       <div *ngIf="searchable" class="flex items-center py-2">
         <tolle-input
@@ -2837,7 +2948,7 @@ class DataTableComponent {
         (onPageSizeChange)="updatePage()"
       ></tolle-pagination>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -2949,6 +3060,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], allowColumnHiding: [{
+                type: Input
+            }], showSettings: [{
+                type: Input
             }], cellTemplates: [{
                 type: ContentChildren,
                 args: [TolleCellDirective]
@@ -3743,7 +3858,7 @@ class DateRangePickerComponent {
         ></tolle-range-calendar>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -3955,6 +4070,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['click']
             }] } });
 
+class TextareaComponent {
+    textareaElement;
+    id = `textarea-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    placeholder = '';
+    hint = '';
+    rows = 3;
+    maxLength;
+    showCharacterCount = false;
+    autoGrow = false;
+    error = false;
+    className = '';
+    // New States
+    disabled = false;
+    readonly = false;
+    value = '';
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        if (this.autoGrow)
+            this.resize();
+    }
+    get textareaClasses() {
+        return cn('flex w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 shadow-sm', 'placeholder:text-muted-foreground focus-visible:outline-none', 
+        // Focus States (Disabled only when readonly or disabled is true)
+        !(this.readonly || this.disabled) && 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', 
+        // Border colors
+        this.error ? 'border-destructive' : 'border-input', 
+        // Disabled vs Readonly styles
+        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30', this.readonly && 'cursor-default bg-muted/10 border-dashed focus-visible:ring-0', 'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', 'min-h-[80px]', this.className);
+    }
+    handleInput(event) {
+        if (this.readonly || this.disabled)
+            return;
+        const val = event.target.value;
+        this.value = val;
+        this.onChange(val);
+        if (this.autoGrow)
+            this.resize();
+    }
+    resize() {
+        const textarea = this.textareaElement.nativeElement;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+    writeValue(value) {
+        this.value = value;
+        if (this.autoGrow)
+            setTimeout(() => this.resize());
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "tolle-textarea", inputs: { id: "id", label: "label", placeholder: "placeholder", hint: "hint", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoGrow: "autoGrow", error: "error", className: "className", disabled: "disabled", readonly: "readonly" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label *ngIf="label" [for]="id"
+             [class.opacity-50]="disabled"
+             class="text-sm font-medium text-foreground leading-none transition-opacity">
+        {{ label }}
+      </label>
+
+      <div class="relative">
+        <textarea
+          #textareaElement
+          [id]="id"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [rows]="rows"
+          [(ngModel)]="value"
+          (input)="handleInput($event)"
+          (blur)="onTouched()"
+          [class]="textareaClasses"
+          [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
+          [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+        ></textarea>
+      </div>
+
+      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
+        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
+        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+          {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
+        </p>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-textarea',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label *ngIf="label" [for]="id"
+             [class.opacity-50]="disabled"
+             class="text-sm font-medium text-foreground leading-none transition-opacity">
+        {{ label }}
+      </label>
+
+      <div class="relative">
+        <textarea
+          #textareaElement
+          [id]="id"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [rows]="rows"
+          [(ngModel)]="value"
+          (input)="handleInput($event)"
+          (blur)="onTouched()"
+          [class]="textareaClasses"
+          [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
+          [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+        ></textarea>
+      </div>
+
+      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
+        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
+        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+          {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
+        </p>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { textareaElement: [{
+                type: ViewChild,
+                args: ['textareaElement']
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], showCharacterCount: [{
+                type: Input
+            }], autoGrow: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -3963,5 +4248,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle_-tolle-ui.mjs.map