@nanahoshi/mona-ui 0.1.1 → 0.2.0

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

@@ -5,7 +5,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronDown } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PopupMenuGroupTemplateDirective, PopupMenuTemplateOrigin, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuToken, PopupMenuComponent, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent } from '@nanahoshi/mona-ui/popup-menu';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -137,10 +136,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const splitButtonVariants = cva(`
+const splitButtonThemeVariants = cva(`
         inline-flex flex-nowrap items-center
         [&>button]:focus-visible:z-10
-        [&_svg]:w-5 [&_svg]:h-5
+        [&_svg]:h-5 [&_svg]:w-5
     `, {
     variants: {
         look: {
@@ -148,7 +147,7 @@ const splitButtonVariants = cva(`
             error: "",
             ghost: "border-transparent",
             info: "",
-            outline: "[&>button:not(:last-child)]:border-r",
+            outline: "[&>button:not(:last-child)]:border-r [&>button:not(:last-child)]:border-input-border",
             primary: "",
             secondary: "",
             success: "",
@@ -181,13 +180,13 @@ const splitButtonVariants = cva(`
         },
         size: {
             large: `
-                    [&_svg]:w-5 [&_svg]:h-5
+                    [&_svg]:h-5 [&_svg]:w-5
                 `,
             medium: `
-                    [&_svg]:w-5 [&_svg]:h-5
+                    [&_svg]:h-5 [&_svg]:w-5
                 `,
             small: `
-                    [&_svg]:w-4 [&_svg]:h-4
+                    [&_svg]:h-4 [&_svg]:w-4
                 `
         }
     },
@@ -198,32 +197,20 @@ const splitButtonVariants = cva(`
     }
 });
 
-const splitButtonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitButtonVariants;
-        default:
-            return splitButtonVariants; // Default to Mona styles
-    }
-};
-
 class SplitButtonComponent {
     #destroyRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
-        this.#themeService = inject(ThemeService);
         this.menuItemComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "menuItemComponents" } : /* istanbul ignore next */ {}), descendants: false });
         this.menuButtonRef = viewChild("menuButton", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuButtonRef" }] : /* istanbul ignore next */ []));
         this.popupMenuRef = viewChild("popupMenu", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupMenuRef" }] : /* istanbul ignore next */ []));
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const look = this.look();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = splitButtonThemeVariants(theme)({
+            const classes = splitButtonThemeVariants({
                 look,
                 rounded,
                 size

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

@@ -1,8 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, Directive, model, viewChild, TemplateRef, Component, inject, output, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
+import { computed, input, Directive, model, viewChild, TemplateRef, Component, output, inject, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
 import { where, compact, from } from '@mirei/ts-collections';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 import { v4 } from 'uuid';
 import { Directionality } from '@angular/cdk/bidi';
@@ -105,8 +104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { pane: [{ type: i0.Input, args: [{ isSignal: true, alias: "pane", required: true }] }], paneList: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneList", required: true }] }] } });
 
-const splitterBaseVariants = cva(`
-        flex w-full h-full overflow-hidden min-w-0 min-h-0
+const splitterBaseThemeVariants = cva(`
+        flex h-full w-full min-h-0 min-w-0 overflow-hidden
     `, {
     variants: {
         orientation: {
@@ -118,13 +117,13 @@ const splitterBaseVariants = cva(`
         orientation: "horizontal"
     }
 });
-const splitterResizerVariants = cva(`
-        flex items-center justify-center
-        relative bg-accent
-        hover:bg-accent-hover
-        active:bg-primary/40
-        shrink-0 outline-none
-        focus-visible:bg-primary
+const splitterResizerThemeVariants = cva(`
+        relative flex shrink-0 items-center justify-center
+        bg-border-subtle outline-none
+        transition-colors
+        hover:bg-border-control active:bg-border-control-hover
+        focus-visible:bg-border-control
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         orientation: {
@@ -132,7 +131,7 @@ const splitterResizerVariants = cva(`
             vertical: "h-0.5 flex-row"
         },
         resizing: {
-            true: "",
+            true: "bg-border-control-hover",
             false: ""
         }
     },
@@ -141,7 +140,7 @@ const splitterResizerVariants = cva(`
         resizing: false
     }
 });
-const splitterResizerHandleVariants = cva(`
+const splitterResizerHandleThemeVariants = cva(`
         flex items-center justify-center
         [&_button]:p-0
     `, {
@@ -156,31 +155,6 @@ const splitterResizerHandleVariants = cva(`
     }
 });
 
-const splitterBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitterBaseVariants;
-        default:
-            return splitterBaseVariants;
-    }
-};
-const splitterResizerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitterResizerVariants;
-        default:
-            return splitterResizerVariants;
-    }
-};
-const splitterResizerHandleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return splitterResizerHandleVariants;
-        default:
-            return splitterResizerHandleVariants;
-    }
-};
-
 class SplitterPaneComponent {
     constructor() {
         /**
@@ -238,11 +212,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class SplitterResizerHandleComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return splitterResizerHandleThemeVariants(theme)({ orientation });
+            return splitterResizerHandleThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.collapseNext = output();
@@ -256,7 +228,6 @@ class SplitterResizerHandleComponent {
         this.resizable = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onPointerDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -277,14 +248,12 @@ class SplitterResizerComponent {
     #hostElementRef;
     #paneSizeMemory;
     #splitter;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#directionality = inject(Directionality);
         this.#hostElementRef = inject(ElementRef);
         this.#paneSizeMemory = new WeakMap();
         this.#splitter = inject(SplitterComponent);
-        this.#themeService = inject(ThemeService);
         this.ariaValueMax = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
         this.ariaValueMin = signal(0, /* @ts-ignore */
@@ -292,10 +261,9 @@ class SplitterResizerComponent {
         this.ariaValueNow = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
             const resizing = this.resizing();
-            return splitterResizerThemeVariants(theme)({ orientation, resizing });
+            return splitterResizerThemeVariants({ orientation, resizing });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.hovered = signal(false, /* @ts-ignore */
@@ -798,11 +766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class SplitterComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return splitterBaseThemeVariants(theme)({ orientation });
+            return splitterBaseThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.paneList = contentChildren(SplitterPaneComponent, /* @ts-ignore */
@@ -814,7 +780,6 @@ class SplitterComponent {
         this.orientation = input("horizontal", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     /**
      * @internal Used by SplitterResizerComponent to resolve sibling panes by id.
      */

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

@@ -3,7 +3,6 @@ import { Directive, inject, ElementRef, computed, input, afterRenderEffect, Dest
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { select } from '@mirei/ts-collections';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { fromEvent } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
@@ -53,12 +52,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const stepperBaseVariants = cva(`
+const stepperBaseThemeVariants = cva(`
         relative grid outline-none
     `, {
     variants: {
         orientation: {
-            horizontal: "w-full h-auto",
+            horizontal: "h-auto w-full",
             vertical: "h-full w-auto"
         }
     },
@@ -66,18 +65,18 @@ const stepperBaseVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperStepListVariants = cva(`
-        absolute flex list-none col-span-full
-        font-medium z-1
+const stepperStepListThemeVariants = cva(`
+        absolute z-1 col-span-full flex list-none
+        font-medium
     `, {
     variants: {
         orientation: {
             horizontal: `
-                    flex-row w-full
+                    w-full flex-row
                     -translate-y-3
                 `,
             vertical: `
-                    flex-col h-full w-max
+                    h-full w-max flex-col
                     -translate-x-3
                 `
         }
@@ -86,35 +85,31 @@ const stepperStepListVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperStepListItemVariants = cva(`
-        flex items-center
-        grow-1 shrink-0 basis-auto
-        z-1
+const stepperStepListItemThemeVariants = cva(`
+        z-1 flex grow-1 shrink-0 basis-auto items-center
     `, {
     variants: {
         orientation: {
             horizontal: "flex-col gap-2",
-            vertical: "flex-row gap-2 justify-start"
+            vertical: "flex-row justify-start gap-2"
         }
     },
     defaultVariants: {
         orientation: "horizontal"
     }
 });
-const stepperStepIndicatorVariants = cva(`
-        w-8 h-8
-        flex items-center justify-center
-        bg-background border border-border
-        text-foreground outline-none
+const stepperStepIndicatorThemeVariants = cva(`
+        flex h-8 w-8 items-center justify-center
+        border border-border outline-none
         transition-colors duration-400 ease-in-out
     `, {
     variants: {
         active: {
             true: "bg-primary text-primary-foreground",
-            false: ""
+            false: "bg-surface-raised text-foreground"
         },
         focused: {
-            true: "ring-2 ring-primary/40",
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
             false: ""
         },
         rounded: {
@@ -126,13 +121,14 @@ const stepperStepIndicatorVariants = cva(`
         }
     }
 });
-const stepperTrackVariants = cva(`
+const stepperTrackThemeVariants = cva(`
         relative grid
-        bg-background text-foreground border border-border
+        bg-surface-muted text-foreground
+        border border-border-subtle
     `, {
     variants: {
         orientation: {
-            horizontal: "w-full h-2",
+            horizontal: "h-2 w-full",
             vertical: "h-full w-2"
         }
     },
@@ -140,13 +136,13 @@ const stepperTrackVariants = cva(`
         orientation: "horizontal"
     }
 });
-const stepperTrackLineVariants = cva(`
+const stepperTrackLineThemeVariants = cva(`
         absolute bg-primary
     `, {
     variants: {
         orientation: {
-            horizontal: "h-full transition-width duration-300 ease-out",
-            vertical: "w-full transition-height duration-300 ease-out"
+            horizontal: "h-full transition-width duration-(--mona-motion-standard) ease-out",
+            vertical: "w-full transition-height duration-(--mona-motion-standard) ease-out"
         }
     },
     defaultVariants: {
@@ -154,69 +150,17 @@ const stepperTrackLineVariants = cva(`
     }
 });
 
-const stepperBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperBaseVariants;
-        default:
-            return stepperBaseVariants;
-    }
-};
-const stepperStepListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperStepListVariants;
-        default:
-            return stepperStepListVariants;
-    }
-};
-const stepperStepListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperStepListItemVariants;
-        default:
-            return stepperStepListItemVariants;
-    }
-};
-const stepperStepIndicatorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperStepIndicatorVariants;
-        default:
-            return stepperStepIndicatorVariants;
-    }
-};
-const stepperTrackThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperTrackVariants;
-        default:
-            return stepperTrackVariants;
-    }
-};
-const stepperTrackLineThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return stepperTrackLineVariants;
-        default:
-            return stepperTrackLineVariants;
-    }
-};
-
 class StepperIndicatorDirective {
     #wasFocused;
     #host;
-    #themeService;
     constructor() {
         this.#wasFocused = false;
         this.#host = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.stepIndicatorClass = computed(() => {
-            const theme = this.#themeService.theme();
             const active = this.active();
             const focused = this.focused();
             const rounded = this.rounded();
-            return stepperStepIndicatorThemeVariants(theme)({ active, focused, rounded });
+            return stepperStepIndicatorThemeVariants({ active, focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stepIndicatorClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
@@ -251,13 +195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class StepperComponent {
     #destroyRef;
     #hostElementRef;
-    #themeService;
     #trackItemSize;
     #trackLength;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.#trackItemSize = computed(() => {
             const stepCount = this.viewSteps().length;
             return stepCount !== 0 ? 100 / stepCount : 0;
@@ -280,9 +222,8 @@ class StepperComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperBaseThemeVariants(theme)({ orientation });
+            return stepperBaseThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.highlightedStep = signal(0, /* @ts-ignore */
@@ -301,15 +242,13 @@ class StepperComponent {
         });
         this.labelTemplate = contentChild(StepperLabelTemplateDirective, { read: TemplateRef });
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperStepListThemeVariants(theme)({ orientation });
+            return stepperStepListThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.listItemClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperStepListItemThemeVariants(theme)({ orientation });
+            return stepperStepListItemThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
         this.progressMax = computed(() => Math.max(this.viewSteps().length - 1, 0), /* @ts-ignore */
@@ -318,9 +257,8 @@ class StepperComponent {
             read: TemplateRef
         });
         this.trackClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperTrackThemeVariants(theme)({ orientation });
+            return stepperTrackThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
         this.trackInnerStyles = computed(() => {
@@ -340,9 +278,8 @@ class StepperComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackItemStyles" }] : /* istanbul ignore next */ []));
         this.trackLineClass = computed(() => {
-            const theme = this.#themeService.theme();
             const orientation = this.orientation();
-            return stepperTrackLineThemeVariants(theme)({ orientation });
+            return stepperTrackLineThemeVariants({ orientation });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackLineClass" }] : /* istanbul ignore next */ []));
         this.trackStyles = computed(() => {

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

@@ -2,10 +2,10 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, model, output, afterNextRender, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { fromEvent, filter, tap, merge } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses, themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class SwitchHandleContentTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SwitchHandleContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -40,26 +40,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const switchVariants = cva(`
-        relative flex items-center cursor-pointer select-none
-        transition-[background]
-
-        bg-input-background
+const switchThemeVariants = cva(`
+        group relative flex items-center
+        cursor-pointer select-none
+        ${themeControlSurfaceClasses}
         border border-input-border
         outline-none
-
-        focus-within:ring-2 focus-within:ring-primary/40
+        transition-[background,border-color]
 
         data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:opacity-50
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
 
         data-[active='true']:bg-primary
         data-[active='true']:text-primary-foreground
+        data-[disabled='true']:data-[active='true']:bg-disabled-background
 
-        [&.ng-touched.ng-invalid]:border-error
+        focus-visible:border-focus-indicator
+        focus-visible:ring-2 focus-visible:ring-focus-indicator/35
 
+        [&.ng-touched.ng-invalid]:border-error
         data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-visible:border-error
+        data-[invalid='true']:focus-visible:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -70,18 +76,21 @@ const switchVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "w-14 h-7.5 text-md",
-            medium: "w-12 h-6.5 text-sm",
-            small: "w-10 h-5.5 text-xs"
+            large: "h-7.5 w-14 text-md",
+            medium: "h-6.5 w-12 text-sm",
+            small: "h-5.5 w-10 text-xs"
         }
     }
 });
-const switchHandleVariants = cva(`
-        absolute inline-flex
-        items-center justify-center
-        outline-none transition-[left,background] ease-in-out duration-300
-        border border-border bg-secondary
-        data-[active='true']:bg-background text-foreground
+const switchHandleThemeVariants = cva(`
+        absolute inline-flex items-center justify-center
+        ${themeRaisedSurfaceClasses} text-foreground
+        border border-border-subtle shadow-(--shadow-control)
+        outline-none
+        transition-[left,background] duration-(--mona-motion-standard) ease-in-out
+        data-[active='true']:bg-primary-foreground
+        group-data-[disabled='true']:border-disabled-border
+        group-data-[disabled='true']:bg-disabled-background
     `, {
     variants: {
         rounded: {
@@ -93,82 +102,52 @@ const switchHandleVariants = cva(`
         },
         size: {
             large: `
-                    w-6 h-6
+                    h-6 w-6
                     data-[active='true']:left-[calc(100%-26px)]
                     data-[active='false']:left-0.5
                 `,
             medium: `
-                    w-5 h-5
+                    h-5 w-5
                     data-[active='true']:left-[calc(100%-22px)]
                     data-[active='false']:left-0.5
                 `,
             small: `
-                    w-4 h-4
+                    h-4 w-4
                     data-[active='true']:left-[calc(100%-18px)]
                     data-[active='false']:left-0.5
                 `
         }
     }
 });
-const switchLabelVariants = cva(`
-        h-full flex flex-1 items-center justify-center text-xs
+const switchLabelThemeVariants = cva(`
+        flex h-full flex-1 items-center justify-center text-xs
     `);
 
-const switchThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return switchVariants;
-        default:
-            return switchVariants; // Default to Mona styles
-    }
-};
-const switchHandleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return switchHandleVariants;
-        default:
-            return switchHandleVariants; // Default to Mona styles
-    }
-};
-const switchLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return switchLabelVariants;
-        default:
-            return switchLabelVariants; // Default to Mona styles
-    }
-};
-
 class SwitchComponent {
     #destroyRef;
     #hostElementRef;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject((ElementRef));
-        this.#themeService = inject(ThemeService);
         this.classes = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = switchThemeVariants(theme)({ rounded, size });
+            const classes = switchThemeVariants({ rounded, size });
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.checked()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.handleClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = switchHandleThemeVariants(theme)({ rounded, size });
+            const classes = switchHandleThemeVariants({ rounded, size });
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handleClasses" }] : /* istanbul ignore next */ []));
         this.handleContentTemplate = contentChild(SwitchHandleContentTemplateDirective, { ...(ngDevMode ? { debugName: "handleContentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.labelClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            const classes = switchLabelThemeVariants(theme)();
+            const classes = switchLabelThemeVariants();
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));