angular-tailwind-components 1.1.3 → 1.2.1

package/fesm2022/angular-tailwind-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, output, InjectionToken, model, forwardRef, effect, contentChildren, ApplicationRef, EnvironmentInjector, Injector, createComponent, Injectable, booleanAttribute } from '@angular/core';
+import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, output, InjectionToken, model, forwardRef, viewChildren, effect, contentChildren, ApplicationRef, EnvironmentInjector, Injector, createComponent, Injectable, booleanAttribute } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -1672,6 +1672,555 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     ], template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-surface-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+class TailwindTextarea extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Visible row count */
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Optional maximum width in columns */
+    cols = input(undefined, ...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
+    /** Maximum character length (HTML maxlength) */
+    maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    /** Resize behavior */
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether the textarea is readonly */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below field */
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error text shown when hasError is true */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    /** Whether the textarea is in error state */
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Two-way bound value */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Computed textarea classes */
+    textareaClasses = computed(() => {
+        const base = [
+            'block w-full bg-white',
+            'border transition-colors duration-150',
+            'placeholder:text-surface-400',
+            'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
+            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed'
+        ];
+        const sizeMap = {
+            xs: 'text-xs px-2 py-1 rounded-sm min-h-[4.5rem]',
+            sm: 'text-sm px-2.5 py-1.5 rounded-md min-h-[5rem]',
+            md: 'text-sm px-3 py-2 rounded-md min-h-[5.5rem]',
+            lg: 'text-base px-3.5 py-2.5 rounded-lg min-h-[6.5rem]',
+            xl: 'text-base px-4 py-3 rounded-lg min-h-[7.5rem]'
+        };
+        const resizeMap = {
+            vertical: 'resize-y',
+            none: 'resize-none',
+            both: 'resize',
+            horizontal: 'resize-x'
+        };
+        const stateClass = this.hasError()
+            ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
+            : 'border-surface-300 focus:outline-primary-500 text-surface-900';
+        return [...base, sizeMap[this.size()], resizeMap[this.resize()], stateClass].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "textareaClasses" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    onInputChange(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTextarea, isStandalone: true, selector: "tailwind-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindTextarea),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-textarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindTextarea),
+                            multi: true
+                        }
+                    ], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class TailwindUpload extends TailwindComponent {
+    static nextId = 0;
+    fallbackFileId = `tw-upload-${TailwindUpload.nextId++}`;
+    fileInput = viewChild.required('fileInput');
+    /** Visual layout: compact button or drop zone */
+    variant = input('area', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Button label when `variant` is `button` */
+    buttonLabel = input('Choose file', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** Drop zone title when `variant` is `area` */
+    areaTitle = input('Drag and drop a file', ...(ngDevMode ? [{ debugName: "areaTitle" }] : /* istanbul ignore next */ []));
+    /** Drop zone hint when `variant` is `area` */
+    areaHint = input('or click to browse', ...(ngDevMode ? [{ debugName: "areaHint" }] : /* istanbul ignore next */ []));
+    /** Accepted MIME types / extensions (native `accept`) */
+    accept = input(undefined, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Allow multiple files */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Max size per file (bytes); if any file exceeds it, selection is rejected */
+    maxFileSizeBytes = input(undefined, ...(ngDevMode ? [{ debugName: "maxFileSizeBytes" }] : /* istanbul ignore next */ []));
+    /** Button / control size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Show a clear control when there is a value */
+    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Label for the clear action (i18n) */
+    clearText = input('clear', ...(ngDevMode ? [{ debugName: "clearText" }] : /* istanbul ignore next */ []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Data URL (`data:<mime>;base64,...`) — forms / `[(value)]`; with `multiple`, only the first file is stored here */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Raw files after a successful selection */
+    filesSelected = output();
+    /** Human-readable validation message when selection is rejected */
+    validationError = output();
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    selectedNames = signal([], ...(ngDevMode ? [{ debugName: "selectedNames" }] : /* istanbul ignore next */ []));
+    dragDepth = 0;
+    onChange = () => { };
+    onTouched = () => { };
+    fileInputId = computed(() => this.id() ?? this.fallbackFileId, ...(ngDevMode ? [{ debugName: "fileInputId" }] : /* istanbul ignore next */ []));
+    areaClasses = computed(() => {
+        const base = [
+            'flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-10 text-center',
+            'transition-colors duration-150 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+        ];
+        if (this.isDisabled()) {
+            return [...base, 'cursor-not-allowed opacity-50 bg-surface-50 border-surface-200 text-surface-500'].join(' ');
+        }
+        if (this.isDragOver()) {
+            return [...base, 'cursor-pointer border-primary-500 bg-primary-50/60 text-surface-800 focus-visible:outline-primary-500'].join(' ');
+        }
+        if (this.hasError()) {
+            return [
+                ...base,
+                'cursor-pointer border-danger-400 bg-danger-50/40 text-danger-900 focus-visible:outline-danger-500 hover:border-danger-500'
+            ].join(' ');
+        }
+        return [
+            ...base,
+            'cursor-pointer border-surface-300 bg-surface-50/50 text-surface-800 focus-visible:outline-primary-500',
+            'hover:border-primary-400 hover:bg-primary-50/30'
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "areaClasses" }] : /* istanbul ignore next */ []));
+    writeValue(obj) {
+        this.value.set(obj ?? '');
+        if (!obj) {
+            this.selectedNames.set([]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    triggerPicker(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.fileInput().nativeElement.click();
+    }
+    onKeydownArea(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.triggerPicker();
+        }
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.dragDepth++;
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0) {
+            this.isDragOver.set(false);
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragDepth = 0;
+        this.isDragOver.set(false);
+        if (this.isDisabled())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files?.length) {
+            void this.handleFiles(files);
+        }
+    }
+    onNativeChange(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files?.length) {
+            void this.handleFiles(files);
+        }
+        input.value = '';
+    }
+    clear(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.selectedNames.set([]);
+        this.value.set('');
+        this.onChange('');
+        this.fileInput().nativeElement.value = '';
+    }
+    blurHost() {
+        this.onTouched();
+    }
+    validate(files) {
+        const max = this.maxFileSizeBytes();
+        if (max == null)
+            return null;
+        const tooLarge = files.filter((f) => f.size > max);
+        if (tooLarge.length === 0)
+            return null;
+        const maxLabel = max >= 1024 * 1024
+            ? `${(max / (1024 * 1024)).toFixed(1)} MB`
+            : max >= 1024
+                ? `${Math.round(max / 1024)} KB`
+                : `${max} bytes`;
+        return tooLarge.length === 1
+            ? `File exceeds maximum size (${maxLabel}).`
+            : `${tooLarge.length} files exceed maximum size (${maxLabel}).`;
+    }
+    async handleFiles(fileList) {
+        let files = Array.from(fileList);
+        if (!this.multiple() && files.length > 1) {
+            files = [files[0]];
+        }
+        const err = this.validate(files);
+        if (err) {
+            this.validationError.emit(err);
+            return;
+        }
+        this.selectedNames.set(files.map((f) => f.name));
+        try {
+            const dataUrls = await Promise.all(files.map((f) => this.readAsDataUrl(f)));
+            this.filesSelected.emit(files);
+            const primary = dataUrls[0] ?? '';
+            this.value.set(primary);
+            this.onChange(primary);
+        }
+        catch {
+            this.validationError.emit('Could not read file.');
+        }
+    }
+    readAsDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const result = reader.result;
+                if (typeof result === 'string') {
+                    resolve(result);
+                }
+                else {
+                    reject(new Error('Unexpected read result'));
+                }
+            };
+            reader.onerror = () => reject(reader.error ?? new Error('read error'));
+            reader.readAsDataURL(file);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindUpload, isStandalone: true, selector: "tailwind-upload", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, areaTitle: { classPropertyName: "areaTitle", publicName: "areaTitle", isSignal: true, isRequired: false, transformFunction: null }, areaHint: { classPropertyName: "areaHint", publicName: "areaHint", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearText: { classPropertyName: "clearText", publicName: "clearText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filesSelected: "filesSelected", validationError: "validationError" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindUpload),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"fileInputId()\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-upload\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-surface-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-surface-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-upload', imports: [TailwindIcon, TailwindButton], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindUpload),
+                            multi: true
+                        }
+                    ], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"fileInputId()\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-upload\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-surface-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-surface-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], areaTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaTitle", required: false }] }], areaHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaHint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
+
+class TailwindInputOtp extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Number of character slots */
+    length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /** Allow only digits */
+    integerOnly = input(true, ...(ngDevMode ? [{ debugName: "integerOnly" }] : /* istanbul ignore next */ []));
+    /** Mask digits (password bullets) */
+    mask = input(false, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Slots are read-only (navigation still allowed) */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below */
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error text when hasError is true */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    /** Error state styling */
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the group (used when label is empty) */
+    ariaLabel = input('Verification code', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Separator string; empty hides */
+    separator = input('', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** 0-based slot index after which the separator is rendered */
+    separatorAfterIndex = input(null, ...(ngDevMode ? [{ debugName: "separatorAfterIndex" }] : /* istanbul ignore next */ []));
+    /** Hint for browsers / SMS autofill (first slot only) */
+    autocomplete = input('one-time-code', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Two-way bound full code string */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted when all slots are filled */
+    completed = output();
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    slotIndexes = computed(() => {
+        const n = Math.max(1, Math.min(32, Math.floor(this.length())));
+        return Array.from({ length: n }, (_, i) => i);
+    }, ...(ngDevMode ? [{ debugName: "slotIndexes" }] : /* istanbul ignore next */ []));
+    otpInputs = viewChildren('otpDigit', ...(ngDevMode ? [{ debugName: "otpInputs" }] : /* istanbul ignore next */ []));
+    cellClasses = computed(() => {
+        const base = [
+            'block w-10 text-center font-mono tabular-nums bg-white',
+            'border transition-colors duration-150',
+            'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
+            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed'
+        ];
+        const sizeMap = {
+            xs: 'text-xs px-1 py-1 rounded-sm min-w-7',
+            sm: 'text-sm px-1.5 py-1.5 rounded-md min-w-8',
+            md: 'text-sm px-2 py-2 rounded-md min-w-10',
+            lg: 'text-base px-2.5 py-2.5 rounded-lg min-w-11',
+            xl: 'text-base px-3 py-3 rounded-lg min-w-12'
+        };
+        const stateClass = this.hasError()
+            ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
+            : 'border-surface-300 focus:outline-primary-500 text-surface-900';
+        return [...base, sizeMap[this.size()], stateClass].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "cellClasses" }] : /* istanbul ignore next */ []));
+    groupAriaLabel = computed(() => this.label() || this.ariaLabel(), ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(this.normalizeIncoming(value ?? ''));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    maxSlots() {
+        return this.slotIndexes().length;
+    }
+    digitAt(index) {
+        return this.value()[index] ?? '';
+    }
+    showSeparatorAfter(index) {
+        const sep = this.separator();
+        const pos = this.separatorAfterIndex();
+        return !!sep && pos !== null && pos === index;
+    }
+    inputType() {
+        return this.mask() ? 'password' : 'text';
+    }
+    inputMode() {
+        return this.integerOnly() ? 'numeric' : 'text';
+    }
+    autocompleteForSlot(index) {
+        return index === 0 ? this.autocomplete() : null;
+    }
+    cellId(index) {
+        const base = this.id() ?? 'tailwind-input-otp';
+        return `${base}-digit-${index}`;
+    }
+    onSlotFocus(index) {
+        this.onTouched();
+        const len = this.value().length;
+        if (index > len) {
+            queueMicrotask(() => this.focusSlot(Math.min(len, this.maxSlots() - 1)));
+        }
+    }
+    onInput(event, index) {
+        if (this.readonly()) {
+            return;
+        }
+        const inputEl = event.target;
+        let raw = inputEl.value;
+        if (this.integerOnly()) {
+            raw = raw.replace(/\D/g, '');
+        }
+        const char = raw.slice(-1);
+        let v = this.value();
+        const max = this.maxSlots();
+        if (char && index > v.length) {
+            queueMicrotask(() => this.focusSlot(v.length));
+            inputEl.value = this.digitAt(index);
+            return;
+        }
+        if (!char) {
+            if (index < v.length) {
+                v = v.slice(0, index) + v.slice(index + 1);
+            }
+        }
+        else {
+            if (index < v.length) {
+                v = v.slice(0, index) + char + v.slice(index + 1);
+            }
+            else if (index === v.length) {
+                v = v + char;
+            }
+            v = v.slice(0, max);
+        }
+        v = this.normalizeIncoming(v);
+        this.commit(v);
+        queueMicrotask(() => {
+            inputEl.value = this.digitAt(index);
+            if (char && index < max - 1) {
+                this.focusSlot(index + 1);
+            }
+        });
+    }
+    onPaste(event, index) {
+        if (this.readonly() || this.isDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text') ?? '';
+        let cleaned = this.integerOnly() ? text.replace(/\D/g, '') : text.replace(/\s/g, '');
+        const max = this.maxSlots();
+        cleaned = cleaned.slice(0, max - index);
+        const merged = this.normalizeIncoming(this.value().slice(0, index) + cleaned);
+        this.commit(merged);
+        queueMicrotask(() => this.focusSlot(cleaned.length ? Math.min(index + cleaned.length - 1, max - 1) : index));
+    }
+    onKeydown(event, index) {
+        const max = this.maxSlots();
+        const v = this.value();
+        if (event.key === 'Backspace') {
+            const cur = this.digitAt(index);
+            if (!cur && index > 0) {
+                event.preventDefault();
+                const nextVal = this.normalizeIncoming(v.slice(0, index - 1) + v.slice(index));
+                this.commit(nextVal);
+                queueMicrotask(() => this.focusSlot(index - 1));
+            }
+            else if (cur) {
+                event.preventDefault();
+                const nextVal = this.normalizeIncoming(v.slice(0, index) + v.slice(index + 1));
+                this.commit(nextVal);
+                queueMicrotask(() => {
+                    const el = this.otpInputs()[index]?.nativeElement;
+                    if (el) {
+                        el.value = this.digitAt(index);
+                    }
+                });
+            }
+            return;
+        }
+        if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            this.focusSlot(index - 1);
+        }
+        else if (event.key === 'ArrowRight' && index < max - 1) {
+            event.preventDefault();
+            this.focusSlot(index + 1);
+        }
+    }
+    commit(joined) {
+        const prev = this.value();
+        this.value.set(joined);
+        this.onChange(joined);
+        const max = this.maxSlots();
+        if (joined.length === max && prev.length !== max) {
+            this.completed.emit(joined);
+        }
+    }
+    normalizeIncoming(v) {
+        const max = Math.max(1, Math.min(32, Math.floor(this.length())));
+        let s = v ?? '';
+        if (this.integerOnly()) {
+            s = s.replace(/\D/g, '');
+        }
+        return s.slice(0, max);
+    }
+    focusSlot(index) {
+        queueMicrotask(() => {
+            const list = this.otpInputs();
+            const el = list[index]?.nativeElement;
+            el?.focus();
+            el?.select();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindInputOtp, isStandalone: true, selector: "tailwind-input-otp", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorAfterIndex: { classPropertyName: "separatorAfterIndex", publicName: "separatorAfterIndex", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindInputOtp),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"cellId(0)\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-surface-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-input-otp', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindInputOtp),
+                            multi: true
+                        }
+                    ], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"cellId(0)\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-surface-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorAfterIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorAfterIndex", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], otpInputs: [{ type: i0.ViewChildren, args: ['otpDigit', { isSignal: true }] }] } });
+
 class TailwindCheckbox extends TailwindComponent {
     /** Label text */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -2814,11 +3363,11 @@ class TailwindBreadcrumb extends TailwindComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center gap-1.5 text-sm\">\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\n      <li class=\"inline-flex items-center\">\n        @if (!first) {\n          <span class=\"mx-1.5 text-surface-400\" aria-hidden=\"true\">\n            <svg class=\"w-3.5 h-3.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n        }\n        @if (item.href && !last) {\n          <a [href]=\"item.href\" class=\"text-surface-500 hover:text-primary-600 transition-colors font-medium\">{{\n            item.label\n          }}</a>\n        } @else {\n          <span\n            class=\"font-medium\"\n            [class.text-surface-900]=\"last\"\n            [class.text-surface-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            >{{ item.label }}</span\n          >\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center gap-1.5 text-sm\">\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\n      <li class=\"inline-flex items-center\">\n        @if (!first) {\n          <span class=\"mx-1.5 text-surface-400\" aria-hidden=\"true\">\n            <svg class=\"w-3.5 h-3.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n        }\n        @if ((item.link ?? item.href) && !last) {\n          <a\n            [href]=\"item.link ?? item.href\"\n            class=\"inline-flex items-center gap-1 text-surface-500 hover:text-primary-600 transition-colors font-medium\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </a>\n        } @else {\n          <span\n            class=\"inline-flex items-center gap-1 font-medium\"\n            [class.text-surface-900]=\"last\"\n            [class.text-surface-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center gap-1.5 text-sm\">\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\n      <li class=\"inline-flex items-center\">\n        @if (!first) {\n          <span class=\"mx-1.5 text-surface-400\" aria-hidden=\"true\">\n            <svg class=\"w-3.5 h-3.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n        }\n        @if (item.href && !last) {\n          <a [href]=\"item.href\" class=\"text-surface-500 hover:text-primary-600 transition-colors font-medium\">{{\n            item.label\n          }}</a>\n        } @else {\n          <span\n            class=\"font-medium\"\n            [class.text-surface-900]=\"last\"\n            [class.text-surface-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            >{{ item.label }}</span\n          >\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [TailwindIcon], selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center gap-1.5 text-sm\">\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\n      <li class=\"inline-flex items-center\">\n        @if (!first) {\n          <span class=\"mx-1.5 text-surface-400\" aria-hidden=\"true\">\n            <svg class=\"w-3.5 h-3.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n        }\n        @if ((item.link ?? item.href) && !last) {\n          <a\n            [href]=\"item.link ?? item.href\"\n            class=\"inline-flex items-center gap-1 text-surface-500 hover:text-primary-600 transition-colors font-medium\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </a>\n        } @else {\n          <span\n            class=\"inline-flex items-center gap-1 font-medium\"\n            [class.text-surface-900]=\"last\"\n            [class.text-surface-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class TailwindPagination extends TailwindComponent {
@@ -4144,5 +4693,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective };
+export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload };
 //# sourceMappingURL=angular-tailwind-components.mjs.map