bromcom-ui-next 0.1.4 → 0.1.6

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

@@ -0,0 +1,252 @@
+import { h, Host } from "@stencil/core";
+import { tv } from "tailwind-variants";
+export class BcmButtonGroup {
+    constructor() {
+        /** Button orientation */
+        this.orientation = 'horizontal';
+        this.buttonGroupClass = tv({
+            base: 'bcm-button-group',
+            variants: {
+                orientation: {
+                    horizontal: 'flex flex-row',
+                    vertical: 'flex flex-col',
+                },
+                fullWidth: {
+                    true: 'w-full',
+                },
+            },
+            defaultVariants: {
+                orientation: 'horizontal',
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    componentDidLoad() {
+        this.applyPropertiesToButtons();
+        this.setButtonPositions();
+    }
+    componentDidUpdate() {
+        this.applyPropertiesToButtons();
+        this.setButtonPositions();
+    }
+    applyPropertiesToButtons() {
+        const buttons = this.host.querySelectorAll('bcm-button');
+        buttons.forEach(button => {
+            if (this.kind !== undefined)
+                button.kind = this.kind;
+            if (this.size !== undefined)
+                button.size = this.size;
+            if (this.status !== undefined)
+                button.status = this.status;
+            if (this.fullWidth !== undefined)
+                button.fullWidth = this.fullWidth;
+            if (this.loading !== undefined)
+                button.loading = this.loading;
+            if (this.disabled !== undefined)
+                button.disabled = this.disabled;
+            if (this.orientation === 'vertical') {
+                button.classList.add('orientation-vertical');
+            }
+            else {
+                button.classList.remove('orientation-vertical');
+            }
+        });
+    }
+    setButtonPositions() {
+        const buttons = this.host.querySelectorAll('bcm-button');
+        const totalButtons = buttons.length;
+        if (totalButtons === 0)
+            return;
+        buttons.forEach((button, index) => {
+            if (totalButtons === 1) {
+                button.position = null;
+            }
+            else if (index === 0) {
+                button.position = 'first';
+            }
+            else if (index === totalButtons - 1) {
+                button.position = 'last';
+            }
+            else {
+                button.position = 'middle';
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '46b90f2d30cb7a20009a81264510d49a3afc5e09' }, h("div", { key: '270f01895044e9f891b7ba783f4f9b07308d9cfe', class: this.buttonGroupClass({
+                orientation: this.orientation,
+                fullWidth: this.fullWidth,
+            }) }, h("slot", { key: '3e27849d072eafb554b1505ece75c24d48ec127b' }))));
+    }
+    static get is() { return "bcm-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "kind": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonKind",
+                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | \"text\"",
+                    "references": {
+                        "ButtonKind": {
+                            "location": "import",
+                            "path": "../button/types",
+                            "id": "src/components/button/types.ts::ButtonKind"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the main visual style of buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "kind",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "import",
+                            "path": "../button/types",
+                            "id": "src/components/button/types.ts::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the button size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonStatus",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ButtonStatus": {
+                            "location": "import",
+                            "path": "../button/types",
+                            "id": "src/components/button/types.ts::ButtonStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the button's status/state color"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": true
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "orientation",
+                "reflect": true,
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=button-group.component.js.map

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

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

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

@@ -0,0 +1 @@
+.block{display:block}.flex{display:flex}:host{display:block}.bcm-button-group{display:flex}.static{position:static}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.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)}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/button-group/types.ts"],"names":[],"mappings":"","sourcesContent":["export type ButtonGroupGap = 'small' | 'medium' | 'large';\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\n"]}