@kodaris/krubble-components 1.0.59 → 1.0.61

package/dist/krubble-components.bundled.js

@@ -89,7 +89,7 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e$3(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$4(n,s,{get(){return o(this)}})}}
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -196,13 +196,13 @@ KRAccordion.styles = i$5 `
       padding: 16px 16px 8px 16px;
     }
   `;
-__decorate$k([
+__decorate$l([
     n$1({ type: String })
 ], KRAccordion.prototype, "header", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: Boolean, reflect: true })
 ], KRAccordion.prototype, "expanded", void 0);
-KRAccordion = __decorate$k([
+KRAccordion = __decorate$l([
     t$1('kr-accordion')
 ], KRAccordion);
 
@@ -219,7 +219,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=t=>(...e)=>({_$
  * SPDX-License-Identifier: BSD-3-Clause
  */const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -417,23 +417,23 @@ KRAlert.styles = i$5 `
       outline-offset: 2px;
     }
   `;
-__decorate$j([
+__decorate$k([
     n$1({ type: String })
 ], KRAlert.prototype, "type", void 0);
-__decorate$j([
+__decorate$k([
     n$1({ type: String })
 ], KRAlert.prototype, "title", void 0);
-__decorate$j([
+__decorate$k([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "dismissible", void 0);
-__decorate$j([
+__decorate$k([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "visible", void 0);
-KRAlert = __decorate$j([
+KRAlert = __decorate$k([
     t$1('kr-alert')
 ], KRAlert);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -932,40 +932,40 @@ KRButton.styles = i$5 `
       height: 22px;
     }
   `;
-__decorate$i([
+__decorate$j([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "variant", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "color", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "size", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: Boolean, reflect: true })
 ], KRButton.prototype, "disabled", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: String })
 ], KRButton.prototype, "href", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: String })
 ], KRButton.prototype, "target", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: Array })
 ], KRButton.prototype, "options", void 0);
-__decorate$i([
+__decorate$j([
     n$1({ type: String, reflect: true, attribute: 'icon-position' })
 ], KRButton.prototype, "iconPosition", void 0);
-__decorate$i([
+__decorate$j([
     r$1()
 ], KRButton.prototype, "_state", void 0);
-__decorate$i([
+__decorate$j([
     r$1()
 ], KRButton.prototype, "_stateText", void 0);
-__decorate$i([
+__decorate$j([
     r$1()
 ], KRButton.prototype, "_dropdownOpened", void 0);
-KRButton = __decorate$i([
+KRButton = __decorate$j([
     t$1('kr-button')
 ], KRButton);
 
@@ -975,7 +975,7 @@ KRButton = __decorate$i([
  * SPDX-License-Identifier: BSD-3-Clause
  */class e extends i$1{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o$2=e$2(e);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1091,7 +1091,7 @@ KRCodeDemo.styles = [krBaseCSS, i$5 `
       display: block;
       border: 1px solid #d5dbdb;
       border-radius: 8px;
-      overflow: hidden;
+      overflow: visible;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     }
 
@@ -1209,26 +1209,26 @@ KRCodeDemo.styles = [krBaseCSS, i$5 `
     .hljs-property { color: #005cc5; }
 
   `];
-__decorate$h([
+__decorate$i([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "language", void 0);
-__decorate$h([
+__decorate$i([
     r$1()
 ], KRCodeDemo.prototype, "code", void 0);
-__decorate$h([
+__decorate$i([
     r$1()
 ], KRCodeDemo.prototype, "activeTab", void 0);
-__decorate$h([
+__decorate$i([
     r$1()
 ], KRCodeDemo.prototype, "copied", void 0);
-__decorate$h([
+__decorate$i([
     r$1()
 ], KRCodeDemo.prototype, "highlightedCode", void 0);
-KRCodeDemo = __decorate$h([
+KRCodeDemo = __decorate$i([
     t$1('kr-code-demo')
 ], KRCodeDemo);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1397,10 +1397,10 @@ KRContextMenu.styles = i$5 `
       margin: 4px 0;
     }
   `;
-__decorate$g([
+__decorate$h([
     r$1()
 ], KRContextMenu.prototype, "items", void 0);
-KRContextMenu = __decorate$g([
+KRContextMenu = __decorate$h([
     t$1('kr-context-menu')
 ], KRContextMenu);
 
@@ -1410,7 +1410,7 @@ KRContextMenu = __decorate$g([
  * SPDX-License-Identifier: BSD-3-Clause
  */const n="important",i=" !"+n,o$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||t$1.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e;}}return E}});
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1437,7 +1437,7 @@ KRDialogHeader.styles = i$5 `
       font-weight: 600;
     }
   `;
-KRDialogHeader = __decorate$f([
+KRDialogHeader = __decorate$g([
     t$1('kr-dialog-header')
 ], KRDialogHeader);
 let KRDialogContent = class KRDialogContent extends i$2 {
@@ -1453,7 +1453,7 @@ KRDialogContent.styles = i$5 `
       flex: 1 1 auto;
     }
   `;
-KRDialogContent = __decorate$f([
+KRDialogContent = __decorate$g([
     t$1('kr-dialog-content')
 ], KRDialogContent);
 let KRDialogFooter = class KRDialogFooter extends i$2 {
@@ -1473,7 +1473,7 @@ KRDialogFooter.styles = i$5 `
       justify-content: flex-end;
     }
   `;
-KRDialogFooter = __decorate$f([
+KRDialogFooter = __decorate$g([
     t$1('kr-dialog-footer')
 ], KRDialogFooter);
 /**
@@ -1681,22 +1681,582 @@ KRDialog.styles = i$5 `
       font-weight: 600;
     }
   `;
-__decorate$f([
+__decorate$g([
     r$1()
 ], KRDialog.prototype, "_contentElement", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: Boolean, reflect: true })
 ], KRDialog.prototype, "opened", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRDialog.prototype, "label", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRDialog.prototype, "width", void 0);
-KRDialog = __decorate$f([
+KRDialog = __decorate$g([
     t$1('kr-dialog')
 ], KRDialog);
 
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * A date range picker component for selecting date ranges with relative and absolute options.
+ *
+ * @fires change - Fired when the date range selection changes
+ * @csspart trigger - The trigger button element
+ * @csspart dropdown - The dropdown container
+ */
+let KRDateRangePicker = class KRDateRangePicker extends i$2 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Relative date options to display
+         */
+        this.relativeOptions = [
+            { key: 'last-5-minutes', amount: 5, unit: 'minute', type: 'relative' },
+            { key: 'last-30-minutes', amount: 30, unit: 'minute', type: 'relative' },
+            { key: 'last-1-hour', amount: 1, unit: 'hour', type: 'relative' },
+            { key: 'last-6-hours', amount: 6, unit: 'hour', type: 'relative' },
+            { key: 'last-1-day', amount: 1, unit: 'day', type: 'relative' },
+            { key: 'last-7-days', amount: 7, unit: 'day', type: 'relative' },
+            { key: 'last-30-days', amount: 30, unit: 'day', type: 'relative' },
+        ];
+        /**
+         * Whether the picker is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the picker is in an invalid state
+         */
+        this.invalid = false;
+        /**
+         * Placeholder text when no range is selected
+         */
+        this.placeholder = 'Select a date range';
+        /**
+         * Initial start date for absolute mode (YYYY-MM-DD)
+         */
+        this.startDate = '';
+        /**
+         * Initial end date for absolute mode (YYYY-MM-DD)
+         */
+        this.endDate = '';
+        this._isOpen = false;
+        this._activeTab = 'relative';
+        this._tempStartDate = '';
+        this._tempEndDate = '';
+        this._handleClickOutside = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this._isOpen = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleClickOutside);
+        if (this.startDate)
+            this._tempStartDate = this.startDate;
+        if (this.endDate)
+            this._tempEndDate = this.endDate;
+        // Set initial active tab based on mode
+        if (this.mode === 'relative') {
+            this._activeTab = 'relative';
+        }
+        else if (this.mode === 'absolute') {
+            this._activeTab = 'absolute';
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleClickOutside);
+    }
+    _handleTriggerClick() {
+        if (this.disabled)
+            return;
+        this._isOpen = !this._isOpen;
+    }
+    _handleTabClick(tab) {
+        this._activeTab = tab;
+    }
+    _handleRelativeSelect(option) {
+        this.value = {
+            type: 'relative',
+            amount: option.amount,
+            unit: option.unit,
+        };
+        this._isOpen = false;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleApplyAbsolute() {
+        if (!this._tempStartDate) {
+            return;
+        }
+        if (!this._tempEndDate) {
+            return;
+        }
+        if (this._tempStartDate >= this._tempEndDate) {
+            return;
+        }
+        this.value = {
+            type: 'absolute',
+            startDate: this._tempStartDate,
+            endDate: this._tempEndDate,
+        };
+        this.startDate = this._tempStartDate;
+        this.endDate = this._tempEndDate;
+        this._isOpen = false;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleCancel() {
+        this._isOpen = false;
+        this._tempStartDate = this.startDate;
+        this._tempEndDate = this.endDate;
+    }
+    _formatRelativeOption(option) {
+        if (option.amount === 0) {
+            if (option.unit === 'day') {
+                return 'Today';
+            }
+            return `This ${option.unit}`;
+        }
+        const unitLabels = {
+            second: option.amount === 1 ? 'second' : 'seconds',
+            minute: option.amount === 1 ? 'minute' : 'minutes',
+            hour: option.amount === 1 ? 'hour' : 'hours',
+            day: option.amount === 1 ? 'day' : 'days',
+            week: option.amount === 1 ? 'week' : 'weeks',
+            month: option.amount === 1 ? 'month' : 'months',
+            year: option.amount === 1 ? 'year' : 'years',
+        };
+        return `Last ${option.amount} ${unitLabels[option.unit]}`;
+    }
+    _getDisplayValue() {
+        if (!this.value)
+            return '';
+        if (this.value.type === 'relative' && this.value.amount !== undefined && this.value.unit) {
+            return this._formatRelativeOption({
+                key: '',
+                amount: this.value.amount,
+                unit: this.value.unit,
+                type: 'relative',
+            });
+        }
+        if (this.value.type === 'absolute' && this.value.startDate && this.value.endDate) {
+            return `${this.value.startDate} - ${this.value.endDate}`;
+        }
+        return '';
+    }
+    _renderTriggerText() {
+        const displayValue = this._getDisplayValue();
+        if (displayValue) {
+            return b `${displayValue}`;
+        }
+        return b `<span class="trigger-placeholder">${this.placeholder}</span>`;
+    }
+    _renderContent() {
+        if (this.mode === 'relative') {
+            return this._renderRelativeContent();
+        }
+        if (this.mode === 'absolute') {
+            return this._renderAbsoluteContent();
+        }
+        if (this._activeTab === 'relative') {
+            return this._renderRelativeContent();
+        }
+        return this._renderAbsoluteContent();
+    }
+    _renderRelativeContent() {
+        return b `
+      <div class="relative-options">
+        ${this.relativeOptions.map((option) => b `
+            <button
+              class=${e$1({
+            'relative-option': true,
+            'relative-option--selected': this.value?.type === 'relative' &&
+                this.value?.amount === option.amount &&
+                this.value?.unit === option.unit
+        })}
+              type="button"
+              @click=${() => this._handleRelativeSelect(option)}
+            >
+              ${this._formatRelativeOption(option)}
+            </button>
+          `)}
+      </div>
+    `;
+    }
+    _renderAbsoluteContent() {
+        return b `
+      <div class="absolute">
+        <div class="date-row">
+          <span class="date-label">Start</span>
+          <input
+            class="date-input"
+            type="date"
+            .value=${this._tempStartDate}
+            @change=${this._handleStartDateChange}
+          />
+        </div>
+        <div class="date-row">
+          <span class="date-label">End</span>
+          <input
+            class="date-input"
+            type="date"
+            .value=${this._tempEndDate}
+            @change=${this._handleEndDateChange}
+          />
+        </div>
+      </div>
+    `;
+    }
+    _renderFooter() {
+        if (this.mode === 'absolute') {
+            return b `
+        <div class="footer">
+          <kr-button variant="outline" size="small" @click=${this._handleCancel}>
+            Cancel
+          </kr-button>
+          <kr-button
+            variant="primary"
+            size="small"
+            ?disabled=${!this._tempStartDate || !this._tempEndDate}
+            @click=${this._handleApplyAbsolute}
+          >
+            Apply
+          </kr-button>
+        </div>
+      `;
+        }
+        if (this.mode === 'relative') {
+            return A;
+        }
+        if (this._activeTab === 'absolute') {
+            return b `
+        <div class="footer">
+          <kr-button variant="outline" size="small" @click=${this._handleCancel}>
+            Cancel
+          </kr-button>
+          <kr-button
+            variant="primary"
+            size="small"
+            ?disabled=${!this._tempStartDate || !this._tempEndDate}
+            @click=${this._handleApplyAbsolute}
+          >
+            Apply
+          </kr-button>
+        </div>
+      `;
+        }
+        return A;
+    }
+    _handleStartDateChange(e) {
+        this._tempStartDate = e.target.value;
+    }
+    _handleEndDateChange(e) {
+        this._tempEndDate = e.target.value;
+    }
+    render() {
+        return b `
+      <button
+        part="trigger"
+        class=${e$1({
+            'trigger': true,
+            'trigger--invalid': this.invalid
+        })}
+        type="button"
+        ?disabled=${this.disabled}
+        @click=${this._handleTriggerClick}
+      >
+        <svg class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+        <span class="trigger-text">
+          ${this._renderTriggerText()}
+        </span>
+        <svg class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <div part="dropdown" class=${e$1({
+            'dropdown': true,
+            'dropdown--open': this._isOpen
+        })}>
+        ${!this.mode ? b `
+          <div class="tabs">
+            <button
+              class=${e$1({
+            'tab': true,
+            'tab--active': this._activeTab === 'relative'
+        })}
+              type="button"
+              @click=${() => this._handleTabClick('relative')}
+            >
+              Relative
+            </button>
+            <button
+              class=${e$1({
+            'tab': true,
+            'tab--active': this._activeTab === 'absolute'
+        })}
+              type="button"
+              @click=${() => this._handleTabClick('absolute')}
+            >
+              Absolute
+            </button>
+          </div>
+        ` : A}
+
+        <div class="content">
+          ${this._renderContent()}
+        </div>
+
+        ${this._renderFooter()}
+      </div>
+    `;
+    }
+};
+KRDateRangePicker.styles = i$5 `
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: inherit;
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-width: 250px;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background-color: #fff;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      text-align: left;
+    }
+
+    .trigger:hover:not(:disabled) {
+      border-color: #9ca3af;
+    }
+
+    .trigger:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .trigger:disabled {
+      background-color: #f3f4f6;
+      color: #9ca3af;
+      cursor: not-allowed;
+    }
+
+    .trigger--invalid {
+      border-color: #ef4444;
+    }
+
+    .trigger-text {
+      flex: 1;
+    }
+
+    .trigger-placeholder {
+      color: #9ca3af;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      color: #6b7280;
+      flex-shrink: 0;
+    }
+
+    .dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 1000;
+      min-width: 320px;
+      background-color: #fff;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      display: none;
+    }
+
+    .dropdown--open {
+      display: block;
+    }
+
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    .tab {
+      flex: 1;
+      padding: 0.75rem;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      color: #6b7280;
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+
+    .tab:hover {
+      color: #111827;
+    }
+
+    .tab--active {
+      color: #2563eb;
+      border-bottom-color: #2563eb;
+    }
+
+    .content {
+      padding: 1rem;
+    }
+
+    .relative-options {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .relative-option {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      text-align: left;
+      transition: background-color 0.2s;
+    }
+
+    .relative-option:hover {
+      background-color: #f3f4f6;
+    }
+
+    .relative-option--selected {
+      background-color: #eff6ff;
+      color: #1e40af;
+    }
+
+    .absolute {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .date-row {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .date-label {
+      width: 60px;
+      font-size: 14px;
+      color: #6b7280;
+    }
+
+    .date-input {
+      flex: 1;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      font-family: inherit;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+    }
+
+    .date-input:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      border-top: 1px solid #e5e7eb;
+    }
+  `;
+__decorate$f([
+    n$1({ type: Object })
+], KRDateRangePicker.prototype, "value", void 0);
+__decorate$f([
+    n$1({ type: Array })
+], KRDateRangePicker.prototype, "relativeOptions", void 0);
+__decorate$f([
+    n$1({ type: Boolean })
+], KRDateRangePicker.prototype, "disabled", void 0);
+__decorate$f([
+    n$1({ type: Boolean })
+], KRDateRangePicker.prototype, "invalid", void 0);
+__decorate$f([
+    n$1({ type: String })
+], KRDateRangePicker.prototype, "placeholder", void 0);
+__decorate$f([
+    n$1({ type: String })
+], KRDateRangePicker.prototype, "startDate", void 0);
+__decorate$f([
+    n$1({ type: String })
+], KRDateRangePicker.prototype, "endDate", void 0);
+__decorate$f([
+    n$1({ type: String })
+], KRDateRangePicker.prototype, "mode", void 0);
+__decorate$f([
+    r$1()
+], KRDateRangePicker.prototype, "_isOpen", void 0);
+__decorate$f([
+    r$1()
+], KRDateRangePicker.prototype, "_activeTab", void 0);
+__decorate$f([
+    r$1()
+], KRDateRangePicker.prototype, "_tempStartDate", void 0);
+__decorate$f([
+    r$1()
+], KRDateRangePicker.prototype, "_tempEndDate", void 0);
+KRDateRangePicker = __decorate$f([
+    t$1('kr-date-range-picker')
+], KRDateRangePicker);
+
 var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -6041,7 +6601,7 @@ KRTable.styles = [krBaseCSS, i$5 `
       display: flex;
       align-items: center;
       background: #fff;
-      border-bottom: 1px solid #e5e7ebba;
+      border-bottom: 1px solid #d1d5db;
       border-right: 1px solid #e5e7ebba;
       box-sizing: border-box;
       box-shadow: inset 0 0 0 0 #163052;
@@ -9304,5 +9864,5 @@ KRComboBox = __decorate([
     t$1('kr-combo-box')
 ], KRComboBox);
 
-export { KRAccordion, KRAlert, KRAutoSuggest, KRButton, KRCodeDemo, KRComboBox, KRContextMenu, KRDialog, KRDialogRef, KRFileList, KRFilePreview, KRProgressBar, KRQuery, KRSelectField, KRSelectOption, KRSnackbar, KRSpinner, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, KR_OPERATORS, getOperatorsForType, krBaseCSS };
+export { KRAccordion, KRAlert, KRAutoSuggest, KRButton, KRCodeDemo, KRComboBox, KRContextMenu, KRDateRangePicker, KRDialog, KRDialogRef, KRFileList, KRFilePreview, KRProgressBar, KRQuery, KRSelectField, KRSelectOption, KRSnackbar, KRSpinner, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, KR_OPERATORS, getOperatorsForType, krBaseCSS };
 //# sourceMappingURL=krubble-components.bundled.js.map