@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-avatar-add/bh-avatar-add.js

@@ -0,0 +1,194 @@
+import { h } from "@stencil/core";
+export class BhAvatarAdd {
+    /**
+     * Size of the avatar add button
+     */
+    size = 'md';
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show tooltip on hover
+     */
+    showTooltip = false;
+    /**
+     * Tooltip text
+     */
+    tooltipText = 'Add user';
+    /**
+     * Track hover state
+     */
+    isHovered = false;
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled) {
+            this.bhClick.emit(event);
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+            event.preventDefault();
+            this.bhClick.emit(event);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'avatar-add': true,
+            [`avatar-add-${this.size}`]: true,
+            'avatar-add-hover': this.isHovered && !this.disabled,
+            'avatar-add-focus': this.isFocused && !this.disabled,
+            'avatar-add-disabled': this.disabled,
+        };
+        return (h("div", { key: 'e906187ea6a036fa259715d89e798e884e595c85', class: "avatar-add-container" }, h("button", { key: '777975b9886ba59bb18461354b01a9a628f92fb7', type: "button", class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: () => {
+                if (!this.disabled)
+                    this.isHovered = true;
+            }, onMouseLeave: () => {
+                this.isHovered = false;
+            }, onFocus: () => {
+                if (!this.disabled)
+                    this.isFocused = true;
+            }, onBlur: () => {
+                this.isFocused = false;
+            }, "aria-label": this.tooltipText, part: "button" }, h("span", { key: '6ed6ab00fca8e55d2954baa2dca372d07798f22b', class: "avatar-add-content" }, h("span", { key: '06ec0f650d23a82716bd38bedf8e4bebda532a17', class: "material-symbols-outlined avatar-add-icon" }, "add"))), this.showTooltip && (h("bh-tooltip", { key: '365183808234299da29de605122b3b13826172ed', text: this.tooltipText, visible: this.isHovered && !this.disabled, position: "bottom" }))));
+    }
+    static get is() { return "bh-avatar-add"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-avatar-add.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-avatar-add.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarAddSize",
+                    "resolved": "\"2xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "AvatarAddSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-avatar-add/bh-avatar-add.tsx",
+                            "id": "src/components/bh-avatar-add/bh-avatar-add.tsx::AvatarAddSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the avatar add button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "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"
+            },
+            "showTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show tooltip on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltip",
+                "defaultValue": "false"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text",
+                "defaultValue": "'Add user'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {},
+            "isFocused": {}
+        };
+    }
+    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-avatar-add.js.map

package/collection/components/bh-avatar-add/bh-avatar-add.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-avatar-add.js","sourceRoot":"","sources":["../../../src/components/bh-avatar-add/bh-avatar-add.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAS/E,MAAM,OAAO,WAAW;IACtB;;OAEG;IACK,IAAI,GAAkB,IAAI,CAAC;IAEnC;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC;;OAEG;IACK,WAAW,GAAW,UAAU,CAAC;IAEzC;;OAEG;IACM,SAAS,GAAY,KAAK,CAAC;IAEpC;;OAEG;IACM,SAAS,GAAY,KAAK,CAAC;IAEpC;;OAEG;IACM,OAAO,CAA4B;IAEpC,WAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAA8B,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,YAAY,EAAE,IAAI;YAClB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACjC,kBAAkB,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;YACpD,kBAAkB,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;YACpD,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC/B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;wBAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBAC5C,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;wBAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBAC5C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,gBACW,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAC,QAAQ;gBAEb,6DAAM,KAAK,EAAC,oBAAoB;oBAC9B,6DAAM,KAAK,EAAC,2CAA2C,UAAW,CAC7D,CACA;YAER,IAAI,CAAC,WAAW,IAAI,CACnB,mEACE,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,OAAO,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EACzC,QAAQ,EAAC,QAAQ,GACjB,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarAddSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n@Component({\n  tag: 'bh-avatar-add',\n  styleUrl: 'bh-avatar-add.css',\n  shadow: true,\n})\nexport class BhAvatarAdd {\n  /**\n   * Size of the avatar add button\n   */\n  @Prop() size: AvatarAddSize = 'md';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show tooltip on hover\n   */\n  @Prop() showTooltip: boolean = false;\n\n  /**\n   * Tooltip text\n   */\n  @Prop() tooltipText: string = 'Add user';\n\n  /**\n   * Track hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\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) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n      event.preventDefault();\n      this.bhClick.emit(event as unknown as MouseEvent);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'avatar-add': true,\n      [`avatar-add-${this.size}`]: true,\n      'avatar-add-hover': this.isHovered && !this.disabled,\n      'avatar-add-focus': this.isFocused && !this.disabled,\n      'avatar-add-disabled': this.disabled,\n    };\n\n    return (\n      <div class=\"avatar-add-container\">\n        <button\n          type=\"button\"\n          class={buttonClasses}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={() => {\n            if (!this.disabled) this.isHovered = true;\n          }}\n          onMouseLeave={() => {\n            this.isHovered = false;\n          }}\n          onFocus={() => {\n            if (!this.disabled) this.isFocused = true;\n          }}\n          onBlur={() => {\n            this.isFocused = false;\n          }}\n          aria-label={this.tooltipText}\n          part=\"button\"\n        >\n          <span class=\"avatar-add-content\">\n            <span class=\"material-symbols-outlined avatar-add-icon\">add</span>\n          </span>\n        </button>\n\n        {this.showTooltip && (\n          <bh-tooltip\n            text={this.tooltipText}\n            visible={this.isHovered && !this.disabled}\n            position=\"bottom\"\n          />\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-avatar-stacked/bh-avatar-stacked.css

@@ -0,0 +1,29 @@
+:host {
+  display: inline-block;
+  font-family: var(
+    --font-inter,
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif
+  );
+}
+
+/* Container */
+.avatar-stacked {
+  display: flex;
+  align-items: center;
+}
+
+/* Avatar Item Wrapper */
+.avatar-item {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Add white border around nested avatars for visual separation */
+.avatar-item bh-avatar,
+.avatar-item bh-avatar-add {
+  box-shadow: 0 0 0 2px var(--color-white, #ffffff);
+  border-radius: 50%;
+}

package/collection/components/bh-avatar-stacked/bh-avatar-stacked.js

@@ -0,0 +1,211 @@
+import { h } from "@stencil/core";
+export class BhAvatarStacked {
+    /**
+     * The size of the avatars in the stack
+     */
+    size = 'md';
+    /**
+     * JSON array of avatar data
+     */
+    avatars = '[]';
+    /**
+     * Maximum number of visible avatars before showing count
+     */
+    maxVisible = 10;
+    /**
+     * Whether to show the add button
+     */
+    showAddButton = true;
+    /**
+     * Tooltip text for the add button
+     */
+    addTooltipText = 'Add member';
+    /**
+     * Track hovered avatar index for tooltips
+     */
+    hoveredIndex = -1;
+    /**
+     * Track add button hover state
+     */
+    addButtonHovered = false;
+    getParsedAvatars() {
+        try {
+            return JSON.parse(this.avatars);
+        }
+        catch {
+            return [];
+        }
+    }
+    getAvatarSize() {
+        const sizeMap = {
+            xs: 24,
+            sm: 32,
+            md: 40,
+            lg: 48,
+            xl: 56,
+            '2xl': 64,
+        };
+        return sizeMap[this.size] || 40;
+    }
+    getOffset() {
+        const avatarSize = this.getAvatarSize();
+        return Math.floor(avatarSize * 0.3);
+    }
+    mapAvatarType(type) {
+        if (type === 'icon') {
+            return 'placeholder';
+        }
+        return type;
+    }
+    render() {
+        const parsedAvatars = this.getParsedAvatars();
+        const visibleAvatars = parsedAvatars.slice(0, this.maxVisible - 1);
+        const remainingCount = parsedAvatars.length - (this.maxVisible - 1);
+        const showCountAvatar = remainingCount > 0;
+        const offset = this.getOffset();
+        return (h("div", { key: 'ec073586cb5f8bc0f0b8a19c1fd38fb3103c22d9', class: `avatar-stacked avatar-stacked-${this.size}`, part: "container" }, visibleAvatars.map((avatar, index) => (h("div", { class: "avatar-item", style: { marginLeft: index > 0 ? `-${offset}px` : '0' }, onMouseEnter: () => {
+                this.hoveredIndex = index;
+            }, onMouseLeave: () => {
+                this.hoveredIndex = -1;
+            } }, h("bh-avatar", { type: this.mapAvatarType(avatar.type), size: this.size, imageSrc: avatar.imageSrc, text: avatar.text || '?', alt: avatar.text || 'Avatar' }), avatar.tooltipText && (h("bh-tooltip", { text: avatar.tooltipText, visible: this.hoveredIndex === index, position: "bottom" }))))), showCountAvatar && (h("div", { key: 'c1421d02eb8cc02c9294a654e3d735a8e0513d8a', class: "avatar-item", style: {
+                marginLeft: visibleAvatars.length > 0 ? `-${offset}px` : '0',
+            } }, h("bh-avatar", { key: '7ea83fff361629de7f68bd7a830531657d454566', type: "text", size: this.size, text: `+${remainingCount}`, alt: `${remainingCount} more` }))), this.showAddButton && (h("div", { key: 'd14845e1ea91c131af6e2ae2c658f7c267cb2281', class: "avatar-item", style: {
+                marginLeft: visibleAvatars.length > 0 || showCountAvatar
+                    ? `-${offset}px`
+                    : '0',
+            }, onMouseEnter: () => {
+                this.addButtonHovered = true;
+            }, onMouseLeave: () => {
+                this.addButtonHovered = false;
+            } }, h("bh-avatar-add", { key: '719740919ab99129f93963775976fb5a2f0c4523', size: this.size, showTooltip: true, tooltipText: this.addTooltipText })))));
+    }
+    static get is() { return "bh-avatar-stacked"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-avatar-stacked.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-avatar-stacked.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarStackedSize",
+                    "resolved": "\"2xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "AvatarStackedSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-avatar-stacked/bh-avatar-stacked.tsx",
+                            "id": "src/components/bh-avatar-stacked/bh-avatar-stacked.tsx::AvatarStackedSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the avatars in the stack"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "avatars": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON array of avatar data"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatars",
+                "defaultValue": "'[]'"
+            },
+            "maxVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of visible avatars before showing count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible",
+                "defaultValue": "10"
+            },
+            "showAddButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the add button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-add-button",
+                "defaultValue": "true"
+            },
+            "addTooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text for the add button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "add-tooltip-text",
+                "defaultValue": "'Add member'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hoveredIndex": {},
+            "addButtonHovered": {}
+        };
+    }
+}
+//# sourceMappingURL=bh-avatar-stacked.js.map

package/collection/components/bh-avatar-stacked/bh-avatar-stacked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-avatar-stacked.js","sourceRoot":"","sources":["../../../src/components/bh-avatar-stacked/bh-avatar-stacked.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h } from '@stencil/core';\n\nexport type AvatarStackedSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport interface AvatarData {\n  type: 'image' | 'text' | 'icon';\n  imageSrc?: string;\n  text?: string;\n  tooltipText?: string;\n}\n\n@Component({\n  tag: 'bh-avatar-stacked',\n  styleUrl: 'bh-avatar-stacked.css',\n  shadow: true,\n})\nexport class BhAvatarStacked {\n  /**\n   * The size of the avatars in the stack\n   */\n  @Prop() size: AvatarStackedSize = 'md';\n\n  /**\n   * JSON array of avatar data\n   */\n  @Prop() avatars: string = '[]';\n\n  /**\n   * Maximum number of visible avatars before showing count\n   */\n  @Prop() maxVisible: number = 10;\n\n  /**\n   * Whether to show the add button\n   */\n  @Prop() showAddButton: boolean = true;\n\n  /**\n   * Tooltip text for the add button\n   */\n  @Prop() addTooltipText: string = 'Add member';\n\n  /**\n   * Track hovered avatar index for tooltips\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * Track add button hover state\n   */\n  @State() addButtonHovered: boolean = false;\n\n  private getParsedAvatars(): AvatarData[] {\n    try {\n      return JSON.parse(this.avatars) as AvatarData[];\n    } catch {\n      return [];\n    }\n  }\n\n  private getAvatarSize(): number {\n    const sizeMap: Record<AvatarStackedSize, number> = {\n      xs: 24,\n      sm: 32,\n      md: 40,\n      lg: 48,\n      xl: 56,\n      '2xl': 64,\n    };\n    return sizeMap[this.size] || 40;\n  }\n\n  private getOffset(): number {\n    const avatarSize = this.getAvatarSize();\n    return Math.floor(avatarSize * 0.3);\n  }\n\n  private mapAvatarType(\n    type: 'image' | 'text' | 'icon'\n  ): 'image' | 'text' | 'placeholder' {\n    if (type === 'icon') {\n      return 'placeholder';\n    }\n    return type;\n  }\n\n  render() {\n    const parsedAvatars = this.getParsedAvatars();\n    const visibleAvatars = parsedAvatars.slice(0, this.maxVisible - 1);\n    const remainingCount = parsedAvatars.length - (this.maxVisible - 1);\n    const showCountAvatar = remainingCount > 0;\n    const offset = this.getOffset();\n\n    return (\n      <div\n        class={`avatar-stacked avatar-stacked-${this.size}`}\n        part=\"container\"\n      >\n        {visibleAvatars.map((avatar, index) => (\n          <div\n            class=\"avatar-item\"\n            style={{ marginLeft: index > 0 ? `-${offset}px` : '0' }}\n            onMouseEnter={() => {\n              this.hoveredIndex = index;\n            }}\n            onMouseLeave={() => {\n              this.hoveredIndex = -1;\n            }}\n          >\n            <bh-avatar\n              type={this.mapAvatarType(avatar.type)}\n              size={this.size}\n              imageSrc={avatar.imageSrc}\n              text={avatar.text || '?'}\n              alt={avatar.text || 'Avatar'}\n            />\n            {avatar.tooltipText && (\n              <bh-tooltip\n                text={avatar.tooltipText}\n                visible={this.hoveredIndex === index}\n                position=\"bottom\"\n              />\n            )}\n          </div>\n        ))}\n\n        {showCountAvatar && (\n          <div\n            class=\"avatar-item\"\n            style={{\n              marginLeft: visibleAvatars.length > 0 ? `-${offset}px` : '0',\n            }}\n          >\n            <bh-avatar\n              type=\"text\"\n              size={this.size}\n              text={`+${remainingCount}`}\n              alt={`${remainingCount} more`}\n            />\n          </div>\n        )}\n\n        {this.showAddButton && (\n          <div\n            class=\"avatar-item\"\n            style={{\n              marginLeft:\n                visibleAvatars.length > 0 || showCountAvatar\n                  ? `-${offset}px`\n                  : '0',\n            }}\n            onMouseEnter={() => {\n              this.addButtonHovered = true;\n            }}\n            onMouseLeave={() => {\n              this.addButtonHovered = false;\n            }}\n          >\n            <bh-avatar-add\n              size={this.size}\n              showTooltip={true}\n              tooltipText={this.addTooltipText}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}