@xlabs-store/core 0.0.1

package/dist/collection/components/x-radio/x-radio.js

@@ -0,0 +1,689 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @component x-radio
+ * @description Radio button component following Ant Design specification.
+ *
+ * @slot - The label content
+ *
+ * @example
+ * <x-radio value="1">Option A</x-radio>
+ * <x-radio value="2" checked>Option B</x-radio>
+ * <x-radio value="3" disabled>Option C</x-radio>
+ */
+export class XRadio {
+    /**
+     * Host element reference for label and input.
+     */
+    el;
+    /**
+     * Input element reference for focus management.
+     */
+    inputEl;
+    // ==================== Props ====================
+    /**
+     * Whether the radio is automatically focused on mount.
+     * @default false
+     * @example
+     * <x-radio autoFocus></x-radio>
+     */
+    autoFocus = false;
+    /**
+     * Whether the radio is checked (controlled mode).
+     * @example
+     * <x-radio checked></x-radio>
+     */
+    checked = false;
+    /**
+     * Whether the radio is checked by default (uncontrolled mode).
+     * @default false
+     * @example
+     * <x-radio defaultChecked></x-radio>
+     */
+    defaultChecked = false;
+    /**
+     * Whether the radio is disabled.
+     * @default false
+     * @example
+     * <x-radio disabled></x-radio>
+     */
+    disabled = false;
+    /**
+     * The name attribute of the radio input.
+     * @example
+     * <x-radio name="group1"></x-radio>
+     */
+    name;
+    /**
+     * Radio label placement.
+     * @default 'start'
+     * @example
+     * <x-radio placement="end"></x-radio>
+     */
+    placement = 'start';
+    /**
+     * Radio label alignment.
+     * @default 'center'
+     */
+    alignment = 'center';
+    /**
+     * The value of the radio.
+     * @example
+     * <x-radio value="A"></x-radio>
+     */
+    value;
+    /**
+     * Custom class names for radio parts.
+     * @example
+     * <x-radio classNames={{ root: 'my-radio' }}></x-radio>
+     */
+    classNames;
+    /**
+     * Custom styles for radio parts.
+     * @example
+     * <x-radio styles={{ root: 'margin: 4px;' }}></x-radio>
+     */
+    styles;
+    /**
+     * Unique identifier for the radio.
+     * @example
+     * <x-radio radioId="opt-a"></x-radio>
+     */
+    radioId;
+    // ==================== Events ====================
+    /**
+     * Callback fired when the radio state changes.
+     * @example
+     * <x-radio onXChange={(ev) => console.log(ev.detail)}></x-radio>
+     */
+    xChange;
+    /**
+     * Callback fired when the radio is focused.
+     * @example
+     * <x-radio onXFocus={() => {}}></x-radio>
+     */
+    xFocus;
+    /**
+     * Callback fired when the radio loses focus.
+     * @example
+     * <x-radio onXBlur={() => {}}></x-radio>
+     */
+    xBlur;
+    // ==================== Lifecycle ====================
+    /**
+     * Component lifecycle method called before loading.
+     * Syncs the internal checked state with defaultChecked if provided.
+     */
+    componentWillLoad() {
+        if (this.defaultChecked && !this.checked) {
+            this.checked = true;
+        }
+    }
+    /**
+     * Component lifecycle method called after loading.
+     * Handles auto-focus behavior if enabled.
+     */
+    componentDidLoad() {
+        if (this.autoFocus && this.inputEl) {
+            this.inputEl.focus();
+        }
+    }
+    // ==================== Watchers ====================
+    /**
+     * Watcher for checked prop changes.
+     * Can be used to sync with parent components or trigger side effects.
+     */
+    handleCheckedChange() {
+        // Sync with parent if needed
+    }
+    // ==================== Methods ====================
+    /**
+     * Focus the radio input programmatically.
+     * @returns Promise<void> - Resolves when focus is set.
+     * @example
+     * const radio = document.querySelector('x-radio');
+     * await radio.setFocus();
+     */
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    /**
+     * Remove focus from the radio input programmatically.
+     * @returns Promise<void> - Resolves when focus is removed.
+     * @example
+     * const radio = document.querySelector('x-radio');
+     * await radio.removeFocus();
+     */
+    async removeFocus() {
+        this.inputEl?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Handles click events on the radio component.
+     *
+     * Flow:
+     * 1. Checks if the component is disabled; if so, prevents default action and stops propagation.
+     * 2. Checks if the radio is currently unchecked (since radio buttons cannot be unchecked by clicking).
+     * 3. If unchecked, updates the checked state to true.
+     * 4. Emits the `xChange` event with the new state and original event.
+     *
+     * @param e - The mouse event triggered by user click.
+     */
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        // Radio buttons can only be checked, not unchecked
+        if (!this.checked) {
+            this.checked = true;
+            this.xChange.emit({
+                value: this.value,
+                checked: true,
+                nativeEvent: e,
+            });
+        }
+    };
+    /**
+     * Handles focus events on the internal input element.
+     * Emits the `xFocus` event to notify parent components.
+     */
+    handleFocus = () => {
+        this.xFocus.emit();
+    };
+    /**
+     * Handles blur events on the internal input element.
+     * Emits the `xBlur` event to notify parent components.
+     */
+    handleBlur = () => {
+        this.xBlur.emit();
+    };
+    /**
+     * Handles keyboard events for accessibility.
+     *
+     * Flow:
+     * 1. Checks if the component is disabled.
+     * 2. Listens for 'Space' or 'Enter' keys.
+     * 3. If triggered, prevents default browser behavior.
+     * 4. If currently unchecked, updates state to checked and emits change event.
+     *
+     * @param e - The keyboard event.
+     */
+    handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            if (!this.checked) {
+                this.checked = true;
+                this.xChange.emit({
+                    value: this.value,
+                    checked: true,
+                    nativeEvent: e,
+                });
+            }
+        }
+    };
+    // ==================== Render ====================
+    /**
+     * Renders the component.
+     *
+     * Structure:
+     * - Host element serves as the wrapper with ARIA roles.
+     * - Contains a visual radio indicator (input + inner span).
+     * - Contains a label slot for content.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        // Build class maps based on checked and disabled state.
+        const wrapperClasses = {
+            'x-radio-wrapper': true,
+            'x-radio-wrapper-checked': this.checked,
+            'x-radio-wrapper-disabled': this.disabled,
+            [`x-radio-placement-${this.placement}`]: !!this.placement,
+            [`x-radio-alignment-${this.alignment}`]: !!this.alignment,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const radioClasses = {
+            'x-radio': true,
+            'x-radio-checked': this.checked,
+            'x-radio-disabled': this.disabled,
+            [this.classNames?.radio ?? '']: !!this.classNames?.radio,
+        };
+        const innerClasses = {
+            'x-radio-inner': true,
+            [this.classNames?.inner ?? '']: !!this.classNames?.inner,
+        };
+        const labelClasses = {
+            'x-radio-label': true,
+            [this.classNames?.label ?? '']: !!this.classNames?.label,
+        };
+        const wrapperStyles = this.styles?.root;
+        const radioStyles = this.styles?.radio;
+        const innerStyles = this.styles?.inner;
+        const labelStyles = this.styles?.label;
+        return (h(Host, { key: '73c3b076a9ec6eddd0978ff6aa8cca6e8f776526', class: wrapperClasses, style: wrapperStyles, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0 }, h("span", { key: '99b9cf1d6c8a56ad7c868d6b4a6d0dbda220c9f4', class: radioClasses, style: radioStyles }, h("input", { key: '68e873e4984a6f972dfa9531de6d387db4400bf7', ref: (el) => (this.inputEl = el), type: "radio", class: "x-radio-input", id: this.radioId, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabIndex: -1, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: (e) => e.stopPropagation() }), h("span", { key: 'b74110568edc7a6c43a42efed8bf0788e6f932c9', class: innerClasses, style: innerStyles })), h("span", { key: '1d6a28efc70aadf65bccceb22c8ccbc294c9987b', class: labelClasses, style: labelStyles }, h("slot", { key: 'eb70a0875223ff3b54ae4d3cc0d0d6b3ee6629e5' }))));
+    }
+    static get is() { return "x-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-radio autoFocus></x-radio>"
+                        }],
+                    "text": "Whether the radio is automatically focused on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio checked></x-radio>"
+                        }],
+                    "text": "Whether the radio is checked (controlled mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "defaultChecked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-radio defaultChecked></x-radio>"
+                        }],
+                    "text": "Whether the radio is checked by default (uncontrolled mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-radio disabled></x-radio>"
+                        }],
+                    "text": "Whether the radio is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio name=\"group1\"></x-radio>"
+                        }],
+                    "text": "The name attribute of the radio input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioPlacement",
+                    "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
+                    "references": {
+                        "RadioPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-radio/types.ts::RadioPlacement",
+                            "referenceLocation": "RadioPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'start'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-radio placement=\"end\"></x-radio>"
+                        }],
+                    "text": "Radio label placement."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'start'"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioAlignment",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "RadioAlignment": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-radio/types.ts::RadioAlignment",
+                            "referenceLocation": "RadioAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'center'"
+                        }],
+                    "text": "Radio label alignment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "'center'"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio value=\"A\"></x-radio>"
+                        }],
+                    "text": "The value of the radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioClassNames",
+                    "resolved": "RadioClassNames",
+                    "references": {
+                        "RadioClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-radio/types.ts::RadioClassNames",
+                            "referenceLocation": "RadioClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio classNames={{ root: 'my-radio' }}></x-radio>"
+                        }],
+                    "text": "Custom class names for radio parts."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioStyles",
+                    "resolved": "RadioStyles",
+                    "references": {
+                        "RadioStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-radio/types.ts::RadioStyles",
+                            "referenceLocation": "RadioStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio styles={{ root: 'margin: 4px;' }}></x-radio>"
+                        }],
+                    "text": "Custom styles for radio parts."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "radioId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio radioId=\"opt-a\"></x-radio>"
+                        }],
+                    "text": "Unique identifier for the radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radio-id"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio onXChange={(ev) => console.log(ev.detail)}></x-radio>"
+                        }],
+                    "text": "Callback fired when the radio state changes."
+                },
+                "complexType": {
+                    "original": "RadioChangeEventDetail",
+                    "resolved": "RadioChangeEventDetail",
+                    "references": {
+                        "RadioChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-radio/types.ts::RadioChangeEventDetail",
+                            "referenceLocation": "RadioChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio onXFocus={() => {}}></x-radio>"
+                        }],
+                    "text": "Callback fired when the radio is focused."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-radio onXBlur={() => {}}></x-radio>"
+                        }],
+                    "text": "Callback fired when the radio loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the radio input programmatically.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void> - Resolves when focus is set."
+                        }, {
+                            "name": "example",
+                            "text": "const radio = document.querySelector('x-radio');\r\nawait radio.setFocus();"
+                        }]
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove focus from the radio input programmatically.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void> - Resolves when focus is removed."
+                        }, {
+                            "name": "example",
+                            "text": "const radio = document.querySelector('x-radio');\r\nawait radio.removeFocus();"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }];
+    }
+}

package/dist/collection/components/x-radio-group/types.js

@@ -0,0 +1 @@
+export {};