bromcom-ui-next 0.1.0

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

@@ -0,0 +1,628 @@
+import { h, Host } from "@stencil/core";
+import { variantOptions } from "./types";
+import { tv } from "tailwind-variants";
+export class BcmButton {
+    constructor() {
+        /** Defines the main visual style of the button */
+        this.kind = 'primary';
+        /** Controls the button size */
+        this.size = 'medium';
+        /** Defines the button's status/state color */
+        this.status = 'default';
+        /** Icon placement (prefix/suffix) */
+        this.iconPosition = 'prefix';
+        /** Icon-only button mode */
+        this.iconOnly = false;
+        /** Full width button */
+        this.fullWidth = false;
+        /** HTML button type */
+        this.type = 'button';
+        /** Loading state */
+        this.loading = false;
+        /** Disabled state */
+        this.disabled = false;
+        /** Active state */
+        this.active = false;
+        this.handleClick = (event) => {
+            if (!this.disabled && !this.loading) {
+                this.bcmClick.emit(event);
+            }
+        };
+        this.handleFocus = (event) => {
+            this.bcmFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.bcmBlur.emit(event);
+        };
+        this.buttonClass = tv({
+            base: 'bcm-button appearance-none inline-flex items-center justify-center border rounded',
+            variants: {
+                size: {
+                    small: 'text-size-4 py-px px-2 min-h-6',
+                    medium: 'text-size-5 py-0.5 px-3 min-h-8',
+                    large: 'text-size-6 py-1 px-3 min-h-10',
+                },
+                kind: {
+                    primary: 'kind-primary',
+                    ghost: 'kind-ghost',
+                    text: 'kind-text',
+                    outline: 'kind-outline',
+                },
+                fullWidth: {
+                    true: 'full-width w-full',
+                },
+                disabled: {
+                    true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',
+                    false: [
+                        'cursor-pointer',
+                        'bg-[--bcm-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',
+                        'hover:bg-[--bcm-button-bg-hover]',
+                        'active:bg-[--bcm-button-bg-active]',
+                        'focus-visible:ring',
+                    ],
+                },
+                loading: {
+                    true: '',
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                kind: 'primary',
+                fullWidth: false,
+                disabled: false,
+                loading: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    get buttonText() {
+        return this.text || (this.variant ? variantOptions[this.variant].text : '');
+    }
+    get buttonIcon() {
+        if (this.variant && variantOptions[this.variant].icon) {
+            return {
+                icon: variantOptions[this.variant].icon,
+                position: variantOptions[this.variant].iconPosition || 'prefix',
+            };
+        }
+        return {
+            icon: this.icon,
+            position: this.iconPosition,
+        };
+    }
+    get buttonStatus() {
+        return this.variant ? variantOptions[this.variant].status : this.status;
+    }
+    get buttonStyles() {
+        const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;
+        const kindStyleMap = {
+            primary: {
+                '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,
+                '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,
+                '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': 'var(--bcm-ui-color-text-base)',
+            },
+            outline: {
+                '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,
+                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
+            },
+            ghost: {
+                '--bcm-button-bg': 'transparent',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
+            },
+            text: {
+                '--bcm-button-bg': 'transparent',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,
+            },
+        };
+        return kindStyleMap[this.kind];
+    }
+    render() {
+        const { icon, position } = this.buttonIcon;
+        return (h(Host, { key: '271947a40a1f166d146ea106530b76744b06650a' }, h("button", { key: '10407570f7bbf2a5293714d040aae3f9404f2be5', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
+                size: this.size,
+                kind: this.kind,
+                fullWidth: this.fullWidth,
+                disabled: this.disabled,
+                loading: this.loading,
+            }) }, this.loading && h("slot", { key: '551abf095e2594ad1e7a8723c14342528cc5bc0c', name: "loading" }), h("span", { key: '36ff02f068fd14ee868977ce819f9dce3c6c881e' }, h("slot", { key: '6e87ba2465b6ef1fa4349640d7b9c10ed7d9b662', name: "prefix" }, position === 'prefix' && icon && h("i", { key: '51062786f476b57af571db5ecb974a35af565a5a', class: ' leading-none ' + icon }))), h("slot", { key: 'a32959e426991f1a117632426688eb997b1e4c27' }, this.buttonText), h("span", { key: 'b6b98cbf6708cef4f4f1fa4f652ab2f680071a45' }, h("slot", { key: 'e2f919eaa52fab225fe625776f03abf526a784b9', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '52b4885d3485aa282cbc1a48d773941d535e1c3c', class: ' leading-none ' + icon }))))));
+    }
+    static get is() { return "bcm-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "kind": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonKind",
+                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | \"text\"",
+                    "references": {
+                        "ButtonKind": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::ButtonKind"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the main visual style of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "kind",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the button size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonStatus",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ButtonStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::ButtonStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the button's status/state color"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "string",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined button variants"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon class name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconPosition",
+                    "resolved": "\"prefix\" | \"suffix\"",
+                    "references": {
+                        "IconPosition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::IconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon placement (prefix/suffix)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'prefix'"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon-only button mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/button/types.ts::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML button type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button text content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Form association"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "form",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Screen reader label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "expanded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Expanded state for expandable content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanded",
+                "reflect": false
+            },
+            "controls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of controlled element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "controls",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmClick",
+                "name": "bcmClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmFocus",
+                "name": "bcmFocus",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmBlur",
+                "name": "bcmBlur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=button.component.js.map

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

@@ -0,0 +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, 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  /** 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    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\n    return kindStyleMap[this.kind];\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border rounded',\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-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',\n            'hover:bg-[--bcm-button-bg-hover]',\n            'active:bg-[--bcm-button-bg-active]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\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          })}\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

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}:host([full-width]){width:100%}.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:.25rem}.border{border-width:1px}.border-\[--bcm-button-border\]{border-color:var(--bcm-button-border)}.bg-\[--bcm-button-bg\]{background-color:var(--bcm-button-bg)}.bg-\[--bcm-ui-color-background-disabled-default\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\[--bcm-button-text\]{color:var(--bcm-button-text)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.hover\:bg-\[--bcm-button-bg-hover\]:hover{background-color:var(--bcm-button-bg-hover)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-\[--bcm-button-bg-active\]:active{background-color:var(--bcm-button-bg-active)}