@nanahoshi/mona-ui 0.1.1 → 0.2.0

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

@@ -7,8 +7,7 @@ import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, TakeFirstPipe } from '@nanahoshi/mona-ui/common';
 import { CalendarService } from '@nanahoshi/mona-ui/date-input';
-import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { themeRaisedBackdropClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { DateTime } from 'luxon';
 import { skip, fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -56,17 +55,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const calendarBaseVariants = cva(`
-        flex flex-col gap-2 p-2 min-w-64
-        bg-background text-foreground
-        border border-input-border
-        shadow-sm select-none
+const calendarBaseThemeVariants = cva(`
+        flex min-w-64 flex-col gap-2 p-2
+        select-none
+        bg-(--mona-calendar-background) ${themeRaisedBackdropClasses} text-foreground
+        border border-border shadow-(--mona-calendar-shadow)
         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
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none"
+            true: "pointer-events-none cursor-not-allowed opacity-50"
         },
         readonly: {
             true: "pointer-events-none"
@@ -80,7 +79,7 @@ const calendarBaseVariants = cva(`
         }
     }
 });
-const calendarHeaderVariants = cva(`
+const calendarHeaderThemeVariants = cva(`
         flex items-center justify-center
         [&>button+button]:not-focus:border-s-0
         [&>button:nth-of-type(2)]:flex-1
@@ -90,21 +89,22 @@ const calendarHeaderVariants = cva(`
         [&>button:nth-of-type(4)]:rounded-es-none
         [&>button]:outline-none
     `);
-const calendarMonthViewDayVariants = cva(`
-        hover:bg-hover cursor-pointer
+const calendarMonthViewDayThemeVariants = cva(`
+        cursor-pointer
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none"
+            true: "pointer-events-none cursor-not-allowed text-disabled-foreground"
         },
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         outside: {
-            true: "opacity-50"
+            true: "text-muted-foreground"
         },
         rangePreview: {
-            true: "bg-primary/20 hover:bg-primary/30"
+            true: "bg-active hover:bg-active"
         },
         rounded: {
             none: "rounded-none",
@@ -117,7 +117,7 @@ const calendarMonthViewDayVariants = cva(`
             true: "bg-primary text-primary-foreground hover:bg-primary-hover"
         },
         today: {
-            true: "font-bold text-primary"
+            true: "font-bold text-foreground"
         }
     },
     compoundVariants: [
@@ -131,35 +131,31 @@ const calendarMonthViewDayVariants = cva(`
         rounded: "medium"
     }
 });
-const calendarMonthViewGridVariants = cva(`
-        grid gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
+const calendarMonthViewGridThemeVariants = cva(`
+        grid justify-center gap-0.5
         [&>div]:aspect-square
-    `);
-const calendarMonthViewGridHeaderVariants = cva(`
-        grid justify-center
-        gap-0.5 font-semibold text-sm
-        [&>div]:h-full [&>div]:flex
+        [&>div]:flex [&>div]:h-full
         [&>div]:items-center [&>div]:justify-center
+    `);
+const calendarMonthViewGridHeaderThemeVariants = cva(`
+        grid justify-center gap-0.5
+        text-sm font-semibold text-muted-foreground
         [&>div]:aspect-square
+        [&>div]:flex [&>div]:h-full
+        [&>div]:items-center [&>div]:justify-center
     `);
-const calendarYearViewGridVariants = cva(`
-        grid grid-cols-3 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
+const calendarYearViewGridThemeVariants = cva(`
+        grid grid-cols-3 justify-center gap-0.5
+        [&>div]:flex [&>div]:h-12
         [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
     `);
-const calendarYearViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarYearViewCellThemeVariants = cva(`
+        cursor-pointer py-2
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         rounded: {
             none: "rounded-none",
@@ -170,21 +166,18 @@ const calendarYearViewCellVariants = cva(`
         }
     }
 });
-const calendarDecadeViewGridVariants = cva(`
-        grid grid-cols-4 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
+const calendarDecadeViewGridThemeVariants = cva(`
+        grid grid-cols-4 justify-center gap-0.5
+        [&>div]:flex [&>div]:h-12
         [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
     `);
-const calendarDecadeViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarDecadeViewCellThemeVariants = cva(`
+        cursor-pointer py-2
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         rounded: {
             none: "rounded-none",
@@ -196,89 +189,14 @@ const calendarDecadeViewCellVariants = cva(`
     }
 });
 
-const calendarBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarBaseVariants;
-        default:
-            return calendarBaseVariants;
-    }
-};
-const calendarHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarHeaderVariants;
-        default:
-            return calendarHeaderVariants;
-    }
-};
-const calendarDecadeViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarDecadeViewGridVariants;
-        default:
-            return calendarDecadeViewGridVariants;
-    }
-};
-const calendarDecadeViewCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarDecadeViewCellVariants;
-        default:
-            return calendarDecadeViewCellVariants;
-    }
-};
-const calendarMonthViewDayThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewDayVariants;
-        default:
-            return calendarMonthViewDayVariants;
-    }
-};
-const calendarMonthViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewGridVariants;
-        default:
-            return calendarMonthViewGridVariants;
-    }
-};
-const calendarMonthViewGridHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewGridHeaderVariants;
-        default:
-            return calendarMonthViewGridHeaderVariants;
-    }
-};
-const calendarYearViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarYearViewGridVariants;
-        default:
-            return calendarYearViewGridVariants;
-    }
-};
-const calendarYearViewCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarYearViewCellVariants;
-        default:
-            return calendarYearViewCellVariants;
-    }
-};
-
 class DecadeYearDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => `Year ${this.year()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.focused();
             const rounded = this.rounded();
-            return calendarDecadeViewCellThemeVariants(theme)({ focused, rounded });
+            return calendarDecadeViewCellThemeVariants({ focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
@@ -307,7 +225,6 @@ class DecadeYearDirective {
         this.year = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DecadeYearDirective, isStandalone: true, selector: "[monaDecadeYear]", inputs: { navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
@@ -369,9 +286,7 @@ const compareDates = (date1, date2, operator) => {
 
 class MonthDayDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.dayDisabled();
             const focused = this.focused();
             const outside = this.outside();
@@ -379,7 +294,7 @@ class MonthDayDirective {
             const rounded = this.rounded();
             const selected = this.selected();
             const today = this.isToday();
-            return calendarMonthViewDayThemeVariants(theme)({
+            return calendarMonthViewDayThemeVariants({
                 disabled,
                 focused,
                 outside,
@@ -462,7 +377,6 @@ class MonthDayDirective {
         this.value = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onClick(event) {
         if (this.dayDisabled()) {
             return;
@@ -477,7 +391,7 @@ class MonthDayDirective {
         this.dayPointerEnter.emit(this.entry().key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-selected": "selected() ? 'true' : null", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-pressed": "selected() ? 'true' : 'false'", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, decorators: [{
             type: Directive,
@@ -485,30 +399,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: "[monaMonthDay]",
                     host: {
                         "[attr.tabindex]": "focused() ? 0 : -1",
-                        "[attr.aria-selected]": "selected() ? 'true' : null",
+                        "[attr.aria-pressed]": "selected() ? 'true' : 'false'",
                         "[attr.aria-current]": "isToday() ? 'date' : null",
                         "[attr.aria-disabled]": "dayDisabled() ? 'true' : null",
                         "[attr.data-range-preview]": "rangePreviewed() ? 'true' : null",
                         "[class]": "baseClass()",
                         "(click)": "onClick($event)",
-                        "(pointerenter)": "onPointerEnter()"
+                        "(pointerenter)": "onPointerEnter()",
+                        role: "button"
                     }
                 }]
         }], propDecorators: { dayPointerEnter: [{ type: i0.Output, args: ["dayPointerEnter"] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: true }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], monthBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthBounds", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreview", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class YearMonthDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => {
             const monthName = this.monthName();
             return `${monthName} ${this.navigatedDate().getFullYear()}`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.focused();
             const rounded = this.rounded();
-            return calendarYearViewCellThemeVariants(theme)({ focused, rounded });
+            return calendarYearViewCellThemeVariants({ focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
@@ -543,7 +456,6 @@ class YearMonthDirective {
         this.selectedDate = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "selectedDate" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: YearMonthDirective, isStandalone: true, selector: "[monaYearMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthName: { classPropertyName: "monthName", publicName: "monthName", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'date' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
@@ -568,7 +480,6 @@ class CalendarComponent {
     #hostElementRef;
     #monthDict;
     #outputValue;
-    #themeService;
     constructor() {
         this.#calendarService = inject(CalendarService, { optional: true });
         this.#destroyRef = inject(DestroyRef);
@@ -629,7 +540,6 @@ class CalendarComponent {
             return [];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#outputValue" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => {
             const view = this.calendarView();
             const navigatedDate = this.navigatedDate();
@@ -645,11 +555,10 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const readonly = this.readonly();
             const rounded = this.rounded() === "full" ? "large" : this.rounded();
-            const variantClass = calendarBaseThemeVariants(theme)({ disabled, readonly, rounded });
+            const variantClass = calendarBaseThemeVariants({ disabled, readonly, rounded });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
@@ -663,8 +572,7 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeEnd" }] : /* istanbul ignore next */ []));
         this.decadeGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarDecadeViewGridThemeVariants(theme)();
+            return calendarDecadeViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeGridClass" }] : /* istanbul ignore next */ []));
         this.decadeStart = computed(() => {
@@ -684,8 +592,7 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
         this.gridId = createElementControlId();
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarHeaderThemeVariants(theme)({});
+            return calendarHeaderThemeVariants({});
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.isEmptyValue()), /* @ts-ignore */
@@ -708,13 +615,11 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthDictChunked" }] : /* istanbul ignore next */ []));
         this.monthGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarMonthViewGridThemeVariants(theme)();
+            return calendarMonthViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridClass" }] : /* istanbul ignore next */ []));
         this.monthGridHeaderClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarMonthViewGridHeaderThemeVariants(theme)();
+            return calendarMonthViewGridHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridHeaderClass" }] : /* istanbul ignore next */ []));
         this.months = computed(() => {
@@ -821,8 +726,7 @@ class CalendarComponent {
         this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearCellTemplate" }] : /* istanbul ignore next */ []));
         this.yearGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarYearViewGridThemeVariants(theme)();
+            return calendarYearViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearGridClass" }] : /* istanbul ignore next */ []));
         /**

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(`
+const checkboxInputThemeVariants = cva(`sr-only appearance-none outline-none peer`);
+const checkmarkThemeVariants = cva(`
         flex items-center justify-center
-        w-4.5 h-4.5 pl-0.25
-        overflow-hidden outline-none
+        h-4.5 w-4.5 pl-0.25
+        cursor-pointer overflow-hidden
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        outline-none
 
-        bg-input-background border border-input-border
-        cursor-pointer
+        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
 
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        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:ring-2 peer-focus-visible:ring-primary/40
-        peer-focus-visible:border-primary
+        peer-focus-visible:border-focus-indicator
+        peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35
 
-        peer-checked:bg-primary
-        peer-checked:text-primary-foreground
+        [&.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: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: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]
-        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
     `, {
     variants: {
         rounded: {
@@ -51,16 +49,12 @@ const checkmarkVariants = cva(`
         }
     }
 });
-const checkboxContainerLabelVariants = cva(`
-        w-full h-full
-        inline-flex items-center gap-2
-        relative
-
+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']:opacity-50
+        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
+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:opacity-50
+        disabled:pointer-events-none disabled:cursor-not-allowed
+        disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
 
-        checked:text-primary-foreground
-        indeterminate:text-primary-foreground
-        indeterminate:bg-primary
-        checked:bg-primary
+        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: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
 
-        checked:after:content-['']
         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]
-        checked:after:bg-current
 
-        indeterminate:after:content-['']
         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]
-        indeterminate:after:bg-current
 
         [&.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);
     }
@@ -292,11 +248,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 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 }); }
 }