@nanahoshi/mona-ui 0.1.1 → 0.2.1

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

@@ -3,9 +3,9 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Directive, Pipe, DestroyRef, signal, viewChildren, NgZone, computed, contentChild, TemplateRef, input, output, afterNextRender, viewChild, model, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, tap, filter, switchMap, takeUntil } from 'rxjs';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class SliderTickDirective {
     constructor() {
@@ -150,26 +150,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const sliderBaseVariants = cva(`
-        flex relative select-none
+const sliderBaseThemeVariants = cva(`
+        relative flex select-none
 
-        data-[orientation="horizontal"]:h-6
         data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:h-6
         data-[orientation="horizontal"]:min-w-[200px]
         data-[orientation="horizontal"]:items-center
 
-        data-[orientation="vertical"]:w-6
         data-[orientation="vertical"]:h-[200px]
+        data-[orientation="vertical"]:w-6
         data-[orientation="vertical"]:justify-center
 
         data-[disabled="true"]:pointer-events-none
-        data-[disabled="true"]:opacity-50
         data-[disabled="true"]:cursor-not-allowed
+        data-[disabled="true"]:opacity-50
     `);
-const sliderTrackVariants = cva(`
+const sliderTrackThemeVariants = cva(`
         relative z-2 cursor-pointer
-        border border-input-border
-        bg-background text-foreground
+        overflow-hidden
+        bg-surface-muted text-foreground
 
         data-[orientation="horizontal"]:w-full
         data-[orientation="horizontal"]:h-1.5
@@ -177,12 +177,22 @@ const sliderTrackVariants = cva(`
         data-[orientation="vertical"]:h-full
         data-[orientation="vertical"]:w-1.5
 
-    `);
-const sliderSelectionVariants = cva(`
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const sliderSelectionThemeVariants = cva(`
         absolute
-        bg-primary border-none
-
-        ease-out duration-200
+        bg-primary
+        border-none
+        transition duration-(--mona-motion-fast) ease-out
 
         data-[orientation="horizontal"]:top-0
         data-[orientation="horizontal"]:bottom-0
@@ -194,7 +204,7 @@ const sliderSelectionVariants = cva(`
         data-[orientation="vertical"]:transition-[top,bottom]
         data-[orientation="vertical"]:data-[dragging="true"]:transition-none
     `);
-const sliderTickListVariants = cva(`
+const sliderTickListThemeVariants = cva(`
         absolute
 
         data-[orientation="horizontal"]:w-full
@@ -207,34 +217,29 @@ const sliderTickListVariants = cva(`
         data-[orientation="vertical"]:top-0
         data-[orientation="vertical"]:left-0
     `);
-const sliderTickVariants = cva(`
+const sliderTickThemeVariants = cva(`
         cursor-pointer
-        bg-input-border
-        brightness-75
+        bg-border-control-hover
     `);
-const sliderTickLabelListVariants = cva(`
-        absolute
-        w-full h-full
+const sliderTickLabelListThemeVariants = cva(`
+        absolute h-full w-full
         select-none
     `);
-const sliderTickLabelVariants = cva(`
-        absolute flex
-        items-center justify-center
+const sliderTickLabelThemeVariants = cva(`
+        absolute flex items-center justify-center
+        text-xs/[1.667] text-foreground
 
-        text-xs/[1.667]
-        text-foreground
-
-        data-[orientation="vertical"]:w-4.25
         data-[orientation="vertical"]:h-auto
+        data-[orientation="vertical"]:w-4.25
     `);
-const sliderHandleVariants = cva(`
+const sliderHandleThemeVariants = cva(`
         absolute z-2 flex items-center justify-center
-        w-4.25 h-4.25
+        h-4.25 w-4.25
         cursor-pointer
+        ${themeRaisedSurfaceClasses}
+        border border-(--mona-slider-handle-border-color) shadow-(--shadow-control)
         outline-none
-        bg-primary border border-border
-
-        ease-out duration-200
+        transition duration-(--mona-motion-fast) ease-out
 
         data-[orientation="horizontal"]:translate-x-[-50%]
         data-[orientation="horizontal"]:transition-[left]
@@ -244,11 +249,14 @@ const sliderHandleVariants = cva(`
         data-[orientation="vertical"]:transition-[bottom]
         data-[orientation="vertical"]:data-[dragging="true"]:transition-none
 
+        data-[focused="true"]:border-focus-indicator
         data-[focused="true"]:ring-2
-        data-[focused="true"]:ring-primary/40
+        data-[focused="true"]: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"]:data-[focused="true"]:border-error
+        data-[invalid="true"]:data-[focused="true"]:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -261,75 +269,8 @@ const sliderHandleVariants = cva(`
     }
 });
 
-const sliderBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderBaseVariants;
-        default:
-            return sliderBaseVariants; // Default to Mona styles
-    }
-};
-const sliderTrackThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTrackVariants;
-        default:
-            return sliderTrackVariants; // Default to Mona styles
-    }
-};
-const sliderSelectionThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderSelectionVariants;
-        default:
-            return sliderSelectionVariants; // Default to Mona styles
-    }
-};
-const sliderTickListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickListVariants;
-        default:
-            return sliderTickListVariants; // Default to Mona styles
-    }
-};
-const sliderTickThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickVariants;
-        default:
-            return sliderTickVariants; // Default to Mona styles
-    }
-};
-const sliderTickLabelListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickLabelListVariants;
-        default:
-            return sliderTickLabelListVariants; // Default to Mona styles
-    }
-};
-const sliderTickLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickLabelVariants;
-        default:
-            return sliderTickLabelVariants; // Default to Mona styles
-    }
-};
-const sliderHandleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderHandleVariants;
-        default:
-            return sliderHandleVariants; // Default to Mona styles
-    }
-};
-
 class SliderBaseComponent {
-    #themeService;
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.destroyRef = inject(DestroyRef);
         this.dragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -337,7 +278,7 @@ class SliderBaseComponent {
         this.tickElements = viewChildren(SliderTickDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickElements" }] : /* istanbul ignore next */ []));
         this.zone = inject(NgZone);
-        this.baseClasses = computed(() => sliderBaseThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.baseClasses = computed(() => sliderBaseThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
@@ -398,12 +339,12 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionBackgroundStyle" }] : /* istanbul ignore next */ []));
-        this.selectionClasses = computed(() => sliderSelectionThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.selectionClasses = computed(() => sliderSelectionThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionClasses" }] : /* istanbul ignore next */ []));
         this.sliderHandleClasses = computed(() => {
             const rounded = this.rounded();
             const handleClasses = this.handleClasses();
-            const variants = sliderHandleThemeVariants(this.#themeService.theme())({ rounded });
+            const variants = sliderHandleThemeVariants({ rounded });
             return twMerge(variants ?? "", Array.isArray(handleClasses) ? handleClasses.join(" ") : handleClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliderHandleClasses" }] : /* istanbul ignore next */ []));
@@ -422,13 +363,13 @@ class SliderBaseComponent {
             return `${number}px`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliderTrackSize" }] : /* istanbul ignore next */ []));
-        this.tickClasses = computed(() => sliderTickThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickClasses = computed(() => sliderTickThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickClasses" }] : /* istanbul ignore next */ []));
-        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelClasses" }] : /* istanbul ignore next */ []));
-        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelListClasses" }] : /* istanbul ignore next */ []));
-        this.tickListClasses = computed(() => sliderTickListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickListClasses = computed(() => sliderTickListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickListClasses" }] : /* istanbul ignore next */ []));
         this.tickStyleArgs = computed(() => {
             const largeTickStep = this.largeTickStep();
@@ -464,7 +405,10 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackBackgroundStyle" }] : /* istanbul ignore next */ []));
-        this.trackClasses = computed(() => sliderTrackThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.trackClasses = computed(() => {
+            const rounded = this.rounded();
+            return sliderTrackThemeVariants({ rounded });
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
         /**
          * @description Human-readable override for the `aria-valuenow` announcement. Pass a function that receives the current value and returns the string to announce.

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.
      */