@nanahoshi/mona-ui 0.1.1 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, signal, computed, inject, DestroyRef, ElementRef, afterNextRender, Component, contentChild, contentChildren, input, output, afterRenderEffect, ChangeDetectionStrategy, linkedSignal, forwardRef, model, TemplateRef, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { createElementControlId, isNavigationKey, isTypeaheadKey, setupTypeahead, toCssValue, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { themeOverlaySurfaceClasses, createElementControlId, isNavigationKey, isTypeaheadKey, setupTypeahead, toCssValue, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { PopupDataInjectionToken, PopupService } from '@nanahoshi/mona-ui/popup';
 import { forEach, select, groupBy, selectMany, any } from '@mirei/ts-collections';
 import { Subject, take, tap, fromEvent, takeUntil, filter, switchMap } from 'rxjs';
@@ -9,7 +9,6 @@ import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideChevronRight, LucideCheck } from '@lucide/angular';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -134,7 +133,7 @@ class PopupMenuItemClickEvent extends PreventableEvent {
     }
 }
 
-const popupMenuBaseVariants = cva(`w-full h-full overflow-hidden`, {
+const popupMenuBaseThemeVariants = cva(`h-full w-full overflow-hidden`, {
     variants: {
         rounded: {
             small: "rounded-sm",
@@ -144,12 +143,10 @@ const popupMenuBaseVariants = cva(`w-full h-full overflow-hidden`, {
         }
     }
 });
-const popupMenuContainerVariants = cva(`
-        flex flex-col
-        bg-background text-foreground
-        border border-border
-        outline-none
-        p-1 shadow-md
+const popupMenuContainerThemeVariants = cva(`
+        flex flex-col p-1
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay) outline-none
     `, {
     variants: {
         rounded: {
@@ -160,7 +157,7 @@ const popupMenuContainerVariants = cva(`
         }
     }
 });
-const popupMenuGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2 py-1 w-full`, {
+const popupMenuGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px-2 py-1 font-bold text-muted-foreground`, {
     variants: {
         size: {
             small: "text-xs",
@@ -169,25 +166,17 @@ const popupMenuGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2
         }
     }
 });
-const popupMenuIconContainerVariants = cva(`absolute left-2 flex items-center justify-center`);
-const popupMenuItemVariants = cva(`
-        relative flex gap-2
-        cursor-pointer select-none items-center pl-8 pr-2 py-1
-        outline-none
-
-        hover:bg-hover
-        hover:text-hover-foreground
-
-        focus-within:bg-accent
-        focus-within:text-accent-foreground
-        focus-within:outline-none
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        data-[active='true']:bg-hover
-        data-[active='true']:text-hover-foreground
+const popupMenuIconContainerThemeVariants = cva(`absolute left-2 flex items-center justify-center`);
+const popupMenuItemThemeVariants = cva(`
+        relative flex cursor-pointer select-none items-center gap-2 py-1 pr-2 pl-8
+        text-foreground outline-none
+        hover:bg-[var(--mona-menu-item-hover-background,var(--color-hover))] hover:text-foreground
+        focus-within:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        focus-within:text-foreground focus-within:outline-none
+        data-[disabled='true']:pointer-events-none data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
+        data-[active='true']:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        data-[active='true']:text-foreground
     `, {
     variants: {
         rounded: {
@@ -203,56 +192,7 @@ const popupMenuItemVariants = cva(`
         }
     }
 });
-const popupMenuLinkVariants = cva(`flex items-center justify-center`);
-
-const popupMenuBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuBaseVariants;
-        default:
-            return popupMenuBaseVariants;
-    }
-};
-const popupMenuContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuContainerVariants;
-        default:
-            return popupMenuContainerVariants;
-    }
-};
-const popupMenuGroupHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuGroupHeaderVariants;
-        default:
-            return popupMenuGroupHeaderVariants;
-    }
-};
-const popupMenuIconContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuIconContainerVariants;
-        default:
-            return popupMenuIconContainerVariants;
-    }
-};
-const popupMenuItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuItemVariants;
-        default:
-            return popupMenuItemVariants;
-    }
-};
-const popupMenuLinkThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuLinkVariants;
-        default:
-            return popupMenuLinkVariants;
-    }
-};
+const popupMenuLinkThemeVariants = cva(`flex items-center justify-center`);
 
 class PopupMenuListComponent {
     #childCloseRequest$;
@@ -264,7 +204,6 @@ class PopupMenuListComponent {
     #navigationItems;
     #parentConfig;
     #popupService;
-    #themeService;
     #typeaheadKey$;
     #viaKeyboardNavigation;
     constructor() {
@@ -312,29 +251,25 @@ class PopupMenuListComponent {
         ...(ngDevMode ? [{ debugName: "#navigationItems" }] : /* istanbul ignore next */ []));
         this.#parentConfig = inject(PopupDataInjectionToken);
         this.#popupService = inject(PopupService);
-        this.#themeService = inject(ThemeService);
         this.#typeaheadKey$ = new Subject();
         this.#viaKeyboardNavigation = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#viaKeyboardNavigation" }] : /* istanbul ignore next */ []));
         this.activeMenuItem = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeMenuItem" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.#parentConfig.rounded();
-            return popupMenuBaseThemeVariants(theme)({ rounded });
+            return popupMenuBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.containerClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.#parentConfig.rounded();
-            return popupMenuContainerThemeVariants(theme)({ rounded });
+            return popupMenuContainerThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.groupHeaderClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const size = this.#parentConfig.size();
             const hasIcon = this.iconAreaVisible();
-            const variantClasses = popupMenuGroupHeaderThemeVariants(theme)({ size });
+            const variantClasses = popupMenuGroupHeaderThemeVariants({ size });
             const iconClasses = hasIcon ? "pl-8" : "pl-2";
             return twMerge(variantClasses, iconClasses);
         }, /* @ts-ignore */
@@ -346,23 +281,20 @@ class PopupMenuListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconAreaVisible" }] : /* istanbul ignore next */ []));
         this.iconContainerClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popupMenuIconContainerThemeVariants(theme)();
+            return popupMenuIconContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconContainerClasses" }] : /* istanbul ignore next */ []));
         this.linkContainerClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popupMenuLinkThemeVariants(theme)();
+            return popupMenuLinkThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkContainerClasses" }] : /* istanbul ignore next */ []));
         this.menuId = computed(() => this.#parentConfig.menuId, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
         this.menuItemClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.#parentConfig.rounded();
             const size = this.#parentConfig.size();
             const hasIcon = this.iconAreaVisible();
-            const variantClasses = popupMenuItemThemeVariants(theme)({ rounded, size });
+            const variantClasses = popupMenuItemThemeVariants({ rounded, size });
             const iconClasses = hasIcon ? "pl-8" : "pl-2";
             return twMerge(variantClasses, iconClasses);
         }, /* @ts-ignore */
@@ -401,6 +333,13 @@ class PopupMenuListComponent {
         }
         this.#parentConfig.menuItemClick$.next(popupMenuItemClickEvent);
     }
+    closePopup() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        this.#close$.next();
+    }
     createSubmenu(target, viaKeyboard) {
         this.#viaKeyboardNavigation.set(viaKeyboard);
         const minWidth = this.#parentConfig.minWidth?.() ?? undefined;
@@ -533,10 +472,7 @@ class PopupMenuListComponent {
         }
     }
     handleEscapeKey() {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
+        this.closePopup();
     }
     handleHomeKey() {
         const firstItem = this.#navigationItems().firstOrDefault();
@@ -608,28 +544,20 @@ class PopupMenuListComponent {
     }
     setPopupCloseSubscription() {
         this.#parentConfig.parentClose$
-            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
-            if (this.popupRef) {
-                this.popupRef.close();
-                this.popupRef = null;
-            }
-        }))
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => this.closePopup()))
             .subscribe();
         this.#childCloseRequest$
             .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
             const activeItem = this.activeMenuItem();
             this.notifyNavigation(activeItem, "left");
-            if (this.popupRef) {
-                this.popupRef.close();
-                this.popupRef = null;
-            }
+            this.closePopup();
         }))
             .subscribe();
     }
     setPointerSubscriptions() {
         this.pointerEnter$
             .pipe(takeUntilDestroyed(this.#destroyRef), takeUntil(this.#parentConfig.parentClose$), filter(e => e.item !== this.activeMenuItem()), tap(e => {
-            this.popupRef?.close();
+            this.closePopup();
             if (e.item.items.length === 0) {
                 this.activeMenuItem.set(null);
             }

package/fesm2022/nanahoshi-mona-ui-progress-bar.mjs

@@ -1,7 +1,6 @@
 import { NgTemplateOutlet, DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, computed, contentChild, input, Component } from '@angular/core';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { getPercentage } from '@nanahoshi/mona-ui/common';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -20,14 +19,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const progressBarBaseVariants = cva(`
+const progressBarBaseThemeVariants = cva(`
         relative flex items-center justify-center
-        w-full h-5.5
-        bg-input-background border border-input-border
+        h-5.5 w-full
         overflow-hidden select-none
+        bg-surface-muted
         data-[disabled='true']:pointer-events-none
         data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:[&_[data-prev='true']]:bg-disabled-foreground
     `, {
     variants: {
         rounded: {
@@ -39,29 +40,26 @@ const progressBarBaseVariants = cva(`
         }
     }
 });
-const progressBarIndeterminateVariants = cva(`
-        absolute w-full h-full
-        flex items-center justify-center
-        bg-[repeating-linear-gradient(135deg,var(--color-background),var(--color-background)_10px,var(--color-secondary)_10px,var(--color-secondary)_20px)]
+const progressBarIndeterminateThemeVariants = cva(`
+        absolute flex h-full w-full items-center justify-center
+        bg-[repeating-linear-gradient(135deg,var(--color-surface-muted),var(--color-surface-muted)_10px,var(--color-primary)_10px,var(--color-primary)_20px)]
         bg-size-[200%_200%]
     `);
-const progressBarLabelVariants = cva(`
+const progressBarLabelThemeVariants = cva(`
         px-1.5
     `);
-const progressBarTrackVariants = cva(`
-        relative
-        flex items-center justify-center
-        w-full h-full
+const progressBarTrackThemeVariants = cva(`
+        relative flex h-full w-full items-center justify-center
         text-xs font-medium
         bg-primary text-primary-foreground
         data-[prev='true']:transition-[background-color]
-        data-[prev='true']:duration-200
+        data-[prev='true']:duration-(--mona-motion-fast)
         data-[prev='true']:ease-in
         data-[next='true']:absolute
-        data-[next='true']:bg-background
+        data-[next='true']:bg-surface-muted
         data-[next='true']:text-foreground
         data-[next='true']:transition-[clip-path]
-        data-[next='true']:duration-200
+        data-[next='true']:duration-(--mona-motion-fast)
         data-[next='true']:ease-in
         data-[value='0']:bg-transparent
         data-[left='true']:justify-start
@@ -78,39 +76,6 @@ const progressBarTrackVariants = cva(`
     }
 });
 
-const progressBarBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return progressBarBaseVariants;
-        default:
-            return progressBarBaseVariants;
-    }
-};
-const progressBarIndeterminateThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return progressBarIndeterminateVariants;
-        default:
-            return progressBarIndeterminateVariants;
-    }
-};
-const progressBarLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return progressBarLabelVariants;
-        default:
-            return progressBarLabelVariants;
-    }
-};
-const progressBarTrackThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return progressBarTrackVariants;
-        default:
-            return progressBarTrackVariants;
-    }
-};
-
 class ProgressBarComponent {
     constructor() {
         this.#color = computed(() => {
@@ -119,23 +84,19 @@ class ProgressBarComponent {
             return typeof color === "string" ? color : color?.(progress);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#color" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const classes = progressBarBaseThemeVariants(theme)({ rounded });
+            const classes = progressBarBaseThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(classes, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.indeterminateClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return progressBarIndeterminateThemeVariants(theme)();
+            return progressBarIndeterminateThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indeterminateClasses" }] : /* istanbul ignore next */ []));
         this.labelClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return progressBarLabelThemeVariants(theme)();
+            return progressBarLabelThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
         this.labelTemplate = contentChild(ProgressBarLabelTemplateDirective, /* @ts-ignore */
@@ -158,9 +119,8 @@ class ProgressBarComponent {
         this.progress = computed(() => getPercentage(this.value(), this.min(), this.max()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
         this.trackClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const classes = progressBarTrackThemeVariants(theme)({ rounded });
+            const classes = progressBarTrackThemeVariants({ rounded });
             return this.animate()
                 ? classes
                 : twMerge(classes, "data-[next='true']:transition-none data-[prev='true']:transition-none");
@@ -262,7 +222,6 @@ class ProgressBarComponent {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     #color;
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressBarComponent, isStandalone: true, selector: "mona-progress-bar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "aria-valuetext", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelStyles: { classPropertyName: "labelStyles", publicName: "labelStyles", isSignal: true, isRequired: false, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "labelVisible", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", 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 } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "baseClasses()", "attr.aria-busy": "indeterminate() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-valuemin": "indeterminate() ? null : min()", "attr.aria-valuemax": "indeterminate() ? null : max()", "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuetext": "ariaValueText() || null", "attr.aria-disabled": "disabled() || null", "attr.data-disabled": "disabled()" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ProgressBarLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    [class]=\"trackClasses()\"\n    [style.background-color]=\"trackColor()\"\n    [attr.data-prev]=\"true\"\n    [attr.data-left]=\"labelPosition() === 'start'\"\n    [attr.data-right]=\"labelPosition() === 'end'\"\n    [attr.data-indeterminate]=\"indeterminate()\"\n    [attr.data-value]=\"progress()\"\n    [style.clip-path]=\"prevTrackClipPath()\">\n    @if (indeterminate()) {\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\n    } @else if (labelVisible()) {\n        @if (labelTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n            </ng-container>\n        } @else {\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\n        }\n    }\n</div>\n\n@if (!indeterminate()) {\n    <div\n        [class]=\"trackClasses()\"\n        [attr.data-next]=\"true\"\n        [attr.data-left]=\"labelPosition() === 'start'\"\n        [attr.data-right]=\"labelPosition() === 'end'\"\n        [style.clip-path]=\"nextTrackClipPath()\">\n        @if (labelVisible()) {\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\n                </ng-container>\n            } @else {\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\n            }\n        }\n    </div>\n}\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
 }

package/fesm2022/nanahoshi-mona-ui-radio-button.mjs

@@ -1,32 +1,34 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, input, output, model, Component, Directive } from '@angular/core';
+import { computed, input, output, model, Component, Directive } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 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 radioButtonVariants = cva(`
-        appearance-none outline-none
-        peer absolute inset-0 w-full h-full
-        opacity-0 cursor-pointer z-10
-        focus:ring-2 focus:ring-primary focus:ring-offset-2
+const radioButtonThemeVariants = cva(`
+        peer absolute inset-0 z-10 h-full w-full
+        cursor-pointer appearance-none opacity-0
+        outline-none
         disabled:cursor-not-allowed
     `);
-const radioButtonCircleVariants = cva(`
-        w-4.5 h-4.5
-        flex items-center justify-center
-        overflow-hidden
-        bg-input-background
+const radioButtonCircleThemeVariants = cva(`
+        relative flex h-4.5 w-4.5 items-center justify-center
+        cursor-pointer overflow-hidden
+        ${themeControlSurfaceClasses}
         border border-input-border
-        cursor-pointer
-        relative
-        transition-colors duration-200
-        peer-focus:ring-2 peer-focus:ring-primary/40
-        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
+        transition-colors duration-(--mona-motion-fast)
+
+        peer-disabled:cursor-not-allowed
+        peer-disabled:border-disabled-border peer-disabled:bg-disabled-background peer-disabled:text-disabled-foreground
+
+        peer-focus-visible:border-focus-indicator
+        peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35
 
         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']:peer-focus-visible:border-error
+        data-[invalid='true']:peer-focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -38,8 +40,10 @@ const radioButtonCircleVariants = cva(`
         }
     }
 });
-const radioButtonIndicatorVariants = cva(`
-        flex w-3 h-3 bg-primary transition-all duration-200
+const radioButtonIndicatorThemeVariants = cva(`
+        flex h-3 w-3
+        bg-primary
+        transition-all duration-(--mona-motion-fast)
     `, {
     variants: {
         rounded: {
@@ -51,13 +55,12 @@ const radioButtonIndicatorVariants = cva(`
         }
     }
 });
-const radioButtonContainerLabelVariants = cva(`
-        w-full h-full flex items-center justify-center gap-1
-        relative
+const radioButtonContainerLabelThemeVariants = cva(`
+        relative flex h-full w-full items-center justify-center gap-1
         cursor-pointer
         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,30 +73,31 @@ const radioButtonContainerLabelVariants = cva(`
         labelSize: "medium"
     }
 });
-const radioButtonDirectiveVariants = cva(`
-        appearance-none outline-none
-        w-4.5 h-4.5
-        bg-input-background border border-input-border
-        cursor-pointer
-        relative
-        place-content-center
-        flex items-center justify-center
+const radioButtonDirectiveThemeVariants = cva(`
+        relative flex h-4.5 w-4.5 items-center justify-center place-content-center
+        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
 
-        after:content-['']
-        after:w-3 after:h-3
         after:inline-grid
+        after:h-3 after:w-3
         after:place-content-center
+        after:content-['']
 
         checked:after:bg-primary
         checked:after:rounded-full
 
-        focus-visible:ring-2 focus-visible:ring-primary/40
+        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-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: {
@@ -128,70 +132,25 @@ const radioButtonDirectiveVariants = cva(`
     ]
 });
 
-const radioButtonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonVariants;
-        default:
-            return radioButtonVariants; // Default to Mona styles
-    }
-};
-const radioButtonCircleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonCircleVariants;
-        default:
-            return radioButtonCircleVariants; // Default to Mona styles
-    }
-};
-const radioButtonIndicatorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonIndicatorVariants;
-        default:
-            return radioButtonIndicatorVariants; // Default to Mona styles
-    }
-};
-const radioButtonContainerLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonContainerLabelVariants;
-        default:
-            return radioButtonContainerLabelVariants; // Default to Mona styles
-    }
-};
-const radioButtonDirectiveThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return radioButtonDirectiveVariants;
-        default:
-            return radioButtonDirectiveVariants; // Default to Mona styles
-    }
-};
-
 class RadioButtonComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.containerLabelClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const labelSize = this.labelSize();
             const userClasses = this.userClass();
-            const variantClasses = radioButtonContainerLabelThemeVariants(theme)({ labelSize });
+            const variantClasses = radioButtonContainerLabelThemeVariants({ labelSize });
             return twMerge(variantClasses, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
         this.radioButtonCircleClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return radioButtonCircleThemeVariants(theme)({ rounded });
+            return radioButtonCircleThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonCircleClasses" }] : /* istanbul ignore next */ []));
-        this.radioButtonClasses = computed(() => radioButtonThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.radioButtonClasses = computed(() => radioButtonThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonClasses" }] : /* istanbul ignore next */ []));
         this.radioButtonIndicatorClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return radioButtonIndicatorThemeVariants(theme)({ rounded });
+            return radioButtonIndicatorThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonIndicatorClasses" }] : /* istanbul ignore next */ []));
         /**
@@ -276,7 +235,6 @@ class RadioButtonComponent {
         this.value = model(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onBlur(event) {
         this.inputBlur.emit(event);
         this.touch.emit();
@@ -298,11 +256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class RadioButtonDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return radioButtonDirectiveThemeVariants(theme)({ rounded });
+            return radioButtonDirectiveThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         /**
@@ -312,7 +268,6 @@ class RadioButtonDirective {
         this.rounded = input("none", /* @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: RadioButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: RadioButtonDirective, isStandalone: true, selector: "input[type='radio'][monaRadioButton]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "'radio'" } }, ngImport: i0 }); }
 }