@nanahoshi/mona-ui 0.3.0 → 0.4.0

package/card/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-card.mjs",
+  "typings": "../types/nanahoshi-mona-ui-card.d.ts"
+}

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

@@ -0,0 +1,307 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, signal, Service, computed, contentChild, input, Component, viewChild, afterRenderEffect, DestroyRef, contentChildren } from '@angular/core';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { twMerge } from 'tailwind-merge';
+import { themeRaisedBackdropClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { cva } from 'class-variance-authority';
+
+class CardContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardContentDirective, isStandalone: true, selector: "[monaCardContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardContent]"
+                }]
+        }] });
+
+class CardService {
+    constructor() {
+        this.actionTemplate = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionTemplate" }] : /* istanbul ignore next */ []));
+        this.descriptionId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+        this.descriptionTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionTemplate" }] : /* istanbul ignore next */ []));
+        this.footerClass = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+        this.headerClass = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.titleId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        this.titleTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.6", ngImport: i0, type: CardService, autoProvided: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardService, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+const roundedTopVariants = {
+    small: "rounded-tl-sm rounded-tr-sm",
+    medium: "rounded-tl-md rounded-tr-md",
+    large: "rounded-tl-lg rounded-tr-lg",
+    xlarge: "rounded-tl-xl rounded-tr-xl",
+    xxlarge: "rounded-tl-2xl rounded-tr-2xl",
+    none: "rounded-none"
+};
+const roundedBottomVariants = {
+    small: "rounded-bl-sm rounded-br-sm",
+    medium: "rounded-bl-md rounded-br-md",
+    large: "rounded-bl-lg rounded-br-lg",
+    xlarge: "rounded-bl-xl rounded-br-xl",
+    xxlarge: "rounded-bl-2xl rounded-br-2xl",
+    none: "rounded-none"
+};
+const roundedAllVariants = {
+    small: "rounded-sm",
+    medium: "rounded-md",
+    large: "rounded-lg",
+    xlarge: "rounded-xl",
+    xxlarge: "rounded-2xl",
+    none: "rounded-none"
+};
+const cardBaseThemeVariants = cva(`
+        flex flex-col gap-2 py-4
+        ${themeRaisedBackdropClasses}
+        border border-border
+        bg-(--color-card) text-(--color-card-foreground)
+        shadow-(--shadow-raised)
+    `, {
+    variants: {
+        rounded: roundedAllVariants,
+        hasFooter: {
+            true: "pb-0",
+            false: ""
+        },
+        hasHeader: {
+            true: "pt-0",
+            false: ""
+        }
+    }
+});
+const cardFooterThemeVariants = cva(`
+        flex flex-row
+        justify-between
+        items-center
+        p-4
+        border-t
+        border-border
+    `, {
+    variants: {
+        rounded: roundedBottomVariants
+    }
+});
+const cardHeaderThemeVariants = cva(`
+        grid grid-cols-[1fr_auto] grid-rows-2
+        p-4 pb-0
+    `, {
+    variants: {
+        rounded: roundedTopVariants
+    }
+});
+const cardHeaderTitleThemeVariants = cva(`col-start-1 row-start-1 items-center`);
+const cardHeaderDescriptionThemeVariants = cva(`col-start-1 row-start-2`);
+const cardHeaderActionsThemeVariants = cva(`col-start-2 row-start-1 row-span-2 self-start justify-self-end`);
+
+class CardComponent {
+    constructor() {
+        this.#cardService = inject(CardService);
+        this.actionsCellClass = cardHeaderActionsThemeVariants();
+        this.actionTemplate = this.#cardService.actionTemplate.asReadonly();
+        this.baseClass = computed(() => {
+            const rounded = this.rounded();
+            const hasHeader = !!this.headerTemplate();
+            const hasFooter = !!this.footerTemplate();
+            const variantClass = cardBaseThemeVariants({ rounded, hasHeader, hasFooter });
+            const userClass = classInputToClass(this.userClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.contentDirective = contentChild(CardContentDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentDirective" }] : /* istanbul ignore next */ []));
+        this.descriptionCellClass = cardHeaderDescriptionThemeVariants();
+        this.descriptionId = this.#cardService.descriptionId.asReadonly();
+        this.descriptionTemplate = this.#cardService.descriptionTemplate.asReadonly();
+        this.footerClass = computed(() => {
+            const rounded = this.rounded();
+            const variantClass = cardFooterThemeVariants({ rounded });
+            const userClass = classInputToClass(this.#cardService.footerClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = this.#cardService.footerTemplate.asReadonly();
+        this.headerClass = computed(() => {
+            const rounded = this.rounded();
+            const variantClass = cardHeaderThemeVariants({ rounded });
+            const userClass = classInputToClass(this.#cardService.headerClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = this.#cardService.headerTemplate.asReadonly();
+        this.titleCellClass = cardHeaderTitleThemeVariants();
+        this.titleId = this.#cardService.titleId.asReadonly();
+        this.titleTemplate = this.#cardService.titleTemplate.asReadonly();
+        /**
+         * @description Controls the border radius applied to the card and its header/footer regions.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* 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" });
+    }
+    #cardService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CardComponent, isStandalone: true, selector: "mona-card", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.aria-labelledby": "titleId()", "attr.aria-describedby": "descriptionId()" } }, providers: [CardService], queries: [{ propertyName: "contentDirective", first: true, predicate: CardContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-card", imports: [NgTemplateOutlet], host: {
+                        "[class]": "baseClass()",
+                        "[attr.aria-labelledby]": "titleId()",
+                        "[attr.aria-describedby]": "descriptionId()"
+                    }, providers: [CardService], template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n" }]
+        }], propDecorators: { contentDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardContentDirective), { isSignal: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class CardFooterComponent {
+    #cardService;
+    constructor() {
+        this.#cardService = inject(CardService);
+        this.footerTemplate = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the rendered footer element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterRenderEffect({
+            read: () => {
+                this.#cardService.footerTemplate.set(this.footerTemplate());
+                this.#cardService.footerClass.set(this.userClass());
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.#cardService.footerTemplate.set(null);
+            this.#cardService.footerClass.set(null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: CardFooterComponent, isStandalone: true, selector: "mona-card-footer", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "footerTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-card-footer", imports: [], template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class CardActionDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardActionDirective, isStandalone: true, selector: "[monaCardAction]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardAction]"
+                }]
+        }] });
+
+class CardDescriptionDirective {
+    constructor() {
+        this.id = createElementControlId();
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardDescriptionDirective, isStandalone: true, selector: "[monaCardDescription]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardDescription]"
+                }]
+        }] });
+
+class CardTitleDirective {
+    constructor() {
+        this.id = createElementControlId();
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardTitleDirective, isStandalone: true, selector: "[monaCardTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardTitle]"
+                }]
+        }] });
+
+class CardHeaderComponent {
+    #cardService;
+    constructor() {
+        this.#cardService = inject(CardService);
+        this.actionDirective = contentChildren(CardActionDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionDirective" }] : /* istanbul ignore next */ []));
+        this.descriptionDirective = contentChild(CardDescriptionDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionDirective" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.titleDirective = contentChild(CardTitleDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleDirective" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the rendered header element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterRenderEffect({
+            read: () => {
+                this.#cardService.actionTemplate.set(this.actionDirective().map(directive => directive.templateRef));
+                this.#cardService.descriptionId.set(this.descriptionDirective()?.id ?? null);
+                this.#cardService.descriptionTemplate.set(this.descriptionDirective()?.templateRef ?? null);
+                this.#cardService.headerTemplate.set(this.headerTemplate());
+                this.#cardService.headerClass.set(this.userClass());
+                this.#cardService.titleId.set(this.titleDirective()?.id ?? null);
+                this.#cardService.titleTemplate.set(this.titleDirective()?.templateRef ?? null);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.#cardService.actionTemplate.set([]);
+            this.#cardService.descriptionId.set(null);
+            this.#cardService.descriptionTemplate.set(null);
+            this.#cardService.headerTemplate.set(null);
+            this.#cardService.headerClass.set(null);
+            this.#cardService.titleId.set(null);
+            this.#cardService.titleTemplate.set(null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: CardHeaderComponent, isStandalone: true, selector: "mona-card-header", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actionDirective", predicate: CardActionDirective, isSignal: true }, { propertyName: "descriptionDirective", first: true, predicate: CardDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "titleDirective", first: true, predicate: CardTitleDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-card-header", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { actionDirective: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CardActionDirective), { isSignal: true }] }], descriptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardDescriptionDirective), { isSignal: true }] }], headerTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], titleDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardTitleDirective), { isSignal: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-card.mjs.map

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

@@ -586,6 +586,24 @@ class IterablePatchStore {
 const createIterablePatchStore = (options) => new IterablePatchStore(options);
 const createObjectPatchStore = (options) => new ObjectPatchStore(options);
 
+const classInputToClass = (input) => {
+    if (input == null) {
+        return "";
+    }
+    if (typeof input === "string") {
+        return input;
+    }
+    if (Array.isArray(input)) {
+        return input.join(" ");
+    }
+    if (typeof input === "object") {
+        return Object.entries(input)
+            .map(([key, value]) => (!!value ? key : ""))
+            .join(" ");
+    }
+    return "";
+};
+
 /**
  * Calculates the percentage of a value within a given range, rounded to the specified precision.
  * @param value The current value.
@@ -638,5 +656,5 @@ function moveIndices(array, indices, offset) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };
+export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, classInputToClass, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };
 //# sourceMappingURL=nanahoshi-mona-ui-common.mjs.map

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

@@ -209,6 +209,8 @@ const dark$5 = Object.freeze({
     "--color-surface-muted": "#161718",
     "--color-surface-raised": "#242528",
     "--color-surface-overlay": "#161718",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "#D6D6D8",
     "--color-muted-foreground": "#A8A8AD",
     "--color-input-background": "#1D1E20",
@@ -364,6 +366,8 @@ const light$3 = Object.freeze({
     "--color-surface-muted": "#f3f4f5",
     "--color-surface-raised": "#fbfbfb",
     "--color-surface-overlay": "#f9f9fa",
+    "--color-card": "var(--mona-effect-raised-background-color)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "#252525",
     "--color-muted-foreground": "#6f7074",
     "--color-input-background": "#f3f4f5",
@@ -437,6 +441,8 @@ const dark$3 = Object.freeze({
     "--color-surface-muted": "#252527",
     "--color-surface-raised": "#202022",
     "--color-surface-overlay": "#262628",
+    "--color-card": "var(--mona-effect-raised-background-color)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "#f5f5f6",
     "--color-muted-foreground": "#a9aaae",
     "--color-input-background": "#252527",
@@ -686,6 +692,8 @@ const light$1 = Object.freeze({
     "--color-surface-muted": "oklch(96.7% 0.001 286.375)",
     "--color-surface-raised": "oklch(100% 0 0)",
     "--color-surface-overlay": "oklch(100% 0 0)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "oklch(14.1% 0.005 285.823)",
     "--color-muted-foreground": "oklch(55.2% 0.016 285.938)",
     "--color-input-background": "oklch(100% 0 0)",
@@ -746,6 +754,8 @@ const dark$1 = Object.freeze({
     "--color-surface-muted": "oklch(20.5% 0.006 285.885)",
     "--color-surface-raised": "oklch(24% 0.006 286.033)",
     "--color-surface-overlay": "oklch(27.4% 0.006 286.033)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "oklch(98.5% 0 0)",
     "--color-muted-foreground": "oklch(70.5% 0.015 286.067)",
     "--color-input-background": "oklch(20.5% 0.006 285.885)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -85,6 +85,10 @@
       "types": "./types/nanahoshi-mona-ui-calendar.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-calendar.mjs"
     },
+    "./card": {
+      "types": "./types/nanahoshi-mona-ui-card.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-card.mjs"
+    },
     "./check-box": {
       "types": "./types/nanahoshi-mona-ui-check-box.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-check-box.mjs"

package/types/nanahoshi-mona-ui-card.d.ts

@@ -0,0 +1,104 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { VariantProps } from 'class-variance-authority';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+
+declare class CardContentDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardContentDirective, "[monaCardContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare const cardBaseThemeVariants: (props?: ({
+    rounded?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null | undefined;
+    hasFooter?: boolean | null | undefined;
+    hasHeader?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardBaseVariantProps = VariantProps<typeof cardBaseThemeVariants>;
+type CardBaseVariantInput = VariantInputs<CardBaseVariantProps>;
+type CardVariantProps = CardBaseVariantProps;
+type CardVariantInput = Omit<CardBaseVariantInput, "hasFooter" | "hasHeader">;
+
+declare class CardComponent implements CardVariantInput {
+    #private;
+    protected readonly actionsCellClass: string;
+    protected readonly actionTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown>[]>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly contentDirective: _angular_core.Signal<CardContentDirective | undefined>;
+    protected readonly descriptionCellClass: string;
+    protected readonly descriptionId: _angular_core.Signal<string | null>;
+    protected readonly descriptionTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly footerClass: _angular_core.Signal<string>;
+    protected readonly footerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly headerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly titleCellClass: string;
+    protected readonly titleId: _angular_core.Signal<string | null>;
+    protected readonly titleTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    /**
+     * @description Controls the border radius applied to the card and its header/footer regions.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null | undefined>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "mona-card", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["contentDirective"], never, true, never>;
+}
+
+declare class CardFooterComponent {
+    #private;
+    private readonly footerTemplate;
+    /**
+     * @description Additional CSS classes merged onto the rendered footer element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<ClassInputType>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardFooterComponent, "mona-card-footer", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class CardHeaderComponent {
+    #private;
+    private readonly actionDirective;
+    private readonly descriptionDirective;
+    private readonly headerTemplate;
+    private readonly titleDirective;
+    /**
+     * @description Additional CSS classes merged onto the rendered header element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<ClassInputType>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeaderComponent, "mona-card-header", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["actionDirective", "descriptionDirective", "titleDirective"], ["*"], true, never>;
+}
+
+declare class CardActionDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardActionDirective, "[monaCardAction]", never, {}, {}, never, never, true, never>;
+}
+
+declare class CardDescriptionDirective {
+    readonly id: string;
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardDescriptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardDescriptionDirective, "[monaCardDescription]", never, {}, {}, never, never, true, never>;
+}
+
+declare class CardTitleDirective {
+    readonly id: string;
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardTitleDirective, "[monaCardTitle]", never, {}, {}, never, never, true, never>;
+}
+
+export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+export type { CardVariantProps };

package/types/nanahoshi-mona-ui-circular-progress-bar.d.ts

@@ -22,8 +22,9 @@ declare const circularProgressBarBaseThemeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CircularProgressBarBaseVariantProps = VariantProps<typeof circularProgressBarBaseThemeVariants>;
 type CircularProgressBarBaseVariantInput = VariantInputs<CircularProgressBarBaseVariantProps>;
+type CircularProgressBarVariantInput = CircularProgressBarBaseVariantInput;
 
-declare class CircularProgressBarComponent implements CircularProgressBarBaseVariantInput {
+declare class CircularProgressBarComponent implements CircularProgressBarVariantInput {
     protected readonly baseClasses: _angular_core.Signal<string>;
     protected readonly center: _angular_core.Signal<{
         x: number;

package/types/nanahoshi-mona-ui-common.d.ts

@@ -6,6 +6,8 @@ type SelectionMode = "single" | "multiple";
 
 type ScrollDirection = "left" | "right";
 
+type ClassInputType = string | string[] | Record<string, unknown> | null | undefined;
+
 type ColorMode = "hsv" | "rgb";
 type ColorOutputFormat = "hex" | "rgb" | "hsl";
 
@@ -369,6 +371,8 @@ declare class IterablePatchStore<TItem, TId> implements IIterablePatchStore<TIte
 declare const createIterablePatchStore: <TItem, TId>(options: IterablePatchStoreOptions<TItem, TId>) => IIterablePatchStore<TItem, TId>;
 declare const createObjectPatchStore: <T>(options: ObjectPatchStoreOptions<T>) => IObjectPatchStore<T>;
 
+declare const classInputToClass: (input: ClassInputType) => string;
+
 /**
  * Calculates the percentage of a value within a given range, rounded to the specified precision.
  * @param value The current value.
@@ -382,5 +386,5 @@ declare const getPercentage: (value: number, min: number, max: number, precision
 
 declare function moveIndices<T>(array: T[], indices: number[], offset: number): T[];
 
-export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };
-export type { ArrayStrategy, BaseChangeStrategy, ColorMode, ColorOutputFormat, DataType, DeepMergeOptions, DeepPartial, FilterOperator, FilterableOptions, IIterablePatchStore, IObjectPatchStore, IterablePatchStoreOptions, ObjectPatchStoreOptions, Orientation, PaletteType, Path, PathValue, Position, ScrollDirection, SelectionMode, VirtualScrollOptions };
+export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, classInputToClass, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };
+export type { ArrayStrategy, BaseChangeStrategy, ClassInputType, ColorMode, ColorOutputFormat, DataType, DeepMergeOptions, DeepPartial, FilterOperator, FilterableOptions, IIterablePatchStore, IObjectPatchStore, IterablePatchStoreOptions, ObjectPatchStoreOptions, Orientation, PaletteType, Path, PathValue, Position, ScrollDirection, SelectionMode, VirtualScrollOptions };