@nanahoshi/mona-ui 0.1.0 → 0.2.0

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,9 +222,8 @@ 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\r\n    [class]=\"trackClasses()\"\r\n    [style.background-color]=\"trackColor()\"\r\n    [attr.data-prev]=\"true\"\r\n    [attr.data-left]=\"labelPosition() === 'start'\"\r\n    [attr.data-right]=\"labelPosition() === 'end'\"\r\n    [attr.data-indeterminate]=\"indeterminate()\"\r\n    [attr.data-value]=\"progress()\"\r\n    [style.clip-path]=\"prevTrackClipPath()\">\r\n    @if (indeterminate()) {\r\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\r\n    } @else if (labelVisible()) {\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n        }\r\n    }\r\n</div>\r\n\r\n@if (!indeterminate()) {\r\n    <div\r\n        [class]=\"trackClasses()\"\r\n        [attr.data-next]=\"true\"\r\n        [attr.data-left]=\"labelPosition() === 'start'\"\r\n        [attr.data-right]=\"labelPosition() === 'end'\"\r\n        [style.clip-path]=\"nextTrackClipPath()\">\r\n        @if (labelVisible()) {\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n                </ng-container>\r\n            } @else {\r\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n            }\r\n        }\r\n    </div>\r\n}\r\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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
@@ -279,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-disabled]": "disabled() || null",
                         "[attr.data-disabled]": "disabled()",
                         role: "progressbar"
-                    }, template: "<div\r\n    [class]=\"trackClasses()\"\r\n    [style.background-color]=\"trackColor()\"\r\n    [attr.data-prev]=\"true\"\r\n    [attr.data-left]=\"labelPosition() === 'start'\"\r\n    [attr.data-right]=\"labelPosition() === 'end'\"\r\n    [attr.data-indeterminate]=\"indeterminate()\"\r\n    [attr.data-value]=\"progress()\"\r\n    [style.clip-path]=\"prevTrackClipPath()\">\r\n    @if (indeterminate()) {\r\n        <div [class]=\"indeterminateClasses()\" class=\"indeterminate\"></div>\r\n    } @else if (labelVisible()) {\r\n        @if (labelTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n            </ng-container>\r\n        } @else {\r\n            <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n        }\r\n    }\r\n</div>\r\n\r\n@if (!indeterminate()) {\r\n    <div\r\n        [class]=\"trackClasses()\"\r\n        [attr.data-next]=\"true\"\r\n        [attr.data-left]=\"labelPosition() === 'start'\"\r\n        [attr.data-right]=\"labelPosition() === 'end'\"\r\n        [style.clip-path]=\"nextTrackClipPath()\">\r\n        @if (labelVisible()) {\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()?.templateRef\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: value(), min: min(), max: max(), percent: progress() }\">\r\n                </ng-container>\r\n            } @else {\r\n                <span [class]=\"labelClasses()\" [style]=\"labelStyles()\">{{ progress() | number: \"1.0-2\" }}</span>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n", styles: [".indeterminate{animation:indeterminate 16s linear infinite}@keyframes indeterminate{0%{background-position:0 0}to{background-position:100% 0}}\n"] }]
+                    }, 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"] }]
         }], propDecorators: { labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProgressBarLabelTemplateDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-valuetext", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelStyles", required: false }] }], labelVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisible", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /*

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
-        disabled:cursor-not-allowed
+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
-        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
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const radioButtonCircleThemeVariants = cva(`
+        relative flex h-4.5 w-4.5 items-center justify-center
+        cursor-pointer overflow-hidden
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        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/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
-        cursor-pointer
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+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']: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
-
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
-
-        after:content-['']
-        after:w-3 after:h-3
-        after:inline-grid
-        after:place-content-center
-
-        checked:after:bg-primary
-        checked:after:rounded-full
-
-        focus-visible:ring-2 focus-visible:ring-primary/40
-
-        [&.ng-touched.ng-invalid]:border-error
+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:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
+
+        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: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();
@@ -286,23 +244,21 @@ class RadioButtonComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", 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 } }, outputs: { inputBlur: "inputBlur", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, 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    <input\r\n        type=\"radio\"\r\n        [disabled]=\"disabled()\"\r\n        [name]=\"name()\"\r\n        [value]=\"radioValue()\"\r\n        [class]=\"radioButtonClasses()\"\r\n        [checked]=\"radioValue() === value()\"\r\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"inputClick.emit($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (change)=\"onSelectionChange()\" />\r\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\r\n        @if (radioValue() === value()) {\r\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", 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 } }, outputs: { inputBlur: "inputBlur", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-radio-button", imports: [FormsModule, NgTemplateOutlet], host: {
                         "[attr.data-selected]": "radioValue()===value()",
                         "[attr.data-disabled]": "disabled()"
-                    }, 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    <input\r\n        type=\"radio\"\r\n        [disabled]=\"disabled()\"\r\n        [name]=\"name()\"\r\n        [value]=\"radioValue()\"\r\n        [class]=\"radioButtonClasses()\"\r\n        [checked]=\"radioValue() === value()\"\r\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"inputClick.emit($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (change)=\"onSelectionChange()\" />\r\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\r\n        @if (radioValue() === value()) {\r\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\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    <input\n        type=\"radio\"\n        [disabled]=\"disabled()\"\n        [name]=\"name()\"\n        [value]=\"radioValue()\"\n        [class]=\"radioButtonClasses()\"\n        [checked]=\"radioValue() === value()\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"inputClick.emit($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (change)=\"onSelectionChange()\" />\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\n        @if (radioValue() === value()) {\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\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: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClick: [{ type: i0.Output, args: ["inputClick"] }], 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class 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 }); }
 }