@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-text-area.mjs

@@ -0,0 +1,111 @@
+import * as i0 from '@angular/core';
+import { inject, computed, input, Directive } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+const textAreaVariants = cva(`
+        bg-input-background
+
+        border border-input-border outline-none
+        selection:bg-primary selection:text-primary-foreground
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        shadow-xs
+        px-2 py-1 text-sm
+
+        placeholder:text-muted-foreground
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+        focus-visible:border-primary
+
+        disabled:pointer-events-none disabled:opacity-50
+        disabled:cursor-not-allowed disabled:select-none
+
+        [&.ng-touched.ng-invalid]:border-error
+        [&.ng-touched.ng-invalid]:ring-error/40
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+
+const textAreaThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return textAreaVariants;
+        default:
+            return textAreaVariants;
+    }
+};
+
+class TextAreaDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const classes = textAreaThemeVariants(theme)({ rounded });
+            const userClass = this.userClass();
+            return twMerge(classes, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.inputInvalid = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the textarea.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the textarea as invalid, triggering error border and ring styling.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the textarea as touched. Error styling is only shown when both `invalid` and `touched` are `true`.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextAreaDirective, isStandalone: true, selector: "textarea[monaTextArea]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-invalid": "inputInvalid() || null", "attr.data-invalid": "inputInvalid() || null", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextAreaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "textarea[monaTextArea]",
+                    host: {
+                        "[attr.aria-invalid]": "inputInvalid() || null",
+                        "[attr.data-invalid]": "inputInvalid() || null",
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/text-area
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TextAreaDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-text-area.mjs.map

package/fesm2022/nanahoshi-mona-ui-text-box.mjs

@@ -0,0 +1,369 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, computed, viewChild, contentChildren, TemplateRef, input, output, model, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { LucideX } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { rxTimeout, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class TextBoxPrefixTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxPrefixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TextBoxPrefixTemplateDirective, isStandalone: true, selector: "ng-template[monaTextBoxPrefixTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxPrefixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaTextBoxPrefixTemplate]"
+                }]
+        }] });
+
+class TextBoxSuffixTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxSuffixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TextBoxSuffixTemplateDirective, isStandalone: true, selector: "ng-template[monaTextBoxSuffixTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxSuffixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaTextBoxSuffixTemplate]"
+                }]
+        }] });
+
+const textBoxVariants = cva(`
+        flex items-center w-full min-w-0
+        overflow-hidden
+
+        bg-input-background
+        border border-input-border outline-none
+        selection:bg-primary selection:text-primary-foreground
+
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        focus-within:ring-2 focus-within:ring-primary/40
+        focus-within:border-primary
+
+        [&>input]:w-full [&>input]:h-full
+        [&>input]:bg-transparent
+        [&>input]:border-0 [&>input]:outline-none
+        [&>input]:placeholder:text-muted-foreground
+        [&>input]:px-2
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: "h-10 text-md",
+            medium: "h-9 text-sm",
+            small: "h-8 text-xs"
+        }
+    }
+});
+const inputVariants = cva(`
+        bg-input-background
+        px-2
+
+        border border-input-border outline-none
+        selection:bg-primary selection:text-primary-foreground
+
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        shadow-xs
+
+        file:text-foreground
+        file:inline-flex file:border-0
+        file:bg-transparent file:text-xs
+        file:font-medium
+
+        placeholder:text-muted-foreground
+
+        disabled:pointer-events-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+        focus-visible:border-primary
+
+        [&.ng-touched.ng-invalid]:border-error
+        [&.ng-touched.ng-invalid]:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full px-4",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: "h-10 text-md",
+            medium: "h-9 text-sm",
+            small: "h-8 text-xs"
+        }
+    },
+    compoundVariants: [
+        {
+            rounded: "full",
+            size: "large",
+            class: "px-4"
+        },
+        {
+            rounded: "full",
+            size: "medium",
+            class: "px-4"
+        },
+        {
+            rounded: "full",
+            size: "small",
+            class: "px-4"
+        }
+    ]
+});
+
+const textBoxThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return textBoxVariants;
+        default:
+            return textBoxVariants; // Default to Mona styles
+    }
+};
+const inputThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return inputVariants;
+        default:
+            return inputVariants; // Default to Mona styles
+    }
+};
+
+class TextBoxComponent {
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#themeService = inject(ThemeService);
+        this.classes = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const classes = textBoxThemeVariants(theme)({ rounded, size });
+            const userClass = this.userClass();
+            return twMerge(classes, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputRef = viewChild.required("input", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+        this.invalidInput = computed(() => this.invalid() || (this.required() && !this.value() && this.touched()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidInput" }] : /* istanbul ignore next */ []));
+        this.prefixTemplateList = contentChildren(TextBoxPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.suffixTemplateList = contentChildren(TextBoxSuffixTemplateDirective, { ...(ngDevMode ? { debugName: "suffixTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Displays a clear button that resets the value to empty.
+         * @default false
+         */
+        this.clearButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearButton" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional HTML attributes applied directly to the inner `<input>` element.
+         * @default {}
+         */
+        this.inputAttributes = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the inner input loses focus.
+         */
+        this.inputBlur = output();
+        /**
+         * @description Emitted when the inner input gains focus.
+         */
+        this.inputFocus = output();
+        /**
+         * @description Additional CSS classes applied to the inner `<input>` element.
+         * @default ""
+         */
+        this.inputClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Inline styles applied to the inner `<input>` element.
+         * Accepts a style string or a `CSSStyleDeclaration` partial.
+         * @default null
+         */
+        this.inputStyle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the text box as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Placeholder text shown when no value has been entered.
+         * @default ""
+         */
+        this.placeholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Prevents value changes while preserving the component's visual state.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the text box as required.
+         * Triggers the invalid state when the value is empty and the field has been touched.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the component's dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the text box is interacted with — on blur, value change, or clear.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the text box. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the `type` attribute of the inner `<input>` element.
+         * @default "text"
+         */
+        this.type = input("text", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Two-way bindable current value of the text box.
+         * @default ""
+         */
+        this.value = model("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #destroyRef;
+    #themeService;
+    focus() {
+        const el = this.inputRef().nativeElement;
+        el.focus();
+        rxTimeout(this.#destroyRef, () => {
+            el.scrollLeft = el.scrollWidth;
+        });
+    }
+    onClearClick() {
+        this.value.set("");
+        this.touch.emit();
+        this.inputRef().nativeElement.focus();
+    }
+    onInputBlur(event) {
+        this.inputBlur.emit(event);
+        this.touch.emit();
+    }
+    onValueChange(value) {
+        this.value.set(value);
+        this.touch.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TextBoxComponent, isStandalone: true, selector: "mona-text-box", inputs: { clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidInput() || null", "class": "classes()" } }, queries: [{ propertyName: "prefixTemplateList", predicate: TextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplateList", predicate: TextBoxSuffixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [required]=\"required()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    [class]=\"inputClass()\"\r\n    [style]=\"inputStyle()\"\r\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\r\n    [monaAttributeBinder]=\"inputAttributes()\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    #input />\r\n\r\n@let textBoxValue = value();\r\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\r\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\r\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\r\n    </button>\r\n}\r\n\r\n@for (suffixTemplate of suffixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-text-box", imports: [NgTemplateOutlet, FormsModule, ButtonDirective, AttributeBinderDirective, LucideX], host: {
+                        "[attr.data-disabled]": "disabled() || null",
+                        "[attr.data-readonly]": "readonly() || null",
+                        "[attr.data-required]": "required() || null",
+                        "[attr.data-invalid]": "invalidInput() || null",
+                        "[class]": "classes()"
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [required]=\"required()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    [class]=\"inputClass()\"\r\n    [style]=\"inputStyle()\"\r\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\r\n    [monaAttributeBinder]=\"inputAttributes()\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    #input />\r\n\r\n@let textBoxValue = value();\r\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\r\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\r\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\r\n    </button>\r\n}\r\n\r\n@for (suffixTemplate of suffixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-wrap h-full\">\r\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n" }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TextBoxSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class TextBoxDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.classes = computed(() => {
+            const rounded = this.rounded();
+            const size = this.size();
+            const theme = this.#themeService.theme();
+            const classes = inputThemeVariants(theme)({ rounded, size });
+            const userClass = this.userClass();
+            return twMerge(classes, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the component's dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextBoxDirective, isStandalone: true, selector: "input[monaTextBox]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TextBoxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[monaTextBox]",
+                    host: {
+                        "[class]": "classes()"
+                    }
+                }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/text-box
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TextBoxComponent, TextBoxDirective, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-text-box.mjs.map