@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-button/bh-button.js

@@ -0,0 +1,350 @@
+import { h } from "@stencil/core";
+export class BhButton {
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The kind/semantic meaning of the button
+     */
+    kind = 'default';
+    /**
+     * Icon position relative to the label
+     */
+    icon = 'none';
+    /**
+     * The size of the button
+     */
+    size = 'md';
+    /**
+     * Fallback text label (used only if no slot content is provided)
+     */
+    label;
+    /**
+     * Material Symbols icon name (e.g., 'add', 'edit', 'delete')
+     */
+    iconName;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    getIconSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'icon-md';
+            case 'lg':
+                return 'icon-lg';
+            default:
+                return 'icon-md';
+        }
+    }
+    getTextSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'text-sm';
+            case 'lg':
+                return 'text-md';
+            default:
+                return 'text-sm';
+        }
+    }
+    getLoaderSize() {
+        switch (this.size) {
+            case 'xs':
+            case 'sm':
+                return 'sm';
+            default:
+                return 'sm';
+        }
+    }
+    getLoaderVariant() {
+        // Primary buttons (all kinds) have dark background, so use white spinner
+        return this.hierarchy === 'primary' ? 'white' : 'default';
+    }
+    render() {
+        const showLabel = this.icon !== 'only';
+        const showLeadingIcon = this.icon === 'leading' && (this.iconName || this.loading);
+        const showTrailingIcon = this.icon === 'trailing' && this.iconName && !this.loading;
+        const showOnlyIcon = this.icon === 'only' && (this.iconName || this.loading);
+        const buttonClasses = {
+            btn: true,
+            [`btn-${this.hierarchy}`]: true,
+            [`btn-${this.kind}`]: true,
+            [`btn-${this.size}`]: true,
+            [`btn-icon-${this.icon}`]: true,
+            'btn-disabled': this.disabled,
+            'btn-loading': this.loading,
+        };
+        return (h("button", { key: 'f2f54633cb42a7fea15c38aa8bc24be085320dc9', type: this.type, class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, part: "button" }, showLeadingIcon && (h("span", { key: '682a4704e4f874b4f3d051aab4738829cbd47778', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showOnlyIcon && (h("span", { key: '767e0ee41843e2ef8b3a45ec82f15602848ad751', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showLabel && (h("span", { key: 'bb2ddbcf7eb35dd5af688a6fc6d61d07f67d90ba', class: `btn-label ${this.getTextSizeClass()}` }, h("slot", { key: '010690eeab4cea1205d2ebca5cc2e1bfc95048c7' }, this.label))), showTrailingIcon && (h("span", { key: '9de8df1ab10e9035affbd766fea95896762e2bca', class: `btn-icon ${this.getIconSizeClass()}` }, h("span", { key: 'b50370274c0513a7885eae4bf40235c3e7e245aa', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
+    }
+    static get is() { return "bh-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hierarchy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonHierarchy",
+                    "resolved": "\"primary\" | \"quaternary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "ButtonHierarchy": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-button/bh-button.tsx",
+                            "id": "src/components/bh-button/bh-button.tsx::ButtonHierarchy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual hierarchy of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hierarchy",
+                "defaultValue": "'primary'"
+            },
+            "kind": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonKind",
+                    "resolved": "\"default\" | \"destructive\" | \"success\"",
+                    "references": {
+                        "ButtonKind": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-button/bh-button.tsx",
+                            "id": "src/components/bh-button/bh-button.tsx::ButtonKind"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The kind/semantic meaning of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "kind",
+                "defaultValue": "'default'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonIconPosition",
+                    "resolved": "\"leading\" | \"none\" | \"only\" | \"trailing\"",
+                    "references": {
+                        "ButtonIconPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-button/bh-button.tsx",
+                            "id": "src/components/bh-button/bh-button.tsx::ButtonIconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position relative to the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'none'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-button/bh-button.tsx",
+                            "id": "src/components/bh-button/bh-button.tsx::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fallback text label (used only if no slot content is provided)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Material Symbols icon name (e.g., 'add', 'edit', 'delete')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is in a loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-button/bh-button.tsx",
+                            "id": "src/components/bh-button/bh-button.tsx::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of button for form submission\n- 'button': No form submission (default)\n- 'submit': Submits the form\n- 'reset': Resets the form"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhClick",
+                "name": "bhClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-button.js.map

package/collection/components/bh-button/bh-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-button.js","sourceRoot":"","sources":["../../../src/components/bh-button/bh-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonHierarchy =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\nexport type ButtonIconPosition = 'none' | 'leading' | 'trailing' | 'only';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonKind = 'default' | 'destructive' | 'success';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n  tag: 'bh-button',\n  styleUrl: 'bh-button.css',\n  shadow: true,\n})\nexport class BhButton {\n  /**\n   * The visual hierarchy of the button\n   */\n  @Prop() hierarchy: ButtonHierarchy = 'primary';\n\n  /**\n   * The kind/semantic meaning of the button\n   */\n  @Prop() kind: ButtonKind = 'default';\n\n  /**\n   * Icon position relative to the label\n   */\n  @Prop() icon: ButtonIconPosition = 'none';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: ButtonSize = 'md';\n\n  /**\n   * Fallback text label (used only if no slot content is provided)\n   */\n  @Prop() label?: string;\n\n  /**\n   * Material Symbols icon name (e.g., 'add', 'edit', 'delete')\n   */\n  @Prop() iconName?: string;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the button is in a loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The type of button for form submission\n   * - 'button': No form submission (default)\n   * - 'submit': Submits the form\n   * - 'reset': Resets the form\n   */\n  @Prop() type: ButtonType = 'button';\n\n  /**\n   * Emitted when the button is clicked\n   */\n  @Event() bhClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (!this.disabled && !this.loading) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private getIconSizeClass(): string {\n    switch (this.size) {\n      case 'sm':\n      case 'md':\n        return 'icon-md';\n      case 'lg':\n        return 'icon-lg';\n      default:\n        return 'icon-md';\n    }\n  }\n\n  private getTextSizeClass(): string {\n    switch (this.size) {\n      case 'sm':\n      case 'md':\n        return 'text-sm';\n      case 'lg':\n        return 'text-md';\n      default:\n        return 'text-sm';\n    }\n  }\n\n  private getLoaderSize(): 'sm' | 'md' {\n    switch (this.size) {\n      case 'xs':\n      case 'sm':\n        return 'sm';\n      default:\n        return 'sm';\n    }\n  }\n\n  private getLoaderVariant(): 'default' | 'white' {\n    // Primary buttons (all kinds) have dark background, so use white spinner\n    return this.hierarchy === 'primary' ? 'white' : 'default';\n  }\n\n  render() {\n    const showLabel = this.icon !== 'only';\n    const showLeadingIcon =\n      this.icon === 'leading' && (this.iconName || this.loading);\n    const showTrailingIcon =\n      this.icon === 'trailing' && this.iconName && !this.loading;\n    const showOnlyIcon =\n      this.icon === 'only' && (this.iconName || this.loading);\n\n    const buttonClasses = {\n      btn: true,\n      [`btn-${this.hierarchy}`]: true,\n      [`btn-${this.kind}`]: true,\n      [`btn-${this.size}`]: true,\n      [`btn-icon-${this.icon}`]: true,\n      'btn-disabled': this.disabled,\n      'btn-loading': this.loading,\n    };\n\n    return (\n      <button\n        type={this.type}\n        class={buttonClasses}\n        disabled={this.disabled}\n        onClick={this.handleClick}\n        part=\"button\"\n      >\n        {showLeadingIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            {this.loading ? (\n              <bh-loader-spinner\n                size={this.getLoaderSize()}\n                variant={this.getLoaderVariant()}\n              ></bh-loader-spinner>\n            ) : (\n              <span class=\"btn-icon-material material-symbols-outlined\">\n                {this.iconName}\n              </span>\n            )}\n          </span>\n        )}\n\n        {showOnlyIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            {this.loading ? (\n              <bh-loader-spinner\n                size={this.getLoaderSize()}\n                variant={this.getLoaderVariant()}\n              ></bh-loader-spinner>\n            ) : (\n              <span class=\"btn-icon-material material-symbols-outlined\">\n                {this.iconName}\n              </span>\n            )}\n          </span>\n        )}\n\n        {showLabel && (\n          <span class={`btn-label ${this.getTextSizeClass()}`}>\n            <slot>{this.label}</slot>\n          </span>\n        )}\n\n        {showTrailingIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            <span class=\"btn-icon-material material-symbols-outlined\">\n              {this.iconName}\n            </span>\n          </span>\n        )}\n      </button>\n    );\n  }\n}\n"]}

package/collection/components/bh-button-icon/bh-button-icon.css

@@ -0,0 +1,187 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
+}
+
+/* Base Button Icon */
+.button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+}
+
+.button-icon:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9);
+}
+
+/* Sizes */
+.button-icon-xs {
+  width: 24px;
+  height: 24px;
+}
+
+.button-icon-xs .icon {
+  font-size: 16px;
+}
+
+.button-icon-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.button-icon-sm .icon {
+  font-size: 18px;
+}
+
+.button-icon-md {
+  width: 40px;
+  height: 40px;
+}
+
+.button-icon-md .icon {
+  font-size: 20px;
+}
+
+.button-icon-lg {
+  width: 48px;
+  height: 48px;
+}
+
+.button-icon-lg .icon {
+  font-size: 24px;
+}
+
+/* Primary Hierarchy */
+.button-icon-primary {
+  background: var(--color-brand-600, #6941C6);
+  color: var(--color-white, #FFFFFF);
+}
+
+.button-icon-primary:hover:not(.button-icon-disabled) {
+  background: var(--color-brand-700, #5235A8);
+}
+
+.button-icon-primary:active:not(.button-icon-disabled) {
+  background: var(--color-brand-800, #42298F);
+}
+
+/* Secondary Hierarchy */
+.button-icon-secondary {
+  background: var(--color-white, #FFFFFF);
+  color: var(--color-neutral-700, #344054);
+  border: 1px solid var(--color-neutral-300, #D0D5DD);
+}
+
+.button-icon-secondary:hover:not(.button-icon-disabled) {
+  background: var(--color-neutral-50, #F9FAFB);
+  border-color: var(--color-neutral-400, #98A2B3);
+}
+
+.button-icon-secondary:active:not(.button-icon-disabled) {
+  background: var(--color-neutral-100, #F2F4F7);
+}
+
+/* Tertiary Hierarchy */
+.button-icon-tertiary {
+  background: transparent;
+  color: var(--color-brand-600, #6941C6);
+}
+
+.button-icon-tertiary:hover:not(.button-icon-disabled) {
+  background: var(--color-brand-50, #F9F5FF);
+}
+
+.button-icon-tertiary:active:not(.button-icon-disabled) {
+  background: var(--color-brand-100, #F4EBFF);
+}
+
+/* Quaternary Hierarchy */
+.button-icon-quaternary {
+  background: transparent;
+  color: var(--color-neutral-500, #667085);
+}
+
+.button-icon-quaternary:hover:not(.button-icon-disabled) {
+  background: var(--color-neutral-100, #F2F4F7);
+  color: var(--color-neutral-700, #344054);
+}
+
+.button-icon-quaternary:active:not(.button-icon-disabled) {
+  background: var(--color-neutral-200, #EAECF0);
+}
+
+/* Disabled State */
+.button-icon-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading State */
+.button-icon-loading {
+  cursor: wait;
+}
+
+/* Loading Spinner */
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.button-icon-sm .loading-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+.button-icon-xs .loading-spinner {
+  width: 12px;
+  height: 12px;
+}
+
+.button-icon-lg .loading-spinner {
+  width: 20px;
+  height: 20px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Icon */
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Material Symbols */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}