@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,339 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, computed, input, output, model, Component, Directive } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { twMerge } from 'tailwind-merge';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+const radioButtonVariants = cva(`
+        appearance-none outline-none
+        peer absolute inset-0 w-full h-full
+        opacity-0 cursor-pointer z-10
+        focus:ring-2 focus:ring-primary focus:ring-offset-2
+        disabled:cursor-not-allowed
+    `);
+const radioButtonCircleVariants = cva(`
+        w-4.5 h-4.5
+        flex items-center justify-center
+        overflow-hidden
+        bg-input-background
+        border border-input-border
+        cursor-pointer
+        relative
+        transition-colors duration-200
+        peer-focus:ring-2 peer-focus:ring-primary/40
+        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const radioButtonIndicatorVariants = cva(`
+        flex w-3 h-3 bg-primary transition-all duration-200
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const radioButtonContainerLabelVariants = cva(`
+        w-full h-full flex items-center justify-center gap-1
+        relative
+        cursor-pointer
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+    `, {
+    variants: {
+        labelSize: {
+            small: "text-sm",
+            medium: "text-base",
+            large: "text-lg"
+        }
+    },
+    defaultVariants: {
+        labelSize: "medium"
+    }
+});
+const radioButtonDirectiveVariants = cva(`
+        appearance-none outline-none
+        w-4.5 h-4.5
+        bg-input-background border border-input-border
+        cursor-pointer
+        relative
+        place-content-center
+        flex items-center justify-center
+
+        disabled:pointer-events-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+
+        after:content-['']
+        after:w-3 after:h-3
+        after:inline-grid
+        after:place-content-center
+
+        checked:after:bg-primary
+        checked:after:rounded-full
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+
+        [&.ng-touched.ng-invalid]:border-error
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    },
+    compoundVariants: [
+        {
+            rounded: "full",
+            class: "checked:after:rounded-full"
+        },
+        {
+            rounded: "large",
+            class: "checked:after:rounded-lg"
+        },
+        {
+            rounded: "medium",
+            class: "checked:after:rounded-md"
+        },
+        {
+            rounded: "none",
+            class: "checked:after:rounded-none"
+        },
+        {
+            rounded: "small",
+            class: "checked:after:rounded-sm"
+        }
+    ]
+});
+
+const radioButtonThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return radioButtonVariants;
+        default:
+            return radioButtonVariants; // Default to Mona styles
+    }
+};
+const radioButtonCircleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return radioButtonCircleVariants;
+        default:
+            return radioButtonCircleVariants; // Default to Mona styles
+    }
+};
+const radioButtonIndicatorThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return radioButtonIndicatorVariants;
+        default:
+            return radioButtonIndicatorVariants; // Default to Mona styles
+    }
+};
+const radioButtonContainerLabelThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return radioButtonContainerLabelVariants;
+        default:
+            return radioButtonContainerLabelVariants; // Default to Mona styles
+    }
+};
+const radioButtonDirectiveThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return radioButtonDirectiveVariants;
+        default:
+            return radioButtonDirectiveVariants; // Default to Mona styles
+    }
+};
+
+class RadioButtonComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.containerLabelClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const labelSize = this.labelSize();
+            const userClasses = this.userClass();
+            const variantClasses = radioButtonContainerLabelThemeVariants(theme)({ labelSize });
+            return twMerge(variantClasses, userClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerLabelClasses" }] : /* istanbul ignore next */ []));
+        this.radioButtonCircleClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return radioButtonCircleThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioButtonCircleClasses" }] : /* istanbul ignore next */ []));
+        this.radioButtonClasses = computed(() => radioButtonThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioButtonClasses" }] : /* istanbul ignore next */ []));
+        this.radioButtonIndicatorClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return radioButtonIndicatorThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioButtonIndicatorClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the disabled state of the radio button.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the input loses focus.
+         */
+        this.inputBlur = output();
+        /**
+         * @description Emits when the input is clicked.
+         */
+        this.inputClick = output();
+        /**
+         * @description Emits when the input receives focus.
+         */
+        this.inputFocus = output();
+        /**
+         * @description Marks the radio button as invalid. When bound to a signal form field via `[field]`,
+         * this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text label displayed alongside the radio button.
+         * When provided, takes precedence over projected content.
+         * When empty, projected content inside `<mona-radio-button>` is used.
+         * When both are absent, the radio button has no accessible name — always provide one.
+         * @default ""
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Position of the label relative to the radio button circle.
+         * @default "after"
+         */
+        this.labelPosition = input("after", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Font size applied to the label text.
+         * @default "medium"
+         */
+        this.labelSize = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description HTML `name` attribute forwarded to the native input.
+         * Radio buttons that share the same `name` form a mutually exclusive group in the browser.
+         * @default ""
+         */
+        this.name = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The identity value of this radio button within a group.
+         * Compared against `value()` to determine whether this button is selected.
+         * When this button is chosen, its `radioValue` is written to the form as the new group value.
+         * @default undefined
+         */
+        this.radioValue = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the radio button circle and indicator.
+         * @default "full"
+         */
+        this.rounded = input("full", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.touch = output();
+        /**
+         * @description Additional CSS classes merged onto the label container element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description The currently selected value in the radio group.
+         * When bound via `[control]` (signal forms), the `Field` directive keeps this in sync with the form field.
+         * When bound via `[(ngModel)]` or `[formControl]`, the CVA layer manages this value.
+         * @default undefined
+         */
+        this.value = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    onBlur(event) {
+        this.inputBlur.emit(event);
+        this.touch.emit();
+    }
+    onSelectionChange() {
+        this.value.set(this.radioValue());
+        this.touch.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RadioButtonComponent, isStandalone: true, selector: "mona-radio-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioValue: { classPropertyName: "radioValue", publicName: "radioValue", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputBlur: "inputBlur", inputClick: "inputClick", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { properties: { "attr.data-selected": "radioValue()===value()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <input\r\n        type=\"radio\"\r\n        [disabled]=\"disabled()\"\r\n        [name]=\"name()\"\r\n        [value]=\"radioValue()\"\r\n        [class]=\"radioButtonClasses()\"\r\n        [checked]=\"radioValue() === value()\"\r\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"inputClick.emit($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (change)=\"onSelectionChange()\" />\r\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\r\n        @if (radioValue() === value()) {\r\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-radio-button", imports: [FormsModule, NgTemplateOutlet], host: {
+                        "[attr.data-selected]": "radioValue()===value()",
+                        "[attr.data-disabled]": "disabled()"
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <input\r\n        type=\"radio\"\r\n        [disabled]=\"disabled()\"\r\n        [name]=\"name()\"\r\n        [value]=\"radioValue()\"\r\n        [class]=\"radioButtonClasses()\"\r\n        [checked]=\"radioValue() === value()\"\r\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"inputClick.emit($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (change)=\"onSelectionChange()\" />\r\n    <span [class]=\"radioButtonCircleClasses()\" [attr.data-invalid]=\"invalid() || null\">\r\n        @if (radioValue() === value()) {\r\n            <span [class]=\"radioButtonIndicatorClasses()\"></span>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputClick: [{ type: i0.Output, args: ["inputClick"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], radioValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioValue", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class RadioButtonDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.classes = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return radioButtonDirectiveThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the radio button.
+         * @default "none"
+         */
+        this.rounded = input("none", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: RadioButtonDirective, isStandalone: true, selector: "input[type='radio'][monaRadioButton]", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "'radio'" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RadioButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[type='radio'][monaRadioButton]",
+                    host: {
+                        "[class]": "classes()",
+                        "[attr.role]": "'radio'"
+                    }
+                }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/radio-button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioButtonComponent, RadioButtonDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-radio-button.mjs.map