@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/cjs/bh-property-switcher.cjs.entry.js

@@ -0,0 +1,231 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhPropertySwitcherCss = ".property-switcher{position:relative;display:inline-block;width:220px}.property-selector{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);transition:background-color 0.2s ease;width:100%;height:36px;min-width:0}.property-selector:hover{background-color:var(--color-neutral-100)}.selector-icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0}.property-name{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);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-grow:1;min-width:0;text-align:left}.expand-icon{font-size:18px;flex-shrink:0;color:var(--color-neutral-400);transition:color 0.2s ease}.dropdown-panel{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);min-width:280px;max-width:360px;animation:dropdownSlideIn 0.15s ease-out;overflow:hidden}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}.search-container{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-200)}.search-icon{font-size:20px;color:var(--color-neutral-500);flex-shrink:0}.search-input{flex:1;border:none;outline:none;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-900);background:transparent;min-width:0}.search-input::placeholder{color:var(--color-neutral-400)}.clear-search{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-neutral-400);transition:color 0.15s ease, background-color 0.15s ease}.clear-search:hover{color:var(--color-neutral-600);background-color:var(--color-neutral-200)}.clear-search .material-symbols-outlined{font-size:18px}.dropdown-content{max-height:360px;overflow-y:auto}.flat-list-container{padding:var(--spacing-xs) 0}.groups-container{padding:var(--spacing-xs) 0}.property-group{border-bottom:1px solid var(--color-neutral-100)}.property-group:last-child{border-bottom:none}.group-header{display:flex;align-items:center;gap:var(--spacing-xs);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:var(--color-neutral-50);cursor:pointer;font-family:var(--font-inter);font-size:var(--text-xs-size);font-weight:var(--weight-semibold);color:var(--color-neutral-600);text-transform:uppercase;letter-spacing:0.5px;transition:background-color 0.15s ease}.group-header:hover{background-color:var(--color-neutral-200)}.group-expand-icon{font-size:18px;color:var(--color-neutral-500);transition:transform 0.15s ease}.group-name{flex:1;text-align:left}.group-count{font-size:11px;font-weight:var(--weight-semibold);color:var(--color-neutral-500);background-color:var(--color-neutral-200);padding:2px 8px;border-radius:var(--radius-full);min-width:20px;text-align:center}.group-properties{padding:var(--spacing-xs) 0}.property-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-left:calc(var(--spacing-md) + 26px);border:none;background:transparent;cursor:pointer;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);text-align:left;transition:background-color 0.15s ease}.flat-list-container .property-item{padding-left:var(--spacing-md)}.property-item:hover{background-color:var(--color-neutral-100)}.property-item.selected{background-color:var(--color-brand-50);color:var(--color-brand-700)}.property-item.selected .property-icon{color:var(--color-brand-600)}.property-icon{font-size:20px;color:var(--color-neutral-400);flex-shrink:0}.property-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--weight-regular)}.property-item.selected .property-item-name{font-weight:var(--weight-medium)}.check-icon{font-size:18px;color:var(--color-brand-600);flex-shrink:0}.menu-divider{height:1px;background-color:var(--color-neutral-150);margin:var(--spacing-xs) var(--spacing-md)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg);gap:var(--spacing-sm)}.empty-icon{font-size:40px;color:var(--color-neutral-300)}.empty-text{font-family:var(--font-inter);font-size:var(--text-sm-size);color:var(--color-neutral-500)}.dropdown-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);max-height:320px}.popover-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);animation:popoverSlideIn 0.3s ease-out;transform-origin:top center}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-lg)))}100%{opacity:1;transform:translateY(0)}}.popover-container.closing{animation:popoverSlideOut 0.2s ease-in forwards}@keyframes popoverSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(-1 * var(--spacing-lg)))}}";
+
+const BhPropertySwitcher = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhPropertyChange = index.createEvent(this, "bhPropertyChange");
+    }
+    /**
+     * Selected property name to display (initial value)
+     */
+    selectedProperty = 'Select a property';
+    /**
+     * Array of property options
+     */
+    properties = [];
+    /**
+     * Whether to group properties by their group field
+     */
+    grouped = false;
+    /**
+     * Placeholder text for search input
+     */
+    searchPlaceholder = 'Search properties...';
+    /**
+     * Event emitted when a property is selected
+     */
+    bhPropertyChange;
+    isExpanded = false;
+    searchQuery = '';
+    expandedGroups = new Set();
+    internalSelectedProperty = '';
+    switcherRef;
+    searchInputRef;
+    componentWillLoad() {
+        this.internalSelectedProperty = this.selectedProperty;
+    }
+    handleDocumentClick(event) {
+        if (!this.isExpanded) {
+            return;
+        }
+        // Check if click is on this component or inside it using composedPath for Shadow DOM
+        const clickedInside = event.composedPath().includes(this.switcherRef);
+        if (!clickedInside) {
+            this.isExpanded = false;
+        }
+    }
+    handleToggle = () => {
+        this.isExpanded = !this.isExpanded;
+        if (this.isExpanded) {
+            this.searchQuery = '';
+            // Initialize all groups as expanded when opening
+            if (this.grouped) {
+                const groups = this.getPropertyGroups();
+                this.expandedGroups = new Set(groups.map(g => g.id));
+            }
+            // Focus search input when opening
+            setTimeout(() => {
+                if (this.searchInputRef) {
+                    this.searchInputRef.focus();
+                }
+            }, 50);
+        }
+    };
+    handleSearchInput = (event) => {
+        const target = event.target;
+        this.searchQuery = target.value;
+    };
+    handleGroupToggle = (groupId) => {
+        const newSet = new Set(this.expandedGroups);
+        if (newSet.has(groupId)) {
+            newSet.delete(groupId);
+        }
+        else {
+            newSet.add(groupId);
+        }
+        this.expandedGroups = newSet;
+    };
+    handlePropertySelect = (property) => {
+        this.internalSelectedProperty = property.name;
+        this.bhPropertyChange.emit(property);
+        this.isExpanded = false;
+        this.searchQuery = '';
+    };
+    getPropertyGroups = () => {
+        const groupMap = new Map();
+        const ungrouped = [];
+        this.properties.forEach((property) => {
+            if (property.group) {
+                const existing = groupMap.get(property.group) || [];
+                existing.push(property);
+                groupMap.set(property.group, existing);
+            }
+            else {
+                ungrouped.push(property);
+            }
+        });
+        const groups = [];
+        groupMap.forEach((properties, name) => {
+            groups.push({
+                id: name.toLowerCase().replace(/\s+/g, '-'),
+                name,
+                properties,
+            });
+        });
+        // Add ungrouped properties as a special group if any exist
+        if (ungrouped.length > 0) {
+            groups.push({
+                id: 'ungrouped',
+                name: 'Other',
+                properties: ungrouped,
+            });
+        }
+        return groups;
+    };
+    filterProperties = (properties) => {
+        if (!this.searchQuery.trim()) {
+            return properties;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return properties.filter((p) => p.name.toLowerCase().includes(query));
+    };
+    filterGroups = (groups) => {
+        if (!this.searchQuery.trim()) {
+            return groups;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return groups
+            .map((group) => {
+            // Check if group name matches
+            const groupMatches = group.name.toLowerCase().includes(query);
+            // Filter properties within the group
+            const filteredProperties = group.properties.filter((p) => p.name.toLowerCase().includes(query));
+            // Include group if group name matches (show all properties) or if any properties match
+            if (groupMatches) {
+                return { ...group }; // Return group with all properties
+            }
+            else if (filteredProperties.length > 0) {
+                return { ...group, properties: filteredProperties };
+            }
+            return null;
+        })
+            .filter((g) => g !== null);
+    };
+    getPropertyIcon = (type) => {
+        switch (type) {
+            case 'portfolio':
+                return 'business';
+            case 'region':
+                return 'public';
+            case 'property':
+            default:
+                return 'location_on';
+        }
+    };
+    renderSearchInput() {
+        return (index.h("div", { class: "search-container" }, index.h("span", { class: "material-symbols-outlined search-icon" }, "search"), index.h("input", { ref: (el) => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.searchQuery && (index.h("button", { class: "clear-search", onClick: (e) => {
+                e.stopPropagation();
+                this.searchQuery = '';
+                this.searchInputRef?.focus();
+            }, "aria-label": "Clear search" }, index.h("span", { class: "material-symbols-outlined" }, "close")))));
+    }
+    renderPropertyItem(property) {
+        const isSelected = property.name === this.internalSelectedProperty;
+        return (index.h("button", { class: {
+                'property-item': true,
+                'selected': isSelected,
+            }, onClick: () => this.handlePropertySelect(property) }, index.h("span", { class: "material-symbols-outlined property-icon" }, this.getPropertyIcon(property.type)), index.h("span", { class: "property-item-name", title: property.name }, property.name), isSelected && (index.h("span", { class: "material-symbols-outlined check-icon" }, "check"))));
+    }
+    renderGroupedView() {
+        const groups = this.getPropertyGroups();
+        const filteredGroups = this.filterGroups(groups);
+        if (filteredGroups.length === 0) {
+            return this.renderEmptyState();
+        }
+        return (index.h("div", { class: "groups-container" }, filteredGroups.map((group) => {
+            const isExpanded = this.expandedGroups.has(group.id);
+            return (index.h("div", { class: "property-group", key: group.id }, index.h("button", { class: {
+                    'group-header': true,
+                    'expanded': isExpanded,
+                }, onClick: () => this.handleGroupToggle(group.id), "aria-expanded": isExpanded ? 'true' : 'false' }, index.h("span", { class: "material-symbols-outlined group-expand-icon" }, isExpanded ? 'expand_more' : 'chevron_right'), index.h("span", { class: "group-name" }, group.name), index.h("span", { class: "group-count" }, group.properties.length)), isExpanded && (index.h("div", { class: "group-properties" }, group.properties.map((property) => (index.h("div", { key: property.id }, this.renderPropertyItem(property))))))));
+        })));
+    }
+    renderFlatView() {
+        const filteredProperties = this.filterProperties(this.properties);
+        if (filteredProperties.length === 0) {
+            return this.renderEmptyState();
+        }
+        // Legacy behavior: render portfolios with dividers, skip regions
+        const items = [];
+        filteredProperties.forEach((property) => {
+            if (property.type === 'portfolio') {
+                items.push(property);
+                items.push({ divider: true });
+            }
+            else if (property.type === 'property') {
+                items.push(property);
+            }
+        });
+        return (index.h("div", { class: "flat-list-container" }, items.map((item, index$1) => {
+            if ('divider' in item) {
+                return index.h("div", { class: "menu-divider", key: `divider-${index$1}` });
+            }
+            return (index.h("div", { key: item.id }, this.renderPropertyItem(item)));
+        })));
+    }
+    renderEmptyState() {
+        return (index.h("div", { class: "empty-state" }, index.h("span", { class: "material-symbols-outlined empty-icon" }, "search_off"), index.h("span", { class: "empty-text" }, "No properties found")));
+    }
+    getSelectedProperty() {
+        return this.properties.find(p => p.name === this.internalSelectedProperty);
+    }
+    render() {
+        const containerClasses = {
+            'property-switcher': true,
+            'expanded': this.isExpanded,
+        };
+        const selectedProp = this.getSelectedProperty();
+        const displayName = this.internalSelectedProperty || this.selectedProperty;
+        return (index.h(index.Host, { key: '02541bacd9b48dbf5c8939ed6b4f9a08393e788c' }, index.h("div", { key: 'cb0f6de5ee67caa19e6a7022ec89347d81dbda7e', ref: (el) => (this.switcherRef = el), class: containerClasses }, index.h("button", { key: '4fc5cd736389e8707d4c86ae319a721e685dc88a', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (index.h("span", { key: 'dfe3c36f344113c8edb18c234dc0e9d81fbed9ef', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), index.h("span", { key: 'e83cbe7b26f6d8b94557003da87580dd00053acc', class: "property-name" }, displayName), index.h("span", { key: '4f6d01218d1d60afaa148d375d911d2701d9b5bd', class: "material-symbols-outlined expand-icon", "aria-label": this.isExpanded ? 'Collapse Options' : 'Expand Options' }, this.isExpanded ? 'unfold_less' : 'unfold_more')), this.isExpanded && (index.h("div", { key: '9c6ee765cd36535305b9236d46ba96657aeac308', class: "dropdown-panel" }, this.renderSearchInput(), index.h("div", { key: '5433d7a5ad985549a332cd7df7070d123ce98153', class: "dropdown-content" }, this.grouped
+            ? this.renderGroupedView()
+            : this.renderFlatView()))))));
+    }
+};
+BhPropertySwitcher.style = bhPropertySwitcherCss;
+
+exports.bh_property_switcher = BhPropertySwitcher;
+//# sourceMappingURL=bh-property-switcher.entry.cjs.js.map

package/dist/cjs/bh-sidebar.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhSidebarCss = ".sidebar-container{width:fit-content;height:100vh;background-color:var(--color-white);position:relative;display:flex}.navigation{background-color:var(--color-white);display:flex;height:100%;align-items:flex-start;justify-content:flex-start;position:relative;border-right:1px solid var(--color-neutral-200);z-index:100}.gradient-bar{position:relative;width:var(--spacing-xs);height:100%;flex-shrink:0}.detail-bar{position:absolute;background:linear-gradient(\n    180deg,\n    var(--color-accent-300) 0%,\n    var(--color-brand-400) 51%,\n    var(--color-brand-800) 100%\n  );inset:0}.sidebar-content{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing-2xl);height:100%;align-items:center;justify-content:flex-start;padding:var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n    var(--spacing-md);position:relative;flex-shrink:0;width:60px}.navigation-section{flex:1 1 0%;display:flex;flex-direction:column;gap:var(--spacing-xl);flex-grow:1;align-items:center;justify-content:flex-start;min-height:0;position:relative;flex-shrink:0;width:100%;overflow-y:auto;overflow-x:hidden}.search-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}.nav-items{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.sidebar-footer{display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:center;justify-content:end;position:relative;flex-shrink:0;width:100%}.footer-navigation{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}.sidebar-collapsed .sidebar-content{width:60px}.sidebar-collapsed .nav-item-label{display:none}.navigation-section::-webkit-scrollbar{width:4px}.navigation-section::-webkit-scrollbar-track{background:transparent}.navigation-section::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.navigation-section::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.navigation-section{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.sidebar-expanded .sidebar-content{width:240px}.sidebar-expanded .nav-items{align-items:flex-start}.sidebar-expanded .nav-item{width:100%;flex-direction:row;justify-content:flex-start;gap:var(--spacing-md)}.sidebar-expanded .nav-item-label{display:block;text-align:left;font-size:var(--text-sm-size);height:auto;line-height:var(--text-sm-line)}";
+
+const BhSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhMenuItemClick = index.createEvent(this, "bhMenuItemClick");
+        this.bhSearchClick = index.createEvent(this, "bhSearchClick");
+        this.bhAvatarMenuClick = index.createEvent(this, "bhAvatarMenuClick");
+    }
+    /**
+     * Type of logo to display
+     */
+    logoType = 'actabl';
+    /**
+     * Avatar image URL
+     */
+    avatarUrl;
+    /**
+     * Avatar initials (used if avatarUrl is not provided)
+     */
+    avatarInitials = 'DM';
+    /**
+     * Avatar name for dropdown
+     */
+    avatarName = 'Daniel Mobara';
+    /**
+     * Avatar email for dropdown
+     */
+    avatarEmail = 'daniel@solsticehospitality.com';
+    /**
+     * Main menu navigation items
+     */
+    menuItems = [
+        { label: 'Dashboard', icon: 'dashboard', isActive: true },
+        { label: 'Analytics', icon: 'analytics', isActive: false },
+        { label: 'Reports', icon: 'assessment', isActive: false },
+        { label: 'Calendar', icon: 'calendar_today', isActive: false },
+        { label: 'Messages', icon: 'message', isActive: false },
+        { label: 'Contacts', icon: 'contacts', isActive: false },
+        { label: 'Files', icon: 'folder', isActive: false },
+    ];
+    /**
+     * Footer navigation items
+     */
+    footerItems = [
+        { label: 'Help', icon: 'help_outline' },
+        { label: 'Settings', icon: 'settings' },
+    ];
+    /**
+     * Whether sidebar is collapsed
+     */
+    collapsed = false;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhMenuItemClick;
+    /**
+     * Event emitted when search button is clicked
+     */
+    bhSearchClick;
+    /**
+     * Event emitted when avatar menu item is clicked
+     */
+    bhAvatarMenuClick;
+    activeItem = '';
+    componentWillLoad() {
+        const activeMenuItem = this.menuItems.find(item => item.isActive);
+        this.activeItem = activeMenuItem?.label || '';
+    }
+    handleNavItemClick = (label) => {
+        this.activeItem = label;
+        this.bhMenuItemClick.emit(label);
+    };
+    handleSearchClick = () => {
+        this.bhSearchClick.emit();
+    };
+    handleAvatarMenuClick = (event) => {
+        this.bhAvatarMenuClick.emit(event.detail);
+    };
+    render() {
+        const sidebarClasses = {
+            'sidebar-container': true,
+            'sidebar-collapsed': this.collapsed,
+        };
+        const avatarMenuItems = [
+            { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },
+            { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },
+            { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },
+            { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },
+            { id: '5', divider: true },
+            { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },
+            { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },
+            { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },
+            { id: '9', divider: true },
+            { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },
+            { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },
+            { id: '12', divider: true },
+            { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },
+        ];
+        return (index.h(index.Host, { key: '8ea6a230d0b50bac6868a43f2f4c3b4cb89f147d' }, index.h("div", { key: '152c63b3a7a61ea13ca78b05ef3077b135cc4638', class: sidebarClasses }, index.h("div", { key: '13fdf8adc8c29bf947a43ab05b4cbd67bab9bc82', class: "navigation" }, index.h("div", { key: 'fd4960f7b232bdfff7bb80d98f718d5bdeddd5a3', class: "gradient-bar" }, index.h("div", { key: '5304c3a6b81a9941491105233770977c64e06586', class: "detail-bar" })), index.h("div", { key: '000cad8051add1dbabfe2454579c22ffa371ebc0', class: "sidebar-content" }, index.h("bh-logo-box", { key: 'ca59b066c4d1053824443a8dd63702d285a66b7c', logoType: this.logoType }), index.h("div", { key: 'a8b8fc37101b5a8ad83c309dbbf8dbd45b9227f9', class: "navigation-section" }, index.h("div", { key: '10dda65730b5c23d2a13f0a27636192da1c9b21a', class: "search-container" }, index.h("bh-button-icon", { key: '52379a2f1fbf04ff494e7cff1b33aca99ce809fb', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: '85b26cfcd1b91e4d96be801e654acba45f3649a5', class: "nav-items" }, this.menuItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), index.h("div", { key: '82647befc09ce326032e6b034189180e826fb7f6', class: "sidebar-footer" }, index.h("div", { key: '0d8a12f59003ff31b97430ccc017fdd9bfa6636f', class: "footer-navigation" }, this.footerItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), index.h("bh-dropdown", { key: '4016dd4b427aba6b25d8f1d7e04c90236a97d28a', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
+    }
+};
+BhSidebar.style = bhSidebarCss;
+
+exports.bh_sidebar = BhSidebar;
+//# sourceMappingURL=bh-sidebar.entry.cjs.js.map

package/dist/cjs/bh-tab-item.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhTabItemCss = ":host{display:flex}:host(.tab-item-full){flex:1 0 0;min-width:0}.tab-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);min-height:36px;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:var(--weight-semibold);color:var(--color-neutral-600);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s ease-in-out;white-space:nowrap;outline:none;width:100%}:host-context(.tabs-underline) .tab-button{border-radius:0;padding-top:var(--spacing-xs);padding-bottom:var(--spacing-md);border-bottom:2px solid transparent}:host-context(.tabs-full-width) .tab-button{justify-content:center}:host-context(.tabs-contained) .tab-button-active{color:var(--color-brand-600);background-color:var(--color-brand-50)}:host-context(.tabs-underline) .tab-button-active{color:var(--color-brand-600);border-bottom-color:var(--color-brand-600)}:host-context(.tabs-contained) .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active){background-color:var(--color-neutral-50);color:var(--color-neutral-700)}:host-context(.tabs-underline) .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active){color:var(--color-neutral-700)}:host-context(.tabs-contained) .tab-button:active:not(.tab-button-disabled){background-color:var(--color-neutral-100)}.tab-button:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.tab-button-disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}.tab-label{display:inline-block}:host-context(.tabs-vertical){width:100%}:host-context(.tabs-vertical) .tab-button{justify-content:flex-start;width:100%}:host-context(.tabs-vertical.tabs-contained) .tab-button-active{color:var(--color-brand-600);background-color:var(--color-brand-50)}:host-context(.tabs-vertical.tabs-underline) .tab-button{border-radius:0;border-bottom:none;border-left:2px solid transparent;padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg)}:host-context(.tabs-vertical.tabs-underline) .tab-button-active{color:var(--color-brand-600);border-left-color:var(--color-brand-600);border-bottom-color:transparent}";
+
+const BhTabItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhTabItemClick = index.createEvent(this, "bhTabItemClick");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Unique identifier for this tab
+     */
+    value;
+    /**
+     * The label text for the tab
+     */
+    label;
+    /**
+     * Whether this tab is currently active
+     */
+    active = false;
+    /**
+     * Whether this tab is disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when the tab is clicked
+     */
+    bhTabItemClick;
+    handleClick = () => {
+        if (!this.disabled) {
+            this.bhTabItemClick.emit(this.value);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'tab-button': true,
+            'tab-button-active': this.active,
+            'tab-button-disabled': this.disabled,
+        };
+        return (index.h(index.Host, { key: 'ef47c62d9595bb0f5648bacb3d4c8e1585d35a91', class: {
+                'tab-item': true,
+                'tab-item-active': this.active,
+                'tab-item-disabled': this.disabled,
+            } }, index.h("button", { key: 'a2e2130bc0cb369c456b9898732cd90350b69a79', class: buttonClasses, part: "button", role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.handleClick, type: "button" }, index.h("span", { key: '2c415f19e1901e3d36039b5960b8ba80dd58d545', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd4484b4a489ddd7babdfba449e023370ae9aaea5' }))));
+    }
+};
+BhTabItem.style = bhTabItemCss;
+
+exports.bh_tab_item = BhTabItem;
+//# sourceMappingURL=bh-tab-item.entry.cjs.js.map

package/dist/cjs/bh-tabs.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhTabsCss = ":host{display:block;width:100%}.tabs-container{display:flex;flex-direction:column;width:100%}.tabs-list{display:flex;gap:var(--spacing-xs);padding:var(--spacing-none);position:relative}.tabs-full-width .tabs-list{width:100%;gap:var(--spacing-lg);justify-content:center}.tabs-underline.tabs-horizontal .tabs-container{border-bottom:1px solid var(--color-neutral-200)}.tabs-underline.tabs-horizontal .tabs-list{gap:var(--spacing-lg)}.tabs-underline.tabs-horizontal.tabs-full-width .tabs-list{gap:var(--spacing-lg)}.tabs-contained .tabs-list{gap:var(--spacing-xs)}.tabs-vertical{width:auto}.tabs-vertical .tabs-container{width:auto}.tabs-vertical .tabs-list{flex-direction:column;gap:var(--spacing-xs);width:204px}.tabs-underline.tabs-vertical .tabs-container{border-bottom:none}";
+
+const BhTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhTabChange = index.createEvent(this, "bhTabChange");
+    }
+    /**
+     * The type of tabs: underline or contained style
+     */
+    type = 'contained';
+    /**
+     * The orientation of the tabs: horizontal or vertical
+     */
+    orientation = 'horizontal';
+    /**
+     * Whether the tabs should take up the full width of the container
+     */
+    fullWidth = false;
+    /**
+     * The value of the currently active tab
+     */
+    value = '';
+    /**
+     * Emitted when the active tab changes
+     */
+    bhTabChange;
+    handleTabItemClick(event) {
+        const value = event.detail;
+        if (this.value !== value) {
+            this.value = value;
+            this.bhTabChange.emit(value);
+        }
+    }
+    render() {
+        const hostClasses = {
+            tabs: true,
+            [`tabs-${this.type}`]: true,
+            [`tabs-${this.orientation}`]: true,
+            'tabs-full-width': this.fullWidth,
+        };
+        return (index.h(index.Host, { key: '93b74ceb1d093513ff2d5a167e3de238209411a4', class: hostClasses }, index.h("div", { key: '290c0e7ce4d1ae84e566237a122786e305522b9f', class: "tabs-container", part: "container" }, index.h("div", { key: '424276b73c8279c24441a389026c0c7db25e55b1', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: 'fe8030d885237dccbef3d1a70bc912c338b038c6' })))));
+    }
+};
+BhTabs.style = bhTabsCss;
+
+exports.bh_tabs = BhTabs;
+//# sourceMappingURL=bh-tabs.entry.cjs.js.map

package/dist/cjs/bh-textarea.cjs.entry.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+var form = require('./form-9mbajZ3y.js');
+
+const bhTextareaCss = ":host{display:block}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.textarea-container{position:relative;display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:8px;box-shadow:0px 1px 2px rgba(64, 73, 104, 0.06);transition:all 0.2s ease-in-out;min-height:128px}.textarea-container:hover:not(.textarea-container-disabled):not(.textarea-container-focused){border-color:var(--color-brand-500)}.textarea-container-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 1px var(--color-brand-500)}.textarea-container-error{border-color:var(--color-error-300)}.textarea-container-error:hover:not(.textarea-container-focused){border-color:var(--color-error-500)}.textarea-container-error.textarea-container-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 1px var(--color-brand-500)}.textarea-container-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50)}.textarea-content{width:100%}.textarea{box-sizing:border-box;padding:12px 14px;background:transparent;border:none;outline:none;font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.5;color:var(--color-neutral-900);width:100%;min-height:96px;resize:none;caret-color:var(--color-brand-500);flex:1;box-shadow:none}.textarea:focus{outline:none;border:none;box-shadow:none}.textarea::placeholder{color:var(--color-neutral-400)}.textarea:disabled{cursor:not-allowed;color:var(--color-neutral-400)}.hint-text{font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600)}.hint-text.hint-error{color:var(--color-error-600)}@media (max-width: 768px){.textarea{font-size:16px;}}";
+
+const BhTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhInput = index.createEvent(this, "bhInput");
+        this.bhFocus = index.createEvent(this, "bhFocus");
+        this.bhBlur = index.createEvent(this, "bhBlur");
+        this.bhHelpClick = index.createEvent(this, "bhHelpClick");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    textareaEl;
+    /**
+     * The label for the textarea
+     */
+    label = 'Comment';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Write a message...';
+    /**
+     * Hint text shown below the textarea
+     */
+    hintText = '';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether the field has an error
+     */
+    error = false;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * The textarea value
+     */
+    value = '';
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Default value for form reset
+     */
+    defaultValue = '';
+    /**
+     * Custom validation message
+     */
+    validationMessage = '';
+    /**
+     * Number of visible rows
+     */
+    rows = 4;
+    /**
+     * Resize behavior
+     */
+    resize = 'none';
+    /**
+     * Maximum character length
+     */
+    maxLength;
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Emitted when the value changes
+     */
+    bhInput;
+    /**
+     * Emitted when the textarea gains focus
+     */
+    bhFocus;
+    /**
+     * Emitted when the textarea loses focus
+     */
+    bhBlur;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    componentDidLoad() {
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.textareaEl) {
+            this.textareaEl.value = this.defaultValue;
+        }
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.textareaEl);
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.bhBlur.emit();
+    };
+    handleHelpClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const containerClasses = {
+            'textarea-container': true,
+            'textarea-container-focused': this.isFocused,
+            'textarea-container-error': this.error,
+            'textarea-container-disabled': this.disabled,
+        };
+        const textareaClasses = {
+            'textarea': true,
+            'textarea-error': this.error,
+        };
+        return (index.h("div", { key: 'a822380cef2104a61c1a8f2f79900b9ed9c12063', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: 'd8c77f1ddc75f6b42bc47bb8086ada57ca1c3e35', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '6d92f1c3a0f34729c24677c2a071559b5e7d527f', class: containerClasses }, index.h("div", { key: '9ac271fe196de95b9460eea3bf3cbfd1fd768c13', class: "textarea-content" }, index.h("textarea", { key: '1900eb1a188165ef624a41de391b5d0648d1b8b4', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "textarea" })))), this.showHintText && this.hintText && (index.h("div", { key: '2733112bfee45f11e13d92631c5f17518634030b', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get formAssociated() { return true; }
+};
+BhTextarea.style = bhTextareaCss;
+
+exports.bh_textarea = BhTextarea;
+//# sourceMappingURL=bh-textarea.entry.cjs.js.map