bromcom-ui-next 0.1.2 → 0.1.4

package/dist/esm/bcm-avatar_4.entry.js

@@ -0,0 +1,570 @@
+import { r as registerInstance, h, c as createEvent, H as Host } from './index-27cc1bac.js';
+import { c as classNames } from './index-097075ad.js';
+import { c as ce } from './index-f3b17e60.js';
+
+const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:9999px}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -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)}";
+const BcmAvatarStyle0 = avatarCss;
+
+const BcmAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**  Shape of the avatar (ellipse/square) */
+        this.shape = 'ellipse';
+        /** Size of the avatar */
+        this.size = 'medium';
+        /** Fallback icon class */
+        this.icon = 'fas fa-user';
+        /**  Status indicator animation */
+        this.blink = false;
+        this.isFallback = false;
+    }
+    getFirstLetters(name) {
+        const words = name.split(' ');
+        const initials = words.map(word => word.charAt(0).toUpperCase()).join('');
+        return initials.substring(0, 2);
+    }
+    render() {
+        const baseClass = classNames('bcm-avatar bcm-ui-element bcm-ui-content-display', 'uppercase font-medium', 'inline-flex items-center justify-center', 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]', {
+            'shape-ellipse rounded-full': this.shape === 'ellipse',
+            'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',
+            'size-small text-size-4 w-6 h-6': this.size === 'small',
+            'size-medium text-size-5 w-8 h-8': this.size === 'medium',
+            'size-large text-size-6 w-10 h-10': this.size === 'large',
+        });
+        const badgeClass = classNames('badge', {
+            'top-0 right-0': this.shape === 'ellipse',
+            '-top-0.5 -right-0.5': this.shape === 'square',
+        });
+        const imageClass = classNames('image w-full h-full', {
+            'rounded-full': this.shape === 'ellipse',
+            'rounded-[--bcm-ui-radius]': this.shape === 'square',
+        });
+        let style = {};
+        if (this.color) {
+            const isColorTone = this.color.includes('-');
+            const _color = isColorTone ? this.color.split('-')[0] : this.color;
+            const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;
+            const textColor = `var(--bcm-ui-color-text-palette-${_color}`;
+            style = {
+                '--bcm-avatar-bg': bgColor,
+                '--bcm-avatar-text': textColor,
+            };
+        }
+        const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)
+            ? {
+                width: `${this.size}px`,
+                height: `${this.size}px`,
+                fontSize: `${+this.size / 2}px`,
+            }
+            : {};
+        const RenderContent = () => {
+            if (this.isFallback) {
+                if (this.name) {
+                    return this.getFirstLetters(this.name);
+                }
+                else {
+                    return h("i", { class: this.icon });
+                }
+            }
+            else if (this.image) {
+                return h("img", { class: imageClass, onError: () => (this.isFallback = true), src: this.image, alt: this.alt, "aria-label": this.alt || this.name || 'Avatar' });
+            }
+            else if (this.name) {
+                return this.getFirstLetters(this.name);
+            }
+            else {
+                return h("i", { class: this.icon });
+            }
+        };
+        return (h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: Object.assign(Object.assign({}, style), customSize) }, h(RenderContent, null), this.status && h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), h("slot", null)));
+    }
+};
+BcmAvatar.style = BcmAvatarStyle0;
+
+const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.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}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.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}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -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)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:9999px;content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:9999px}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}";
+const BcmBadgeStyle0 = badgeCss;
+
+const Badge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Determines the size of the badge.
+         * @type {'small' | 'medium' | 'large'}
+         * @default 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * Sets the visual variant of the badge.
+         * 'dot': Appears as a small dot indicator
+         * 'text': Displays content as text
+         * @type {'dot' | 'text'}
+         * @default 'text'
+         */
+        this.variant = 'text';
+        /**
+         * Enables soft color mode for the badge.
+         * When true, uses lighter tones and pastel colors.
+         * @type {boolean}
+         * @default false
+         */
+        this.soft = false;
+        /**
+         * Enables blinking animation for the badge.
+         * Useful for drawing attention or indicating active status.
+         * @type {boolean}
+         * @default false
+         */
+        this.blink = false;
+        /**
+         * Sets the position of the badge relative to its container.
+         * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+         * @default 'top-right'
+         */
+        this.position = 'top-right';
+        this.classes = ce({
+            base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',
+            variants: {
+                size: {
+                    small: 'gap-1 px-1 text-size-3',
+                    medium: 'gap-1 py-0.5 px-1.5 text-size-4',
+                    large: 'gap-2 py-1 px-2 text-size-5',
+                },
+                variant: {
+                    dot: 'gap-0 p-0 text-[0px] leading-none',
+                    text: '',
+                },
+                position: {
+                    'top-right': '-top-1 -right-1',
+                    'top-left': '-top-1 -left-1',
+                    'bottom-right': '-bottom-1 -right-1',
+                    'bottom-left': '-bottom-1 -left-1',
+                },
+                blink: {
+                    true: 'after:content-[""] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',
+                },
+            },
+            compoundVariants: [
+                {
+                    variant: 'dot',
+                    size: 'small',
+                    class: 'size-1',
+                },
+                {
+                    variant: 'dot',
+                    size: 'medium',
+                    class: 'size-1.5',
+                },
+                {
+                    variant: 'dot',
+                    size: 'large',
+                    class: 'size-2',
+                },
+            ],
+            defaultVariants: {
+                variant: 'text',
+                size: 'medium',
+                position: 'top-right',
+                blink: false,
+            },
+        });
+    }
+    get offsetStyle() {
+        if (!this.offset)
+            return {};
+        const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());
+        return { transform: `translate(${x}px, ${y}px)` };
+    }
+    get badgeStyle() {
+        if (!this.color)
+            return {};
+        const variantType = this.soft ? 'soft' : 'vivid';
+        return {
+            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,
+            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',
+        };
+    }
+    render() {
+        return (h("div", { key: '9c6ce83cc0ae25399f2d97139d9e91578be38237', class: "relative inline-flex" }, h("slot", { key: 'b05db7fc70a8ff5c680e79507d44678ea4f8aba4' }), h("div", { key: 'e3fe3d09e236ae1569d533824f4bb585a5871b53', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
+                size: this.size,
+                variant: this.variant,
+                position: this.position,
+                blink: this.blink,
+            }), style: Object.assign(Object.assign({}, this.badgeStyle), this.offsetStyle) }, this.variant == 'text' && h("slot", { key: '98e3f9eaa2966a748e41782efbe78ca35a9deee6', name: "badge" }, this.text))));
+    }
+};
+Badge.style = BcmBadgeStyle0;
+
+const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.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}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -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)}";
+const BcmBasicBadgeStyle0 = basicBadgeCss;
+
+const BasicBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Determines the size of the badge.
+         * @type {'small' | 'medium' | 'large'}
+         * @default 'medium'
+         */
+        this.size = 'medium';
+        /**
+         * Sets the visual variant of the badge.
+         * 'dot': Appears as a small dot indicator
+         * 'text': Displays content as text
+         * @type {'dot' | 'text'}
+         * @default 'text'
+         */
+        this.variant = 'text';
+        /**
+         * Enables soft color mode for the badge.
+         * When true, uses lighter tones and pastel colors.
+         * @type {boolean}
+         * @default false
+         */
+        this.soft = false;
+        this.classes = ce({
+            base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',
+            variants: {
+                size: {
+                    small: 'px-1 text-size-3',
+                    medium: 'py-0.5 px-1.5 text-size-4',
+                    large: 'py-1 px-2 text-size-5',
+                },
+                variant: {
+                    dot: 'gap-0 p-0 text-[0px] leading-none',
+                    text: '',
+                },
+            },
+            compoundVariants: [
+                {
+                    variant: 'dot',
+                    size: 'small',
+                    class: 'size-1',
+                },
+                {
+                    variant: 'dot',
+                    size: 'medium',
+                    class: 'size-1.5',
+                },
+                {
+                    variant: 'dot',
+                    size: 'large',
+                    class: 'size-2',
+                },
+            ],
+            defaultVariants: {
+                variant: 'text',
+                size: 'medium',
+                blink: false,
+            },
+        });
+    }
+    get badgeStyle() {
+        if (!this.color)
+            return {};
+        const variantType = this.soft ? 'soft' : 'vivid';
+        return {
+            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,
+            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',
+        };
+    }
+    render() {
+        return (h("span", { key: '17d82a67aaf2793bbd922c901bbfb05b91abea35', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
+                size: this.size,
+                variant: this.variant,
+            }) }, this.variant === 'text' && (h("span", { key: '5b4fffd0979dec737d0209f8268467c19a5dd795', class: "badge-content" }, h("slot", { key: 'a554c64e657079ba933ead458c76a894f236b533' })))));
+    }
+};
+BasicBadge.style = BcmBasicBadgeStyle0;
+
+const variantOptions = {
+    save: {
+        text: 'Save',
+        status: 'success',
+        icon: 'far fa-save',
+        iconPosition: 'prefix',
+        kind: 'primary',
+    },
+    ok: {
+        text: 'Ok',
+        status: 'success',
+        icon: 'far fa-check',
+        iconPosition: 'prefix',
+    },
+    new: {
+        text: 'New',
+        status: 'success',
+        icon: 'far fa-plus',
+        iconPosition: 'prefix',
+    },
+    add: {
+        text: 'Add',
+        status: 'success',
+        icon: 'far fa-plus',
+        iconPosition: 'prefix',
+    },
+    create: {
+        text: 'Create',
+        status: 'success',
+        icon: 'far fa-plus',
+        iconPosition: 'prefix',
+    },
+    prev: {
+        text: 'Prev',
+        status: 'default',
+        icon: 'far fa-arrow-left',
+        iconPosition: 'prefix',
+    },
+    next: {
+        text: 'Next',
+        status: 'default',
+        icon: 'far fa-arrow-right',
+        iconPosition: 'suffix',
+    },
+    apply: {
+        text: 'Apply',
+        status: 'default',
+        icon: 'far fa-check-circle',
+        iconPosition: 'prefix',
+    },
+    submit: {
+        text: 'Submit',
+        status: 'default',
+        icon: 'far fa-save',
+        iconPosition: 'prefix',
+    },
+    send: {
+        text: 'Send',
+        status: 'success',
+        icon: 'far fa-paper-plane',
+        iconPosition: 'prefix',
+    },
+    delete: {
+        text: 'Delete',
+        status: 'error',
+        icon: 'far fa-trash',
+        iconPosition: 'prefix',
+    },
+    cancel: {
+        text: 'Cancel',
+        status: 'error',
+        icon: 'far fa-times',
+        iconPosition: 'prefix',
+    },
+    decline: {
+        text: 'Decline',
+        status: 'error',
+        icon: 'far fa-ban',
+        iconPosition: 'prefix',
+    },
+    close: {
+        text: 'Close',
+        status: 'error',
+        icon: 'far fa-times-circle',
+        iconPosition: 'prefix',
+    },
+    archive: {
+        text: 'Archive',
+        status: 'error',
+        icon: 'far fa-folder-open',
+        iconPosition: 'prefix',
+    },
+    remove: {
+        text: 'Remove',
+        status: 'error',
+        icon: 'far fa-minus-circle',
+        iconPosition: 'prefix',
+    },
+    edit: {
+        text: 'Edit',
+        status: 'default',
+        icon: 'far fa-edit',
+        iconPosition: 'prefix',
+    },
+    export: {
+        text: 'Export',
+        status: 'default',
+        icon: 'far fa-sign-out',
+        iconPosition: 'prefix',
+    },
+    import: {
+        text: 'Import',
+        status: 'default',
+        icon: 'far fa-sign-in',
+        iconPosition: 'prefix',
+    },
+    filter: {
+        text: 'Filter',
+        status: 'default',
+        icon: 'far fa-filter',
+        iconPosition: 'prefix',
+    },
+    update: {
+        text: 'Update',
+        status: 'default',
+        icon: 'far fa-sync',
+        iconPosition: 'prefix',
+    },
+    reset: {
+        text: 'Reset',
+        status: 'default',
+        icon: 'far fa-sync',
+        iconPosition: 'prefix',
+    },
+    download: {
+        text: 'Download',
+        status: 'default',
+        icon: 'far fa-download',
+        iconPosition: 'prefix',
+    },
+};
+
+const buttonCss = ".relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-button-border\\]{border-color:var(--bcm-button-border)}.bg-\\[--bcm-button-bg\\]{background-color:var(--bcm-button-bg)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.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)}.leading-none{line-height:1}.text-\\[--bcm-button-text\\]{color:var(--bcm-button-text)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -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)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-button-bg-hover\\]:hover{background-color:var(--bcm-button-bg-hover)}.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)}.active\\:bg-\\[--bcm-button-bg-active\\]:active{background-color:var(--bcm-button-bg-active)}";
+const BcmButtonStyle0 = buttonCss;
+
+const BcmButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bcmClick = createEvent(this, "bcmClick", 1);
+        this.bcmFocus = createEvent(this, "bcmFocus", 1);
+        this.bcmBlur = createEvent(this, "bcmBlur", 1);
+        /** Defines the main visual style of the button */
+        this.kind = 'primary';
+        /** Controls the button size */
+        this.size = 'medium';
+        /** Defines the button's status/state color */
+        this.status = 'default';
+        /** Icon placement (prefix/suffix) */
+        this.iconPosition = 'prefix';
+        /** Icon-only button mode */
+        this.iconOnly = false;
+        /** Full width button */
+        this.fullWidth = false;
+        /** HTML button type */
+        this.type = 'button';
+        /** Loading state */
+        this.loading = false;
+        /** Disabled state */
+        this.disabled = false;
+        /** Active state */
+        this.active = false;
+        this.handleClick = (event) => {
+            if (!this.disabled && !this.loading) {
+                this.bcmClick.emit(event);
+            }
+        };
+        this.handleFocus = (event) => {
+            this.bcmFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.bcmBlur.emit(event);
+        };
+        this.buttonClass = ce({
+            base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
+            variants: {
+                size: {
+                    small: 'text-size-4 py-px px-2 min-h-6',
+                    medium: 'text-size-5 py-0.5 px-3 min-h-8',
+                    large: 'text-size-6 py-1 px-3 min-h-10',
+                },
+                kind: {
+                    primary: 'kind-primary',
+                    ghost: 'kind-ghost',
+                    text: 'kind-text',
+                    outline: 'kind-outline',
+                },
+                fullWidth: {
+                    true: 'full-width w-full',
+                },
+                disabled: {
+                    true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',
+                    false: [
+                        'cursor-pointer',
+                        'bg-[--bcm-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',
+                        'hover:bg-[--bcm-button-bg-hover]',
+                        'active:bg-[--bcm-button-bg-active]',
+                        'focus-visible:ring',
+                    ],
+                },
+                loading: {
+                    true: '',
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                kind: 'primary',
+                fullWidth: false,
+                disabled: false,
+                loading: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    get buttonText() {
+        return this.text || (this.variant ? variantOptions[this.variant].text : '');
+    }
+    get buttonIcon() {
+        if (this.variant && variantOptions[this.variant].icon) {
+            return {
+                icon: variantOptions[this.variant].icon,
+                position: variantOptions[this.variant].iconPosition || 'prefix',
+            };
+        }
+        return {
+            icon: this.icon,
+            position: this.iconPosition,
+        };
+    }
+    get buttonStatus() {
+        return this.variant ? variantOptions[this.variant].status : this.status;
+    }
+    get buttonStyles() {
+        const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;
+        const kindStyleMap = {
+            primary: {
+                '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,
+                '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,
+                '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': 'var(--bcm-ui-color-text-base)',
+            },
+            outline: {
+                '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,
+                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
+            },
+            ghost: {
+                '--bcm-button-bg': 'transparent',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
+            },
+            text: {
+                '--bcm-button-bg': 'transparent',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,
+            },
+        };
+        return kindStyleMap[this.kind];
+    }
+    render() {
+        const { icon, position } = this.buttonIcon;
+        return (h(Host, { key: 'b1188fbe4439c4878a3306020097d07913b2212d' }, h("button", { key: 'eae7a80a19ea54120102d93127f55b039833bc54', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
+                size: this.size,
+                kind: this.kind,
+                fullWidth: this.fullWidth,
+                disabled: this.disabled,
+                loading: this.loading,
+            }) }, this.loading && h("slot", { key: 'c231e6995ec417011a833b86668be0226855df26', name: "loading" }), h("span", { key: '0398204b65ab60a2061b78cedd61c1fc934f9946' }, h("slot", { key: '664f13b119445486a1185bb009581cc64d1c0b3e', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'c06367c640065ef5255a89c3d3c9db08a88659d1', class: ' leading-none ' + icon }))), h("slot", { key: 'f8fc4f7eaae1ad869af95a6990a53def07678cd7' }, this.buttonText), h("span", { key: 'b1b7dc15d8090bb057b6b237d65c17ac328ee380' }, h("slot", { key: '43539884f514d7bb365e10e06bf1119b5c60a2b3', name: "suffix" }, position === 'suffix' && icon && h("i", { key: 'bf9ad3dc22fc11ca218c28e1a00e9e5a8cef80f2', class: ' leading-none ' + icon }))))));
+    }
+};
+BcmButton.style = BcmButtonStyle0;
+
+export { BcmAvatar as bcm_avatar, Badge as bcm_badge, BasicBadge as bcm_basic_badge, BcmButton as bcm_button };
+
+//# sourceMappingURL=bcm-avatar_4.entry.js.map