@nanahoshi/mona-ui 0.1.1 → 0.2.1

package/fesm2022/nanahoshi-mona-ui-tabs.mjs

@@ -1,16 +1,15 @@
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, computed, input, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, Component, contentChild, TemplateRef, ChangeDetectionStrategy, contentChildren, linkedSignal } from '@angular/core';
+import { Directive, computed, input, inject, DestroyRef, signal, viewChild, viewChildren, ElementRef, model, output, afterRenderEffect, untracked, afterNextRender, Component, contentChild, TemplateRef, ChangeDetectionStrategy, contentChildren, linkedSignal } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { firstOrDefault, select } from '@mirei/ts-collections';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeRaisedBackdropClasses, themeRaisedSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronLeft, LucideChevronRight, LucideX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { Subject, switchMap, EMPTY, timer, interval, tap, asapScheduler } from 'rxjs';
-import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 
 class TabCloseEvent extends PreventableEvent {
     #index;
@@ -63,11 +62,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const tabListBaseVariants = cva(`
-        w-fit max-w-full
-        flex overflow-hidden
-        bg-accent
-        font-medium text-sm
+const tabListBaseThemeVariants = cva(`
+        flex w-fit max-w-full overflow-hidden
+        text-sm font-medium
+        bg-(--mona-tab-list-background) ${themeRaisedBackdropClasses}
     `, {
     variants: {
         rounded: {
@@ -84,27 +82,24 @@ const tabListBaseVariants = cva(`
         }
     }
 });
-const tabListListWrapperVariants = cva(`w-full h-full overflow-hidden`);
-const tabListListVariants = cva(`
-        flex h-full w-full overflow-hidden
-        list-none cursor-default
-        select-none whitespace-nowrap
-        p-[3px]
-        transition-colors duration-300 ease-out
+const tabListListWrapperThemeVariants = cva(`h-full w-full overflow-hidden`);
+const tabListListThemeVariants = cva(`
+        flex h-full w-full list-none overflow-hidden p-[3px]
+        cursor-default select-none whitespace-nowrap
+        transition-colors duration-(--mona-motion-standard) ease-out
     `);
-const tabListListItemVariants = cva(`
-        flex items-center justify-center
-        cursor-pointer
-        px-2 outline-none
-        focus-visible:ring-2 focus-visible:ring-primary/40
+const tabListListItemThemeVariants = cva(`
+        flex items-center justify-center px-2
+        cursor-pointer outline-none
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         active: {
-            true: "bg-background-dark text-foreground shadow-sm",
+            true: `${themeRaisedSurfaceClasses} font-semibold text-foreground shadow-(--shadow-control) inset-ring-1 inset-ring-border-subtle`,
             false: ""
         },
         disabled: {
-            true: "pointer-events-none cursor-not-allowed opacity-50 select-none",
+            true: "pointer-events-none cursor-not-allowed select-none text-disabled-foreground",
             false: ""
         },
         rounded: {
@@ -119,14 +114,17 @@ const tabListListItemVariants = cva(`
         rounded: "medium"
     }
 });
-const tabListScrollButtonVariants = cva(`
-        flex items-center justify-center
-        h-full px-2
+const tabListScrollButtonThemeVariants = cva(`
+        flex h-full items-center justify-center px-2
+        text-muted-foreground
+        hover:bg-hover hover:text-foreground
+        active:bg-active
     `);
-const tabContentVariants = cva(`
-        w-full overflow-auto flex-1
-        border border-border shadow-sm
-        bg-background text-foreground
+const tabContentThemeVariants = cva(`
+        flex-1 w-full overflow-auto
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
+        bg-(--mona-tab-content-background) ${themeRaisedBackdropClasses} text-foreground
+        border border-border shadow-(--shadow-raised)
     `, {
     variants: {
         rounded: {
@@ -141,77 +139,17 @@ const tabContentVariants = cva(`
         rounded: "medium"
     }
 });
-const tabsBaseVariants = cva(`
-        max-w-full
-        flex flex-col gap-2
+const tabsBaseThemeVariants = cva(`
+        flex max-w-full flex-col gap-2
     `);
 
-const tabListBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabListBaseVariants;
-        default:
-            return tabListBaseVariants;
-    }
-};
-const tabListListWrapperThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabListListWrapperVariants;
-        default:
-            return tabListListWrapperVariants;
-    }
-};
-const tabListListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabListListVariants;
-        default:
-            return tabListListVariants;
-    }
-};
-const tabListListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabListListItemVariants;
-        default:
-            return tabListListItemVariants;
-    }
-};
-const tabListScrollButtonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabListScrollButtonVariants;
-        default:
-            return tabListScrollButtonVariants;
-    }
-};
-const tabContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabContentVariants;
-        default:
-            return tabContentVariants;
-    }
-};
-const tabsBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tabsBaseVariants;
-        default:
-            return tabsBaseVariants;
-    }
-};
-
 class TabListItemDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.listItemClass = computed(() => {
-            const theme = this.#themeService.theme();
             const active = this.active();
             const disabled = this.disabled();
             const rounded = this.rounded();
-            return tabListListItemThemeVariants(theme)({ active, disabled, rounded });
+            return tabListListItemThemeVariants({ active, disabled, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
@@ -221,7 +159,6 @@ class TabListItemDirective {
         this.rounded = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TabListItemDirective, isStandalone: true, selector: "li[monaTabListItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "listItemClass()" } }, ngImport: i0 }); }
 }
@@ -237,31 +174,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class TabListComponent {
     #destroyRef;
-    #themeService;
     #keydown$;
     #resizeObserver;
     #scrollIntent$;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.#keydown$ = new Subject();
         this.#resizeObserver = null;
         this.#scrollIntent$ = new Subject();
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            return tabListBaseThemeVariants(theme)({ rounded, size });
+            return tabListBaseThemeVariants({ rounded, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return tabListListThemeVariants(theme)();
+            return tabListListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.scrollButtonClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return tabListScrollButtonThemeVariants(theme)();
+            return tabListScrollButtonThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollButtonClass" }] : /* istanbul ignore next */ []));
         this.scrollsVisible = signal(false, /* @ts-ignore */
@@ -551,22 +483,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class TabsComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.tabListComponent = viewChild.required(TabListComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabListComponent" }] : /* istanbul ignore next */ []));
         this.tabs = contentChildren(TabComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            const variantClass = tabsBaseThemeVariants(theme)();
+            const variantClass = tabsBaseThemeVariants();
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded() === "full" ? "large" : this.rounded();
-            return tabContentThemeVariants(theme)({ rounded });
+            return tabContentThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.selectedTabId = linkedSignal({ ...(ngDevMode ? { debugName: "selectedTabId" } : /* istanbul ignore next */ {}), source: () => this.tabList(),
@@ -628,7 +557,6 @@ class TabsComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     handlePanelKeyDown(event) {
         if (event.key === "Tab" && event.shiftKey) {
             if (event.target !== event.currentTarget) {

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

@@ -1,31 +1,31 @@
 import * as i0 from '@angular/core';
-import { inject, computed, input, Directive } from '@angular/core';
+import { computed, input, Directive } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
-const textAreaVariants = cva(`
-        bg-input-background
-
-        border border-input-border outline-none
+const textAreaThemeVariants = cva(`
+        px-2 py-1
+        text-sm text-foreground
+        ${themeControlSurfaceClasses}
+        border border-input-border shadow-(--shadow-control)
+        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
-
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
         placeholder:text-muted-foreground
 
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
+        disabled:pointer-events-none disabled:cursor-not-allowed disabled:select-none
+        disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
+        disabled:shadow-none
+        read-only:cursor-default
 
-        disabled:pointer-events-none disabled:opacity-50
-        disabled:cursor-not-allowed disabled:select-none
+        focus-visible:border-focus-indicator
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        [&.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
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -37,22 +37,11 @@ const textAreaVariants = cva(`
     }
 });
 
-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 classes = textAreaThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
@@ -83,7 +72,6 @@ class TextAreaDirective {
          */
         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 }); }
 }

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

@@ -5,8 +5,7 @@ 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 { themeControlSurfaceClasses, rxTimeout, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -32,31 +31,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const textBoxVariants = cva(`
-        flex items-center w-full min-w-0
+const textBoxThemeVariants = cva(`
+        flex w-full min-w-0 items-center
         overflow-hidden
-
-        bg-input-background text-foreground
-        border border-input-border outline-none
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control)
+        outline-none
         selection:bg-primary selection:text-primary-foreground
-
-        transition-[color,box-shadow,border] ease-in-out duration-300
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
 
         data-[disabled='true']:pointer-events-none
         data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:shadow-none
+        data-[readonly='true']:cursor-default
 
-        focus-within:ring-2 focus-within:ring-primary/40
-        focus-within:border-primary
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-within:border-error
+        data-[invalid='true']:focus-within:ring-error/35
 
-        [&>input]:w-full [&>input]:h-full
+        [&>input]:h-full [&>input]:w-full
+        [&>input]:px-2
         [&>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: {
@@ -73,33 +77,31 @@ const textBoxVariants = cva(`
         }
     }
 });
-const inputVariants = cva(`
-        bg-input-background
+const inputThemeVariants = cva(`
         px-2
-
-        border border-input-border outline-none
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control)
+        outline-none
         selection:bg-primary selection:text-primary-foreground
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
 
-        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
-
+        file:font-medium file:text-foreground
         placeholder:text-muted-foreground
 
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
+        disabled:pointer-events-none disabled:cursor-not-allowed
+        disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
+        disabled:shadow-none
+        read-only:cursor-default
 
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
+        focus-visible:border-focus-indicator
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
-        [&.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/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -134,39 +136,20 @@ const inputVariants = cva(`
     ]
 });
 
-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 classes = textBoxThemeVariants({ 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 */
+        this.invalidInput = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @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 });
@@ -278,7 +261,6 @@ class TextBoxComponent {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     #destroyRef;
-    #themeService;
     focus() {
         const el = this.inputRef().nativeElement;
         el.focus();
@@ -300,7 +282,7 @@ class TextBoxComponent {
         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) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\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]" }] }); }
+    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) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\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,
@@ -310,21 +292,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-required]": "required() || null",
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[class]": "classes()"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"p-0 mr-2\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"opacity-50 size-4 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-wrap h-full\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\n" }]
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [placeholder]=\"placeholder()\"\n    [type]=\"type()\"\n    [class]=\"inputClass()\"\n    [style]=\"inputStyle()\"\n    [attr.aria-invalid]=\"invalidInput() ? 'true' : null\"\n    [monaAttributeBinder]=\"inputAttributes()\"\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onValueChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    #input />\n\n@let textBoxValue = value();\n@if (clearButton() && textBoxValue && textBoxValue.length !== 0) {\n    <button monaButton look=\"link\" size=\"small\" class=\"me-2 p-0\" aria-label=\"Clear\" (click)=\"onClearClick()\">\n        <svg lucideX class=\"size-4 opacity-50 hover:opacity-90\"></svg>\n    </button>\n}\n\n@for (suffixTemplate of suffixTemplateList(); track $index) {\n    <span class=\"flex h-full flex-wrap items-center\">\n        <ng-container *ngTemplateOutlet=\"suffixTemplate\"></ng-container>\n    </span>\n}\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 classes = inputThemeVariants({ rounded, size });
             const userClass = this.userClass();
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.inputInvalid = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the input as invalid, triggering error border and ring styling.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
         /**
          * @description Border-radius preset applied to the component.
          * @default "medium"
@@ -337,25 +325,32 @@ class TextBoxDirective {
          */
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the input 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: 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TextBoxDirective, isStandalone: true, selector: "input[monaTextBox]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-invalid": "inputInvalid() || null", "attr.data-invalid": "inputInvalid() || null", "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: {
+                        "[attr.aria-invalid]": "inputInvalid() || null",
+                        "[attr.data-invalid]": "inputInvalid() || null",
                         "[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 }] }] } });
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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-box