@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -1,45 +1,43 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, model, input, output, Component, Directive } from '@angular/core';
+import { computed, model, input, output, Component, Directive } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
-const checkboxVariants = cva(`sr-only appearance-none outline-none peer`);
-const checkmarkVariants = cva(`
-        flex items-center justify-center
-        w-4.5 h-4.5 pl-0.25
-        overflow-hidden outline-none
-
-        bg-input-background border border-input-border
-        cursor-pointer
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40
-        peer-focus-visible:border-primary
-
-        peer-checked:bg-primary
-        peer-checked:text-primary-foreground
-
-        peer-indeterminate:bg-primary
-        peer-indeterminate:text-primary-foreground
-        peer-indeterminate:after:content-['']
-        peer-indeterminate:after:absolute
-        peer-indeterminate:after:inset-[3px_0_3px_0]
-        peer-indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
-        peer-indeterminate:after:[mask-repeat:no-repeat]
-        peer-indeterminate:after:[mask-size:contain]
-        peer-indeterminate:after:bg-current
-
-        [&.ng-touched.ng-invalid]:border-error
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const checkboxInputThemeVariants = cva(`sr-only appearance-none outline-none peer`);
+const checkmarkThemeVariants = cva(`
+        flex items-center justify-center
+        h-4.5 w-4.5 pl-0.25
+        cursor-pointer overflow-hidden
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
+
+        peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed
+        peer-disabled:border-disabled-border peer-disabled:bg-disabled-background peer-disabled:text-disabled-foreground
+
+        peer-checked:border-(--color-selected-border) peer-checked:bg-primary peer-checked:text-primary-foreground
+        peer-indeterminate:border-(--color-selected-border) peer-indeterminate:bg-primary peer-indeterminate:text-primary-foreground
+
+        peer-focus-visible:border-focus-indicator
+        peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35
+
+        [&.ng-touched.ng-invalid]:border-error
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:peer-focus-visible:border-error
+        data-[invalid='true']:peer-focus-visible:ring-error/35
+
+        peer-indeterminate:after:absolute
+        peer-indeterminate:after:inset-[3px_0_3px_0]
+        peer-indeterminate:after:content-['']
+        peer-indeterminate:after:bg-current
+        peer-indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
+        peer-indeterminate:after:[mask-repeat:no-repeat]
+        peer-indeterminate:after:[mask-size:contain]
     `, {
     variants: {
         rounded: {
@@ -51,16 +49,12 @@ const checkmarkVariants = cva(`
         }
     }
 });
-const checkboxContainerLabelVariants = cva(`
-        w-full h-full
-        inline-flex items-center gap-2
-        relative
-
-        select-none
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+const checkboxContainerLabelThemeVariants = cva(`
+        relative inline-flex h-full w-full items-center gap-2
+        select-none
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
     `, {
     variants: {
         labelSize: {
@@ -70,42 +64,42 @@ const checkboxContainerLabelVariants = cva(`
         }
     }
 });
-const checkboxDirectiveVariants = cva(`
-        appearance-none outline-none
-        w-4.5 h-4.5
-        bg-input-background border border-input-border
-        cursor-pointer
-        relative
-
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
-
-        checked:text-primary-foreground
-        indeterminate:text-primary-foreground
-        indeterminate:bg-primary
-        checked:bg-primary
-
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
-
-        checked:after:content-['']
-        checked:after:absolute
-        checked:after:inset-[1px_0_0_1px]
-        checked:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%209%2017l-5-5'/%3E%3C/svg%3E")]
-        checked:after:[mask-repeat:no-repeat]
-        checked:after:[mask-size:contain]
-        checked:after:bg-current
-
-        indeterminate:after:content-['']
-        indeterminate:after:absolute
-        indeterminate:after:inset-[1px_0_1px_1px]
-        indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
-        indeterminate:after:[mask-repeat:no-repeat]
-        indeterminate:after:[mask-size:contain]
-        indeterminate:after:bg-current
-
-        [&.ng-touched.ng-invalid]:border-error
+const checkboxDirectiveThemeVariants = cva(`
+        relative h-4.5 w-4.5
+        cursor-pointer appearance-none
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
+
+        disabled:pointer-events-none disabled:cursor-not-allowed
+        disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
+
+        checked:border-(--color-selected-border) checked:bg-primary checked:text-primary-foreground
+        indeterminate:border-(--color-selected-border) indeterminate:bg-primary indeterminate:text-primary-foreground
+
+        focus-visible:border-focus-indicator
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
+
+        checked:after:absolute
+        checked:after:inset-[1px_0_0_1px]
+        checked:after:content-['']
+        checked:after:bg-current
+        checked:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%209%2017l-5-5'/%3E%3C/svg%3E")]
+        checked:after:[mask-repeat:no-repeat]
+        checked:after:[mask-size:contain]
+
+        indeterminate:after:absolute
+        indeterminate:after:inset-[1px_0_1px_1px]
+        indeterminate:after:content-['']
+        indeterminate:after:bg-current
+        indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
+        indeterminate:after:[mask-repeat:no-repeat]
+        indeterminate:after:[mask-size:contain]
+
+        [&.ng-touched.ng-invalid]:border-error
+        [&.ng-touched.ng-invalid]:ring-2 [&.ng-touched.ng-invalid]:ring-error/35
+        [&.ng-touched.ng-invalid]:focus-visible:border-error
+        [&.ng-touched.ng-invalid]:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -118,58 +112,21 @@ const checkboxDirectiveVariants = cva(`
     }
 });
 
-const checkboxInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkboxVariants;
-        default:
-            return checkboxVariants;
-    }
-};
-const checkmarkThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkmarkVariants;
-        default:
-            return checkmarkVariants;
-    }
-};
-const checkboxContainerLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkboxContainerLabelVariants;
-        default:
-            return checkboxContainerLabelVariants;
-    }
-};
-const checkboxDirectiveThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return checkboxDirectiveVariants;
-        default:
-            return checkboxDirectiveVariants;
-    }
-};
-
 class CheckBoxComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.checkBoxClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return checkboxInputThemeVariants(theme)();
+            return checkboxInputThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checkBoxClasses" }] : /* istanbul ignore next */ []));
         this.checkMarkClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return checkmarkThemeVariants(theme)({ rounded });
+            return checkmarkThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checkMarkClasses" }] : /* istanbul ignore next */ []));
         this.containerLabelClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const labelSize = this.labelSize();
             const classes = this.userClass();
-            const variantClasses = checkboxContainerLabelThemeVariants(theme)({ labelSize });
+            const variantClasses = checkboxContainerLabelThemeVariants({ labelSize });
             return twMerge(variantClasses, classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
@@ -265,7 +222,6 @@ class CheckBoxComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     onCheckedChange(checked) {
         this.checked.set(checked);
     }
@@ -278,7 +234,7 @@ class CheckBoxComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", 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 }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", 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 } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n\r\n    <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"disabled()\"\r\n        [indeterminate]=\"indeterminate()\"\r\n        [required]=\"required()\"\r\n        [ngModel]=\"checked()\"\r\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n        [class]=\"checkBoxClasses()\"\r\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\r\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\r\n        [attr.aria-label]=\"label() || null\"\r\n        (change)=\"onInputChange($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (ngModelChange)=\"onCheckedChange($event)\"\r\n        #checkBox />\r\n\r\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\r\n        @if (checked()) {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"16\"\r\n                height=\"16\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-check stroke-primary-foreground\">\r\n                <path d=\"M18 6 9 17l-5-5\" />\r\n            </svg>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", 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 }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", 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 } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [ngModel]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (ngModelChange)=\"onCheckedChange($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -287,16 +243,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-checked]": "checked()",
                         "[attr.data-disabled]": "disabled()",
                         "[attr.data-indeterminate]": "indeterminate()"
-                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n\r\n    <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"disabled()\"\r\n        [indeterminate]=\"indeterminate()\"\r\n        [required]=\"required()\"\r\n        [ngModel]=\"checked()\"\r\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n        [class]=\"checkBoxClasses()\"\r\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\r\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\r\n        [attr.aria-label]=\"label() || null\"\r\n        (change)=\"onInputChange($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (ngModelChange)=\"onCheckedChange($event)\"\r\n        #checkBox />\r\n\r\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\r\n        @if (checked()) {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"16\"\r\n                height=\"16\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-check stroke-primary-foreground\">\r\n                <path d=\"M18 6 9 17l-5-5\" />\r\n            </svg>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n" }]
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [ngModel]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (ngModelChange)=\"onCheckedChange($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CheckboxDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const variantClasses = checkboxDirectiveThemeVariants(theme)({ rounded });
+            const variantClasses = checkboxDirectiveThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
@@ -313,7 +267,6 @@ class CheckboxDirective {
          */
         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: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][monaCheckbox]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 }); }
 }