@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/cjs/bh-radio-button.cjs.entry.js

@@ -1,124 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-var form = require('./form-9mbajZ3y.js');
-
-const bhRadioButtonCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.radio{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;outline:none;user-select:none;transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;box-sizing:border-box;background:var(--color-white);border:2px solid var(--color-neutral-300);border-radius:var(--radius-full);position:relative;flex-shrink:0}.radio-sm{width:16px;height:16px}.radio-md{width:20px;height:20px}.radio.radio-selected{background:var(--color-brand-600);border-color:var(--color-brand-600);animation:fillExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.radio:hover:not(.radio-disabled){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.radio.radio-selected:hover:not(.radio-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600)}.radio.radio-focused:not(.radio-disabled){border-color:var(--color-neutral-300);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}.radio.radio-selected.radio-focused:not(.radio-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}.radio.radio-disabled{background:var(--color-neutral-50);border-color:var(--color-neutral-300);cursor:not-allowed;opacity:1}.radio.radio-selected.radio-disabled{background:var(--color-neutral-50);border:2px solid var(--color-neutral-300)}.radio-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-white);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.radio-sm .radio-dot{width:4px;height:4px}.radio-disabled .radio-dot{background:var(--color-neutral-300)}.radio:focus{outline:none}.radio:focus:not(.radio-disabled){box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}@keyframes fillExpand{0%{transform:scale(0.95)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.radio-wrapper{display:inline-block}.radio-control{display:inline-flex;align-items:flex-start;cursor:pointer;outline:none}.radio-wrapper-disabled .radio-control{cursor:not-allowed}.radio-wrapper-with-label .radio-sm{margin-top:3px}.radio-wrapper-with-label .radio-md{margin-top:2px}";
-
-const BhRadioButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhChange = index.createEvent(this, "bhChange");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    /**
-     * The size of the radio button
-     */
-    size = 'md';
-    /**
-     * Whether the radio button is selected
-     */
-    selected = false;
-    /**
-     * Whether the radio button is disabled
-     */
-    disabled = false;
-    /**
-     * The value associated with this radio button
-     */
-    value = '';
-    /**
-     * The name of the radio group
-     */
-    name = '';
-    /**
-     * Optional label text - when provided, renders radio with label
-     */
-    label = '';
-    /**
-     * Optional supporting text below the label
-     */
-    supportingText = '';
-    /**
-     * Track focus state internally
-     */
-    isFocused = false;
-    /**
-     * Track hover state internally
-     */
-    isHovered = false;
-    /**
-     * Emitted when the radio button selection changes
-     */
-    bhChange;
-    componentDidLoad() {
-        form.syncCheckableFormValue(this.internals, this.name, this.selected, this.value);
-    }
-    formResetCallback() {
-        this.selected = false;
-        form.syncCheckableFormValue(this.internals, this.name, this.selected, this.value);
-    }
-    handleClick = () => {
-        if (this.disabled || this.selected)
-            return;
-        this.selected = true;
-        form.syncCheckableFormValue(this.internals, this.name, this.selected, this.value);
-        this.bhChange.emit(this.value);
-    };
-    handleKeyDown = (event) => {
-        if (event.key === ' ' || event.key === 'Enter') {
-            event.preventDefault();
-            this.handleClick();
-        }
-    };
-    handleFocus = () => {
-        this.isFocused = true;
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-    };
-    handleMouseEnter = () => {
-        this.isHovered = true;
-    };
-    handleMouseLeave = () => {
-        this.isHovered = false;
-    };
-    uniqueId = `bh-radio-${Math.random().toString(36).substring(2, 9)}`;
-    renderRadioControl() {
-        const radioClasses = {
-            'radio': true,
-            [`radio-${this.size}`]: true,
-            'radio-selected': this.selected,
-            'radio-disabled': this.disabled,
-            'radio-focused': this.isFocused && !this.disabled,
-            'radio-hover': this.isHovered && !this.disabled,
-        };
-        return (index.h("div", { class: "radio-control", onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": String(this.selected), "aria-disabled": String(this.disabled) }, index.h("div", { class: radioClasses, part: "radio" }, this.selected && index.h("div", { class: "radio-dot" }))));
-    }
-    render() {
-        const hasLabel = this.label || this.supportingText;
-        const wrapperClasses = {
-            'radio-wrapper': true,
-            'radio-wrapper-with-label': !!hasLabel,
-            'radio-wrapper-disabled': this.disabled,
-        };
-        // Render with bh-label when label/supportingText is provided
-        if (hasLabel) {
-            return (index.h("div", { class: wrapperClasses, part: "wrapper" }, index.h("bh-label", { layout: "inline-start", label: this.label, supportingText: this.supportingText, disabled: this.disabled, for: this.uniqueId }, this.renderRadioControl())));
-        }
-        // Standalone radio button without label
-        return (index.h("div", { class: wrapperClasses, part: "wrapper" }, this.renderRadioControl()));
-    }
-    static get formAssociated() { return true; }
-};
-BhRadioButton.style = bhRadioButtonCss;
-
-exports.bh_radio_button = BhRadioButton;
-//# sourceMappingURL=bh-radio-button.entry.cjs.js.map

package/cjs/bh-radio-button.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bh-radio-button.entry.cjs.js","sources":["src/components/bh-radio-button/bh-radio-button.css?tag=bh-radio-button&encapsulation=shadow","src/components/bh-radio-button/bh-radio-button.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-RADIO-BUTTON COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n   RADIO BUTTON STYLES\n   ========================================================================== */\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;\n  box-sizing: border-box;\n  background: var(--color-white);\n  border: 2px solid var(--color-neutral-300);\n  border-radius: var(--radius-full);\n  position: relative;\n  flex-shrink: 0;\n}\n\n/* Size Variants */\n.radio-sm {\n  width: 16px;\n  height: 16px;\n}\n\n.radio-md {\n  width: 20px;\n  height: 20px;\n}\n\n/* State: Selected */\n.radio.radio-selected {\n  background: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n  animation: fillExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* State: Hover */\n.radio:hover:not(.radio-disabled) {\n  background: var(--color-neutral-100);\n  border-color: var(--color-neutral-300);\n}\n\n.radio.radio-selected:hover:not(.radio-disabled) {\n  background: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n/* State: Focused */\n.radio.radio-focused:not(.radio-disabled) {\n  border-color: var(--color-neutral-300);\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white);\n}\n\n.radio.radio-selected.radio-focused:not(.radio-disabled) {\n  background: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white);\n}\n\n/* State: Disabled */\n.radio.radio-disabled {\n  background: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n  cursor: not-allowed;\n  opacity: 1;\n}\n\n.radio.radio-selected.radio-disabled {\n  background: var(--color-neutral-50);\n  border: 2px solid var(--color-neutral-300);\n}\n\n/* Radio Dot (inner circle) */\n.radio-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-full);\n  background: var(--color-white);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n/* Radio Dot for small size */\n.radio-sm .radio-dot {\n  width: 4px;\n  height: 4px;\n}\n\n/* Disabled radio dot */\n.radio-disabled .radio-dot {\n  background: var(--color-neutral-300);\n}\n\n/* Focus outline for accessibility */\n.radio:focus {\n  outline: none;\n}\n\n.radio:focus:not(.radio-disabled) {\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white);\n}\n\n/* Animation for fill effect */\n@keyframes fillExpand {\n  0% {\n    transform: scale(0.95);\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* ==========================================================================\n   RADIO CONTROL AND WRAPPER STYLES\n   ========================================================================== */\n\n.radio-wrapper {\n  display: inline-block;\n}\n\n.radio-control {\n  display: inline-flex;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n}\n\n.radio-wrapper-disabled .radio-control {\n  cursor: not-allowed;\n}\n\n/* Adjust radio position when with label */\n.radio-wrapper-with-label .radio-sm {\n  margin-top: 3px;\n}\n\n.radio-wrapper-with-label .radio-md {\n  margin-top: 2px;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue } from '../../utils/form';\n\nexport type RadioButtonSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-radio-button',\n  styleUrl: 'bh-radio-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhRadioButton {\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The size of the radio button\n   */\n  @Prop() size: RadioButtonSize = 'md';\n\n  /**\n   * Whether the radio button is selected\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the radio button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The value associated with this radio button\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The name of the radio group\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Optional label text - when provided, renders radio with label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Optional supporting text below the label\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Track focus state internally\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Track hover state internally\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Emitted when the radio button selection changes\n   */\n  @Event() bhChange!: EventEmitter<string>;\n\n  componentDidLoad() {\n    syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n  }\n\n  formResetCallback() {\n    this.selected = false;\n    syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n  }\n\n  private handleClick = (): void => {\n    if (this.disabled || this.selected) return;\n\n    this.selected = true;\n    syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n    this.bhChange.emit(this.value);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n  };\n\n  private handleMouseEnter = (): void => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private uniqueId = `bh-radio-${Math.random().toString(36).substring(2, 9)}`;\n\n  private renderRadioControl() {\n    const radioClasses = {\n      'radio': true,\n      [`radio-${this.size}`]: true,\n      'radio-selected': this.selected,\n      'radio-disabled': this.disabled,\n      'radio-focused': this.isFocused && !this.disabled,\n      'radio-hover': this.isHovered && !this.disabled,\n    };\n\n    return (\n      <div\n        class=\"radio-control\"\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        tabIndex={this.disabled ? -1 : 0}\n        role=\"radio\"\n        aria-checked={String(this.selected)}\n        aria-disabled={String(this.disabled)}\n      >\n        <div class={radioClasses} part=\"radio\">\n          {this.selected && <div class=\"radio-dot\"></div>}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLabel = this.label || this.supportingText;\n\n    const wrapperClasses = {\n      'radio-wrapper': true,\n      'radio-wrapper-with-label': !!hasLabel,\n      'radio-wrapper-disabled': this.disabled,\n    };\n\n    // Render with bh-label when label/supportingText is provided\n    if (hasLabel) {\n      return (\n        <div class={wrapperClasses} part=\"wrapper\">\n          <bh-label\n            layout=\"inline-start\"\n            label={this.label}\n            supportingText={this.supportingText}\n            disabled={this.disabled}\n            for={this.uniqueId}\n          >\n            {this.renderRadioControl()}\n          </bh-label>\n        </div>\n      );\n    }\n\n    // Standalone radio button without label\n    return (\n      <div class={wrapperClasses} part=\"wrapper\">\n        {this.renderRadioControl()}\n      </div>\n    );\n  }\n}\n"],"names":["syncCheckableFormValue","h"],"mappings":"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"}

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

@@ -1,110 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.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: '14f483d75df70a5bfbda0731fe7d82aaf20d551b' }, index.h("div", { key: '8ea1b342688f955b401a77a808561b76164f0d0e', class: sidebarClasses }, index.h("div", { key: '931c6ba45580b069dbf7e96119e3ee914d05ce78', class: "navigation" }, index.h("div", { key: '9b39938bfe77ff84a68830de2bd8392ab3a3c1b2', class: "gradient-bar" }, index.h("div", { key: 'b196a1b459740323a927b1a5fee2ab65f596ed24', class: "detail-bar" })), index.h("div", { key: '00af6a0d4e4747b1026fa7d19b6c7a6a96457207', class: "sidebar-content" }, index.h("bh-logo-box", { key: '4032fc97e8965a77027ec269b87de5d2585be348', logoType: this.logoType }), index.h("div", { key: 'add8f2396ec79e7b7765cca6a42519c867f30ee7', class: "navigation-section" }, index.h("div", { key: '5c8116a117a7b406bb52d0cc0da2d51d472c4431', class: "search-container" }, index.h("bh-button-icon", { key: '024ce4ab04cf6404a05a7cae07f9f1a832a173e8', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: 'e3d90a44f3ab91348cd0b516548588b1fae2aa92', 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: '447d84326d1f56d53e75190ed8d85c428769c5ce', class: "sidebar-footer" }, index.h("div", { key: '1ef5c3d1fbe579a7da66cba2ea436c7e9639ff95', 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: 'aef26cfc2faa17043588054c36bcb2f8a9008cc1', 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/cjs/bh-skeleton-loader.cjs.entry.js

@@ -1,34 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-
-const bhSkeletonLoaderCss = ":host{display:inline-block}.skeleton{display:inline-block;background:linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm);line-height:1}.skeleton-circle{border-radius:50%}.skeleton::before{content:'\\00a0'}@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
-
-const BhSkeletonLoader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /**
-     * Width of the skeleton (CSS value)
-     */
-    width = '100%';
-    /**
-     * Height of the skeleton (CSS value)
-     */
-    height = '1em';
-    /**
-     * Whether the skeleton should be circular
-     */
-    circle = false;
-    render() {
-        const skeletonClasses = {
-            'skeleton': true,
-            'skeleton-circle': this.circle,
-        };
-        return (index.h("span", { key: 'c49b2ec3dced60f158ec5dbb0471f6fc057984d1', class: skeletonClasses, style: { width: this.width, height: this.height }, role: "status", "aria-live": "polite", "aria-busy": "true", part: "skeleton" }, index.h("span", { key: 'b360eefd8747e5b5c2a863bf6bf6083b978a6a55', class: "visually-hidden" }, "Loading...")));
-    }
-};
-BhSkeletonLoader.style = bhSkeletonLoaderCss;
-
-exports.bh_skeleton_loader = BhSkeletonLoader;
-//# sourceMappingURL=bh-skeleton-loader.entry.cjs.js.map

package/cjs/bh-skeleton-loader.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bh-skeleton-loader.entry.cjs.js","sources":["src/components/bh-skeleton-loader/bh-skeleton-loader.css?tag=bh-skeleton-loader&encapsulation=shadow","src/components/bh-skeleton-loader/bh-skeleton-loader.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-SKELETON-LOADER COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.skeleton {\n  display: inline-block;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );\n  background-size: 400% 100%;\n  animation: shimmer 1.5s ease-in-out infinite;\n  border-radius: var(--radius-sm);\n  line-height: 1;\n}\n\n.skeleton-circle {\n  border-radius: 50%;\n}\n\n.skeleton::before {\n  content: '\\00a0';\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-skeleton-loader',\n  styleUrl: 'bh-skeleton-loader.css',\n  shadow: true,\n})\nexport class BhSkeletonLoader {\n  /**\n   * Width of the skeleton (CSS value)\n   */\n  @Prop() width: string = '100%';\n\n  /**\n   * Height of the skeleton (CSS value)\n   */\n  @Prop() height: string = '1em';\n\n  /**\n   * Whether the skeleton should be circular\n   */\n  @Prop() circle: boolean = false;\n\n  render() {\n    const skeletonClasses = {\n      'skeleton': true,\n      'skeleton-circle': this.circle,\n    };\n\n    return (\n      <span\n        class={skeletonClasses}\n        style={{ width: this.width, height: this.height }}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-busy=\"true\"\n        part=\"skeleton\"\n      >\n        <span class=\"visually-hidden\">Loading...</span>\n      </span>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,8lBAA8lB;;MCO7mB,gBAAgB,GAAA,MAAA;;;;AAC3B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,MAAM,GAAW,KAAK;AAE9B;;AAEG;IACK,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;SAC/B;AAED,QAAA,QACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACR,WAAA,EAAA,MAAM,EAChB,IAAI,EAAC,UAAU,EAAA,EAEfA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAkB,EAAA,YAAA,CAAA,CAC1C;;;;;;;"}

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

@@ -1,54 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.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: '4ad8e3e786f4a4c8a2c38e518e66ef2ded4c04ca', class: {
-                'tab-item': true,
-                'tab-item-active': this.active,
-                'tab-item-disabled': this.disabled,
-            } }, index.h("button", { key: 'b149a3ed3cdd49e887545281a5f9a1383443aeca', 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: '03f58f2761a021310a6cd2f811795dbc95e02ea1', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd96a82e89d9d7c64d1f17c65da4a47f4774ed96a' }))));
-    }
-};
-BhTabItem.style = bhTabItemCss;
-
-exports.bh_tab_item = BhTabItem;
-//# sourceMappingURL=bh-tab-item.entry.cjs.js.map

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

@@ -1,52 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.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: '3eae9f235c7436f4ab2321e1d751071678d19418', class: hostClasses }, index.h("div", { key: '76b0313966bbb5bd1445d64a671480529a47c5ba', class: "tabs-container", part: "container" }, index.h("div", { key: '20e0d5a75efa9e55c501d350c1837c21e8118367', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: '46c28a21da056e1d10e87e3865a86c8d08f761d0' })))));
-    }
-};
-BhTabs.style = bhTabsCss;
-
-exports.bh_tabs = BhTabs;
-//# sourceMappingURL=bh-tabs.entry.cjs.js.map

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

@@ -1,161 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.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: '26fc849122d7d1749963cf522cf29eb2551efef3', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: '32c9deddf4c40bf8ce2ff683289d4fff9c396f09', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: 'eb8c890cd5ead8b49ac4932479e3aedd03d78701', class: containerClasses }, index.h("div", { key: 'c639ada3e32f70f807326c13120e294ca7e14c42', class: "textarea-content" }, index.h("textarea", { key: '9f9f6aa306d726bf1b13baf75dac1e5e9ef199d8', 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: '2b0288f4b0c3888ad4f9ca2870f6da14e6e39cdf', 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