bromcom-ui-next 0.1.3 → 0.1.4

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

@@ -0,0 +1,373 @@
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @component BcmBadge
+ * @description A versatile badge component that can be positioned around its container.
+ * Supports different sizes, variants (dot/text), colors, and positioning options.
+ * Can display status indicators with optional blinking animation.
+ *
+ * @example Basic usage
+ * <bcm-badge color="primary" position="top-right">
+ *   <div>Container Content</div>
+ *   <span slot="badge">New</span>
+ * </bcm-badge>
+ *
+ * @example Status indicator with blink
+ * <bcm-badge variant="dot" color="success" blink={true} status="Online">
+ *   <div>User Profile</div>
+ * </bcm-badge>
+ */
+export class Badge {
+    constructor() {
+        /**
+         * 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 = tv({
+            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))));
+    }
+    static get is() { return "bcm-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'small' | 'medium' | 'large'}"
+                        }, {
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
+                    "text": "Determines the size of the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dot' | 'text'",
+                    "resolved": "\"dot\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'dot' | 'text'}"
+                        }, {
+                            "name": "default",
+                            "text": "'text'"
+                        }],
+                    "text": "Sets the visual variant of the badge.\n'dot': Appears as a small dot indicator\n'text': Displays content as text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "optional",
+                            "text": undefined
+                        }],
+                    "text": "Defines the color of the badge.\nUses system color variables (e.g., 'primary', 'success', 'warning', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            },
+            "soft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables soft color mode for the badge.\nWhen true, uses lighter tones and pastel colors."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "soft",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "blink": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables blinking animation for the badge.\nUseful for drawing attention or indicating active status."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "blink",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "optional",
+                            "text": undefined
+                        }],
+                    "text": "Status message for accessibility purposes.\nWill be read by screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}"
+                        }, {
+                            "name": "default",
+                            "text": "'top-right'"
+                        }],
+                    "text": "Sets the position of the badge relative to its container."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'top-right'"
+            },
+            "offset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "optional",
+                            "text": undefined
+                        }],
+                    "text": "Fine-tune the badge position with custom offset.\nFormat: \"x,y\" in pixels (e.g., \"10,-5\")"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "optional",
+                            "text": undefined
+                        }],
+                    "text": "Text to be displayed inside the badge.\nUsed when variant is set to 'text'.\nCan be overridden using the \"badge\" slot."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=badge.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.js","sourceRoot":"","sources":["../../../src/components/badge/badge.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n    tag: 'bcm-badge',\n    styleUrl: 'badge.css',\n    shadow: true,\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Determines the size of the badge.\n     * @type {'small' | 'medium' | 'large'}\n     * @default 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Sets the visual variant of the badge.\n     * 'dot': Appears as a small dot indicator\n     * 'text': Displays content as text\n     * @type {'dot' | 'text'}\n     * @default 'text'\n     */\n    @Prop()\n    variant: 'dot' | 'text' = 'text';\n\n    /**\n     * Defines the color of the badge.\n     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    color?: string;\n\n    /**\n     * Enables soft color mode for the badge.\n     * When true, uses lighter tones and pastel colors.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    soft: boolean = false;\n\n    /**\n     * Enables blinking animation for the badge.\n     * Useful for drawing attention or indicating active status.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    blink: boolean = false;\n\n    /**\n     * Status message for accessibility purposes.\n     * Will be read by screen readers.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    status?: string;\n\n    /**\n     * Sets the position of the badge relative to its container.\n     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n     * @default 'top-right'\n     */\n    @Prop()\n    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n    /**\n     * Fine-tune the badge position with custom offset.\n     * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    offset: string;\n\n    /**\n     * Text to be displayed inside the badge.\n     * Used when variant is set to 'text'.\n     * Can be overridden using the \"badge\" slot.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    text?: string;\n\n    private classes = tv({\n        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',\n        variants: {\n            size: {\n                small: 'gap-1 px-1 text-size-3',\n                medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n                large: 'gap-2 py-1 px-2 text-size-5',\n            },\n            variant: {\n                dot: 'gap-0 p-0 text-[0px] leading-none',\n                text: '',\n            },\n            position: {\n                'top-right': '-top-1 -right-1',\n                'top-left': '-top-1 -left-1',\n                'bottom-right': '-bottom-1 -right-1',\n                'bottom-left': '-bottom-1 -left-1',\n            },\n            blink: {\n                true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n            },\n        },\n        compoundVariants: [\n            {\n                variant: 'dot',\n                size: 'small',\n                class: 'size-1',\n            },\n            {\n                variant: 'dot',\n                size: 'medium',\n                class: 'size-1.5',\n            },\n            {\n                variant: 'dot',\n                size: 'large',\n                class: 'size-2',\n            },\n        ],\n        defaultVariants: {\n            variant: 'text',\n            size: 'medium',\n            position: 'top-right',\n            blink: false,\n        },\n    });\n\n    private get offsetStyle() {\n        if (!this.offset) return {};\n        const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n        return { transform: `translate(${x}px, ${y}px)` };\n    }\n\n    private get badgeStyle() {\n        if (!this.color) return {};\n        const variantType = this.soft ? 'soft' : 'vivid';\n\n        return {\n            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n        };\n    }\n\n    render() {\n        return (\n            <div class=\"relative inline-flex\">\n                <slot></slot>\n                <div\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    aria-label={this.status ? `Status: ${this.status}` : undefined}\n                    class={this.classes({\n                        size: this.size,\n                        variant: this.variant,\n                        position: this.position,\n                        blink: this.blink,\n                    })}\n                    style={{\n                        ...this.badgeStyle,\n                        ...this.offsetStyle,\n                    }}\n                >\n                    {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n                </div>\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/badge/badge.css

@@ -0,0 +1 @@
+.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)}

package/dist/collection/components/basic-badge/basic-badge.component.js

@@ -0,0 +1,236 @@
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @component BcmBasicBadge
+ * @description A basic badge component that can be used as a status indicator or to highlight content.
+ * Supports dot and text variants with different sizes and color options.
+ *
+ * @example Basic usage
+ * <bcm-basic-badge size="medium" color="primary">
+ *   New
+ * </bcm-basic-badge>
+ *
+ * @example Dot variant
+ * <bcm-basic-badge variant="dot" color="success" />
+ */
+export class BasicBadge {
+    constructor() {
+        /**
+         * 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 = tv({
+            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' })))));
+    }
+    static get is() { return "bcm-basic-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["basic-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["basic-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'small' | 'medium' | 'large'}"
+                        }, {
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
+                    "text": "Determines the size of the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dot' | 'text'",
+                    "resolved": "\"dot\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'dot' | 'text'}"
+                        }, {
+                            "name": "default",
+                            "text": "'text'"
+                        }],
+                    "text": "Sets the visual variant of the badge.\n'dot': Appears as a small dot indicator\n'text': Displays content as text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "optional",
+                            "text": undefined
+                        }],
+                    "text": "Defines the color of the badge.\nUses system color variables (e.g., 'primary', 'success', 'warning', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            },
+            "soft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables soft color mode for the badge.\nWhen true, uses lighter tones and pastel colors."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "soft",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "optional",
+                            "text": undefined
+                        }],
+                    "text": "Text to be displayed inside the badge.\nUsed when variant is set to 'text'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=basic-badge.component.js.map

package/dist/collection/components/basic-badge/basic-badge.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-badge.component.js","sourceRoot":"","sources":["../../../src/components/basic-badge/basic-badge.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAGvC;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,UAAU;IALvB;QAMI;;;;WAIG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;;;;;WAMG;QAEH,YAAO,GAAmB,MAAM,CAAC;QAWjC;;;;;WAKG;QAEH,SAAI,GAAY,KAAK,CAAC;QAWd,YAAO,GAAG,EAAE,CAAC;YACjB,IAAI,EAAE,iLAAiL;YACvL,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,kBAAkB;oBACzB,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,uBAAuB;iBACjC;gBACD,OAAO,EAAE;oBACL,GAAG,EAAE,mCAAmC;oBACxC,IAAI,EAAE,EAAE;iBACX;aACJ;YACD,gBAAgB,EAAE;gBACd;oBACI,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAClB;gBACD;oBACI,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU;iBACpB;gBACD;oBACI,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAClB;aACJ;YACD,eAAe,EAAE;gBACb,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,KAAK;aACf;SACJ,CAAC,CAAC;KAgCN;IA9BG,IAAY,UAAU;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAEjD,OAAO;YACH,gBAAgB,EAAE,iCAAiC,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW;YACvF,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mCAAmC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,+BAA+B;SACrH,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DACI,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,eACH,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;aACxB,CAAC,IAED,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,CACxB,6DAAM,KAAK,EAAC,eAAe;YACvB,8DAAa,CACV,CACV,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n * \n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n * \n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n    tag: 'bcm-basic-badge',\n    styleUrl: 'basic-badge.css',\n    shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n    /**\n     * Determines the size of the badge.\n     * @type {'small' | 'medium' | 'large'}\n     * @default 'medium'\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Sets the visual variant of the badge.\n     * 'dot': Appears as a small dot indicator\n     * 'text': Displays content as text\n     * @type {'dot' | 'text'}\n     * @default 'text'\n     */\n    @Prop()\n    variant: 'dot' | 'text' = 'text';\n\n    /**\n     * Defines the color of the badge.\n     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    color?: string;\n\n    /**\n     * Enables soft color mode for the badge.\n     * When true, uses lighter tones and pastel colors.\n     * @type {boolean}\n     * @default false\n     */\n    @Prop()\n    soft: boolean = false;\n\n    /**\n     * Text to be displayed inside the badge.\n     * Used when variant is set to 'text'.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    text?: string;\n\n    private classes = tv({\n        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]',\n        variants: {\n            size: {\n                small: 'px-1 text-size-3',\n                medium: 'py-0.5 px-1.5 text-size-4',\n                large: 'py-1 px-2 text-size-5',\n            },\n            variant: {\n                dot: 'gap-0 p-0 text-[0px] leading-none',\n                text: '',\n            },\n        },\n        compoundVariants: [\n            {\n                variant: 'dot',\n                size: 'small',\n                class: 'size-1',\n            },\n            {\n                variant: 'dot',\n                size: 'medium',\n                class: 'size-1.5',\n            },\n            {\n                variant: 'dot',\n                size: 'large',\n                class: 'size-2',\n            },\n        ],\n        defaultVariants: {\n            variant: 'text',\n            size: 'medium',\n            blink: false,\n        },\n    });\n\n    private get badgeStyle() {\n        if (!this.color) return {};\n        const variantType = this.soft ? 'soft' : 'vivid';\n\n        return {\n            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n        };\n    }\n\n    render() {\n        return (\n            <span\n                part=\"base\"\n                role=\"status\"\n                aria-live=\"polite\"\n                style={this.badgeStyle}\n                class={this.classes({\n                    size: this.size,\n                    variant: this.variant,\n                })}\n            >\n                {this.variant === 'text' && (\n                    <span class=\"badge-content\">\n                        <slot></slot>\n                    </span>\n                )}\n            </span>\n        );\n    }\n}\n"]}

package/dist/collection/components/basic-badge/basic-badge.css

@@ -0,0 +1 @@
+: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)}