@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,168 @@
+import * as i0 from '@angular/core';
+import { computed, input, Component } from '@angular/core';
+
+class AvatarComponent {
+    constructor() {
+        this.avatarLabelStyles = computed(() => {
+            return {
+                alignItems: "center",
+                color: this.labelColor(),
+                display: "flex",
+                fontSize: this.labelFontSize(),
+                fontWeight: this.labelFontWeight(),
+                height: "100%",
+                justifyContent: "center",
+                width: "100%"
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "avatarLabelStyles" }] : /* istanbul ignore next */ []));
+        this.avatarStyles = computed(() => {
+            const image = this.image();
+            const backgroundColor = image ? "transparent" : this.backgroundColor();
+            return {
+                borderColor: this.borderColor(),
+                borderWidth: this.borderWidth(),
+                borderStyle: "solid",
+                borderRadius: this.borderRadius(),
+                backgroundColor,
+                display: "inline-block",
+                height: this.height(),
+                width: this.width(),
+                ...this.customStyles()
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "avatarStyles" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Alternative text for the avatar image. Provide a meaningful description for non-decorative images;
+         * an empty string marks the image as decorative.
+         * @default ""
+         */
+        this.alt = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the host element. Describe what the avatar represents.
+         * When non-empty, the host receives `role="img"` in label and projected-content modes.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Background color of the host element.
+         * Ignored in image mode — the background is set to transparent automatically.
+         * @default "var(--color-primary)"
+         */
+        this.backgroundColor = input("var(--color-primary)", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border color of the host element.
+         * @default "var(--color-border)"
+         */
+        this.borderColor = input("var(--color-border)", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border radius of the host element. Accepts a CSS string (`'50%'`, `'8px'`) or a number converted to `px`.
+         * In image mode, the image is also clipped to this radius.
+         * @default "0"
+         */
+        this.borderRadius = input("0", { ...(ngDevMode ? { debugName: "borderRadius" } : /* istanbul ignore next */ {}), transform: (value) => {
+                if (typeof value === "number") {
+                    return `${value}px`;
+                }
+                return value;
+            } });
+        /**
+         * @description Border width of the host element. Accepts a CSS string or a number converted to `px`.
+         * @default "1px"
+         */
+        this.borderWidth = input("1px", { ...(ngDevMode ? { debugName: "borderWidth" } : /* istanbul ignore next */ {}), transform: (value) => {
+                if (typeof value === "number") {
+                    return `${value}px`;
+                }
+                return value;
+            } });
+        /**
+         * @description Inline styles applied after all other style inputs,
+         * taking precedence over every computed style including `display`, `height`, and `width`.
+         * @default {}
+         */
+        this.customStyles = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customStyles" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Height of the host element. A string is used as-is; a number is converted to `px`.
+         * @default "64px"
+         */
+        this.height = input("64px", { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (value) => {
+                if (typeof value === "string") {
+                    return value;
+                }
+                return `${value}px`;
+            } });
+        /**
+         * @description Image URL. When non-empty, renders an `<img>` and suppresses `label` and projected content.
+         * @default ""
+         */
+        // TODO(owner-review): migrate to NgOptimizedImage once width/height inputs are changed to number-only
+        this.image = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text label displayed inside the avatar when no image is provided. Ignored when `image` is non-empty.
+         * @default ""
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Color of the label text. Ignored in image mode.
+         * @default "var(--color-foreground)"
+         */
+        this.labelColor = input("var(--color-foreground)", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelColor" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Font size of the label text. Ignored in image mode.
+         * @default "1rem"
+         */
+        this.labelFontSize = input("1rem", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelFontSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Font weight of the label text. Ignored in image mode.
+         * @default "700"
+         */
+        this.labelFontWeight = input("700", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelFontWeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Width of the host element. A string is used as-is; a number is converted to `px`.
+         * @default "64px"
+         */
+        this.width = input("64px", { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (value) => {
+                if (typeof value === "string") {
+                    return value;
+                }
+                return `${value}px`;
+            } });
+        /**
+         * @description Additional CSS classes applied to the host element.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AvatarComponent, isStandalone: true, selector: "mona-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, labelFontSize: { classPropertyName: "labelFontSize", publicName: "labelFontSize", isSignal: true, isRequired: false, transformFunction: null }, labelFontWeight: { classPropertyName: "labelFontWeight", publicName: "labelFontWeight", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel() || null", "attr.role": "ariaLabel() && !image() ? 'img' : null", "class": "userClass()", "style": "avatarStyles()" } }, ngImport: i0, template: "@if (image()) {\n    <img [src]=\"image()\" [style.border-radius]=\"borderRadius()\" [alt]=\"alt()\" />\n} @else if (label()) {\n    <div [style]=\"avatarLabelStyles()\">{{ label() }}</div>\n} @else {\n    <ng-content></ng-content>\n}\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-avatar", host: {
+                        "[attr.aria-label]": "ariaLabel() || null",
+                        "[attr.role]": "ariaLabel() && !image() ? 'img' : null",
+                        "[class]": "userClass()",
+                        "[style]": "avatarStyles()"
+                    }, template: "@if (image()) {\n    <img [src]=\"image()\" [style.border-radius]=\"borderRadius()\" [alt]=\"alt()\" />\n} @else if (label()) {\n    <div [style]=\"avatarLabelStyles()\">{{ label() }}</div>\n} @else {\n    <ng-content></ng-content>\n}\n" }]
+        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColor", required: false }] }], labelFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFontSize", required: false }] }], labelFontWeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFontWeight", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/avatar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-avatar.mjs.map

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

@@ -0,0 +1,220 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, computed, input, Directive, output, viewChild, TemplateRef, Component, contentChildren, contentChild } from '@angular/core';
+import { LucideChevronRight } from '@lucide/angular';
+import { twMerge } from 'tailwind-merge';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+const breadcrumbListVariants = cva(`
+        flex items-center
+        overflow-hidden gap-1
+        list-none select-none py-1 px-2
+    `, {
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed pointer-events-none opacity-50",
+            false: ""
+        }
+    }
+});
+const breadcrumbListItemVariants = cva(`
+        flex items-center
+        truncate cursor-pointer
+        h-full text-primary/70
+        bg-transparent border-0
+        outline-none rounded-sm px-1
+        hover:text-primary
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40
+        transition-colors duration-100 ease-in-out
+    `, {
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed pointer-events-none",
+            false: ""
+        },
+        listDisabled: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [{ disabled: true, listDisabled: false, class: "opacity-50" }],
+    defaultVariants: {
+        disabled: false,
+        listDisabled: false
+    }
+});
+const breadcrumbCurrentItemVariants = cva(`flex items-center truncate cursor-default font-medium text-primary`);
+
+const breadcrumbListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return breadcrumbListVariants;
+        default:
+            return breadcrumbListVariants;
+    }
+};
+const breadcrumbListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return breadcrumbListItemVariants;
+        default:
+            return breadcrumbListItemVariants;
+    }
+};
+const breadcrumbCurrentItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return breadcrumbCurrentItemVariants;
+        default:
+            return breadcrumbCurrentItemVariants;
+    }
+};
+
+class BreadcrumbItemDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const listDisabled = this.listDisabled();
+            const userClass = this.userClass();
+            return twMerge(breadcrumbListItemThemeVariants(theme)({ disabled, listDisabled }), userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders this item with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Reflects whether the parent breadcrumb is disabled. Controls compound disabled styling when only individual items are disabled.
+         * @default false
+         */
+        this.listDisabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the breadcrumb item via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BreadcrumbItemDirective, isStandalone: true, selector: "button[monaBreadcrumbItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, listDisabled: { classPropertyName: "listDisabled", publicName: "listDisabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "disabled": "disabled()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[monaBreadcrumbItem]",
+                    host: {
+                        "[class]": "baseClass()",
+                        "[disabled]": "disabled()"
+                    }
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], listDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "listDisabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class BreadcrumbSeparatorTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbSeparatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BreadcrumbSeparatorTemplateDirective, isStandalone: true, selector: "ng-template[monaBreadcrumbSeparatorTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbSeparatorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaBreadcrumbSeparatorTemplate]"
+                }]
+        }] });
+
+class BreadcrumbItemComponent {
+    constructor() {
+        /**
+         * @description Renders this item with reduced visual emphasis and removes pointer interaction.
+         * Has no visual effect when the parent breadcrumb is also disabled.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the item is clicked or activated via keyboard.
+         * Not emitted when this is the last (current-page) item or when the item is disabled.
+         */
+        this.itemClick = output();
+        this.templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: BreadcrumbItemComponent, isStandalone: true, selector: "mona-breadcrumb-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-breadcrumb-item", template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+class BreadcrumbComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.itemComponents = contentChildren(BreadcrumbItemComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemComponents" }] : /* istanbul ignore next */ []));
+        this.currentItemClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return breadcrumbCurrentItemThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentItemClass" }] : /* istanbul ignore next */ []));
+        this.listClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const userClass = this.userClass();
+            const variantClass = breadcrumbListThemeVariants(theme)({ disabled });
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.separatorTemplate = contentChild(BreadcrumbSeparatorTemplateDirective, { ...(ngDevMode ? { debugName: "separatorTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Accessible name for the breadcrumb navigation landmark.
+         * Override when multiple breadcrumb components appear on the same page.
+         * @default "Breadcrumb"
+         */
+        this.ariaLabel = input("Breadcrumb", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Renders the entire breadcrumb with reduced visual emphasis and removes pointer interaction from all items.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the breadcrumb list via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    onItemClick(item) {
+        if (this.disabled() || item.disabled()) {
+            return;
+        }
+        item.itemClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BreadcrumbComponent, isStandalone: true, selector: "mona-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "itemComponents", predicate: BreadcrumbItemComponent, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol role=\"list\" [class]=\"listClass()\">\r\n    @for (item of itemComponents(); track item) {\r\n        <li>\r\n            @if ($last) {\r\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    monaBreadcrumbItem\r\n                    [disabled]=\"disabled() || item.disabled()\"\r\n                    (click)=\"onItemClick(item)\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </button>\r\n            }\r\n        </li>\r\n\r\n        @if (!$last) {\r\n            <li aria-hidden=\"true\" role=\"presentation\">\r\n                @if (separatorTemplate()) {\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\r\n                } @else {\r\n                    <svg lucideChevronRight [size]=\"18\"></svg>\r\n                }\r\n            </li>\r\n        }\r\n    }\r\n</ol>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BreadcrumbItemDirective, selector: "button[monaBreadcrumbItem]", inputs: ["disabled", "listDisabled", "class"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-breadcrumb", imports: [NgTemplateOutlet, BreadcrumbItemDirective, LucideChevronRight], host: {
+                        role: "navigation",
+                        "[attr.aria-label]": "ariaLabel()"
+                    }, template: "<ol role=\"list\" [class]=\"listClass()\">\r\n    @for (item of itemComponents(); track item) {\r\n        <li>\r\n            @if ($last) {\r\n                <span aria-current=\"page\" [class]=\"currentItemClass()\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    monaBreadcrumbItem\r\n                    [disabled]=\"disabled() || item.disabled()\"\r\n                    (click)=\"onItemClick(item)\">\r\n                    <ng-container [ngTemplateOutlet]=\"item.templateRef()\"></ng-container>\r\n                </button>\r\n            }\r\n        </li>\r\n\r\n        @if (!$last) {\r\n            <li aria-hidden=\"true\" role=\"presentation\">\r\n                @if (separatorTemplate()) {\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"separatorTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: $index }\"></ng-container>\r\n                } @else {\r\n                    <svg lucideChevronRight [size]=\"18\"></svg>\r\n                }\r\n            </li>\r\n        }\r\n    }\r\n</ol>\r\n" }]
+        }], propDecorators: { itemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemComponent), { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/breadcrumb
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbSeparatorTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-breadcrumb.mjs.map

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

@@ -0,0 +1,225 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, computed, contentChildren, input, model, effect, untracked, afterNextRender, Component } from '@angular/core';
+import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { ButtonService, ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { map, pairwise } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const buttonGroupVariants = cva(`
+        inline-flex items-center justify-center
+        border border-border shadow-xs
+        [&>button]:border-0
+        [&>button]:focus-visible:ring-2
+        [&>button]:focus-visible:z-10
+        [&>button]:rounded-none
+        [&>button]:shadow-none
+    `, {
+    variants: {
+        look: {
+            default: "",
+            error: "",
+            ghost: "border-transparent",
+            info: "",
+            outline: "[&>button:not(:last-child)]:border-r",
+            primary: "",
+            secondary: "",
+            success: "",
+            warning: ""
+        },
+        rounded: {
+            full: `
+                    rounded-full
+                    [&>button]:first:rounded-ss-full [&>button]:first:rounded-es-full
+                    [&>button]:last:rounded-se-full [&>button]:last:rounded-ee-full
+                `,
+            large: `
+                    rounded-lg
+                    [&>button]:first:rounded-ss-lg [&>button]:first:rounded-es-lg
+                    [&>button]:last:rounded-se-lg [&>button]:last:rounded-ee-lg
+                `,
+            medium: `
+                    rounded-md
+                    [&>button]:first:rounded-ss-md [&>button]:first:rounded-es-md
+                    [&>button]:last:rounded-se-md [&>button]:last:rounded-ee-md
+                `,
+            none: `
+                    rounded-none
+                `,
+            small: `
+                    rounded-sm
+                    [&>button]:first:rounded-ss-sm [&>button]:first:rounded-es-sm
+                    [&>button]:last:rounded-se-sm [&>button]:last:rounded-ee-sm
+                `
+        },
+        size: {
+            large: ``,
+            medium: "",
+            small: ``
+        }
+    },
+    defaultVariants: {
+        look: "default",
+        size: "medium"
+    }
+});
+
+const buttonGroupThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return buttonGroupVariants;
+        default:
+            return buttonGroupVariants;
+    }
+};
+
+class ButtonGroupComponent {
+    #buttonService;
+    #destroyRef;
+    #themeService;
+    constructor() {
+        this.#buttonService = inject(ButtonService, { self: true });
+        this.#destroyRef = inject(DestroyRef);
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const look = this.look();
+            const rounded = this.rounded();
+            const size = this.size();
+            const variantClasses = buttonGroupThemeVariants(theme)({ look, rounded, size });
+            const userClass = this.userClass();
+            return twMerge(variantClasses, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.buttons = contentChildren(ButtonDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        /**
+         * @description When `false` and `selection` is `"single"`, at least one button must remain selected;
+         * the active button cannot be deselected. Has no effect in `"multiple"` mode.
+         * @default true
+         */
+        this.allowEmpty = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowEmpty" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the host element. Override when multiple button groups appear on the same page
+         * so screen reader users can distinguish them.
+         * @default "Button group"
+         */
+        this.ariaLabel = input("Button group", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Emitted when any child button in the group is clicked.
+         * Use `[(selected)]` on child buttons to observe the resulting selection state.
+         */
+        this.buttonClick = outputFromObservable(this.#buttonService.buttonClick$.pipe(map(() => undefined), takeUntilDestroyed(this.#destroyRef)));
+        /**
+         * @description Renders all child buttons with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual style variant propagated to all child buttons.
+         * Also controls container-level divider and border behavior.
+         * @default "outline"
+         */
+        this.look = input("outline", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the container and the outer corners of the first and last child button.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Two-way bindable. Controls whether child buttons behave as a radio group (`"single"`)
+         * or toggle independently (`"multiple"`).
+         * @default "multiple"
+         */
+        this.selection = model("multiple", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset propagated to all child buttons, overriding their individual `size` inputs.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        effect(() => {
+            const disabled = this.disabled();
+            untracked(() => this.#buttonService.groupDisabled.set(disabled));
+        });
+        effect(() => {
+            const look = this.look();
+            untracked(() => this.#buttonService.groupLook.set(look));
+        });
+        effect(() => {
+            const rounded = this.rounded();
+            untracked(() => this.#buttonService.groupRounded.set(rounded));
+        });
+        effect(() => {
+            const size = this.size();
+            untracked(() => this.#buttonService.groupSize.set(size));
+        });
+        toObservable(this.selection)
+            .pipe(pairwise(), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(([prev, curr]) => {
+            if (prev === "multiple" && curr === "single") {
+                const selected = this.buttons().filter(b => b.selected());
+                selected.slice(1).forEach(b => {
+                    this.#buttonService.buttonSelect$.next([b, false]);
+                });
+            }
+        });
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+    }
+    setSubscriptions() {
+        this.#buttonService.buttonClick$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(([button, wasSelected]) => {
+            if (this.selection() === "single") {
+                if (wasSelected && !this.allowEmpty()) {
+                    return;
+                }
+                this.buttons().forEach(b => {
+                    if (b.selected()) {
+                        this.#buttonService.buttonSelect$.next([b, false]);
+                    }
+                });
+                if (!wasSelected) {
+                    this.#buttonService.buttonSelect$.next([button, true]);
+                }
+            }
+            else {
+                this.#buttonService.buttonSelect$.next([button, !wasSelected]);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "mona-button-group", inputs: { allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", disabled: "disabledChange", selection: "selectionChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class": "baseClass()" } }, providers: [ButtonService], queries: [{ propertyName: "buttons", predicate: ButtonDirective, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[monaButton]\"></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-button-group", providers: [ButtonService], host: {
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[class]": "baseClass()",
+                        role: "group"
+                    }, template: "<ng-content select=\"[monaButton]\"></ng-content>\n" }]
+        }], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ButtonDirective), { isSignal: true }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/button-group
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonGroupComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-button-group.mjs.map