bromcom-ui-next 0.1.29 → 0.1.30

package/dist/components/bcm-button.js

@@ -1,4 +1,4 @@
-import { B as BcmButton$1, d as defineCustomElement$1 } from './p-DHONP_n4.js';
+import { B as BcmButton$1, d as defineCustomElement$1 } from './p-CsIBm0J5.js';
 
 const BcmButton = BcmButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/bcm-checkbox.js

@@ -5,9 +5,11 @@ import { g as generateId } from './p-IBjzkjef.js';
 const checkboxCss = ".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}.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}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.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)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.bcmCheckboxChange = createEvent(this, "bcmCheckboxChange", 1);
         /**
@@ -211,7 +213,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
     render() {
         const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });
         const internalId = this._id + '-internal-checkbox' || this.name;
-        return (h("div", { key: 'dd513dc1f5ca48b40342559f01f5411dce186897', class: container(), style: this.getStyles(), part: "checkbox-wrapper" }, h("div", { key: '460500fb60dfedcb24f2da714e64172d230d6808', class: "relative inline-flex" }, h("input", { key: '8744b1bd7dd95d39aca60da8f6d2441177bd3631', type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, ref: el => (this.inputElement = el) }), h("div", { key: 'cbe5fc7b8b3148a48aa9dfb8bdc55729f3b0616c', class: checkbox(), onClick: this.handleChange, part: "checkbox" }, this.internalChecked && (h("div", { key: '595670a42f7d7e1a1f389e7d48ca7d3c2a338aaa', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: 'def5450ea02a10465ce19dee7ab2aa72742537aa', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (h("div", { key: '0e656d4eadc2e9544377a92ed69a2f9f79794940', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: '474a74b014fb5235d62b334db50d79a0103d392d', name: "fa-regular fa-minus" }))))), h("label", { key: '87a521b4553c08622f0709cbdeeaec60f859a82f', htmlFor: internalId, class: label(), part: "label" }, this.label)));
+        return (h("div", { key: 'e52d6948890d9ed3781749636d2d5c4aaf836bd6', class: container(), style: this.getStyles(), part: "checkbox-wrapper" }, h("div", { key: '768559392f1a74d7f761687a072c4363f02ea1ee', class: "relative inline-flex" }, h("input", { key: '48bd969ec3eeac967436103080e20105648b379f', type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, ref: el => (this.inputElement = el) }), h("div", { key: '956ddcdc47de3bdb21b38e609411dfcc490f7de0', class: checkbox(), onClick: this.handleChange, part: "checkbox" }, this.internalChecked && (h("div", { key: '4fedb057f2020b5120529aae76e525859a2f61c3', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: 'b6d2949fa71c1110217f9557daaa490de9f0cf1c', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (h("div", { key: '1e7b0480c7ad731875285909d3f6a0dd8ec165f6', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: '63e9c4e8458cd7cdd3c206b908596af0304e8699', name: "fa-regular fa-minus" }))))), h("label", { key: '4e0a434568e51c474a37dd951fdb599e7a506535', htmlFor: internalId, class: label(), part: "label" }, this.label)));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"bcm-checkbox.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /**\n   * Label text to display next to the checkbox\n   */\n  @Prop()\n  label?: string;\n\n  /**\n   * Name attribute for the checkbox when used in a form\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * Determines if the checkbox is in an indeterminate state.\n   * This is useful when some items in a group of checkboxes are selected and others are not.\n   */\n  @Prop({ mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Size variant of the checkbox\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Determines if the checkbox is checked\n   */\n  @Prop({ mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates if the checkbox is in an error state.\n   * This affects the visual styling of the component.\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * Determines if the checkbox is disabled\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Controls the position of the label relative to the checkbox\n   */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /**\n   * Full width checkbox\n   */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * Internal state to track checked status\n   */\n  @State() internalChecked: boolean;\n\n  /**\n   * Event emitted when the checked state changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n  /** Reference to the underlying input element */\n  private inputElement: HTMLInputElement;\n\n  /**\n   * Lifecycle method that runs before the component first renders.\n   * Initializes the internal checked state.\n   */\n  componentWillLoad() {\n    this.internalChecked = this.checked !== undefined ? this.checked : false;\n  }\n\n  /**\n   * Lifecycle method that runs after the component has rendered.\n   * Updates the indeterminate state of the input element.\n   */\n  componentDidLoad() {\n    this.updateIndeterminateState();\n  }\n\n  /**\n   * Watches for changes to the checked prop and updates the internal state\n   * @param newValue The new checked value\n   */\n  @Watch('checked')\n  syncCheckedProp(newValue: boolean | undefined) {\n    if (newValue !== undefined) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  /**\n   * Watches for changes to indeterminate and internalChecked states\n   * Updates the input element accordingly\n   */\n  @Watch('indeterminate')\n  @Watch('internalChecked')\n  updateIndeterminateState() {\n    if (this.inputElement) {\n      this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n    }\n  }\n\n  /**\n   * Handles change events on the checkbox\n   * Updates state and emits the change event\n   */\n  private handleChange = () => {\n    if (this.disabled) return;\n    if (this.inputElement) {\n      this.inputElement.indeterminate = false;\n      this.indeterminate = false;\n      this.internalChecked = !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n      this.bcmCheckboxChange.emit({\n        element: this.inputElement,\n        checked: this.internalChecked,\n      });\n    }\n  };\n\n  /**\n   * Returns the CSS custom properties based on component state\n   * @returns Object with CSS custom properties\n   */\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  /**\n   * Tailwind Variants definition for the component\n   * Configures styling based on component props\n   */\n  private classes = tv(\n    {\n      slots: {\n        container: 'flex items-center bcm-ui-element bcm-checkbox',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n          },\n          medium: {\n            container: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n          },\n          large: {\n            container: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: {\n            container: 'flex-row-reverse',\n          },\n          right: {\n            container: 'flex-row',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        checked: false,\n        disabled: false,\n        error: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n  /**\n   * Renders the checkbox component\n   */\n  render() {\n    const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n    const internalId = this._id + '-internal-checkbox' || this.name;\n\n    return (\n      <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n        <div class=\"relative inline-flex\">\n          <input\n            type=\"checkbox\"\n            role=\"checkbox\"\n            id={internalId}\n            name={this.name}\n            checked={this.internalChecked}\n            indeterminate={this.indeterminate}\n            disabled={this.disabled}\n            class={hiddenInput()}\n            aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n            aria-invalid={this.error}\n            aria-label={this.label || 'Checkbox'}\n            onChange={this.handleChange}\n            ref={el => (this.inputElement = el as HTMLInputElement)}\n          />\n          <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n            {this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n              </div>\n            )}\n            {this.indeterminate && !this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n              </div>\n            )}\n          </div>\n        </div>\n        <label htmlFor={internalId} class={label()} part=\"label\">\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-checkbox.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,84GAA84G;;MCar5G,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASE;;AAEG;AAEH,QAAA,IAAA,CAAA,GAAG,GAAY,UAAU,CAAC,cAAc,CAAC;AAczC;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAE7C;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAExB;;;AAGG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAEtB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAqB,OAAO;AAEzC;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA6DjB;;;AAGG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,gBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,KAAK;AACvC,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,gBAAA,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe;gBAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;AAChD,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,YAAY;oBAC1B,OAAO,EAAE,IAAI,CAAC,eAAe;AAC9B,iBAAA,CAAC;;AAEN,SAAC;AAsCD;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE,CAClB;AACE,YAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,+CAA+C;AAC1D,gBAAA,QAAQ,EAAE;oBACR,6CAA6C;oBAC7C,6CAA6C;oBAC7C,wBAAwB;oBACxB,yCAAyC;oBACzC,mCAAmC;oBACnC,uCAAuC;oBACvC,yCAAyC;oBACzC,6CAA6C;oBAC7C,qCAAqC;oBACrC,uCAAuC;oBACvC,6CAA6C;AAC9C,iBAAA;AACD,gBAAA,aAAa,EAAE,kCAAkC;AACjD,gBAAA,KAAK,EAAE,wBAAwB;AAC/B,gBAAA,WAAW,EAAE,iCAAiC;AAC/C,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE;AACL,wBAAA,SAAS,EAAE,OAAO;AAClB,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,aAAa,EAAE,oBAAoB;AACnC,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,WAAW,EAAE,QAAQ;AACtB,qBAAA;AACD,oBAAA,MAAM,EAAE;AACN,wBAAA,SAAS,EAAE,SAAS;AACpB,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,aAAa,EAAE,yBAAyB;AACxC,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,WAAW,EAAE,QAAQ;AACtB,qBAAA;AACD,oBAAA,KAAK,EAAE;AACL,wBAAA,SAAS,EAAE,OAAO;AAClB,wBAAA,QAAQ,EAAE,aAAa;AACvB,wBAAA,aAAa,EAAE,oBAAoB;AACnC,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,WAAW,EAAE,aAAa;AAC3B,qBAAA;AACF,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,QAAQ,EAAE,+EAA+E;AACzF,wBAAA,KAAK,EAAE,wCAAwC;AAC/C,wBAAA,aAAa,EAAE,qBAAqB;AACpC,wBAAA,WAAW,EAAE,oBAAoB;AAClC,qBAAA;AACD,oBAAA,KAAK,EAAE;AACL,wBAAA,SAAS,EAAE,gBAAgB;AAC3B,wBAAA,QAAQ,EAAE,gBAAgB;AAC1B,wBAAA,KAAK,EAAE,2BAA2B;AAClC,wBAAA,aAAa,EAAE,iBAAiB;AAChC,wBAAA,WAAW,EAAE,gBAAgB;AAC9B,qBAAA;AACF,iBAAA;AACD,gBAAA,aAAa,EAAE;AACb,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,kBAAkB;AAC9B,qBAAA;AACD,oBAAA,KAAK,EAAE;AACL,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,aAAa,EAAE,OAAO;AACvB,aAAA;AACF,SAAA,EACD,EAAE,OAAO,EAAE,KAAK,EAAE,CACnB;AA8CF;AA/NC;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK;;AAG1E;;;AAGG;IACH,gBAAgB,GAAA;QACd,IAAI,CAAC,wBAAwB,EAAE;;AAGjC;;;AAGG;AAEH,IAAA,eAAe,CAAC,QAA6B,EAAA;AAC3C,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;;;AAInC;;;AAGG;IAGH,wBAAwB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,eAAe;YAC7E,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;;;AAsBpD;;;AAGG;IACK,SAAS,GAAA;AACf,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,iBAAiB,EAAE,gDAAgD;AACnE,YAAA,mBAAmB,EAAE,gDAAgD;AACrE,YAAA,gBAAgB,EAAE,oCAAoC;AACtD,YAAA,sBAAsB,EAAE,oCAAoC;AAC5D,YAAA,eAAe,EAAE,2CAA2C;SAC7D;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,iBAAiB,EAAE,8CAA8C;AACjE,YAAA,mBAAmB,EAAE,oDAAoD;AACzE,YAAA,gBAAgB,EAAE,kCAAkC;AACpD,YAAA,sBAAsB,EAAE,kCAAkC;AAC1D,YAAA,eAAe,EAAE,kCAAkC;SACpD;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,iBAAiB,EAAE,iDAAiD;AACpE,YAAA,mBAAmB,EAAE,iDAAiD;AACtE,YAAA,gBAAgB,EAAE,qCAAqC;AACvD,YAAA,eAAe,EAAE,qCAAqC;AACtD,YAAA,sBAAsB,EAAE,qCAAqC;SAC9D;QAED,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,aAAa,CAAA,GACZ,IAAI,CAAC,KAAK,GAAG,WAAW,GAAG,EAAE,EAAC,GAC9B,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,EAAE,EACvC;;AAwFJ;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QAChK,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,oBAAoB,IAAI,IAAI,CAAC,IAAI;AAE/D,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAC,kBAAkB,EAAA,EACvE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,WAAW,EAAE,kBACN,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,OAAO,EACtE,cAAA,EAAA,IAAI,CAAC,KAAK,EAAA,YAAA,EACZ,IAAI,CAAC,KAAK,IAAI,UAAU,EACpC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACvD,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,UAAU,EAAA,EAChE,IAAI,CAAC,eAAe,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,qBAAqB,EAAA,CAAY,CAC5C,CACP,EACA,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,eAAe,KAC1C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,qBAAqB,GAAY,CAC5C,CACP,CACG,CACF,EACN,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAC,OAAO,IACrD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /**\n   * Label text to display next to the checkbox\n   */\n  @Prop()\n  label?: string;\n\n  /**\n   * Name attribute for the checkbox when used in a form\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * Determines if the checkbox is in an indeterminate state.\n   * This is useful when some items in a group of checkboxes are selected and others are not.\n   */\n  @Prop({ mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Size variant of the checkbox\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Determines if the checkbox is checked\n   */\n  @Prop({ mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates if the checkbox is in an error state.\n   * This affects the visual styling of the component.\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * Determines if the checkbox is disabled\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Controls the position of the label relative to the checkbox\n   */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /**\n   * Full width checkbox\n   */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * Internal state to track checked status\n   */\n  @State() internalChecked: boolean;\n\n  /**\n   * Event emitted when the checked state changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n  /** Reference to the underlying input element */\n  private inputElement: HTMLInputElement;\n\n  /**\n   * Lifecycle method that runs before the component first renders.\n   * Initializes the internal checked state.\n   */\n  componentWillLoad() {\n    this.internalChecked = this.checked !== undefined ? this.checked : false;\n  }\n\n  /**\n   * Lifecycle method that runs after the component has rendered.\n   * Updates the indeterminate state of the input element.\n   */\n  componentDidLoad() {\n    this.updateIndeterminateState();\n  }\n\n  /**\n   * Watches for changes to the checked prop and updates the internal state\n   * @param newValue The new checked value\n   */\n  @Watch('checked')\n  syncCheckedProp(newValue: boolean | undefined) {\n    if (newValue !== undefined) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  /**\n   * Watches for changes to indeterminate and internalChecked states\n   * Updates the input element accordingly\n   */\n  @Watch('indeterminate')\n  @Watch('internalChecked')\n  updateIndeterminateState() {\n    if (this.inputElement) {\n      this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n    }\n  }\n\n  /**\n   * Handles change events on the checkbox\n   * Updates state and emits the change event\n   */\n  private handleChange = () => {\n    if (this.disabled) return;\n    if (this.inputElement) {\n      this.inputElement.indeterminate = false;\n      this.indeterminate = false;\n      this.internalChecked = !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n      this.bcmCheckboxChange.emit({\n        element: this.inputElement,\n        checked: this.internalChecked,\n      });\n    }\n  };\n\n  /**\n   * Returns the CSS custom properties based on component state\n   * @returns Object with CSS custom properties\n   */\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  /**\n   * Tailwind Variants definition for the component\n   * Configures styling based on component props\n   */\n  private classes = tv(\n    {\n      slots: {\n        container: 'flex items-center bcm-ui-element bcm-checkbox',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n          },\n          medium: {\n            container: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n          },\n          large: {\n            container: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: {\n            container: 'flex-row-reverse',\n          },\n          right: {\n            container: 'flex-row',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        checked: false,\n        disabled: false,\n        error: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n  /**\n   * Renders the checkbox component\n   */\n  render() {\n    const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n    const internalId = this._id + '-internal-checkbox' || this.name;\n\n    return (\n      <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n        <div class=\"relative inline-flex\">\n          <input\n            type=\"checkbox\"\n            role=\"checkbox\"\n            id={internalId}\n            name={this.name}\n            checked={this.internalChecked}\n            indeterminate={this.indeterminate}\n            disabled={this.disabled}\n            class={hiddenInput()}\n            aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n            aria-invalid={this.error}\n            aria-label={this.label || 'Checkbox'}\n            onChange={this.handleChange}\n            ref={el => (this.inputElement = el as HTMLInputElement)}\n          />\n          <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n            {this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n              </div>\n            )}\n            {this.indeterminate && !this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n              </div>\n            )}\n          </div>\n        </div>\n        <label htmlFor={internalId} class={label()} part=\"label\">\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-chip.js

@@ -12,9 +12,11 @@ const STATUS_COLORS = {
 const chipCss = ":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.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}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-text)}.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)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";
 
 const BcmChip$1 = /*@__PURE__*/ proxyCustomElement(class BcmChip extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.bcmDismiss = createEvent(this, "bcmDismiss", 1);
         /** Chip size variant */
@@ -118,7 +120,7 @@ const BcmChip$1 = /*@__PURE__*/ proxyCustomElement(class BcmChip extends H {
         }
     }
     render() {
-        return (h("div", { key: 'd2692652edd6275d143e7ddffbc789d0b5315027', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '8d3abf8a40a30dc93003077e52edc81062f10424' }), this.dismissible && h("bcm-icon", { key: '9914f1803e5d6feece7221e73b041d46f8237e95', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
+        return (h("div", { key: 'e8cd8ebe6fbec497b66bf79d7d817bfdbe46e328', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '781a67a212cd80c7698292b29775b9f6c3401f76' }), this.dismissible && h("bcm-icon", { key: '17884c6b291c448c846773506ecf479759bdbdb5', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
     static get style() { return chipCss; }
 }, [257, "bcm-chip", {

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

@@ -1 +1 @@
-{"file":"bcm-chip.js","mappings":"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","names":["BcmChip","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary';\n\nexport const STATUS_COLORS = {\n  info: 'blue',\n  error: 'red',\n  warning: 'amber',\n  success: 'green',\n  primary: 'primary',\n} as const;\n",":host {\n  display: inline-block;\n  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-chip-text: var(--bcm-ui-color-text-default);\n  --bcm-chip-border: var(--bcm-ui-color-border-default);\n  --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n  --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n  --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n *   Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n *   Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n  tag: 'bcm-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n  /** Chip size variant */\n  @Prop()\n  size?: ChipSize = 'medium';\n\n  /** Chip style variant */\n  @Prop()\n  kind?: ChipKind = 'filled';\n\n  /** Chip status */\n  @Prop()\n  status?: ChipStatus = 'default';\n\n  /** Whether chip can be dismissed */\n  @Prop()\n  dismissible?: boolean = false;\n\n  /** Whether chip is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** Chip color variant */\n  @Prop()\n  color?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmDismiss: EventEmitter<void>;\n\n  private chipClass = tv(\n    {\n      base: [\n        'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n        'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n        'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n      ],\n      variants: {\n        size: {\n          small: 'small py-px text-size-3',\n          medium: 'medium py-0.5 text-size-4',\n          large: 'large py-1 text-size-5',\n        },\n        kind: {\n          filled: 'filled border-transparent',\n          outlined: 'outlined',\n          text: 'text border-none',\n        },\n        disabled: {\n          true: 'cursor-not-allowed',\n        },\n      },\n    },\n    { twMerge: false },\n  );\n\n  private get chipStyle() {\n    let _color = this.color;\n\n    if (this.disabled) {\n      return {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      };\n    }\n\n    if (this.status !== 'default') {\n      _color = STATUS_COLORS[this.status];\n    }\n\n    const styles = {\n      filled: {\n        '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n    };\n\n    const defaultStyles = {\n      filled: {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n    };\n\n    return _color ? styles[this.kind] : defaultStyles[this.kind];\n  }\n\n  private handleDismiss() {\n    if (!this.disabled) {\n      this.bcmDismiss.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        style={this.chipStyle}\n        class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n        {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-chip.js","mappings":"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","names":["BcmChip","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary';\n\nexport const STATUS_COLORS = {\n  info: 'blue',\n  error: 'red',\n  warning: 'amber',\n  success: 'green',\n  primary: 'primary',\n} as const;\n",":host {\n  display: inline-block;\n  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-chip-text: var(--bcm-ui-color-text-default);\n  --bcm-chip-border: var(--bcm-ui-color-border-default);\n  --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n  --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n  --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n *   Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n *   Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n  tag: 'bcm-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n  /** Chip size variant */\n  @Prop()\n  size?: ChipSize = 'medium';\n\n  /** Chip style variant */\n  @Prop()\n  kind?: ChipKind = 'filled';\n\n  /** Chip status */\n  @Prop()\n  status?: ChipStatus = 'default';\n\n  /** Whether chip can be dismissed */\n  @Prop()\n  dismissible?: boolean = false;\n\n  /** Whether chip is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** Chip color variant */\n  @Prop()\n  color?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmDismiss: EventEmitter<void>;\n\n  private chipClass = tv(\n    {\n      base: [\n        'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n        'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n        'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n      ],\n      variants: {\n        size: {\n          small: 'small py-px text-size-3',\n          medium: 'medium py-0.5 text-size-4',\n          large: 'large py-1 text-size-5',\n        },\n        kind: {\n          filled: 'filled border-transparent',\n          outlined: 'outlined',\n          text: 'text border-none',\n        },\n        disabled: {\n          true: 'cursor-not-allowed',\n        },\n      },\n    },\n    { twMerge: false },\n  );\n\n  private get chipStyle() {\n    let _color = this.color;\n\n    if (this.disabled) {\n      return {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      };\n    }\n\n    if (this.status !== 'default') {\n      _color = STATUS_COLORS[this.status];\n    }\n\n    const styles = {\n      filled: {\n        '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n    };\n\n    const defaultStyles = {\n      filled: {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n    };\n\n    return _color ? styles[this.kind] : defaultStyles[this.kind];\n  }\n\n  private handleDismiss() {\n    if (!this.disabled) {\n      this.bcmDismiss.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        style={this.chipStyle}\n        class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n        {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-divider.js

@@ -1,12 +1,14 @@
 import { p as proxyCustomElement, H, h } from './index.js';
 import { t as tv } from './p-CEcVC0yX.js';
 
-const dividerCss = ".block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.static{position:static}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\\[1px\\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\\[--bcm-divider-border\\]{border-color:var(--bcm-divider-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const dividerCss = ".block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\\[1px\\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\\[--bcm-divider-border\\]{border-color:var(--bcm-divider-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 
 const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**
          * @prop {('horizontal'|'vertical')} direction
@@ -64,7 +66,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {
         });
     }
     render() {
-        return (h("div", { key: '36b2afa1c40326bf3d2c7ba1431334766d6d3aa0', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
+        return (h("div", { key: '2e7acfb78fe85f12730cdb7671e534afea573451', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
                 direction: this.direction,
                 variant: this.variant,
                 size: this.size,

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

@@ -1 +1 @@
-{"file":"bcm-divider.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,itBAAitB;;MCevtB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAME;;;;;;AAMG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAEnD;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErC,QAAA,IAAY,CAAA,YAAA,GAAG,EAAE,CACvB;AACE,YAAA,IAAI,EAAE,+BAA+B;AACrC,YAAA,QAAQ,EAAE;AACR,gBAAA,SAAS,EAAE;AACT,oBAAA,UAAU,EAAE,iBAAiB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,eAAe;AACxB,iBAAA;AACD,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,UAAU;AAClB,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,IAAI,EAAE,QAAQ;AACf,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAeF;IAbC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n */\n@Component({\n  tag: 'bcm-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * @prop {('horizontal'|'vertical')} direction\n   * @description Determines the orientation of the divider\n   * @default 'horizontal'\n   * @example\n   * <bcm-divider direction=\"vertical\" />\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * @prop {('solid'|'dashed'|'dotted')} variant\n   * @description Sets the border style of the divider\n   * @default 'solid'\n   * @example\n   * <bcm-divider variant=\"dashed\" />\n   */\n  @Prop()\n  variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /**\n   * @prop {('small'|'medium'|'large')} size\n   * @description Controls the thickness of the divider\n   * @default 'medium'\n   * @values\n   * - small: 1px border\n   * - medium: 2px border\n   * - large: 4px border\n   * @example\n   * <bcm-divider size=\"large\" />\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  private dividerClass = tv(\n    {\n      base: 'border-[--bcm-divider-border]',\n      variants: {\n        direction: {\n          horizontal: 'w-full border-t',\n          vertical: 'h-full border-l',\n        },\n        variant: {\n          solid: 'border-solid',\n          dashed: 'border-dashed',\n          dotted: 'border-dotted',\n        },\n        size: {\n          small: 'border-[1px]',\n          medium: 'border-2',\n          large: 'border-4',\n        },\n      },\n      defaultVariants: {\n        direction: 'horizontal',\n        variant: 'solid',\n        size: 'medium',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation={this.direction}\n        class={this.dividerClass({\n          direction: this.direction,\n          variant: this.variant,\n          size: this.size,\n        })}\n      ></div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-divider.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,yrBAAyrB;;MCe/rB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;AAMG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAEnD;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErC,QAAA,IAAY,CAAA,YAAA,GAAG,EAAE,CACvB;AACE,YAAA,IAAI,EAAE,+BAA+B;AACrC,YAAA,QAAQ,EAAE;AACR,gBAAA,SAAS,EAAE;AACT,oBAAA,UAAU,EAAE,iBAAiB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,eAAe;AACxB,iBAAA;AACD,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,UAAU;AAClB,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,IAAI,EAAE,QAAQ;AACf,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAeF;IAbC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n */\n@Component({\n  tag: 'bcm-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * @prop {('horizontal'|'vertical')} direction\n   * @description Determines the orientation of the divider\n   * @default 'horizontal'\n   * @example\n   * <bcm-divider direction=\"vertical\" />\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * @prop {('solid'|'dashed'|'dotted')} variant\n   * @description Sets the border style of the divider\n   * @default 'solid'\n   * @example\n   * <bcm-divider variant=\"dashed\" />\n   */\n  @Prop()\n  variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /**\n   * @prop {('small'|'medium'|'large')} size\n   * @description Controls the thickness of the divider\n   * @default 'medium'\n   * @values\n   * - small: 1px border\n   * - medium: 2px border\n   * - large: 4px border\n   * @example\n   * <bcm-divider size=\"large\" />\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  private dividerClass = tv(\n    {\n      base: 'border-[--bcm-divider-border]',\n      variants: {\n        direction: {\n          horizontal: 'w-full border-t',\n          vertical: 'h-full border-l',\n        },\n        variant: {\n          solid: 'border-solid',\n          dashed: 'border-dashed',\n          dotted: 'border-dotted',\n        },\n        size: {\n          small: 'border-[1px]',\n          medium: 'border-2',\n          large: 'border-4',\n        },\n      },\n      defaultVariants: {\n        direction: 'horizontal',\n        variant: 'solid',\n        size: 'medium',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation={this.direction}\n        class={this.dividerClass({\n          direction: this.direction,\n          variant: this.variant,\n          size: this.size,\n        })}\n      ></div>\n    );\n  }\n}\n"],"version":3}