@nanahoshi/mona-ui 0.1.1 → 0.2.1

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,31 @@ 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
 
         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 +75,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 +101,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 */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !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 */ []));