bromcom-ui-next 0.1.20 → 0.1.22

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { variantOptions } from "./types";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 export class BcmButton {
     constructor() {
         /** Defines the main visual style of the button */
@@ -148,14 +148,14 @@ export class BcmButton {
     }
     render() {
         const { icon, position } = this.buttonIcon;
-        return (h(Host, { key: '821f52c3a042fed2dce63e90152aebe3e9f40dc5' }, h("button", { key: '429988208144ebd9b52f1543825860e9fdf6c538', 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({
+        return (h(Host, { key: '33e438220fdb261ff87289f8dcbaa7e0601d73c1' }, h("button", { key: '4fb4d22a44bac12b3780f9570c734f60fdaba788', 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,
                 position: this.position,
-            }) }, this.loading && h("slot", { key: '525e1f9ffdc301e0bba2939d9fece560b377d9a3', name: "loading" }), h("span", { key: '530f53a3d0f483555752f5ac95d5f029faf03a8d' }, h("slot", { key: '61b27a37dce9588633f45f18d025c207ee9d23f7', name: "prefix" }, position === 'prefix' && icon && h("i", { key: '6b0d757356f94f0d1ed4731175f2340dfdb3ba45', class: ' leading-none ' + icon }))), h("slot", { key: '8b014d1f25d7c8387c6a3b18474207695a911e12' }, this.buttonText), h("span", { key: '9e9c42c69be3891d2720dbd9882ea418a90802b8' }, h("slot", { key: 'fc676b39c8c79225d09c9cd18506087bef811acc', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '0ad46cc5204af2a6525cc0156d828c57bd5078a5', class: ' leading-none ' + icon }))))));
+            }) }, this.loading && h("slot", { key: 'fa8dcbcba338f94700842fd0482d0261c9a1d3e3', name: "loading" }), h("span", { key: '345162b4ad0034d5081dee0438ceeefe4930ecfb' }, h("slot", { key: 'c65c9aa07fd2f159426192fc6239c394ee6ec58d', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'c94e32a5d308ba3ad98ac10239fc9a155f47e2ac', class: ' leading-none ' + icon }))), h("slot", { key: '171402bb9251492c7e5b0cf572fb0e2ae62a6add' }, this.buttonText), h("span", { key: 'ae3c5a885029b3d4c54e5ca21ac22adffa26b013' }, h("slot", { key: 'f80819d122624bb279d19822278c8e651dec27c7', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '69631e99a8b7f47dd1d00984f582ec6e7b5433e8', class: ' leading-none ' + icon }))))));
     }
     static get is() { return "bcm-button"; }
     static get encapsulation() { return "shadow"; }
@@ -173,6 +173,7 @@ export class BcmButton {
         return {
             "kind": {
                 "type": "string",
+                "attribute": "kind",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonKind",
@@ -193,12 +194,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "kind",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonSize",
@@ -219,12 +220,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "status": {
                 "type": "string",
+                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonStatus",
@@ -245,12 +246,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "status",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonVariant",
@@ -271,11 +272,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonPosition",
@@ -296,11 +297,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": true
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -315,11 +316,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "iconPosition": {
                 "type": "string",
+                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "IconPosition",
@@ -340,12 +341,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-position",
                 "reflect": false,
                 "defaultValue": "'prefix'"
             },
             "iconOnly": {
                 "type": "boolean",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -360,12 +361,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-only",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -380,12 +381,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
@@ -406,12 +407,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -426,12 +427,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -446,12 +447,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -466,11 +467,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -485,12 +486,12 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -505,11 +506,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -524,11 +525,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -543,11 +544,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -562,11 +563,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "expanded": {
                 "type": "string",
+                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -581,11 +582,11 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
                 "reflect": false
             },
             "controls": {
                 "type": "string",
+                "attribute": "controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -600,7 +601,6 @@ export class BcmButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controls",
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant].icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    // These are the internal default styles based on component props (kind, status)\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n    const internalDefaultStyles = kindStyleMap[this.kind];\n\n    // These are the \"final\" CSS custom properties used by the component's styling.\n    // They use the \"--bcm-button-custom-...\" token if provided by the user,\n    // otherwise, they fall back to the internal \"--bcm-button-...\" style defined above.\n    const finalEffectiveStyles = {\n      '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,\n      '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,\n      '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,\n      '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,\n      '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,\n    };\n\n    // return kindStyleMap[this.kind];\n\n    return {\n      ...internalDefaultStyles, // Provides the fallback values like --bcm-button-text\n      ...finalEffectiveStyles, // Defines the --bcm-final-xxx tokens that handle the override logic\n    };\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',\n            'hover:bg-[--bcm-final-hover-bg-color]',\n            'active:bg-[--bcm-final-active-bg-color]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant].icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    // These are the internal default styles based on component props (kind, status)\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n    const internalDefaultStyles = kindStyleMap[this.kind];\n\n    // These are the \"final\" CSS custom properties used by the component's styling.\n    // They use the \"--bcm-button-custom-...\" token if provided by the user,\n    // otherwise, they fall back to the internal \"--bcm-button-...\" style defined above.\n    const finalEffectiveStyles = {\n      '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,\n      '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,\n      '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,\n      '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,\n      '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,\n    };\n\n    // return kindStyleMap[this.kind];\n\n    return {\n      ...internalDefaultStyles, // Provides the fallback values like --bcm-button-text\n      ...finalEffectiveStyles, // Defines the --bcm-final-xxx tokens that handle the override logic\n    };\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',\n            'hover:bg-[--bcm-final-hover-bg-color]',\n            'active:bg-[--bcm-final-active-bg-color]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/button.css

@@ -1 +1 @@
-.relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.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:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--bcm-final-border-color\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\[--bcm-final-bg-color\]{background-color:var(--bcm-final-bg-color)}.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-final-text-color\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.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)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\:bg-\[--bcm-final-hover-bg-color\]:hover{background-color:var(--bcm-final-hover-bg-color)}.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-final-active-bg-color\]:active{background-color:var(--bcm-final-active-bg-color)}.flex{display:flex}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.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)}.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}.absolute{position:absolute}.z-\[9999\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\[--popover-radius\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\[--text-color\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}
+.relative{position:relative}:host{display:inline-flex;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.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:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--bcm-final-border-color\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\[--bcm-final-bg-color\]{background-color:var(--bcm-final-bg-color)}.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-final-text-color\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.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)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\:bg-\[--bcm-final-hover-bg-color\]:hover{background-color:var(--bcm-final-hover-bg-color)}.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-final-active-bg-color\]:active{background-color:var(--bcm-final-active-bg-color)}.flex{display:flex}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.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)}.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}.absolute{position:absolute}.z-\[9999\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\[--popover-radius\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--popover-bg\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\[--text-color\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}

package/dist/collection/components/button-group/button-group.component.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 export class BcmButtonGroup {
     constructor() {
         /** Button orientation */
@@ -74,10 +74,10 @@ export class BcmButtonGroup {
         });
     }
     render() {
-        return (h(Host, { key: '12320236b3364ea1322ce3ccaced89e17f527657' }, h("div", { key: '24e1acb79b8dbae8ce504f7aa2ec91e4cf799788', class: this.buttonGroupClass({
+        return (h(Host, { key: 'd42d48fa72f0956f51e627a96fa880960150bb0d' }, h("div", { key: '470a6acf604f16ba3d63f55b5683177e3cf7fabe', class: this.buttonGroupClass({
                 orientation: this.orientation,
                 fullWidth: this.fullWidth,
-            }) }, h("slot", { key: '18e1e423bd5e2743f83817ef5d3f1e0f3dfa648f' }))));
+            }) }, h("slot", { key: 'dc17cdcd5d5c1ce5084f7739dcb954d4e58ee4fb' }))));
     }
     static get is() { return "bcm-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -95,6 +95,7 @@ export class BcmButtonGroup {
         return {
             "kind": {
                 "type": "string",
+                "attribute": "kind",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonKind",
@@ -115,11 +116,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "kind",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonSize",
@@ -140,11 +141,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "status": {
                 "type": "string",
+                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonStatus",
@@ -165,11 +166,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "status",
                 "reflect": false
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -184,11 +185,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": true
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -203,11 +204,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -222,11 +223,11 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "orientation": {
                 "type": "string",
+                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -241,7 +242,6 @@ export class BcmButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "orientation",
                 "reflect": true,
                 "defaultValue": "'horizontal'"
             }

package/dist/collection/components/button-group/button-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.component.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button-group.component.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}