@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs';
+export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-indicator-icon.mjs

@@ -1,14 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, computed, signal, viewChild, output, input, afterRenderEffect, untracked, Component } from '@angular/core';
+import { computed, signal, viewChild, output, input, afterRenderEffect, untracked, Component } from '@angular/core';
 import { LucideLoader, LucideChevronDown, LucideX, LucideDynamicIcon } from '@lucide/angular';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const indicatorIconHostVariants = cva(`h-full aspect-square flex-none inline-flex items-center justify-center self-stretch`, {
+const indicatorIconHostThemeVariants = cva(`h-full aspect-square flex-none inline-flex items-center justify-center self-stretch`, {
     variants: {
         interactive: {
-            true: "opacity-50 hover:opacity-90 focus:ring-1 focus:ring-primary/40 focus:outline-none",
+            true: `
+                    opacity-50
+                    hover:opacity-90
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35 focus-visible:outline-none
+                `,
             false: ""
         },
         preset: {
@@ -21,7 +24,7 @@ const indicatorIconHostVariants = cva(`h-full aspect-square flex-none inline-fle
         interactive: false
     }
 });
-const indicatorIconSvgVariants = cva(``, {
+const indicatorIconSvgThemeVariants = cva(``, {
     variants: {
         loading: {
             true: "animate-[spin_2s_linear_infinite]",
@@ -33,40 +36,19 @@ const indicatorIconSvgVariants = cva(``, {
     }
 });
 
-const indicatorIconHostThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return indicatorIconHostVariants;
-        default:
-            return indicatorIconHostVariants;
-    }
-};
-const indicatorIconSvgThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return indicatorIconSvgVariants;
-        default:
-            return indicatorIconSvgVariants;
-    }
-};
-
 class IndicatorIconComponent {
-    #themeService;
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const interactive = this.interactive();
             const preset = this.preset();
-            return twMerge(indicatorIconHostThemeVariants(theme)({ interactive, preset }), this.userClass());
+            return twMerge(indicatorIconHostThemeVariants({ interactive, preset }), this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.hasProjectedContent = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : /* istanbul ignore next */ []));
         this.iconClass = computed(() => {
-            const theme = this.#themeService.theme();
             const loading = this.preset() === "loading";
-            return indicatorIconSvgThemeVariants(theme)({ loading });
+            return indicatorIconSvgThemeVariants({ loading });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
         this.iconToRender = computed(() => {

package/fesm2022/nanahoshi-mona-ui-internal-list.mjs

@@ -8,9 +8,9 @@ import { FilterInputComponent } from '@nanahoshi/mona-ui/internal/filter-input';
 import { PlaceholderComponent } from '@nanahoshi/mona-ui/placeholder';
 import { Subject, ReplaySubject, fromEvent, asyncScheduler, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
 import { ImmutableList, from, ImmutableSet, toImmutableSet } from '@mirei/ts-collections';
 import { v4 } from 'uuid';
+import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CheckboxDirective } from '@nanahoshi/mona-ui/check-box';
@@ -63,86 +63,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const listVariants = cva(`
-        h-full flex flex-col overflow-hidden outline-none
-    `);
-const listInnerListVariants = cva(`
-        list-none p-0 m-0 overflow-x-hidden overflow-y-auto
-        h-full outline-none
-    `);
-const listGroupHeaderVariants = cva(``, {
-    variants: {
-        hasTemplate: {
-            true: "",
-            false: "py-1 font-bold"
-        }
-    }
-});
-const listGroupHeaderTextVariants = cva(`select-none`, {
-    variants: {
-        hasTemplate: {
-            true: "",
-            false: "font-bold w-full px-3 py-1"
-        }
-    }
-});
-const listItemBaseVariants = cva(`
-        w-full h-full flex gap-2 items-center
-    `);
-const listItemContentVariants = cva(`
-        relative flex cursor-default select-none items-center
-        outline-none px-3 py-1
-        hover:bg-accent hover:text-accent-foreground
-        focus:bg-accent focus:text-accent-foreground
-    `, {
-    variants: {
-        checkboxes: {
-            true: "gap-2",
-            false: ""
-        },
-        highlighted: {
-            true: "bg-accent text-accent-foreground rounded-none inset-ring-1 inset-ring-gray-400/70",
-            false: ""
-        },
-        selected: {
-            true: "bg-primary text-primary-foreground inset-ring-1 inset-ring-primary-foreground/40",
-            false: ""
-        },
-        disabled: {
-            true: "pointer-events-none opacity-50 cursor-default",
-            false: "cursor-pointer"
-        }
-    },
-    compoundVariants: [
-        {
-            selected: true,
-            checkboxes: false,
-            class: `
-                    bg-primary text-primary-foreground rounded-none
-                    inset-ring-1 inset-ring-primary-foreground/40
-                    hover:bg-primary hover:text-primary-foreground
-                    focus:bg-primary focus:text-primary-foreground
-                `
-        },
-        {
-            highlighted: true,
-            selected: true,
-            checkboxes: false,
-            class: `
-                    bg-primary text-primary-foreground rounded-none
-                    inset-ring-1 inset-ring-primary-foreground/40
-                    hover:bg-primary hover:text-primary-foreground
-                    focus:bg-primary focus:text-primary-foreground
-                `
-        },
-        {
-            selected: true,
-            checkboxes: true,
-            class: `bg-transparent text-foreground`
-        }
-    ]
-});
-
 class ListItem {
     constructor(options) {
         this.header = "";
@@ -794,6 +714,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
+const listThemeVariants = cva(`flex h-full flex-col overflow-hidden bg-(--mona-list-background) outline-none`);
+const listInnerListThemeVariants = cva(`m-0 h-full list-none overflow-x-hidden overflow-y-auto p-0 outline-none [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]`);
+const listGroupHeaderThemeVariants = cva(``, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "border-y-[length:var(--mona-list-group-border-width)] border-border-subtle bg-(--mona-list-group-background) py-1 font-[var(--mona-list-group-font-weight)]"
+        }
+    }
+});
+const listGroupHeaderTextThemeVariants = cva(`select-none text-muted-foreground`, {
+    variants: {
+        hasTemplate: { true: "", false: "w-full px-3 py-1 font-[var(--mona-list-group-font-weight)]" }
+    }
+});
+const listItemBaseThemeVariants = cva(`flex h-full w-full items-center gap-2`);
+const listItemContentThemeVariants = cva(`relative flex cursor-default select-none items-center px-3 py-1 text-foreground outline-none hover:bg-hover focus:bg-hover`, {
+    variants: {
+        checkboxes: { true: "gap-2", false: "" },
+        highlighted: {
+            true: "bg-hover text-foreground inset-ring-1 inset-ring-focus-indicator/35",
+            false: ""
+        },
+        selected: { true: "bg-(--color-selected) text-(--color-selected-foreground)", false: "" },
+        disabled: {
+            true: "pointer-events-none cursor-default bg-(--mona-list-disabled-background) text-disabled-foreground",
+            false: "cursor-pointer"
+        }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            checkboxes: false,
+            class: "bg-(--color-selected) text-(--color-selected-foreground) hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground) focus:bg-(--color-selected-focus) focus:text-(--color-selected-focus-foreground)"
+        },
+        {
+            highlighted: true,
+            selected: true,
+            checkboxes: false,
+            class: "bg-(--color-selected) text-(--color-selected-foreground) inset-ring-1 inset-ring-focus-indicator/35 hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground) focus:bg-(--color-selected-focus) focus:text-(--color-selected-focus-foreground)"
+        },
+        { selected: true, checkboxes: true, class: "bg-transparent text-foreground" }
+    ]
+});
+
 class ListItemDirective {
     #listService;
     constructor() {
@@ -821,7 +786,12 @@ class ListItemDirective {
             const highlighted = this.highlighted();
             const selected = this.selected();
             const checkboxes = this.#listService.selectableOptions().checkboxes;
-            const classes = listItemContentVariants({ disabled, highlighted, selected, checkboxes });
+            const classes = listItemContentThemeVariants({
+                disabled,
+                highlighted,
+                selected,
+                checkboxes
+            });
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []));
@@ -895,7 +865,7 @@ class ListItemComponent {
             if (isHeader) {
                 return ``;
             }
-            return listItemBaseVariants();
+            return listItemBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.checkboxes = computed(() => {
@@ -924,7 +894,7 @@ class ListItemComponent {
             const isHeader = this.isHeader();
             if (isHeader) {
                 const hasTemplate = this.template() != null;
-                const classes = listGroupHeaderTextVariants({ hasTemplate });
+                const classes = listGroupHeaderTextThemeVariants({ hasTemplate });
                 return twMerge(classes);
             }
             return ``; // TODO
@@ -960,7 +930,7 @@ class ListComponent {
         this.filterInput = viewChild(FilterInputComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
         this.classes = computed(() => {
-            const classes = listVariants();
+            const classes = listThemeVariants();
             return twMerge(classes);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
@@ -968,7 +938,7 @@ class ListComponent {
         this.groupHeaderClasses = computed(() => {
             const listItemClass = this.listItemClass();
             const hasTemplate = this.groupHeaderTemplate() != null;
-            const classes = listGroupHeaderVariants({ hasTemplate });
+            const classes = listGroupHeaderThemeVariants({ hasTemplate });
             return twMerge(classes, listItemClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
@@ -978,7 +948,7 @@ class ListComponent {
         ...(ngDevMode ? [{ debugName: "hostTabIndex" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(ListItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.innerListClasses = computed(() => {
-            const classes = listInnerListVariants();
+            const classes = listInnerListThemeVariants();
             const listClass = this.listClass();
             return twMerge(classes, listClass);
         }, /* @ts-ignore */