@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/p-D6w8lxZi.js

@@ -0,0 +1,67 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhPageNavigationSingleLevelCss = ".page-navigation{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.page-navigation-single-level{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:6px;margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent}.page-navigation-single-level.active{background-color:transparent;border:1px solid transparent}.page-navigation-single-level:hover{background-color:var(--color-neutral-50) !important}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child:hover:not(.active)::after{content:'';position:absolute;left:-20px;top:0;bottom:0;width:20px;background-color:var(--color-neutral-100);z-index:1;border-radius:var(--radius-sm)}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-item-content,.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal) var(--animation-ease-enter)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-single-level.active .page-navigation-item-icon,.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label,.page-navigation-child-label{font-family:'Inter', sans-serif;font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-single-level.active .page-navigation-item-label,.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-item-badge,.page-navigation-child-badge{margin-left:auto}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+
+const BhPageNavigationSingleLevel = /*@__PURE__*/ proxyCustomElement(class BhPageNavigationSingleLevel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-single-level': true,
+            'page-navigation-animate-smooth': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (h(Host, { key: '1f58160e16d18bfe049035d33b48f14b11b676ae' }, h("div", { key: 'c5c44e67354359238f67df33c67e81ec2bbaf478', class: this.getItemClasses(), onClick: () => this.handleClick() }, h("div", { key: 'c3c3b27eaeb65d8325e5e92c428831af58a48448', class: "page-navigation-item-content" }, h("span", { key: 'e0e5315088e7f1c820fad38d2ae095494dc581bb', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), h("span", { key: '37d30adc75791076a84c58f92fd93ad7c16267f0', class: "page-navigation-item-label" }, this.label)))));
+    }
+    static get style() { return bhPageNavigationSingleLevelCss; }
+}, [769, "bh-page-navigation-single-level", {
+        "label": [1],
+        "icon": [1],
+        "isActive": [4, "is-active"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-page-navigation-single-level"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-page-navigation-single-level":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPageNavigationSingleLevel);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhPageNavigationSingleLevel as B, defineCustomElement as d };
+//# sourceMappingURL=p-D6w8lxZi.js.map
+
+//# sourceMappingURL=p-D6w8lxZi.js.map

package/dist/components/p-D6w8lxZi.js.map

@@ -0,0 +1 @@
+{"file":"p-D6w8lxZi.js","mappings":";;AAAA,MAAM,8BAA8B,GAAG,4yJAA4yJ;;MCOt0J,2BAA2B,iBAAAA,kBAAA,CAAA,MAAA,2BAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACtC;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,IAAI,GAAW,wBAAwB;AAE/C;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,WAAW;IAEZ,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAEO,cAAc,GAAA;QACpB,OAAO;AACL,YAAA,8BAA8B,EAAE,IAAI;AACpC,YAAA,gCAAgC,EAAE,IAAI;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAClE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qDAAqD,IAC9D,IAAI,CAAC,IAAI,CACL,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.css?tag=bh-page-navigation-single-level&encapsulation=shadow","src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.tsx"],"sourcesContent":["/* ==========================================================================\n   PAGE NAVIGATION COMPONENT - REACT IMPLEMENTATION\n   Unified styles for page navigation matching Angular functionality\n   ========================================================================== */\n\n/* Main Page Navigation Container */\n.page-navigation {\n  width: 320px;\n  min-width: 280px;\n  background-color: var(--color-white);\n  padding: var(--spacing-xl) var(--spacing-md);\n  font-family: var(--font-inter);\n  height: 100vh;\n  overflow-y: auto;\n  border-right: 1px solid var(--color-neutral-200);\n  box-sizing: border-box;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.page-navigation-header {\n  margin-bottom: var(--spacing-3xl);\n}\n\n.page-navigation-title {\n  font-size: var(--text-xl-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-xl-line);\n  color: var(--color-neutral-900);\n  padding: var(--spacing-none) var(--spacing-xl);\n  margin: 0;\n}\n\n.page-navigation-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n}\n\n/* ==========================================================================\n   SINGLE LEVEL NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-single-level {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: 6px;\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Active/Selected state for single level */\n.page-navigation-single-level.active {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for single level */\n.page-navigation-single-level:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* ==========================================================================\n   MULTI LEVEL NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-multi-level {\n  margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n  margin-top: var(--spacing-xs);\n  margin-bottom: var(--spacing-xs);\n  position: relative;\n  margin-left: var(--spacing-xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  /*overflow: hidden;*/\n  max-height: 1000px;\n  opacity: 1;\n  transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: -2px;\n  height: calc(100% + 4px);\n  width: 2px;\n  background-color: var(--color-neutral-200);\n  margin-left: var(--spacing-sm);\n  z-index: 2;\n}\n\n/* ==========================================================================\n   CHILD NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-child {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-md) var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 36px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n  margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n  background-color: var(--color-neutral-50);\n  position: relative;\n  z-index: 1;\n}\n\n/* Hover overlay to cover the vertical line */\n.page-navigation-child:hover:not(.active)::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  background-color: var(--color-neutral-100);\n  z-index: 1;\n  border-radius: var(--radius-sm);\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n  background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n  content: '';\n  position: absolute;\n  left: -4.5px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 2px;\n  height: 24px;\n  background-color: var(--color-brand-600);\n  z-index: 3;\n}\n\n/* ==========================================================================\n   ITEM CONTENT AND COMMON ELEMENTS\n   ========================================================================== */\n\n.page-navigation-item-content,\n.page-navigation-child-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n  transform-origin: top center;\n  transition: all var(--animation-duration-normal) var(--animation-ease-enter);\n}\n\n/* Chevron icon styling - separate from main icons */\n.page-navigation-chevron-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n  transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-single-level.active .page-navigation-item-icon,\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n  color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label,\n.page-navigation-child-label {\n  font-family: 'Inter', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--color-neutral-600);\n  flex: 1;\n  transition: all 0.15s ease;\n}\n\n\n/* Label color and weight changes for active states */\n.page-navigation-single-level.active .page-navigation-item-label,\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n  color: var(--color-neutral-900);\n  font-weight: 600;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n  color: var(--color-brand-600);\n  font-weight: 600;\n}\n\n/* Badges */\n.page-navigation-item-badge,\n.page-navigation-child-badge {\n  margin-left: auto;\n}\n\n/* ==========================================================================\n   RESPONSIVE DESIGN\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .page-navigation {\n    width: 280px;\n    min-width: 280px;\n  }\n}","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-page-navigation-single-level',\n  styleUrl: 'bh-page-navigation-single-level.css',\n  shadow: true,\n})\nexport class BhPageNavigationSingleLevel {\n  /**\n   * Label text for the navigation item\n   */\n  @Prop() label!: string;\n\n  /**\n   * Material icon name\n   */\n  @Prop() icon: string = 'radio_button_unchecked';\n\n  /**\n   * Whether the item is currently active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Event emitted when the navigation item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    this.bhItemClick.emit();\n  };\n\n  private getItemClasses() {\n    return {\n      'page-navigation-single-level': true,\n      'page-navigation-animate-smooth': true,\n      'active': this.isActive,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getItemClasses()} onClick={() => this.handleClick()}>\n          <div class=\"page-navigation-item-content\">\n            <span class=\"page-navigation-item-icon material-symbols-outlined\">\n              {this.icon}\n            </span>\n            <span class=\"page-navigation-item-label\">{this.label}</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DAp7fLS-.js

@@ -0,0 +1,124 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$2 } from './p-BFhwq3_y.js';
+import { d as defineCustomElement$1 } from './p-DkGh2r0W.js';
+
+const bhEmptyStateCss = ":host{display:block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.empty-state{display:flex;flex-direction:column;align-items:center;gap:32px;padding:48px 24px;text-align:center}.empty-state-content{display:flex;flex-direction:column;align-items:center;gap:24px}.empty-state-illustration{display:flex;align-items:center;justify-content:center}.empty-state-illustration img{object-fit:contain}.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}.empty-state-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.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}";
+
+const BhEmptyState = /*@__PURE__*/ proxyCustomElement(class BhEmptyState extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhPrimaryAction = createEvent(this, "bhPrimaryAction");
+        this.bhSecondaryAction = createEvent(this, "bhSecondaryAction");
+    }
+    /**
+     * Title text
+     */
+    emptyTitle = 'No items found';
+    /**
+     * Description text
+     */
+    description = 'There are no items to display at the moment.';
+    /**
+     * Size of the illustration
+     */
+    illustrationSize = 'md';
+    /**
+     * Path to the illustration SVG
+     */
+    illustrationPath = '';
+    /**
+     * Primary action button text
+     */
+    primaryActionText = '';
+    /**
+     * Primary action icon name
+     */
+    primaryActionIcon = '';
+    /**
+     * Secondary action button text
+     */
+    secondaryActionText = '';
+    /**
+     * Secondary action icon name
+     */
+    secondaryActionIcon = '';
+    /**
+     * Max width of the component
+     */
+    maxWidth = '512px';
+    /**
+     * Emitted when primary action is clicked
+     */
+    bhPrimaryAction;
+    /**
+     * Emitted when secondary action is clicked
+     */
+    bhSecondaryAction;
+    handlePrimaryAction = () => {
+        this.bhPrimaryAction.emit();
+    };
+    handleSecondaryAction = () => {
+        this.bhSecondaryAction.emit();
+    };
+    getIllustrationDimensions() {
+        switch (this.illustrationSize) {
+            case 'sm':
+                return { width: '120px', height: '120px' };
+            case 'md':
+                return { width: '200px', height: '200px' };
+            case 'lg':
+                return { width: '280px', height: '280px' };
+            default:
+                return { width: '200px', height: '200px' };
+        }
+    }
+    render() {
+        const dimensions = this.getIllustrationDimensions();
+        const hasActions = this.primaryActionText || this.secondaryActionText;
+        return (h("div", { key: '726baf337a04c6f733957320b6efeb4a62cff3e8', class: "empty-state", style: { maxWidth: this.maxWidth }, part: "container" }, h("div", { key: '353101a9835cc3d88f5a97cca24585603f6b541f', class: "empty-state-content" }, this.illustrationPath && (h("div", { key: '2a1c5d14866012705df5f25d6096ba8c72cedf45', class: "empty-state-illustration" }, h("img", { key: 'aff2cf53fe902ab41a1708f7d56a8b2de75fd9dd', src: this.illustrationPath, alt: "Empty state illustration", style: { width: dimensions.width, height: dimensions.height } }))), h("div", { key: 'a9ffc2cf98530396089a3f97e74a936c454dca2d', class: "empty-state-text" }, h("h3", { key: 'dc547b53a660a139bd37c730b540ae199e64d17d', class: "empty-state-title" }, this.emptyTitle), h("p", { key: '55cdffdb165ac37592d479f13e2f31fe6bf41e1e', class: "empty-state-description" }, this.description))), hasActions && (h("div", { key: '57b26d57995e7f3c0f9086989f29b0fee4045d6a', class: "empty-state-actions" }, this.secondaryActionText && (h("bh-button", { key: 'f4bf465a1b45dfbf3fd0e86eb2adc44840891df7', hierarchy: "secondary", size: "md", label: this.secondaryActionText, icon: this.secondaryActionIcon ? 'leading' : 'none', iconName: this.secondaryActionIcon, onBhClick: this.handleSecondaryAction })), this.primaryActionText && (h("bh-button", { key: '3b2e7ec45aad23a60efe35c5fbe3fd572616e577', hierarchy: "primary", size: "md", label: this.primaryActionText, icon: this.primaryActionIcon ? 'leading' : 'none', iconName: this.primaryActionIcon, onBhClick: this.handlePrimaryAction }))))));
+    }
+    static get style() { return bhEmptyStateCss; }
+}, [769, "bh-empty-state", {
+        "emptyTitle": [1, "empty-title"],
+        "description": [1],
+        "illustrationSize": [1, "illustration-size"],
+        "illustrationPath": [1, "illustration-path"],
+        "primaryActionText": [1, "primary-action-text"],
+        "primaryActionIcon": [1, "primary-action-icon"],
+        "secondaryActionText": [1, "secondary-action-text"],
+        "secondaryActionIcon": [1, "secondary-action-icon"],
+        "maxWidth": [1, "max-width"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-empty-state", "bh-button", "bh-loader-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-empty-state":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhEmptyState);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhEmptyState as B, defineCustomElement as d };
+//# sourceMappingURL=p-DAp7fLS-.js.map
+
+//# sourceMappingURL=p-DAp7fLS-.js.map

package/dist/components/p-DAp7fLS-.js.map

@@ -0,0 +1 @@
+{"file":"p-DAp7fLS-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-empty-state/bh-empty-state.css?tag=bh-empty-state&encapsulation=shadow","src/components/bh-empty-state/bh-empty-state.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  );\n}\n\n/* Container */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 32px;\n  padding: 48px 24px;\n  text-align: center;\n}\n\n/* Content */\n.empty-state-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n}\n\n/* Illustration */\n.empty-state-illustration {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.empty-state-illustration img {\n  object-fit: contain;\n}\n\n/* Text */\n.empty-state-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-title {\n  font-size: var(--text-lg-size, 18px);\n  font-weight: 600;\n  color: var(--color-neutral-900, #101828);\n  margin: 0;\n  line-height: 1.33;\n}\n\n.empty-state-description {\n  font-size: var(--text-sm-size, 14px);\n  font-weight: 400;\n  color: var(--color-neutral-600, #475467);\n  margin: 0;\n  line-height: 1.43;\n  max-width: 400px;\n}\n\n/* Actions */\n.empty-state-actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type EmptyStateIllustrationSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-empty-state',\n  styleUrl: 'bh-empty-state.css',\n  shadow: true,\n})\nexport class BhEmptyState {\n  /**\n   * Title text\n   */\n  @Prop() emptyTitle: string = 'No items found';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = 'There are no items to display at the moment.';\n\n  /**\n   * Size of the illustration\n   */\n  @Prop() illustrationSize: EmptyStateIllustrationSize = 'md';\n\n  /**\n   * Path to the illustration SVG\n   */\n  @Prop() illustrationPath: string = '';\n\n  /**\n   * Primary action button text\n   */\n  @Prop() primaryActionText: string = '';\n\n  /**\n   * Primary action icon name\n   */\n  @Prop() primaryActionIcon: string = '';\n\n  /**\n   * Secondary action button text\n   */\n  @Prop() secondaryActionText: string = '';\n\n  /**\n   * Secondary action icon name\n   */\n  @Prop() secondaryActionIcon: string = '';\n\n  /**\n   * Max width of the component\n   */\n  @Prop() maxWidth: string = '512px';\n\n  /**\n   * Emitted when primary action is clicked\n   */\n  @Event() bhPrimaryAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when secondary action is clicked\n   */\n  @Event() bhSecondaryAction!: EventEmitter<void>;\n\n  private handlePrimaryAction = (): void => {\n    this.bhPrimaryAction.emit();\n  };\n\n  private handleSecondaryAction = (): void => {\n    this.bhSecondaryAction.emit();\n  };\n\n  private getIllustrationDimensions(): { width: string; height: string } {\n    switch (this.illustrationSize) {\n      case 'sm':\n        return { width: '120px', height: '120px' };\n      case 'md':\n        return { width: '200px', height: '200px' };\n      case 'lg':\n        return { width: '280px', height: '280px' };\n      default:\n        return { width: '200px', height: '200px' };\n    }\n  }\n\n  render() {\n    const dimensions = this.getIllustrationDimensions();\n    const hasActions = this.primaryActionText || this.secondaryActionText;\n\n    return (\n      <div\n        class=\"empty-state\"\n        style={{ maxWidth: this.maxWidth }}\n        part=\"container\"\n      >\n        <div class=\"empty-state-content\">\n          {/* Illustration */}\n          {this.illustrationPath && (\n            <div class=\"empty-state-illustration\">\n              <img\n                src={this.illustrationPath}\n                alt=\"Empty state illustration\"\n                style={{ width: dimensions.width, height: dimensions.height }}\n              />\n            </div>\n          )}\n\n          {/* Text Content */}\n          <div class=\"empty-state-text\">\n            <h3 class=\"empty-state-title\">{this.emptyTitle}</h3>\n            <p class=\"empty-state-description\">{this.description}</p>\n          </div>\n        </div>\n\n        {/* Actions */}\n        {hasActions && (\n          <div class=\"empty-state-actions\">\n            {this.secondaryActionText && (\n              <bh-button\n                hierarchy=\"secondary\"\n                size=\"md\"\n                label={this.secondaryActionText}\n                icon={this.secondaryActionIcon ? 'leading' : 'none'}\n                iconName={this.secondaryActionIcon}\n                onBhClick={this.handleSecondaryAction}\n              />\n            )}\n            {this.primaryActionText && (\n              <bh-button\n                hierarchy=\"primary\"\n                size=\"md\"\n                label={this.primaryActionText}\n                icon={this.primaryActionIcon ? 'leading' : 'none'}\n                iconName={this.primaryActionIcon}\n                onBhClick={this.handlePrimaryAction}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DIeMf4U9.js

@@ -0,0 +1,213 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$5 } from './p-BFhwq3_y.js';
+import { d as defineCustomElement$4 } from './p-B7eVYv2t.js';
+import { d as defineCustomElement$3 } from './p-DOaC_o63.js';
+import { d as defineCustomElement$2 } from './p-DkGh2r0W.js';
+import { d as defineCustomElement$1 } from './p-SkkbcLa0.js';
+
+const bhDateRangePickerContentCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.date-range-picker-content{display:flex;flex-direction:column;font-family:var(--font-inter);width:fit-content}.date-pickers{display:flex;flex-direction:row;width:100%;position:relative;gap:var(--spacing-sm)}.left-picker{display:flex;flex-direction:column;width:296px}.right-picker{display:flex;flex-direction:column;width:296px}.date-pickers::after{content:'';position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:1px;height:100%;background:var(--color-neutral-200);pointer-events:none;z-index:1}@media (max-width: 768px){.date-range-picker-content{width:320px}.date-pickers{flex-direction:column}.left-picker,.right-picker{width:100%}.date-pickers::after{display:none}}";
+
+const BhDateRangePickerContent = /*@__PURE__*/ proxyCustomElement(class BhDateRangePickerContent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhDateRangeSelect = createEvent(this, "bhDateRangeSelect");
+    }
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates = [];
+    /**
+     * Whether to show days from other months
+     */
+    showOtherMonthDays = true;
+    /**
+     * Currently selected value
+     */
+    value;
+    selectedRange = null;
+    leftMonth = new Date().getMonth();
+    leftYear = new Date().getFullYear();
+    rightMonth = (new Date().getMonth() + 1) % 12;
+    rightYear = new Date().getMonth() === 11 ? new Date().getFullYear() + 1 : new Date().getFullYear();
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a date range is selected
+     */
+    bhDateRangeSelect;
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            this.selectedRange = { ...newValue };
+        }
+        else {
+            this.selectedRange = null;
+        }
+    }
+    componentWillLoad() {
+        const today = new Date();
+        const currentMonth = today.getMonth();
+        const currentYear = today.getFullYear();
+        this.leftMonth = currentMonth;
+        this.leftYear = currentYear;
+        const nextMonthYear = this.getNextMonth(currentMonth, currentYear);
+        this.rightMonth = nextMonthYear.month;
+        this.rightYear = nextMonthYear.year;
+        if (this.value) {
+            this.selectedRange = this.value;
+        }
+    }
+    getNextMonth(month, year) {
+        const nextMonth = month + 1;
+        if (nextMonth > 11) {
+            return { month: 0, year: year + 1 };
+        }
+        return { month: nextMonth, year };
+    }
+    getPreviousMonth(month, year) {
+        const prevMonth = month - 1;
+        if (prevMonth < 0) {
+            return { month: 11, year: year - 1 };
+        }
+        return { month: prevMonth, year };
+    }
+    handleLeftDateSelect = (event) => {
+        this.handleDateSelect(event.detail);
+    };
+    handleRightDateSelect = (event) => {
+        this.handleDateSelect(event.detail);
+    };
+    handleDateSelect(date) {
+        if (!date)
+            return;
+        let newRange;
+        if (!this.selectedRange?.startDate || (this.selectedRange.startDate && this.selectedRange.endDate)) {
+            // Start new range
+            newRange = { startDate: date, endDate: null };
+        }
+        else if (this.selectedRange.startDate && !this.selectedRange.endDate) {
+            // Complete the range
+            const startDate = this.selectedRange.startDate;
+            const isAfterStart = date.year > startDate.year ||
+                (date.year === startDate.year && date.month > startDate.month) ||
+                (date.year === startDate.year && date.month === startDate.month && date.day > startDate.day);
+            if (isAfterStart) {
+                newRange = { startDate, endDate: date };
+            }
+            else {
+                newRange = { startDate: date, endDate: startDate };
+            }
+        }
+        else {
+            newRange = { startDate: date, endDate: null };
+        }
+        this.selectedRange = newRange;
+        this.bhChange.emit(newRange);
+        this.bhDateRangeSelect.emit(newRange);
+    }
+    handleLeftMonthYearChange = (event) => {
+        const { month, year } = event.detail;
+        this.leftMonth = month;
+        this.leftYear = year;
+        // Ensure right calendar is always at least one month ahead
+        if (year > this.rightYear || (year === this.rightYear && month >= this.rightMonth)) {
+            const nextMonthYear = this.getNextMonth(month, year);
+            this.rightMonth = nextMonthYear.month;
+            this.rightYear = nextMonthYear.year;
+        }
+    };
+    handleRightMonthYearChange = (event) => {
+        const { month, year } = event.detail;
+        this.rightMonth = month;
+        this.rightYear = year;
+        // Ensure left calendar is always at least one month behind
+        if (year < this.leftYear || (year === this.leftYear && month <= this.leftMonth)) {
+            const prevMonthYear = this.getPreviousMonth(month, year);
+            this.leftMonth = prevMonthYear.month;
+            this.leftYear = prevMonthYear.year;
+        }
+    };
+    render() {
+        return (h(Host, { key: '8c0921dbc8b69b5cf807f36aab2707dc90c15c07' }, h("div", { key: '0e2de76a0709b383650992648ad287cc2765a71e', class: "date-range-picker-content" }, h("div", { key: '3f244bbac9cc6cc8c26e8d2e1c115a00c0a21602', class: "date-pickers" }, h("div", { key: '80bae45ed0096dd4db50a4576f3280933556e82b', class: "left-picker" }, h("bh-date-picker-content", { key: '71514b66edf509d76e00dca3f0daa445e9be19d7', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, displayMonth: this.leftMonth, displayYear: this.leftYear, rangeStart: this.selectedRange?.startDate ?? undefined, rangeEnd: this.selectedRange?.endDate ?? undefined, onBhChange: this.handleLeftDateSelect, onBhMonthYearChange: this.handleLeftMonthYearChange })), h("div", { key: '1446711304bd2e90aed82ddba2d7324644b52fa0', class: "right-picker" }, h("bh-date-picker-content", { key: '5231a18a91664902a73da79eee61cf3c98539157', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, displayMonth: this.rightMonth, displayYear: this.rightYear, rangeStart: this.selectedRange?.startDate ?? undefined, rangeEnd: this.selectedRange?.endDate ?? undefined, onBhChange: this.handleRightDateSelect, onBhMonthYearChange: this.handleRightMonthYearChange }))))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return bhDateRangePickerContentCss; }
+}, [769, "bh-date-range-picker-content", {
+        "minYear": [2, "min-year"],
+        "maxYear": [2, "max-year"],
+        "disabled": [4],
+        "disabledDates": [16],
+        "showOtherMonthDays": [4, "show-other-month-days"],
+        "value": [16],
+        "selectedRange": [32],
+        "leftMonth": [32],
+        "leftYear": [32],
+        "rightMonth": [32],
+        "rightYear": [32]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-date-range-picker-content", "bh-button", "bh-button-icon", "bh-date-picker-content", "bh-loader-spinner", "bh-month-picker-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-date-range-picker-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhDateRangePickerContent);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-date-picker-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-month-picker-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhDateRangePickerContent as B, defineCustomElement as d };
+//# sourceMappingURL=p-DIeMf4U9.js.map
+
+//# sourceMappingURL=p-DIeMf4U9.js.map

package/dist/components/p-DIeMf4U9.js.map

@@ -0,0 +1 @@
+{"file":"p-DIeMf4U9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-date-range-picker-content/bh-date-range-picker-content.css?tag=bh-date-range-picker-content&encapsulation=shadow","src/components/bh-date-range-picker-content/bh-date-range-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Main container */\n.date-range-picker-content {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-inter);\n  width: fit-content;\n}\n\n/* Date pickers container - side by side layout */\n.date-pickers {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  position: relative;\n  gap: var(--spacing-sm);\n}\n\n/* Left picker */\n.left-picker {\n  display: flex;\n  flex-direction: column;\n  width: 296px;\n}\n\n/* Right picker */\n.right-picker {\n  display: flex;\n  flex-direction: column;\n  width: 296px;\n}\n\n/* Vertical divider between calendars */\n.date-pickers::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  width: 1px;\n  height: 100%;\n  background: var(--color-neutral-200);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .date-range-picker-content {\n    width: 320px;\n  }\n\n  .date-pickers {\n    flex-direction: column;\n  }\n\n  .left-picker,\n  .right-picker {\n    width: 100%;\n  }\n\n  /* Hide vertical divider on mobile */\n  .date-pickers::after {\n    display: none;\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { SelectedDate, DisabledDate } from '../bh-date-picker-content/bh-date-picker-content';\n\nexport interface SelectedDateRange {\n  startDate: SelectedDate | null;\n  endDate: SelectedDate | null;\n}\n\n@Component({\n  tag: 'bh-date-range-picker-content',\n  styleUrl: 'bh-date-range-picker-content.css',\n  shadow: true,\n})\nexport class BhDateRangePickerContent {\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled dates\n   */\n  @Prop() disabledDates: DisabledDate[] = [];\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDateRange;\n\n  @State() selectedRange: SelectedDateRange | null = null;\n  @State() leftMonth: number = new Date().getMonth();\n  @State() leftYear: number = new Date().getFullYear();\n  @State() rightMonth: number = (new Date().getMonth() + 1) % 12;\n  @State() rightYear: number = new Date().getMonth() === 11 ? new Date().getFullYear() + 1 : new Date().getFullYear();\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event({ bubbles: true, composed: true }) bhChange!: EventEmitter<SelectedDateRange | null>;\n\n  /**\n   * Event emitted when a date range is selected\n   */\n  @Event({ bubbles: true, composed: true }) bhDateRangeSelect!: EventEmitter<SelectedDateRange | null>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDateRange | undefined) {\n    if (newValue !== undefined) {\n      this.selectedRange = { ...newValue };\n    } else {\n      this.selectedRange = null;\n    }\n  }\n\n  componentWillLoad() {\n    const today = new Date();\n    const currentMonth = today.getMonth();\n    const currentYear = today.getFullYear();\n\n    this.leftMonth = currentMonth;\n    this.leftYear = currentYear;\n\n    const nextMonthYear = this.getNextMonth(currentMonth, currentYear);\n    this.rightMonth = nextMonthYear.month;\n    this.rightYear = nextMonthYear.year;\n\n    if (this.value) {\n      this.selectedRange = this.value;\n    }\n  }\n\n  private getNextMonth(month: number, year: number): { month: number; year: number } {\n    const nextMonth = month + 1;\n    if (nextMonth > 11) {\n      return { month: 0, year: year + 1 };\n    }\n    return { month: nextMonth, year };\n  }\n\n  private getPreviousMonth(month: number, year: number): { month: number; year: number } {\n    const prevMonth = month - 1;\n    if (prevMonth < 0) {\n      return { month: 11, year: year - 1 };\n    }\n    return { month: prevMonth, year };\n  }\n\n  private handleLeftDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    this.handleDateSelect(event.detail);\n  };\n\n  private handleRightDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    this.handleDateSelect(event.detail);\n  };\n\n  private handleDateSelect(date: SelectedDate | null) {\n    if (!date) return;\n\n    let newRange: SelectedDateRange;\n\n    if (!this.selectedRange?.startDate || (this.selectedRange.startDate && this.selectedRange.endDate)) {\n      // Start new range\n      newRange = { startDate: date, endDate: null };\n    } else if (this.selectedRange.startDate && !this.selectedRange.endDate) {\n      // Complete the range\n      const startDate = this.selectedRange.startDate;\n      const isAfterStart = date.year > startDate.year ||\n        (date.year === startDate.year && date.month > startDate.month) ||\n        (date.year === startDate.year && date.month === startDate.month && date.day > startDate.day);\n\n      if (isAfterStart) {\n        newRange = { startDate, endDate: date };\n      } else {\n        newRange = { startDate: date, endDate: startDate };\n      }\n    } else {\n      newRange = { startDate: date, endDate: null };\n    }\n\n    this.selectedRange = newRange;\n    this.bhChange.emit(newRange);\n    this.bhDateRangeSelect.emit(newRange);\n  }\n\n  private handleLeftMonthYearChange = (event: CustomEvent<{ month: number; year: number }>) => {\n    const { month, year } = event.detail;\n    this.leftMonth = month;\n    this.leftYear = year;\n\n    // Ensure right calendar is always at least one month ahead\n    if (year > this.rightYear || (year === this.rightYear && month >= this.rightMonth)) {\n      const nextMonthYear = this.getNextMonth(month, year);\n      this.rightMonth = nextMonthYear.month;\n      this.rightYear = nextMonthYear.year;\n    }\n  };\n\n  private handleRightMonthYearChange = (event: CustomEvent<{ month: number; year: number }>) => {\n    const { month, year } = event.detail;\n    this.rightMonth = month;\n    this.rightYear = year;\n\n    // Ensure left calendar is always at least one month behind\n    if (year < this.leftYear || (year === this.leftYear && month <= this.leftMonth)) {\n      const prevMonthYear = this.getPreviousMonth(month, year);\n      this.leftMonth = prevMonthYear.month;\n      this.leftYear = prevMonthYear.year;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"date-range-picker-content\">\n          <div class=\"date-pickers\">\n            <div class=\"left-picker\">\n              <bh-date-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                displayMonth={this.leftMonth}\n                displayYear={this.leftYear}\n                rangeStart={this.selectedRange?.startDate ?? undefined}\n                rangeEnd={this.selectedRange?.endDate ?? undefined}\n                onBhChange={this.handleLeftDateSelect}\n                onBhMonthYearChange={this.handleLeftMonthYearChange}\n              ></bh-date-picker-content>\n            </div>\n            <div class=\"right-picker\">\n              <bh-date-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                displayMonth={this.rightMonth}\n                displayYear={this.rightYear}\n                rangeStart={this.selectedRange?.startDate ?? undefined}\n                rangeEnd={this.selectedRange?.endDate ?? undefined}\n                onBhChange={this.handleRightDateSelect}\n                onBhMonthYearChange={this.handleRightMonthYearChange}\n              ></bh-date-picker-content>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DK92X9HV.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhCardFooterCss = ":host{display:block}.card-footer{display:flex;flex-direction:column;gap:var(--spacing-xs);background:var(--color-white)}.card-footer-divider{height:1px;background:var(--color-neutral-200)}.card-footer-content{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl)}.card-footer-align-left{justify-content:flex-start}.card-footer-align-right{justify-content:flex-end}.card-footer-align-space-between{justify-content:space-between}.card-footer-primary-actions{display:flex;flex:1 0 0;align-items:center;gap:var(--spacing-none);min-width:0}.card-footer-secondary-actions{display:flex;align-items:center;gap:var(--spacing-md)}.card-footer-primary-actions:empty,.card-footer-secondary-actions:empty{display:none}";
+
+const BhCardFooter = /*@__PURE__*/ proxyCustomElement(class BhCardFooter extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Whether to show the divider above the footer
+     */
+    showDivider = true;
+    /**
+     * Alignment of the footer content
+     */
+    alignment = 'space-between';
+    render() {
+        const footerContentClasses = {
+            'card-footer-content': true,
+            [`card-footer-align-${this.alignment}`]: true,
+        };
+        return (h(Host, { key: '27230a36e6bafcbb61bdac3bc0bcebbd550e70c8' }, h("div", { key: '1f0088fbe2a962080e5db856eb534029ed94d8e2', class: "card-footer" }, this.showDivider && h("div", { key: 'f320e028a9c4675b151547f6e368f67910e87d85', class: "card-footer-divider" }), h("div", { key: '9f35426a461e248e09de3c5e9eca23e7d63d9f08', class: footerContentClasses }, h("div", { key: 'd1d17256b3aa704bb898f711519c96405a7927af', class: "card-footer-primary-actions" }, h("slot", { key: '5f18da8ec38e3a2e2237a3bd4d1269686514047d', name: "primary-actions" })), h("div", { key: '0754da91faf75928a1070a01960f41395f0387dc', class: "card-footer-secondary-actions" }, h("slot", { key: '2ffc5290e3499d62e72fd1398b44811d0f0970ba', name: "secondary-actions" }))))));
+    }
+    static get style() { return bhCardFooterCss; }
+}, [769, "bh-card-footer", {
+        "showDivider": [4, "show-divider"],
+        "alignment": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-card-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-card-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCardFooter);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCardFooter as B, defineCustomElement as d };
+//# sourceMappingURL=p-DK92X9HV.js.map
+
+//# sourceMappingURL=p-DK92X9HV.js.map

package/dist/components/p-DK92X9HV.js.map

@@ -0,0 +1 @@
+{"file":"p-DK92X9HV.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+uBAA+uB;;MCS1vB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;AACvB;;AAEG;IACK,WAAW,GAAY,IAAI;AAEnC;;AAEG;IACK,SAAS,GAAwB,eAAe;IAExD,MAAM,GAAA;AACJ,QAAA,MAAM,oBAAoB,GAAG;AAC3B,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,qBAAqB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAC9C;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,qBAAqB,EAAG,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC3B,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mBAAmB,EAAA,CAAG,CAC7B,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-card-footer/bh-card-footer.css?tag=bh-card-footer&encapsulation=shadow","src/components/bh-card-footer/bh-card-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  background: var(--color-white);\n}\n\n.card-footer-divider {\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n\n.card-footer-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n.card-footer-align-left {\n  justify-content: flex-start;\n}\n\n.card-footer-align-right {\n  justify-content: flex-end;\n}\n\n.card-footer-align-space-between {\n  justify-content: space-between;\n}\n\n.card-footer-primary-actions {\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  gap: var(--spacing-none);\n  min-width: 0;\n}\n\n.card-footer-secondary-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n/* Hide empty slots */\n.card-footer-primary-actions:empty,\n.card-footer-secondary-actions:empty {\n  display: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardFooterAlignment = 'left' | 'right' | 'space-between';\n\n@Component({\n  tag: 'bh-card-footer',\n  styleUrl: 'bh-card-footer.css',\n  shadow: true,\n})\nexport class BhCardFooter {\n  /**\n   * Whether to show the divider above the footer\n   */\n  @Prop() showDivider: boolean = true;\n\n  /**\n   * Alignment of the footer content\n   */\n  @Prop() alignment: CardFooterAlignment = 'space-between';\n\n  render() {\n    const footerContentClasses = {\n      'card-footer-content': true,\n      [`card-footer-align-${this.alignment}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class=\"card-footer\">\n          {this.showDivider && <div class=\"card-footer-divider\" />}\n          <div class={footerContentClasses}>\n            <div class=\"card-footer-primary-actions\">\n              <slot name=\"primary-actions\" />\n            </div>\n            <div class=\"card-footer-secondary-actions\">\n              <slot name=\"secondary-actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}