@actabldesign/bellhop-core 0.0.3

package/components/bh-trend-chart.js

@@ -0,0 +1,149 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-9a7sQzad.js';
+
+const bhTrendChartCss = "@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:inline-block}.trend-chart{position:relative;display:inline-block;width:fit-content;height:fit-content}.chart-svg{overflow:visible}@keyframes chartFadeIn{from{opacity:0;transform:translateY(10px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes backgroundFill{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.trend-chart-animated{animation:chartFadeIn 0.6s var(--animation-ease-smooth, ease-out) forwards}.trend-chart-animated .chart-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:pathDraw 1.2s var(--animation-ease-smooth, ease-out) 0.3s forwards}@keyframes pathDraw{to{stroke-dashoffset:0}}.trend-chart-animated .chart-background{transform-origin:bottom;animation:backgroundFill 0.8s var(--animation-ease-smooth, ease-out) 0.3s forwards;opacity:0}.trend-chart-animated.trend-chart-line-only .chart-line{animation:pathDrawSlow 4s var(--animation-ease-smooth, ease-out) 0.3s forwards}@keyframes pathDrawSlow{to{stroke-dashoffset:0}}.trend-chart:not(.trend-chart-animated) .chart-line{stroke-dasharray:none}.trend-chart:not(.trend-chart-animated) .chart-background{opacity:1}@media (prefers-reduced-motion: reduce){.trend-chart-animated,.trend-chart-animated .chart-line,.trend-chart-animated .chart-background{animation:none;opacity:1;transform:none;stroke-dasharray:none}}";
+
+const BhTrendChart$1 = /*@__PURE__*/ proxyCustomElement(class BhTrendChart extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * The trend direction (affects color)
+     */
+    trend = 'positive';
+    /**
+     * Data points for the chart
+     */
+    data = [20, 45, 30, 60, 35, 70, 40];
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Chart variant: line-only, fill-only, or line-fill
+     */
+    variant = 'line-only';
+    /**
+     * Width of the chart in pixels
+     */
+    width = 112;
+    /**
+     * Height of the chart in pixels
+     */
+    height = 56;
+    normalizeData() {
+        const maxValue = Math.max(...this.data);
+        const minValue = Math.min(...this.data);
+        const range = maxValue - minValue || 1;
+        return this.data.map((value, index) => ({
+            x: (index / (this.data.length - 1)) * this.width,
+            y: this.height - ((value - minValue) / range) * (this.height - 20) - 10,
+        }));
+    }
+    generatePath(points) {
+        if (points.length < 2)
+            return '';
+        let path = `M ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const tension = 0.5;
+            const cp1x = prev.x + (curr.x - prev.x) * tension;
+            const cp1y = prev.y;
+            const cp2x = curr.x - (curr.x - prev.x) * tension;
+            const cp2y = curr.y;
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
+        }
+        return path;
+    }
+    generateBackgroundPath(points) {
+        if (points.length < 2)
+            return '';
+        let path = `M ${points[0].x} ${this.height}`;
+        path += ` L ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const tension = 0.5;
+            const cp1x = prev.x + (curr.x - prev.x) * tension;
+            const cp1y = prev.y;
+            const cp2x = curr.x - (curr.x - prev.x) * tension;
+            const cp2y = curr.y;
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
+        }
+        path += ` L ${points[points.length - 1].x} ${this.height}`;
+        path += ' Z';
+        return path;
+    }
+    getStrokeColor() {
+        switch (this.trend) {
+            case 'positive':
+                return 'var(--color-success-500)';
+            case 'negative':
+                return 'var(--color-error-500)';
+            case 'neutral':
+                return 'var(--color-neutral-500)';
+            default:
+                return 'var(--color-neutral-500)';
+        }
+    }
+    getFillColor() {
+        switch (this.trend) {
+            case 'positive':
+                return 'var(--color-success-600)';
+            case 'negative':
+                return 'var(--color-error-600)';
+            case 'neutral':
+                return 'var(--color-neutral-600)';
+            default:
+                return 'var(--color-neutral-600)';
+        }
+    }
+    render() {
+        const points = this.normalizeData();
+        const pathData = this.generatePath(points);
+        const backgroundPath = this.variant !== 'line-only' ? this.generateBackgroundPath(points) : '';
+        const strokeColor = this.getStrokeColor();
+        const fillColor = this.getFillColor();
+        const gradientId = `gradient-${this.trend}`;
+        return (h(Host, { key: '0ce9235d0b67696eb5e5eb13bdfc80633e2f5a09' }, h("div", { key: 'f8142d9b08c84c330afc375c7dd870be7d561116', class: {
+                'trend-chart': true,
+                [`trend-chart-${this.trend}`]: true,
+                [`trend-chart-${this.variant}`]: true,
+                'trend-chart-animated': this.animated,
+            } }, h("svg", { key: '80ecc5b120ab8adeea6ad0f66c82d43bff7510ae', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, h("defs", { key: 'e662d21fc9813679530c7ae4c533bcf79985fc32' }, h("linearGradient", { key: '4c5f68791672c1cc639db2fe1eff407ecdbc3019', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, h("stop", { key: '15f6c5706518d1adf8e84f3c9736d9f37d1b0c3e', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), h("stop", { key: '9b90e1919b241be8a5d6a160ce250cb205967d49', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (h("path", { key: 'c27880c30f92abb5240c401b35e1af3b62039318', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (h("path", { key: '2f64a03e170a7a1f792fe835d2a870dd64905fd9', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
+    }
+    static get style() { return bhTrendChartCss; }
+}, [769, "bh-trend-chart", {
+        "trend": [1],
+        "data": [16],
+        "animated": [4],
+        "variant": [1],
+        "width": [2],
+        "height": [2]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-trend-chart"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-trend-chart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhTrendChart$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhTrendChart = BhTrendChart$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhTrendChart, defineCustomElement };
+//# sourceMappingURL=bh-trend-chart.js.map
+
+//# sourceMappingURL=bh-trend-chart.js.map

package/components/bh-trend-chart.js.map

@@ -0,0 +1 @@
+{"file":"bh-trend-chart.js","mappings":"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","names":["BhTrendChart","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-trend-chart/bh-trend-chart.css?tag=bh-trend-chart&encapsulation=shadow","src/components/bh-trend-chart/bh-trend-chart.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n}\n\n.trend-chart {\n  position: relative;\n  display: inline-block;\n  width: fit-content;\n  height: fit-content;\n}\n\n/* Chart SVG container */\n.chart-svg {\n  overflow: visible;\n}\n\n/* Smooth Airbnb-style reveal animations */\n@keyframes chartFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes backgroundFill {\n  from {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n\n/* Animation timing */\n.trend-chart-animated {\n  animation: chartFadeIn 0.6s var(--animation-ease-smooth, ease-out) forwards;\n}\n\n.trend-chart-animated .chart-line {\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  animation: pathDraw 1.2s var(--animation-ease-smooth, ease-out) 0.3s forwards;\n}\n\n@keyframes pathDraw {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n.trend-chart-animated .chart-background {\n  transform-origin: bottom;\n  animation: backgroundFill 0.8s var(--animation-ease-smooth, ease-out) 0.3s forwards;\n  opacity: 0;\n}\n\n/* Line-only variant - slower animation */\n.trend-chart-animated.trend-chart-line-only .chart-line {\n  animation: pathDrawSlow 4s var(--animation-ease-smooth, ease-out) 0.3s forwards;\n}\n\n@keyframes pathDrawSlow {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n/* Static styles for non-animated */\n.trend-chart:not(.trend-chart-animated) .chart-line {\n  stroke-dasharray: none;\n}\n\n.trend-chart:not(.trend-chart-animated) .chart-background {\n  opacity: 1;\n}\n\n/* Responsive behavior */\n@media (prefers-reduced-motion: reduce) {\n  .trend-chart-animated,\n  .trend-chart-animated .chart-line,\n  .trend-chart-animated .chart-background {\n    animation: none;\n    opacity: 1;\n    transform: none;\n    stroke-dasharray: none;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TrendDirection = 'positive' | 'negative' | 'neutral';\nexport type TrendVariant = 'line-only' | 'fill-only' | 'line-fill';\n\n@Component({\n  tag: 'bh-trend-chart',\n  styleUrl: 'bh-trend-chart.css',\n  shadow: true,\n})\nexport class BhTrendChart {\n  /**\n   * The trend direction (affects color)\n   */\n  @Prop() trend: TrendDirection = 'positive';\n\n  /**\n   * Data points for the chart\n   */\n  @Prop() data: number[] = [20, 45, 30, 60, 35, 70, 40];\n\n  /**\n   * Whether to animate the chart\n   */\n  @Prop() animated: boolean = true;\n\n  /**\n   * Chart variant: line-only, fill-only, or line-fill\n   */\n  @Prop() variant: TrendVariant = 'line-only';\n\n  /**\n   * Width of the chart in pixels\n   */\n  @Prop() width: number = 112;\n\n  /**\n   * Height of the chart in pixels\n   */\n  @Prop() height: number = 56;\n\n  private normalizeData(): Array<{ x: number; y: number }> {\n    const maxValue = Math.max(...this.data);\n    const minValue = Math.min(...this.data);\n    const range = maxValue - minValue || 1;\n\n    return this.data.map((value, index) => ({\n      x: (index / (this.data.length - 1)) * this.width,\n      y: this.height - ((value - minValue) / range) * (this.height - 20) - 10,\n    }));\n  }\n\n  private generatePath(points: Array<{ x: number; y: number }>): string {\n    if (points.length < 2) return '';\n\n    let path = `M ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const tension = 0.5;\n\n      const cp1x = prev.x + (curr.x - prev.x) * tension;\n      const cp1y = prev.y;\n      const cp2x = curr.x - (curr.x - prev.x) * tension;\n      const cp2y = curr.y;\n\n      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;\n    }\n\n    return path;\n  }\n\n  private generateBackgroundPath(points: Array<{ x: number; y: number }>): string {\n    if (points.length < 2) return '';\n\n    let path = `M ${points[0].x} ${this.height}`;\n    path += ` L ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const tension = 0.5;\n\n      const cp1x = prev.x + (curr.x - prev.x) * tension;\n      const cp1y = prev.y;\n      const cp2x = curr.x - (curr.x - prev.x) * tension;\n      const cp2y = curr.y;\n      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;\n    }\n\n    path += ` L ${points[points.length - 1].x} ${this.height}`;\n    path += ' Z';\n\n    return path;\n  }\n\n  private getStrokeColor(): string {\n    switch (this.trend) {\n      case 'positive':\n        return 'var(--color-success-500)';\n      case 'negative':\n        return 'var(--color-error-500)';\n      case 'neutral':\n        return 'var(--color-neutral-500)';\n      default:\n        return 'var(--color-neutral-500)';\n    }\n  }\n\n  private getFillColor(): string {\n    switch (this.trend) {\n      case 'positive':\n        return 'var(--color-success-600)';\n      case 'negative':\n        return 'var(--color-error-600)';\n      case 'neutral':\n        return 'var(--color-neutral-600)';\n      default:\n        return 'var(--color-neutral-600)';\n    }\n  }\n\n  render() {\n    const points = this.normalizeData();\n    const pathData = this.generatePath(points);\n    const backgroundPath = this.variant !== 'line-only' ? this.generateBackgroundPath(points) : '';\n    const strokeColor = this.getStrokeColor();\n    const fillColor = this.getFillColor();\n    const gradientId = `gradient-${this.trend}`;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'trend-chart': true,\n            [`trend-chart-${this.trend}`]: true,\n            [`trend-chart-${this.variant}`]: true,\n            'trend-chart-animated': this.animated,\n          }}\n        >\n          <svg\n            width={this.width}\n            height={this.height}\n            viewBox={`0 0 ${this.width} ${this.height}`}\n            class=\"chart-svg\"\n          >\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                <stop\n                  offset=\"0%\"\n                  stop-color={fillColor}\n                  stop-opacity={this.variant === 'fill-only' ? 0.4 : 0.2}\n                />\n                <stop\n                  offset=\"100%\"\n                  stop-color={fillColor}\n                  stop-opacity={this.variant === 'fill-only' ? 0.1 : 0.05}\n                />\n              </linearGradient>\n            </defs>\n\n            {/* Background fill (for fill-only and line-fill variants) */}\n            {backgroundPath && this.variant !== 'line-only' && (\n              <path\n                class=\"chart-background\"\n                d={backgroundPath}\n                fill={`url(#${gradientId})`}\n              />\n            )}\n\n            {/* Stroke line (for line-only and line-fill variants) */}\n            {pathData && this.variant !== 'fill-only' && (\n              <path\n                class=\"chart-line\"\n                d={pathData}\n                stroke={strokeColor}\n                stroke-width=\"2\"\n                fill=\"none\"\n              />\n            )}\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/components/index.js

@@ -0,0 +1,16 @@
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-9a7sQzad.js';
+export { B as BhButton } from './p-DTgHvmlL.js';
+export { B as BhBadge } from './p-NXL0pYS_.js';
+export { B as BhLabel } from './p-MIbEYjCv.js';
+export { B as BhModal } from './p-DRGkYX1u.js';
+export { B as BhAvatar } from './p-YJm8-pxX.js';
+export { B as BhToggle } from './p-CsRNKalM.js';
+export { B as BhCard } from './p-BdcGkck5.js';
+export { B as BhCardHeader } from './p-CciWcvHP.js';
+export { B as BhCardFooter } from './p-CTjPiCcp.js';
+export { B as BhCheckboxGroup } from './p-CuVsQ9St.js';
+export { B as BhCheckboxGroupItem } from './p-CErNA5c8.js';
+export { B as BhDataGrid } from './p-BYhYSIIs.js';
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/p-2KjdCYlS.js

@@ -0,0 +1,59 @@
+/**
+ * Form utilities for form-associated custom elements
+ *
+ * These utilities help Stencil components participate in native HTML forms
+ * using the ElementInternals API (formAssociated: true).
+ */
+/**
+ * Sync a text/number value to the form
+ * Call this in handleInput and componentDidLoad
+ */
+function syncFormValue(component) {
+    if (!component.internals?.setFormValue || !component.name)
+        return;
+    const value = component.value;
+    if (value === null || value === undefined || value === '') {
+        component.internals.setFormValue(null);
+    }
+    else {
+        component.internals.setFormValue(String(value));
+    }
+}
+/**
+ * Sync a checkable component's value to the form
+ * For checkbox, toggle, radio - value is only submitted when checked
+ */
+function syncCheckableFormValue(internals, name, checked, value = 'on') {
+    if (!internals?.setFormValue || !name)
+        return;
+    internals.setFormValue(checked ? value : null);
+}
+/**
+ * Update validity state based on a native input element
+ * This delegates to the browser's built-in validation
+ */
+function updateValidity(internals, inputEl, customMessage) {
+    if (!internals?.setValidity)
+        return;
+    if (inputEl) {
+        internals.setValidity(inputEl.validity, customMessage || inputEl.validationMessage, inputEl);
+    }
+}
+/**
+ * Validate required state for checkable components (checkbox, toggle)
+ */
+function validateRequired(internals, required, checked, message = 'Please check this box if you want to proceed.') {
+    if (!internals?.setValidity)
+        return;
+    if (required && !checked) {
+        internals.setValidity({ valueMissing: true }, message);
+    }
+    else {
+        internals.setValidity({});
+    }
+}
+
+export { syncFormValue as a, syncCheckableFormValue as s, updateValidity as u, validateRequired as v };
+//# sourceMappingURL=p-2KjdCYlS.js.map
+
+//# sourceMappingURL=p-2KjdCYlS.js.map

package/components/p-2KjdCYlS.js.map

@@ -0,0 +1 @@
+{"file":"p-2KjdCYlS.js","mappings":"AAAA;;;;;AAKG;AAaH;;;AAGG;AACG,SAAU,aAAa,CAAC,SAAwB,EAAA;IACpD,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,SAAS,CAAC,IAAI;QAAE;AAE3D,IAAA,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK;AAC7B,IAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE;AACzD,QAAA,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;SACjC;QACL,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;AAEnD;AAEA;;;AAGG;AACG,SAAU,sBAAsB,CACpC,SAAuC,EACvC,IAAY,EACZ,OAAgB,EAChB,KAAA,GAAgB,IAAI,EAAA;AAEpB,IAAA,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,IAAI;QAAE;AACvC,IAAA,SAAS,CAAC,YAAY,CAAC,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;AAChD;AAEA;;;AAGG;SACa,cAAc,CAC5B,SAAuC,EACvC,OAAkE,EAClE,aAAsB,EAAA;IAEtB,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE;IAE7B,IAAI,OAAO,EAAE;AACX,QAAA,SAAS,CAAC,WAAW,CACnB,OAAO,CAAC,QAAQ,EAChB,aAAa,IAAI,OAAO,CAAC,iBAAiB,EAC1C,OAAO,CACR;;AAEL;AAmBA;;AAEG;AACG,SAAU,gBAAgB,CAC9B,SAAuC,EACvC,QAAiB,EACjB,OAAgB,EAChB,OAAA,GAAkB,+CAA+C,EAAA;IAEjE,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE;AAE7B,IAAA,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,SAAS,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC;;SACjD;AACL,QAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;;AAE7B;;;;","names":[],"sources":["src/utils/form.ts"],"sourcesContent":["/**\n * Form utilities for form-associated custom elements\n *\n * These utilities help Stencil components participate in native HTML forms\n * using the ElementInternals API (formAssociated: true).\n */\n\n/**\n * Interface for text-based form components (input, textarea)\n */\nexport interface FormComponent {\n  internals: ElementInternals;\n  name: string;\n  value: string | number | null;\n  disabled: boolean;\n  required?: boolean;\n}\n\n/**\n * Sync a text/number value to the form\n * Call this in handleInput and componentDidLoad\n */\nexport function syncFormValue(component: FormComponent): void {\n  if (!component.internals?.setFormValue || !component.name) return;\n\n  const value = component.value;\n  if (value === null || value === undefined || value === '') {\n    component.internals.setFormValue(null);\n  } else {\n    component.internals.setFormValue(String(value));\n  }\n}\n\n/**\n * Sync a checkable component's value to the form\n * For checkbox, toggle, radio - value is only submitted when checked\n */\nexport function syncCheckableFormValue(\n  internals: ElementInternals | undefined,\n  name: string,\n  checked: boolean,\n  value: string = 'on'\n): void {\n  if (!internals?.setFormValue || !name) return;\n  internals.setFormValue(checked ? value : null);\n}\n\n/**\n * Update validity state based on a native input element\n * This delegates to the browser's built-in validation\n */\nexport function updateValidity(\n  internals: ElementInternals | undefined,\n  inputEl: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n  customMessage?: string\n): void {\n  if (!internals?.setValidity) return;\n\n  if (inputEl) {\n    internals.setValidity(\n      inputEl.validity,\n      customMessage || inputEl.validationMessage,\n      inputEl\n    );\n  }\n}\n\n/**\n * Set custom validity for components without native inputs\n */\nexport function setCustomValidity(\n  internals: ElementInternals | undefined,\n  isValid: boolean,\n  message: string = ''\n): void {\n  if (!internals?.setValidity) return;\n\n  if (isValid) {\n    internals.setValidity({});\n  } else {\n    internals.setValidity({ customError: true }, message);\n  }\n}\n\n/**\n * Validate required state for checkable components (checkbox, toggle)\n */\nexport function validateRequired(\n  internals: ElementInternals | undefined,\n  required: boolean,\n  checked: boolean,\n  message: string = 'Please check this box if you want to proceed.'\n): void {\n  if (!internals?.setValidity) return;\n\n  if (required && !checked) {\n    internals.setValidity({ valueMissing: true }, message);\n  } else {\n    internals.setValidity({});\n  }\n}\n"],"version":3}

package/components/p-54wXxbeh.js

@@ -0,0 +1,213 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$5 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$4 } from './p-D3OkBDd3.js';
+import { d as defineCustomElement$3 } from './p-CiQqgc-m.js';
+import { d as defineCustomElement$2 } from './p-Bbo_Dwmk.js';
+import { d as defineCustomElement$1 } from './p-CDgBIIbC.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: '401af65573fa4fe62300d46ddcb877e29691d36b' }, h("div", { key: 'b11405e3d537549749e779277757f16ab01638d2', class: "date-range-picker-content" }, h("div", { key: '0b7fe35d6ea462f0dfddfd70d22f8e900b44108a', class: "date-pickers" }, h("div", { key: '94c8eb0f36cf81a8ff5048a6b7156a8138e63458', class: "left-picker" }, h("bh-date-picker-content", { key: '0258925d371fa05a8a37238a42f490d9b0b1e555', 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: '6fea01d43dc9de3760f6c01cc8db6b6f0fb63bae', class: "right-picker" }, h("bh-date-picker-content", { key: '6af5a344d985db40b17a6a54b3164f90082dd36b', 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-54wXxbeh.js.map
+
+//# sourceMappingURL=p-54wXxbeh.js.map

package/components/p-54wXxbeh.js.map

@@ -0,0 +1 @@
+{"file":"p-54wXxbeh.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}