bromcom-ui-next 0.1.4 → 0.1.6

package/dist/collection/components/radio/radio.component.js

@@ -0,0 +1,502 @@
+/**
+ * @component BcmRadio
+ * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.
+ * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.
+ *
+ * @example
+ * <bcm-radio label="Option 1" name="group1" value="1" size="medium" label-position="right">
+ *   Option 1
+ * </bcm-radio>
+ *
+ * @example Radio with error state
+ * <bcm-radio label="Error Option" name="group1" value="2" error={true}>
+ *   Error Option
+ * </bcm-radio>
+ *
+ * @prop {string} label - The text label to display next to the radio button.
+ * @prop {string} name - The name attribute for the radio input, used to group radio buttons.
+ * @prop {string} value - The value of the radio button, submitted with the form.
+ * @prop {boolean} checked - Whether the radio button is selected.
+ * @defaultValue false
+ * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.
+ * @defaultValue 'medium'
+ * @prop {boolean} disabled - Whether the radio button is disabled.
+ * @defaultValue false
+ * @prop {boolean} readonly - Whether the radio button is readonly.
+ * @defaultValue false
+ * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.
+ * @defaultValue 'right'
+ * @prop {boolean} error - Whether the radio button is in an error state.
+ * @defaultValue false
+ *
+ * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.
+ * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.
+ * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.
+ *
+ * @csspart container - The root label element wrapping the radio button and label.
+ * @csspart dotContainer - The container for the radio button dot.
+ * @csspart dot - The inner dot of the radio button.
+ * @csspart label - The label text element.
+ */
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+export class BcmRadio {
+    constructor() {
+        /**
+         * Whether the radio button is selected.
+         * @prop
+         * @defaultValue false
+         */
+        this.checked = false;
+        /**
+         * Defines the size of the radio button: 'small' | 'medium' | 'large'.
+         * @prop
+         * @defaultValue 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * Whether the radio button is disabled.
+         * @prop
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Whether the radio button is readonly.
+         * @prop
+         * @defaultValue false
+         */
+        this.readonly = false;
+        /**
+         * Position of the label relative to the radio button: 'right' | 'left'.
+         * @prop
+         * @defaultValue 'right'
+         */
+        this.labelPosition = 'right';
+        /**
+         * Whether the radio button is in an error state.
+         * @prop
+         * @defaultValue false
+         */
+        this.error = false;
+        this.getRadioClass = tv({
+            slots: {
+                container: 'bcm-ui-element bcm-radio group',
+                dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',
+                dotContainer: 'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',
+                labelClass: 'font-medium text-[--bcm-radio-text-color]',
+            },
+            variants: {
+                size: {
+                    small: {
+                        container: 'gap-2',
+                        dotContainer: 'size-3.5',
+                        dot: 'size-2',
+                        labelClass: 'text-size-4',
+                    },
+                    medium: {
+                        container: 'gap-2.5',
+                        dotContainer: 'size-4',
+                        dot: 'size-2.5',
+                        labelClass: 'text-size-5',
+                    },
+                    large: {
+                        container: 'gap-3',
+                        dotContainer: 'size-[18px]',
+                        dot: 'size-3',
+                        labelClass: 'text-size-6',
+                    },
+                },
+                checked: {
+                    true: {
+                        dot: 'opacity-100',
+                    },
+                    false: {
+                        dot: 'opacity-0',
+                    },
+                },
+                disabled: {
+                    true: {
+                        container: 'cursor-not-allowed',
+                    },
+                    false: {
+                        container: 'cursor-pointer focus-visible:ring',
+                    },
+                },
+                readonly: {
+                    true: {
+                        container: 'cursor-default pointer-events-none',
+                        dot: 'opacity-100',
+                        dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',
+                    },
+                    false: '',
+                },
+                labelPosition: {
+                    left: {
+                        container: 'inline-flex flex-row-reverse items-center',
+                    },
+                    right: {
+                        container: 'inline-flex flex-row items-center',
+                    },
+                },
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    handleClick() {
+        if (this.readonly || this.disabled)
+            return;
+        if (!this.checked) {
+            this.checked = true;
+            this.bcmRadioChange.emit();
+        }
+    }
+    getRadioStyle() {
+        const defaultStyle = {
+            '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',
+            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',
+            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',
+            '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',
+            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',
+        };
+        const errorStyle = {
+            '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',
+            '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',
+            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',
+            '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',
+            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',
+        };
+        const disabledStyle = {
+            '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',
+            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',
+            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',
+            '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',
+            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',
+        };
+        const readonlyStyle = {
+            '--bcm-radio-bg': 'transparent',
+            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',
+            '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',
+            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',
+            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',
+        };
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultStyle), (this.error && errorStyle)), (this.disabled && disabledStyle)), (this.readonly && readonlyStyle));
+    }
+    render() {
+        const { container, dot, dotContainer, labelClass } = this.getRadioClass({
+            size: this.size,
+            checked: this.checked,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            labelPosition: this.labelPosition,
+        });
+        return (h("label", { key: '2a95bd2335f3ecc987bcdd378225967837e55df9', class: container(), style: this.getRadioStyle() }, h("input", { key: '782735ff733b1d373803c3a1c6f56c16b745a159', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '638f0fe8ffab984b459c0b5f11f0a929b105de2a', class: dotContainer() }, h("div", { key: '65f618afcd4c1d0101961b6c6642ba146a37d6ef', class: dot() })), h("span", { key: 'a4690721cbe1c99ba47c572a9b354bdebac20a5e', class: labelClass() }, h("slot", { key: '2af90a0ab77da5b63a25fef3edbd0e14fc87516d' }, this.label))));
+    }
+    static get is() { return "bcm-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "The text label to display next to the radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "The name attribute for the radio input, used to group radio buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "The value of the radio button, submitted with the form."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio button is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "'medium'"
+                        }],
+                    "text": "Defines the size of the radio button: 'small' | 'medium' | 'large'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio button is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio button is readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'right' | 'left'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "'right'"
+                        }],
+                    "text": "Position of the label relative to the radio button: 'right' | 'left'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": undefined
+                        }, {
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio button is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmRadioChange",
+                "name": "bcmRadioChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmBlur",
+                "name": "bcmBlur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmFocus",
+                "name": "bcmFocus",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=radio.component.js.map

package/dist/collection/components/radio/radio.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../src/components/radio/radio.component.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-radio',\n    styleUrl: 'radio.css',\n    shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n    @Element() host: HTMLBcmRadioElement;\n\n    /**\n     * The text label to display next to the radio button.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * The name attribute for the radio input, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The value of the radio button, submitted with the form.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio button is selected.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop({ reflect: true })\n    checked: boolean = false;\n\n    /**\n     * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Whether the radio button is disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled = false;\n\n    /**\n     * Whether the radio button is readonly.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    readonly = false;\n\n    /**\n     * Position of the label relative to the radio button: 'right' | 'left'.\n     * @prop\n     * @defaultValue 'right'\n     */\n    @Prop()\n    labelPosition: 'right' | 'left' = 'right';\n\n    /**\n     * Whether the radio button is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioChange',\n    })\n    bcmRadioChange: EventEmitter<void>;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmBlur: EventEmitter<FocusEvent>;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmFocus: EventEmitter<FocusEvent>;\n\n    private handleClick(): void {\n        if (this.readonly || this.disabled) return;\n        if (!this.checked) {\n            this.checked = true;\n            this.bcmRadioChange.emit();\n        }\n    }\n\n    private getRadioStyle() {\n        const defaultStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        const errorStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        const disabledStyle = {\n            '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n        };\n\n        const readonlyStyle = {\n            '--bcm-radio-bg': 'transparent',\n            '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n            '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n            '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n        };\n\n        return {\n            ...defaultStyle,\n            ...(this.error && errorStyle),\n            ...(this.disabled && disabledStyle),\n            ...(this.readonly && readonlyStyle),\n        };\n    }\n\n    private getRadioClass = tv(\n        {\n            slots: {\n                container: 'bcm-ui-element bcm-radio group',\n                dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n                dotContainer:\n                    'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n                labelClass: 'font-medium text-[--bcm-radio-text-color]',\n            },\n            variants: {\n                size: {\n                    small: {\n                        container: 'gap-2',\n                        dotContainer: 'size-3.5',\n                        dot: 'size-2',\n                        labelClass: 'text-size-4',\n                    },\n                    medium: {\n                        container: 'gap-2.5',\n                        dotContainer: 'size-4',\n                        dot: 'size-2.5',\n                        labelClass: 'text-size-5',\n                    },\n                    large: {\n                        container: 'gap-3',\n                        dotContainer: 'size-[18px]',\n                        dot: 'size-3',\n                        labelClass: 'text-size-6',\n                    },\n                },\n                checked: {\n                    true: {\n                        dot: 'opacity-100',\n                    },\n                    false: {\n                        dot: 'opacity-0',\n                    },\n                },\n                disabled: {\n                    true: {\n                        container: 'cursor-not-allowed',\n                    },\n                    false: {\n                        container: 'cursor-pointer focus-visible:ring',\n                    },\n                },\n                readonly: {\n                    true: {\n                        container: 'cursor-default pointer-events-none',\n                        dot: 'opacity-100',\n                        dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n                    },\n                    false: '',\n                },\n                labelPosition: {\n                    left: {\n                        container: 'inline-flex flex-row-reverse items-center',\n                    },\n                    right: {\n                        container: 'inline-flex flex-row items-center',\n                    },\n                },\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n            size: this.size,\n            checked: this.checked,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            labelPosition: this.labelPosition,\n        });\n\n        return (\n            <label class={container()} style={this.getRadioStyle()}>\n                <input\n                    aria-label={this.label}\n                    role=\"radio\"\n                    aria-checked={this.checked.toString()}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled}\n                    readOnly={this.readonly}\n                    checked={this.checked}\n                    class=\"appearance-none sr-only\"\n                    onClick={() => this.handleClick()}\n                    onFocus={e => this.bcmFocus.emit(e)}\n                    onBlur={e => this.bcmBlur.emit(e)}\n                ></input>\n                <div class={dotContainer()}>\n                    <div class={dot()}></div>\n                </div>\n                <span class={labelClass()}>\n                    <slot>{this.label}</slot>\n                </span>\n            </label>\n        );\n    }\n}\n"]}

package/dist/collection/components/radio/radio.css

@@ -0,0 +1 @@
+.block{display:block}:host{display:block}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\[18px\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--bcm-radio-bg\]{background-color:var(--bcm-radio-bg)}.bg-\[--bcm-radio-checked\]{background-color:var(--bcm-radio-checked)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\[--bcm-radio-text-color\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\[inset_0_0_0_1px_var\(--bcm-radio-border\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--bcm-radio-border\)\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\[inset_0_0_0_3px_var\(--bcm-radio-border\)\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\:shadow-\[inset_0_0_0_1px_var\(--bcm-radio-border-hover\)\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}