@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,257 @@
+/* ==========================================================================
+   BH-AVATAR COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+/* Base Avatar */
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--color-neutral-100);
+  flex-shrink: 0;
+}
+
+/* Avatar Sizes */
+.avatar-xxs {
+  width: 16px;
+  height: 16px;
+}
+
+.avatar-xs {
+  width: 24px;
+  height: 24px;
+}
+
+.avatar-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.avatar-md {
+  width: 40px;
+  height: 40px;
+}
+
+.avatar-lg {
+  width: 48px;
+  height: 48px;
+}
+
+.avatar-xl {
+  width: 56px;
+  height: 56px;
+}
+
+.avatar-2xl {
+  width: 64px;
+  height: 64px;
+}
+
+/* ==========================================================================
+   AVATAR CONTENT ELEMENTS
+   ========================================================================== */
+
+/* Avatar Border */
+.avatar-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.avatar-xs .avatar-border,
+.avatar-sm .avatar-border {
+  border: 0.5px solid var(--color-neutral-400);
+}
+
+.avatar-md .avatar-border,
+.avatar-lg .avatar-border,
+.avatar-xl .avatar-border,
+.avatar-2xl .avatar-border {
+  border: 0.75px solid var(--color-neutral-400);
+}
+
+/* Avatar Content Container */
+.avatar-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  z-index: 0;
+}
+
+/* Avatar Image */
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+}
+
+/* Avatar Placeholder Icon */
+.avatar-placeholder-icon {
+  color: var(--color-neutral-500);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Avatar Text (for text-type avatars) */
+.avatar-text {
+  color: var(--color-neutral-500);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-semibold);
+  text-align: center;
+  line-height: 1;
+}
+
+/* Text Size Classes */
+.text-xxs {
+  font-size: 10px;
+  line-height: 1.6em;
+}
+
+.text-xs {
+  font-size: 12px;
+  line-height: 1.5em;
+}
+
+.text-sm {
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+}
+
+.text-md {
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+}
+
+.text-lg {
+  font-size: 18px;
+  line-height: 1.56em;
+}
+
+.text-xl {
+  font-size: 20px;
+  line-height: 1.5em;
+}
+
+.text-2xl {
+  font-size: 24px;
+  line-height: 1.33em;
+}
+
+/* Icon Size Classes */
+.icon-sm {
+  font-size: 16px;
+}
+
+.icon-md {
+  font-size: 20px;
+}
+
+.icon-lg {
+  font-size: 24px;
+}
+
+.icon-xl {
+  font-size: 28px;
+}
+
+.icon-2xl {
+  font-size: 32px;
+}
+
+.icon-3xl {
+  font-size: 36px;
+}
+
+.icon-4xl {
+  font-size: 40px;
+}
+
+/* ==========================================================================
+   STATUS INDICATOR
+   ========================================================================== */
+
+.avatar-status {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--color-success-500);
+  border: 1.5px solid var(--color-white);
+  z-index: 2;
+}
+
+.avatar-status-online {
+  background-color: var(--color-success-500);
+}
+
+.avatar-status-offline {
+  background-color: var(--color-neutral-400);
+}
+
+/* Status Indicator Sizes */
+.avatar-status-xxs {
+  width: 4px;
+  height: 4px;
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-xs {
+  width: 6px;
+  height: 6px;
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-sm {
+  width: 8px;
+  height: 8px;
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-md {
+  width: 10px;
+  height: 10px;
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-lg {
+  width: 12px;
+  height: 12px;
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-xl {
+  width: 14px;
+  height: 14px;
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-2xl {
+  width: 16px;
+  height: 16px;
+  bottom: 0;
+  right: 0;
+}

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

@@ -0,0 +1,266 @@
+import { h } from "@stencil/core";
+export class BhAvatar {
+    /**
+     * The size of the avatar
+     */
+    size = 'md';
+    /**
+     * The type of avatar content
+     */
+    type = 'image';
+    /**
+     * The status indicator (online, offline, or none)
+     */
+    status = 'none';
+    /**
+     * Text to display for text-type avatars (initials)
+     */
+    text = 'RD';
+    /**
+     * Image source URL for image-type avatars
+     */
+    imageSrc;
+    /**
+     * Alt text for the avatar image
+     */
+    alt = 'Avatar';
+    /**
+     * Emitted when the avatar is hovered
+     */
+    bhMouseEnter;
+    /**
+     * Emitted when the mouse leaves the avatar
+     */
+    bhMouseLeave;
+    handleMouseEnter = () => {
+        this.bhMouseEnter.emit();
+    };
+    handleMouseLeave = () => {
+        this.bhMouseLeave.emit();
+    };
+    getTextSizeClass() {
+        const sizeMap = {
+            'xxs': 'text-xxs',
+            'xs': 'text-xs',
+            'sm': 'text-sm',
+            'md': 'text-md',
+            'lg': 'text-lg',
+            'xl': 'text-xl',
+            '2xl': 'text-2xl',
+        };
+        return sizeMap[this.size] || 'text-md';
+    }
+    getIconSizeClass() {
+        const sizeMap = {
+            'xxs': 'icon-sm',
+            'xs': 'icon-md',
+            'sm': 'icon-lg',
+            'md': 'icon-xl',
+            'lg': 'icon-2xl',
+            'xl': 'icon-3xl',
+            '2xl': 'icon-4xl',
+        };
+        return sizeMap[this.size] || 'icon-xl';
+    }
+    render() {
+        const avatarClasses = {
+            'avatar': true,
+            [`avatar-${this.size}`]: true,
+            'avatar-with-status': this.status !== 'none',
+        };
+        const statusClasses = {
+            'avatar-status': true,
+            [`avatar-status-${this.size}`]: true,
+            'avatar-status-online': this.status === 'online',
+            'avatar-status-offline': this.status === 'offline',
+        };
+        return (h("div", { key: '914106f6936e5c7ce0e174e0b909b1500b5c2ed4', class: avatarClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "avatar" }, h("div", { key: 'b243bdaf78378f12268f9c016ff01278dd160f87', class: "avatar-border" }), h("div", { key: '6945f4a099f930d192f183a9fb7d2eeb3dc90eed', class: "avatar-content" }, this.type === 'image' && (h("img", { key: '97972f391c8f16e2ccdcabbc722bb93b292b8750', src: this.imageSrc, alt: this.alt, class: "avatar-image" })), this.type === 'placeholder' && (h("span", { key: 'acc758d9bb1bb39b4e767b502babb4abd9d8108e', class: `material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}` }, "person")), this.type === 'text' && (h("span", { key: 'd7cd84351467868b6cb7506ba32a7e42da5090e2', class: `avatar-text ${this.getTextSizeClass()}` }, this.text))), this.status !== 'none' && (h("div", { key: 'f87333ba06a55bfa5345d1ad245453d2a756ad72', class: statusClasses }))));
+    }
+    static get is() { return "bh-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarSize",
+                    "resolved": "\"2xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "AvatarSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-avatar/bh-avatar.tsx",
+                            "id": "src/components/bh-avatar/bh-avatar.tsx::AvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarType",
+                    "resolved": "\"image\" | \"placeholder\" | \"text\"",
+                    "references": {
+                        "AvatarType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-avatar/bh-avatar.tsx",
+                            "id": "src/components/bh-avatar/bh-avatar.tsx::AvatarType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of avatar content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'image'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarStatus",
+                    "resolved": "\"none\" | \"offline\" | \"online\"",
+                    "references": {
+                        "AvatarStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-avatar/bh-avatar.tsx",
+                            "id": "src/components/bh-avatar/bh-avatar.tsx::AvatarStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The status indicator (online, offline, or none)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'none'"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display for text-type avatars (initials)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "'RD'"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL for image-type avatars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the avatar image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "'Avatar'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhMouseEnter",
+                "name": "bhMouseEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the avatar is hovered"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhMouseLeave",
+                "name": "bhMouseLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the mouse leaves the avatar"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-avatar.js","sourceRoot":"","sources":["../../../src/components/bh-avatar/bh-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type AvatarType = 'image' | 'placeholder' | 'text';\nexport type AvatarStatus = 'online' | 'offline' | 'none';\n\n@Component({\n  tag: 'bh-avatar',\n  styleUrl: 'bh-avatar.css',\n  shadow: true,\n})\nexport class BhAvatar {\n  /**\n   * The size of the avatar\n   */\n  @Prop() size: AvatarSize = 'md';\n\n  /**\n   * The type of avatar content\n   */\n  @Prop() type: AvatarType = 'image';\n\n  /**\n   * The status indicator (online, offline, or none)\n   */\n  @Prop() status: AvatarStatus = 'none';\n\n  /**\n   * Text to display for text-type avatars (initials)\n   */\n  @Prop() text: string = 'RD';\n\n  /**\n   * Image source URL for image-type avatars\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alt text for the avatar image\n   */\n  @Prop() alt: string = 'Avatar';\n\n  /**\n   * Emitted when the avatar is hovered\n   */\n  @Event() bhMouseEnter!: EventEmitter<void>;\n\n  /**\n   * Emitted when the mouse leaves the avatar\n   */\n  @Event() bhMouseLeave!: EventEmitter<void>;\n\n  private handleMouseEnter = (): void => {\n    this.bhMouseEnter.emit();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.bhMouseLeave.emit();\n  };\n\n  private getTextSizeClass(): string {\n    const sizeMap: Record<AvatarSize, string> = {\n      'xxs': 'text-xxs',\n      'xs': 'text-xs',\n      'sm': 'text-sm',\n      'md': 'text-md',\n      'lg': 'text-lg',\n      'xl': 'text-xl',\n      '2xl': 'text-2xl',\n    };\n    return sizeMap[this.size] || 'text-md';\n  }\n\n  private getIconSizeClass(): string {\n    const sizeMap: Record<AvatarSize, string> = {\n      'xxs': 'icon-sm',\n      'xs': 'icon-md',\n      'sm': 'icon-lg',\n      'md': 'icon-xl',\n      'lg': 'icon-2xl',\n      'xl': 'icon-3xl',\n      '2xl': 'icon-4xl',\n    };\n    return sizeMap[this.size] || 'icon-xl';\n  }\n\n  render() {\n    const avatarClasses = {\n      'avatar': true,\n      [`avatar-${this.size}`]: true,\n      'avatar-with-status': this.status !== 'none',\n    };\n\n    const statusClasses = {\n      'avatar-status': true,\n      [`avatar-status-${this.size}`]: true,\n      'avatar-status-online': this.status === 'online',\n      'avatar-status-offline': this.status === 'offline',\n    };\n\n    return (\n      <div\n        class={avatarClasses}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        part=\"avatar\"\n      >\n        <div class=\"avatar-border\"></div>\n\n        <div class=\"avatar-content\">\n          {this.type === 'image' && (\n            <img\n              src={this.imageSrc}\n              alt={this.alt}\n              class=\"avatar-image\"\n            />\n          )}\n\n          {this.type === 'placeholder' && (\n            <span class={`material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`}>\n              person\n            </span>\n          )}\n\n          {this.type === 'text' && (\n            <span class={`avatar-text ${this.getTextSizeClass()}`}>\n              {this.text}\n            </span>\n          )}\n        </div>\n\n        {this.status !== 'none' && (\n          <div class={statusClasses}></div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,145 @@
+:host {
+  display: inline-block;
+  font-family: var(
+    --font-inter,
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif
+  );
+}
+
+/* Container */
+.avatar-add-container {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Base Button */
+.avatar-add {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-white, #ffffff);
+  border: 1px dashed var(--color-neutral-300, #d0d5dd);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  padding: 0;
+  outline: none;
+}
+
+/* Button Sizes */
+.avatar-add-xs {
+  width: 24px;
+  height: 24px;
+}
+
+.avatar-add-xs .avatar-add-icon {
+  font-size: 14px;
+}
+
+.avatar-add-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.avatar-add-sm .avatar-add-icon {
+  font-size: 16px;
+}
+
+.avatar-add-md {
+  width: 40px;
+  height: 40px;
+}
+
+.avatar-add-md .avatar-add-icon {
+  font-size: 20px;
+}
+
+.avatar-add-lg {
+  width: 48px;
+  height: 48px;
+}
+
+.avatar-add-lg .avatar-add-icon {
+  font-size: 24px;
+}
+
+.avatar-add-xl {
+  width: 56px;
+  height: 56px;
+}
+
+.avatar-add-xl .avatar-add-icon {
+  font-size: 28px;
+}
+
+.avatar-add-2xl {
+  width: 64px;
+  height: 64px;
+}
+
+.avatar-add-2xl .avatar-add-icon {
+  font-size: 32px;
+}
+
+/* Hover State */
+.avatar-add-hover {
+  background-color: var(--color-neutral-50, #f9fafb);
+  border-color: var(--color-brand-500, #7f56d9);
+}
+
+.avatar-add-hover .avatar-add-icon {
+  color: var(--color-brand-500, #7f56d9);
+}
+
+/* Focus State */
+.avatar-add-focus {
+  background-color: var(--color-white, #ffffff);
+  box-shadow: 0 0 0 2px var(--color-white, #ffffff),
+    0 0 0 4px var(--color-brand-500, #7f56d9);
+}
+
+/* Disabled State */
+.avatar-add-disabled {
+  background-color: var(--color-neutral-50, #f9fafb);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.avatar-add-disabled .avatar-add-icon {
+  color: var(--color-neutral-300, #d0d5dd);
+}
+
+/* Content Container */
+.avatar-add-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Icon */
+.avatar-add-icon {
+  color: var(--color-neutral-500, #667085);
+  line-height: 1;
+  transition: color 0.2s ease-in-out;
+}
+
+/* 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;
+}