bromcom-ui-next 0.1.4 → 0.1.6

package/dist/components/bcm-popover.js

@@ -0,0 +1,216 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
+import { b as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './p-9594cebb.js';
+import { c as ce } from './p-5fcf77f9.js';
+
+const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.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)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-color{color:var(--bcm-ui-color-text-default)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
+const BcmPopoverStyle0 = popoverCss;
+
+const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bcmPopoverOpen = createEvent(this, "bcmPopoverOpen", 1);
+        this.bcmPopoverClose = createEvent(this, "bcmPopoverClose", 1);
+        /**
+         * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.
+         * Controls the text size and padding of the popover content.
+         * Default: 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.
+         * Determines where the popover appears around the trigger element.
+         * Default: 'top'
+         */
+        this.placement = 'top';
+        /**
+         * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.
+         * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+         * Default: 'click'
+         */
+        this.trigger = 'click';
+        /**
+         * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.
+         * Adds a delay to prevent flickering on quick mouse movements.
+         * Default: 150
+         */
+        this.hoverDelay = 150;
+        /**
+         * @prop {boolean} open - Indicates whether the popover is currently open.
+         * Can be set programmatically or toggled by user interaction. Mutable.
+         * Default: false
+         */
+        this.open = false;
+        this.togglePopover = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bcmPopoverOpen.emit();
+            }
+            else {
+                this.bcmPopoverClose.emit();
+            }
+            this.updatePosition();
+        };
+        this.showPopover = () => {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = setTimeout(() => {
+                this.open = true;
+                this.bcmPopoverOpen.emit();
+                this.updatePosition();
+            }, this.hoverDelay);
+        };
+        this.hidePopover = () => {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = setTimeout(() => {
+                this.open = false;
+                this.bcmPopoverClose.emit();
+            }, this.hoverDelay);
+        };
+        this.handleSlotChange = () => {
+            const slot = this.el.shadowRoot.querySelector('slot');
+            const elements = slot.assignedElements();
+            this.targetElement = elements[0];
+            if (this.targetElement) {
+                this.targetElement.removeEventListener('click', this.togglePopover);
+                this.targetElement.removeEventListener('mouseenter', this.showPopover);
+                this.targetElement.removeEventListener('mouseleave', this.hidePopover);
+                if (this.trigger === 'click') {
+                    this.targetElement.addEventListener('click', this.togglePopover);
+                    this.targetElement.setAttribute('aria-expanded', this.open.toString());
+                }
+                if (this.trigger === 'hover') {
+                    this.targetElement.addEventListener('mouseenter', this.showPopover);
+                    this.targetElement.addEventListener('mouseleave', this.hidePopover);
+                }
+                if (this.popoverElement && !this.cleanupAutoUpdate) {
+                    this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());
+                }
+            }
+        };
+        this.handleOutsideClick = (event) => {
+            if (!this.el.contains(event.target) && this.open) {
+                this.open = false;
+            }
+        };
+        this.updatePosition = async () => {
+            if (!this.targetElement || !this.popoverElement || !this.arrowElement)
+                return;
+            const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {
+                placement: this.placement,
+                middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],
+            });
+            Object.assign(this.popoverElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };
+            const basePlacement = placement.split('-')[0];
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[basePlacement];
+            Object.assign(this.arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                [staticSide]: '-4px',
+            });
+        };
+        this.popoverClass = ce({
+            slots: {
+                box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',
+                header: 'font-semibold text-color',
+                content: 'font-normal text-color',
+                arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',
+            },
+            variants: {
+                size: {
+                    small: { box: 'text-size-3' },
+                    medium: { box: 'text-size-4' },
+                    large: { box: 'text-size-5' },
+                },
+                isOpen: {
+                    true: { box: 'flex' },
+                    false: { box: 'hidden' },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                isOpen: false,
+            },
+        });
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        var _a;
+        document.removeEventListener('click', this.handleOutsideClick);
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('click', this.togglePopover);
+            this.targetElement.removeEventListener('mouseenter', this.showPopover);
+            this.targetElement.removeEventListener('mouseleave', this.hidePopover);
+        }
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = null;
+        clearTimeout(this.hoverTimeout);
+    }
+    /**
+     * @method {Promise<void>} openPopup - Programmatically opens the popover.
+     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
+     * @returns {Promise<void>} A promise that resolves when the popover is opened.
+     */
+    async openPopup() {
+        this.showPopover();
+    }
+    /**
+     * @method {Promise<void>} closePopup - Programmatically closes the popover.
+     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
+     * @returns {Promise<void>} A promise that resolves when the popover is closed.
+     */
+    async closePopup() {
+        this.hidePopover();
+    }
+    render() {
+        const { box, header, content, arrow } = this.popoverClass({
+            isOpen: this.open,
+            size: this.size,
+        });
+        return (h("div", { key: '665229a272b741f98b8f2a6afdbfcd381c570139', class: "relative" }, h("slot", { key: '4ea3bf8f4a1ea77814c2356e81edbe405eceb7d4', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '00c49e72fa5803d9999639918ba30dcd0714c4d4', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f293355d74a3b5420368cdda0ddd0f2fd5f42010', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'c2ac22ed51b5a01a8832467ee717e6bf35ccbb69', class: header(), part: "header" }, h("slot", { key: '434a1f3f4a013222935ee681feae058c7bbfd993', name: "header" }, this.headerText)), h("div", { key: '950d3aa73579ae246f43aaa3d6101da1d6a7a601', class: content(), part: "content" }, h("slot", { key: 'fa43adb4816dae231c92d5de93432d0a76f211f9', name: "content" }, this.message)))));
+    }
+    get el() { return this; }
+    static get style() { return BcmPopoverStyle0; }
+}, [1, "bcm-popover", {
+        "size": [1],
+        "placement": [1],
+        "trigger": [1],
+        "hoverDelay": [2, "hover-delay"],
+        "open": [1028],
+        "headerText": [1, "header-text"],
+        "message": [1],
+        "openPopup": [64],
+        "closePopup": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-popover":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Popover);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmPopover = Popover;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmPopover, defineCustomElement };
+
+//# sourceMappingURL=bcm-popover.js.map

package/dist/components/bcm-popover.js.map

@@ -0,0 +1 @@
+{"file":"bcm-popover.js","mappings":"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","names":["tv"],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n *   <bcm-button>Click Me</bcm-button>\n *   <span slot=\"header\">Header</span>\n *   <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n *   <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n *   <bcm-button>Toggle Me</bcm-button>\n *   <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n *   const popover = document.querySelector('#my-popover');\n *   popover.openPopup(); // Opens the popover\n *   popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n    tag: 'bcm-popover',\n    styleUrl: 'popover.css',\n    shadow: true,\n})\nexport class Popover implements ComponentInterface {\n    @Element() el: HTMLElement;\n    private targetElement: HTMLElement;\n    private popoverElement: HTMLElement;\n    private arrowElement: HTMLElement;\n    private hoverTimeout: any;\n    private cleanupAutoUpdate: () => void;\n    /**\n     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n     * Controls the text size and padding of the popover content.\n     * Default: 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n    /**\n     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n     * Determines where the popover appears around the trigger element.\n     * Default: 'top'\n     */\n    @Prop()\n    placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n    /**\n     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n     * Default: 'click'\n     */\n    @Prop()\n    trigger: 'click' | 'hover' = 'click';\n    /**\n     * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n     * Adds a delay to prevent flickering on quick mouse movements.\n     * Default: 150\n     */\n    @Prop()\n    hoverDelay: number = 150;\n    /**\n     * @prop {boolean} open - Indicates whether the popover is currently open.\n     * Can be set programmatically or toggled by user interaction. Mutable.\n     * Default: false\n     */\n    @Prop({ mutable: true })\n    open: boolean = false;\n    /**\n     * @prop {string} headerText - Custom text for the popover header.\n     * Used as fallback content if the 'header' slot is not provided.\n     */\n    @Prop()\n    headerText: string;\n    /**\n     * @prop {string} message - Custom text for the popover content.\n     * Used as fallback content if the 'content' slot is not provided.\n     */\n    @Prop()\n    message: string;\n    /**\n     * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n     * Useful for tracking when the popover becomes visible.\n     */\n    @Event({ composed: false, bubbles: false, cancelable: true })\n    bcmPopoverOpen: EventEmitter<void>;\n\n    /**\n     * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n     * Useful for tracking when the popover is hidden.\n     */\n    @Event({ composed: false, bubbles: false, cancelable: true })\n    bcmPopoverClose: EventEmitter<void>;\n\n    connectedCallback() {\n        document.addEventListener('click', this.handleOutsideClick);\n    }\n\n    disconnectedCallback() {\n        document.removeEventListener('click', this.handleOutsideClick);\n        if (this.targetElement) {\n            this.targetElement.removeEventListener('click', this.togglePopover);\n            this.targetElement.removeEventListener('mouseenter', this.showPopover);\n            this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n        }\n        this.cleanupAutoUpdate?.();\n        this.cleanupAutoUpdate = null;\n        clearTimeout(this.hoverTimeout);\n    }\n\n    private togglePopover = () => {\n        this.open = !this.open;\n        if (this.open) {\n            this.bcmPopoverOpen.emit();\n        } else {\n            this.bcmPopoverClose.emit();\n        }\n        this.updatePosition();\n    };\n\n    private showPopover = () => {\n        clearTimeout(this.hoverTimeout);\n        this.hoverTimeout = setTimeout(() => {\n            this.open = true;\n            this.bcmPopoverOpen.emit();\n            this.updatePosition();\n        }, this.hoverDelay);\n    };\n\n    private hidePopover = () => {\n        clearTimeout(this.hoverTimeout);\n        this.hoverTimeout = setTimeout(() => {\n            this.open = false;\n            this.bcmPopoverClose.emit();\n        }, this.hoverDelay);\n    };\n\n    /**\n     * @method {Promise<void>} openPopup - Programmatically opens the popover.\n     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n     * @returns {Promise<void>} A promise that resolves when the popover is opened.\n     */\n    @Method()\n    async openPopup() {\n        this.showPopover();\n    }\n\n    /**\n     * @method {Promise<void>} closePopup - Programmatically closes the popover.\n     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n     * @returns {Promise<void>} A promise that resolves when the popover is closed.\n     */\n    @Method()\n    async closePopup() {\n        this.hidePopover();\n    }\n\n    private handleSlotChange = () => {\n        const slot = this.el.shadowRoot.querySelector('slot');\n        const elements = slot.assignedElements();\n        this.targetElement = elements[0] as HTMLElement;\n\n        if (this.targetElement) {\n            this.targetElement.removeEventListener('click', this.togglePopover);\n            this.targetElement.removeEventListener('mouseenter', this.showPopover);\n            this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n            if (this.trigger === 'click') {\n                this.targetElement.addEventListener('click', this.togglePopover);\n                this.targetElement.setAttribute('aria-expanded', this.open.toString());\n            }\n\n            if (this.trigger === 'hover') {\n                this.targetElement.addEventListener('mouseenter', this.showPopover);\n                this.targetElement.addEventListener('mouseleave', this.hidePopover);\n            }\n\n            if (this.popoverElement && !this.cleanupAutoUpdate) {\n                this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n            }\n        }\n    };\n\n    private handleOutsideClick = (event: Event) => {\n        if (!this.el.contains(event.target as Node) && this.open) {\n            this.open = false;\n        }\n    };\n\n    private updatePosition = async () => {\n        if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n        const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n            placement: this.placement,\n            middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n        });\n\n        Object.assign(this.popoverElement.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n        const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n        const staticSide = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n        }[basePlacement];\n\n        Object.assign(this.arrowElement.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n            [staticSide]: '-4px',\n        });\n    };\n\n    private popoverClass = tv({\n        slots: {\n            box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n            header: 'font-semibold text-color',\n            content: 'font-normal text-color',\n            arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n        },\n        variants: {\n            size: {\n                small: { box: 'text-size-3' },\n                medium: { box: 'text-size-4' },\n                large: { box: 'text-size-5' },\n            },\n            isOpen: {\n                true: { box: 'flex' },\n                false: { box: 'hidden' },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            isOpen: false,\n        },\n    });\n\n    render() {\n        const { box, header, content, arrow } = this.popoverClass({\n            isOpen: this.open,\n            size: this.size,\n        });\n\n        return (\n            <div class=\"relative\">\n                <slot onSlotchange={() => this.handleSlotChange()}></slot>\n                <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n                    <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n                    <div class={header()} part=\"header\">\n                        <slot name=\"header\">{this.headerText}</slot>\n                    </div>\n                    <div class={content()} part=\"content\">\n                        <slot name=\"content\">{this.message}</slot>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/components/bcm-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmRadioGroup extends Components.BcmRadioGroup, HTMLElement {}
+export const BcmRadioGroup: {
+    prototype: BcmRadioGroup;
+    new (): BcmRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-radio-group.js

@@ -0,0 +1,200 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
+import { c as ce } from './p-5fcf77f9.js';
+import { g as generateId } from './p-ba2410ef.js';
+import { c as classNames } from './p-12360e4c.js';
+
+const radioGroupCss = ".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}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.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)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const BcmRadioGroupStyle0 = radioGroupCss;
+
+const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bcmRadioGroupChange = createEvent(this, "bcmRadioGroupChange", 1);
+        /**
+         * Whether the radio group and its radio buttons are disabled.
+         * @prop
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Whether the radio group is required in a form.
+         * @prop
+         * @defaultValue false
+         */
+        this.required = false;
+        /**
+         * Whether the radio group is in an error state.
+         * @prop
+         * @defaultValue false
+         */
+        this.error = false;
+        /**
+         * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
+         * @prop
+         * @defaultValue 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * The layout direction of the radio buttons: 'horizontal' | 'vertical'.
+         * @prop
+         * @defaultValue 'vertical'
+         */
+        this.direction = 'vertical';
+        this.radioGroupName = generateId('radio-group-name');
+        this.handleSlotChange = () => {
+            this.radios.forEach(radio => {
+                var _a;
+                radio.size = this.size;
+                radio.name = (_a = this.name) !== null && _a !== void 0 ? _a : this.radioGroupName;
+                radio.disabled = this.disabled;
+                radio.error = this.error;
+            });
+        };
+        this.radioGroupClass = ce({
+            slots: {
+                host: ['bcm-ui-element bcm-radio-group flex flex-col'],
+                container: ['flex'],
+            },
+            variants: {
+                size: {
+                    small: {
+                        host: 'gap-1.5',
+                        container: 'gap-1.5',
+                    },
+                    medium: {
+                        host: 'gap-2',
+                        container: 'gap-2',
+                    },
+                    large: {
+                        host: 'gap-2.5',
+                        container: 'gap-2.5',
+                    },
+                },
+                direction: {
+                    horizontal: {
+                        container: ['flex-row flex-wrap'],
+                    },
+                    vertical: {
+                        container: ['flex-col'],
+                    },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                direction: 'vertical',
+            },
+        });
+    }
+    get radios() {
+        return this.host.querySelectorAll('bcm-radio');
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.updateRadios(this.value);
+        }
+    }
+    /**
+     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.
+     * @method
+     */
+    async setClear() {
+        var _a;
+        this.value = "";
+        (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+            radio.checked = false;
+        });
+    }
+    /**
+     * Resets the error state and caption.
+     * @method
+     */
+    async resetCaption() {
+        this.error = false;
+        this.captionText = undefined;
+    }
+    handleValueChange(newValue) {
+        this.updateRadios(newValue);
+    }
+    handleRadioChange(event) {
+        const radio = event.target;
+        const radios = this.host.querySelectorAll('bcm-radio');
+        radios.forEach(r => {
+            if (r !== radio) {
+                r.checked = false;
+            }
+        });
+        this.bcmRadioGroupChange.emit({
+            value: radio.value,
+            element: radio,
+        });
+    }
+    updateRadios(value) {
+        this.radios.forEach(radio => {
+            radio.checked = radio.value === value;
+        });
+    }
+    render() {
+        const { host, container } = this.radioGroupClass({
+            size: this.size,
+            direction: this.direction,
+        });
+        return (h("div", { key: '067e086951f511d9a15f0cf7dbaef97744615356', class: host() }, this.label && (h("label", { key: '912ab77a4b270dfd25bbc362932b6914af1cac6c', class: classNames('input-label font-medium', {
+                'text-color-label': !this.disabled,
+                'text-color-disabled': this.disabled,
+            }, {
+                'text-size-3': this.size === 'small',
+                'text-size-4': this.size === 'medium',
+                'text-size-5': this.size === 'large',
+            }) }, h("slot", { key: '93b8053888f906617b84a94a84fad525cbb5ea34', name: "label" }, this.label), this.required && h("span", { key: '654320a556ff7e0aa49c929af349c57ec9a8a59a' }, "*"))), h("div", { key: '722366cd4a7f7cebddf8151fcc935025bf12b5d6', class: container() }, h("slot", { key: '420447424d1e450911355ab4cd6b2ee51c1b2839', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '38dcc2233985bdcaaefe62b072ef9b55d1e1908d', class: classNames('input-caption-text font-regular mt-1', {
+                'text-[--bcm-ui-color-text-caption]': !this.disabled,
+                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
+                'text-[--bcm-ui-color-text-disabled]': this.disabled,
+            }, {
+                'text-size-3': this.size === 'small',
+                'text-size-4': this.size === 'medium',
+                'text-size-5': this.size === 'large',
+            }) }, this.captionText))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return BcmRadioGroupStyle0; }
+}, [1, "bcm-radio-group", {
+        "name": [1],
+        "value": [1],
+        "disabled": [4],
+        "required": [4],
+        "error": [4],
+        "label": [1],
+        "size": [1],
+        "direction": [1],
+        "captionText": [1, "caption-text"],
+        "setClear": [64],
+        "resetCaption": [64]
+    }, [[2, "bcmRadioChange", "handleRadioChange"]], {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-radio-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-radio-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmRadioGroup$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmRadioGroup = BcmRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmRadioGroup, defineCustomElement };
+
+//# sourceMappingURL=bcm-radio-group.js.map

package/dist/components/bcm-radio-group.js.map

@@ -0,0 +1 @@
+{"file":"bcm-radio-group.js","mappings":"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","names":["BcmRadioGroup","tv"],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n    tag: 'bcm-radio-group',\n    styleUrl: 'radio-group.css',\n    shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n    @Element() host: HTMLBcmRadioGroupElement;\n\n    /**\n     * The name attribute for the radio group, used to group radio buttons.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * The currently selected value of the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    value: string;\n\n    /**\n     * Whether the radio group and its radio buttons are disabled.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Whether the radio group is required in a form.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    required: boolean = false;\n\n    /**\n     * Whether the radio group is in an error state.\n     * @prop\n     * @defaultValue false\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * The label text to display above the radio group.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    label: string;\n\n    /**\n     * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n     * @prop\n     * @defaultValue 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n     * @prop\n     * @defaultValue 'vertical'\n     */\n    @Prop()\n    direction: 'horizontal' | 'vertical' = 'vertical';\n\n    /**\n     * Optional caption text to display below the radio group, often used for error messages or hints.\n     * @prop\n     * @defaultValue undefined\n     */\n    @Prop()\n    captionText?: string;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmRadioGroupChange',\n    })\n    bcmRadioGroupChange: EventEmitter<any>;\n\n    private readonly radioGroupName = generateId('radio-group-name');\n\n    get radios() {\n        return this.host.querySelectorAll('bcm-radio');\n    }\n\n    componentWillLoad() {\n        if (this.value) {\n            this.updateRadios(this.value);\n        }\n    }\n\n    /**\n     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n     * @method\n     */\n    @Method()\n    async setClear() {\n        this.value = \"\";\n        this.radios?.forEach(radio => {\n            radio.checked = false;\n        });\n    }\n\n    /**\n     * Resets the error state and caption.\n     * @method\n     */\n    @Method()\n    async resetCaption() {\n        this.error = false;\n        this.captionText = undefined;\n    }\n\n    private handleSlotChange = () => {\n        this.radios.forEach(radio => {\n            radio.size = this.size;\n            radio.name = this.name ?? this.radioGroupName;\n            radio.disabled = this.disabled;\n            radio.error = this.error;\n        });\n    };\n\n    @Watch('value')\n    handleValueChange(newValue: string) {\n        this.updateRadios(newValue);\n    }\n\n    @Listen('bcmRadioChange', { capture: true })\n    handleRadioChange(event: CustomEvent) {\n        const radio = event.target as HTMLBcmRadioElement;\n        const radios = this.host.querySelectorAll('bcm-radio');\n        radios.forEach(r => {\n            if (r !== radio) {\n                r.checked = false;\n            }\n        });\n        this.bcmRadioGroupChange.emit({\n            value: radio.value,\n            element: radio,\n        });\n    }\n\n    private updateRadios(value: string) {\n        this.radios.forEach(radio => {\n            radio.checked = radio.value === value;\n        });\n    }\n\n    private radioGroupClass = tv({\n        slots: {\n            host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n            container: ['flex'],\n        },\n        variants: {\n            size: {\n                small: {\n                    host: 'gap-1.5',\n                    container: 'gap-1.5',\n                },\n                medium: {\n                    host: 'gap-2',\n                    container: 'gap-2',\n                },\n                large: {\n                    host: 'gap-2.5',\n                    container: 'gap-2.5',\n                },\n            },\n            direction: {\n                horizontal: {\n                    container: ['flex-row flex-wrap'],\n                },\n                vertical: {\n                    container: ['flex-col'],\n                },\n            },\n        },\n        defaultVariants: {\n            size: 'medium',\n            direction: 'vertical',\n        },\n    });\n\n    render() {\n        const { host, container } = this.radioGroupClass({\n            size: this.size,\n            direction: this.direction,\n        });\n        return (\n            <div class={host()}>\n                {this.label && (\n                    <label\n                        class={classNames(\n                            'input-label font-medium',\n                            {\n                                'text-color-label': !this.disabled,\n                                'text-color-disabled': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        <slot name=\"label\">{this.label}</slot>\n                        {this.required && <span>*</span>}\n                    </label>\n                )}\n                <div class={container()}>\n                    <slot onSlotchange={this.handleSlotChange}></slot>\n                </div>\n\n                {this.captionText && (\n                    <div\n                        class={classNames(\n                            'input-caption-text font-regular mt-1',\n                            {\n                                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n                            },\n                            {\n                                'text-size-3': this.size === 'small',\n                                'text-size-4': this.size === 'medium',\n                                'text-size-5': this.size === 'large',\n                            },\n                        )}\n                    >\n                        {this.captionText}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/components/bcm-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmRadio extends Components.BcmRadio, HTMLElement {}
+export const BcmRadio: {
+    prototype: BcmRadio;
+    new (): BcmRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;