@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-dropdown-menu/bh-dropdown-menu.css

@@ -0,0 +1,227 @@
+/* ==========================================================================
+   BH-DROPDOWN-MENU COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: block;
+}
+
+/* Base dropdown menu styles */
+.dropdown-menu {
+  width: 240px;
+  background: var(--color-white);
+  border-radius: var(--radius-md);
+  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),
+    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* Animation classes */
+.animate-dropdown-enter {
+  animation: dropdownEnter 0.15s ease-out forwards;
+}
+
+.animate-dropdown-exit {
+  animation: dropdownExit 0.15s ease-in forwards;
+}
+
+@keyframes dropdownEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dropdownExit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+/* ==========================================================================
+   HEADER SECTION
+   ========================================================================== */
+
+.dropdown-header {
+  padding: var(--spacing-lg) var(--spacing-xl);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+
+.dropdown-header-avatar {
+  padding: var(--spacing-lg) var(--spacing-xl);
+}
+
+.avatar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  width: 100%;
+}
+
+.avatar-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.avatar-name {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-sm-size);
+  text-align: left;
+  line-height: 1.43;
+  color: var(--color-neutral-800);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.avatar-email {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-regular);
+  font-size: var(--text-sm-size);
+  line-height: 1.43;
+  color: var(--color-neutral-600);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-title {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-sm-size);
+  line-height: 1.43;
+  color: var(--color-neutral-800);
+  margin: 0;
+}
+
+/* ==========================================================================
+   MENU ITEMS SECTION
+   ========================================================================== */
+
+.menu-items {
+  padding: var(--spacing-xs) 0;
+}
+
+.dropdown-item {
+  padding: var(--spacing-none) var(--spacing-sm);
+  cursor: pointer;
+}
+
+.dropdown-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-md) var(--spacing-md);
+  border-radius: var(--radius-sm);
+  transition: background-color 0.15s ease;
+}
+
+.dropdown-item:hover:not(.dropdown-item-disabled) .item-content {
+  background: var(--color-neutral-100);
+}
+
+.item-main {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.item-icon {
+  font-size: var(--icon-size-md, 20px);
+  color: var(--color-neutral-600);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item-text {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-700);
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.item-shortcut {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-regular);
+  font-size: var(--text-xs-size);
+  line-height: 1.5;
+  color: var(--color-neutral-500);
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   DIVIDER
+   ========================================================================== */
+
+.menu-divider {
+  height: 1px;
+  background: var(--color-neutral-200);
+  margin: var(--spacing-xs) 0;
+}
+
+/* ==========================================================================
+   SCROLLABLE VARIANT
+   ========================================================================== */
+
+.dropdown-menu-scrollable .menu-items {
+  max-height: 280px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Custom scrollbar styling */
+.dropdown-menu-scrollable .menu-items::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track {
+  background: var(--color-neutral-50);
+  border-radius: var(--radius-xs);
+}
+
+.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-xs);
+}
+
+.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-300);
+}
+
+/* Firefox scrollbar */
+.dropdown-menu-scrollable .menu-items {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);
+}

package/collection/components/bh-dropdown-menu/bh-dropdown-menu.js

@@ -0,0 +1,262 @@
+import { h } from "@stencil/core";
+export class BhDropdownMenu {
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Menu items array (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Whether the menu is visible
+     */
+    visible = true;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    /**
+     * Whether the menu should be scrollable
+     */
+    scrollable = false;
+    isClosing = false;
+    shouldRender = true;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    get parsedHeader() {
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    watchVisible(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isClosing = false;
+        }
+        else {
+            this.isClosing = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isClosing = false;
+            }, 150);
+        }
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+    }
+    handleItemClick(item) {
+        if (!item.disabled && !item.divider) {
+            this.bhItemClick.emit(item);
+        }
+    }
+    getMenuItemClasses(item) {
+        return {
+            'dropdown-item': true,
+            'dropdown-item-disabled': !!item.disabled,
+        };
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const header = this.parsedHeader;
+        const items = this.parsedMenuItems;
+        const dropdownClasses = {
+            'dropdown-menu': true,
+            'dropdown-menu-scrollable': this.scrollable,
+            'animate-dropdown-enter': true,
+            'animate-dropdown-exit': false,
+        };
+        const headerClasses = {
+            'dropdown-header': true,
+            'dropdown-header-avatar': !!header?.avatarGroup,
+        };
+        return (h("div", { class: dropdownClasses }, header && (h("div", { class: headerClasses }, header.avatarGroup && (h("div", { class: "avatar-group" }, h("bh-avatar", { size: "md", type: "image", status: "online", imageSrc: header.avatarSrc || '', alt: header.name || 'Avatar' }), h("div", { class: "avatar-text" }, h("div", { class: "avatar-name" }, header.name), h("div", { class: "avatar-email" }, header.email)))), !header.avatarGroup && header.title && (h("div", { class: "header-title" }, header.title)))), h("div", { class: "menu-items" }, items.map((item) => (h("div", { key: item.id }, item.divider && h("div", { class: "menu-divider" }), !item.divider && (h("div", { class: this.getMenuItemClasses(item), onClick: () => this.handleItemClick(item) }, h("div", { class: "item-content" }, h("div", { class: "item-main" }, item.icon && this.showIcons && (h("span", { class: "material-symbols-outlined item-icon" }, item.icon)), h("span", { class: "item-text", title: item.label }, item.label)), item.shortcut && (h("span", { class: "item-shortcut" }, item.shortcut)))))))))));
+    }
+    static get is() { return "bh-dropdown-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-dropdown-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-dropdown-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuHeader | string",
+                    "resolved": "DropdownMenuHeader | string | undefined",
+                    "references": {
+                        "DropdownMenuHeader": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-dropdown-menu/bh-dropdown-menu.tsx",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuHeader"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Header configuration (JSON string or object)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "menuItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuItem[] | string",
+                    "resolved": "DropdownMenuItem[] | string",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-dropdown-menu/bh-dropdown-menu.tsx",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items array (JSON string or array)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-items",
+                "defaultValue": "[]"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show icons in menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icons",
+                "defaultValue": "true"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu should be scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrollable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isClosing": {},
+            "shouldRender": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemClick",
+                "name": "bhItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a menu item is clicked"
+                },
+                "complexType": {
+                    "original": "DropdownMenuItem",
+                    "resolved": "DropdownMenuItem",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-dropdown-menu/bh-dropdown-menu.tsx",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "watchVisible"
+            }];
+    }
+}
+//# sourceMappingURL=bh-dropdown-menu.js.map

package/collection/components/bh-dropdown-menu/bh-dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-dropdown-menu.js","sourceRoot":"","sources":["../../../src/components/bh-dropdown-menu/bh-dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownMenuItem {\n  id: string;\n  label?: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\nexport interface DropdownMenuHeader {\n  title?: string;\n  avatarGroup?: boolean;\n  avatarSrc?: string;\n  name?: string;\n  email?: string;\n}\n\n@Component({\n  tag: 'bh-dropdown-menu',\n  styleUrl: 'bh-dropdown-menu.css',\n  shadow: true,\n})\nexport class BhDropdownMenu {\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Menu items array (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  /**\n   * Whether the menu should be scrollable\n   */\n  @Prop() scrollable: boolean = false;\n\n  @State() isClosing: boolean = false;\n  @State() shouldRender: boolean = true;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  @Watch('visible')\n  watchVisible(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isClosing = false;\n    } else {\n      this.isClosing = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isClosing = false;\n      }, 150);\n    }\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n  }\n\n  private handleItemClick(item: DropdownMenuItem) {\n    if (!item.disabled && !item.divider) {\n      this.bhItemClick.emit(item);\n    }\n  }\n\n  private getMenuItemClasses(item: DropdownMenuItem) {\n    return {\n      'dropdown-item': true,\n      'dropdown-item-disabled': !!item.disabled,\n    };\n  }\n\n  render() {\n    if (!this.visible) {\n      return null;\n    }\n\n    const header = this.parsedHeader;\n    const items = this.parsedMenuItems;\n\n    const dropdownClasses = {\n      'dropdown-menu': true,\n      'dropdown-menu-scrollable': this.scrollable,\n      'animate-dropdown-enter': true,\n      'animate-dropdown-exit': false,\n    };\n\n    const headerClasses = {\n      'dropdown-header': true,\n      'dropdown-header-avatar': !!header?.avatarGroup,\n    };\n\n    return (\n      <div class={dropdownClasses}>\n        {/* Header Section */}\n        {header && (\n          <div class={headerClasses}>\n            {/* Avatar Group Header */}\n            {header.avatarGroup && (\n              <div class=\"avatar-group\">\n                <bh-avatar\n                  size=\"md\"\n                  type=\"image\"\n                  status=\"online\"\n                  imageSrc={header.avatarSrc || ''}\n                  alt={header.name || 'Avatar'}\n                />\n                <div class=\"avatar-text\">\n                  <div class=\"avatar-name\">{header.name}</div>\n                  <div class=\"avatar-email\">{header.email}</div>\n                </div>\n              </div>\n            )}\n            {/* Simple Text Header */}\n            {!header.avatarGroup && header.title && (\n              <div class=\"header-title\">{header.title}</div>\n            )}\n          </div>\n        )}\n\n        {/* Menu Items Section */}\n        <div class=\"menu-items\">\n          {items.map((item) => (\n            <div key={item.id}>\n              {/* Divider */}\n              {item.divider && <div class=\"menu-divider\" />}\n\n              {/* Menu Item */}\n              {!item.divider && (\n                <div\n                  class={this.getMenuItemClasses(item)}\n                  onClick={() => this.handleItemClick(item)}\n                >\n                  <div class=\"item-content\">\n                    <div class=\"item-main\">\n                      {item.icon && this.showIcons && (\n                        <span class=\"material-symbols-outlined item-icon\">\n                          {item.icon}\n                        </span>\n                      )}\n                      <span class=\"item-text\" title={item.label}>\n                        {item.label}\n                      </span>\n                    </div>\n                    {item.shortcut && (\n                      <span class=\"item-shortcut\">{item.shortcut}</span>\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-empty-state/bh-empty-state.css

@@ -0,0 +1,89 @@
+:host {
+  display: block;
+  font-family: var(
+    --font-inter,
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif
+  );
+}
+
+/* Container */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+/* Content */
+.empty-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+/* Illustration */
+.empty-state-illustration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-state-illustration img {
+  object-fit: contain;
+}
+
+/* Text */
+.empty-state-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.empty-state-title {
+  font-size: var(--text-lg-size, 18px);
+  font-weight: 600;
+  color: var(--color-neutral-900, #101828);
+  margin: 0;
+  line-height: 1.33;
+}
+
+.empty-state-description {
+  font-size: var(--text-sm-size, 14px);
+  font-weight: 400;
+  color: var(--color-neutral-600, #475467);
+  margin: 0;
+  line-height: 1.43;
+  max-width: 400px;
+}
+
+/* Actions */
+.empty-state-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  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;
+}