@dropi/ui 0.1.18 → 0.1.20

package/dist/esm/dropi-date-picker-range.entry.js

@@ -0,0 +1,113 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:500;color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:16px}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:400}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:600}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid #f4c370;border-radius:4px;background:#fef8ed}.warning-message{color:#495057;font-size:10px;line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}`;
+
+const DropiDatePickerRange = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiStartDateChange = createEvent(this, "dropiStartDateChange", 7);
+        this.dropiEndDateChange = createEvent(this, "dropiEndDateChange", 7);
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+    }
+    /** Start date (YYYY-MM-DD) */
+    startDate = '';
+    /** End date (YYYY-MM-DD) */
+    endDate = '';
+    /** Show "Rango de fechas" label */
+    showLabel = true;
+    /** Input placeholder */
+    placeholder = '';
+    /** Show loading skeleton */
+    loading = false;
+    /** Max allowed range in days (0 = unlimited) */
+    maxDaysRange = 0;
+    /** Hide "Hoy" shortcut */
+    hideTodayRangeShortcut = false;
+    /** Emitted when start date changes */
+    dropiStartDateChange;
+    /** Emitted when end date changes */
+    dropiEndDateChange;
+    /** Emitted with full range when both dates are set */
+    dropiRangeChange;
+    start = '';
+    end = '';
+    activeRange = -1;
+    showWarning = false;
+    onStartPropChange(val) { this.start = val; }
+    onEndPropChange(val) { this.end = val; }
+    componentWillLoad() {
+        this.start = this.startDate;
+        this.end = this.endDate;
+    }
+    get today() {
+        return new Date().toISOString().split('T')[0];
+    }
+    daysAgo(n) {
+        const d = new Date();
+        d.setDate(d.getDate() - n);
+        return d.toISOString().split('T')[0];
+    }
+    get shortcuts() {
+        const all = [
+            { label: 'Hoy', start: this.today, end: this.today },
+            { label: 'Últimos 7 días', start: this.daysAgo(6), end: this.today },
+            { label: 'Últimos 15 días', start: this.daysAgo(14), end: this.today },
+            { label: 'Últimos 30 días', start: this.daysAgo(29), end: this.today },
+            { label: 'Últimos 90 días', start: this.daysAgo(89), end: this.today },
+        ];
+        return this.hideTodayRangeShortcut ? all.slice(1) : all;
+    }
+    selectShortcut(idx) {
+        const s = this.shortcuts[idx];
+        this.start = s.start;
+        this.end = s.end;
+        this.activeRange = idx;
+        this.showWarning = false;
+        this.emit();
+    }
+    onStartChange(e) {
+        this.start = e.target.value;
+        this.activeRange = -1;
+        this.checkRange();
+        if (this.start && this.end)
+            this.emit();
+    }
+    onEndChange(e) {
+        this.end = e.target.value;
+        this.activeRange = -1;
+        this.checkRange();
+        if (this.start && this.end)
+            this.emit();
+    }
+    checkRange() {
+        if (this.start && this.end && this.maxDaysRange > 0) {
+            const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
+            this.showWarning = diff > this.maxDaysRange;
+        }
+        else {
+            this.showWarning = false;
+        }
+    }
+    emit() {
+        this.dropiStartDateChange.emit(this.start);
+        this.dropiEndDateChange.emit(this.end);
+        this.dropiRangeChange.emit({ start: this.start, end: this.end });
+    }
+    render() {
+        if (this.loading) {
+            return h("div", { class: "skeleton" });
+        }
+        return (h("div", { class: "date-picker-range" }, this.showLabel && h("div", { class: "label" }, "Rango de fechas"), h("div", { class: "inputs-row" }, h("div", { class: "input-group" }, h("label", { class: "input-label" }, "Desde"), h("input", { type: "date", class: "date-input", value: this.start, max: this.end || this.today, onChange: (e) => this.onStartChange(e) })), h("span", { class: "separator" }, "\u2014"), h("div", { class: "input-group" }, h("label", { class: "input-label" }, "Hasta"), h("input", { type: "date", class: "date-input", value: this.end, min: this.start, max: this.today, onChange: (e) => this.onEndChange(e) }))), h("div", { class: "shortcuts" }, this.shortcuts.map((s, i) => (h("button", { key: i, class: `shortcut-btn${this.activeRange === i ? ' active' : ''}`, onClick: () => this.selectShortcut(i) }, s.label)))), this.showWarning && (h("div", { class: "warning-box" }, h("span", { class: "warning-message" }, "Solo puedes filtrar en un rango m\u00E1ximo de ", this.maxDaysRange, " d\u00EDas.")))));
+    }
+    static get watchers() { return {
+        "startDate": [{
+                "onStartPropChange": 0
+            }],
+        "endDate": [{
+                "onEndPropChange": 0
+            }]
+    }; }
+};
+DropiDatePickerRange.style = dropiDatePickerRangeCss();
+
+export { DropiDatePickerRange as dropi_date_picker_range };

package/dist/esm/dropi-date-picker.entry.js

@@ -0,0 +1,203 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:40px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 4px);left:0;width:280px;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0,0,0,0.1);z-index:300;padding:var(--Size-3, 12px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-3, 12px)}.dp-nav__btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px}.dp-day-header{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);text-align:center;padding:4px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-family:inherit;border:none;border-radius:var(--Border-1, 4px);cursor:pointer;background:none;color:var(--Gray-Gray-700, #32394d);transition:background 0.15s, color 0.15s}.dp-cell:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d)}.dp-cell--selected,.dp-cell--range-start,.dp-cell--range-end{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);border-radius:var(--Border-1, 4px)}.dp-cell--in-range{background:var(--Primary-Primary-50, #fff5eb);border-radius:0}.dp-cell--range-start{border-radius:var(--Border-1, 4px) 0 0 var(--Border-1, 4px)}.dp-cell--range-end{border-radius:0 var(--Border-1, 4px) var(--Border-1, 4px) 0}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #eceef4);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #68738f)}.dp-footer__today{color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Primary-Primary-50, #fff5eb)}`;
+
+const MONTHS_ES = [
+    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+];
+const DAYS_ES = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
+const DropiDatePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiDateChange = createEvent(this, "dropiDateChange", 7);
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+    }
+    /** Selected date (ISO string, single mode) */
+    value = '';
+    /** Range start date (ISO string, range mode) */
+    startDate = '';
+    /** Range end date (ISO string, range mode) */
+    endDate = '';
+    /** Enable range selection */
+    range = false;
+    /** Min selectable date (ISO string) */
+    minDate = '';
+    /** Max selectable date (ISO string) */
+    maxDate = '';
+    /** Label */
+    label = '';
+    /** Placeholder */
+    placeholder = 'Seleccionar fecha';
+    /** Disabled */
+    disabled = false;
+    open = false;
+    viewYear = new Date().getFullYear();
+    viewMonth = new Date().getMonth();
+    hoverDate = '';
+    /** Emitted when single date selected. e.detail = ISO date */
+    dropiDateChange;
+    /** Emitted when range selected. e.detail = { start, end } */
+    dropiRangeChange;
+    get displayValue() {
+        if (this.range) {
+            if (this.startDate && this.endDate)
+                return `${this.startDate} – ${this.endDate}`;
+            if (this.startDate)
+                return this.startDate;
+            return '';
+        }
+        return this.value;
+    }
+    open_() {
+        if (this.disabled)
+            return;
+        if (this.value) {
+            const d = new Date(this.value);
+            this.viewYear = d.getFullYear();
+            this.viewMonth = d.getMonth();
+        }
+        else if (this.startDate) {
+            const d = new Date(this.startDate);
+            this.viewYear = d.getFullYear();
+            this.viewMonth = d.getMonth();
+        }
+        this.open = true;
+    }
+    prevMonth() {
+        if (this.viewMonth === 0) {
+            this.viewMonth = 11;
+            this.viewYear--;
+        }
+        else
+            this.viewMonth--;
+    }
+    nextMonth() {
+        if (this.viewMonth === 11) {
+            this.viewMonth = 0;
+            this.viewYear++;
+        }
+        else
+            this.viewMonth++;
+    }
+    toISO(year, month, day) {
+        return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    isDisabled(iso) {
+        if (this.minDate && iso < this.minDate)
+            return true;
+        if (this.maxDate && iso > this.maxDate)
+            return true;
+        return false;
+    }
+    isInRange(iso) {
+        if (!this.range)
+            return false;
+        const start = this.startDate;
+        const end = this.endDate || this.hoverDate;
+        if (!start || !end)
+            return false;
+        const [s, e] = start <= end ? [start, end] : [end, start];
+        return iso > s && iso < e;
+    }
+    selectDate(iso) {
+        if (this.isDisabled(iso))
+            return;
+        if (!this.range) {
+            this.value = iso;
+            this.open = false;
+            this.dropiDateChange.emit(iso);
+            return;
+        }
+        // Range mode
+        if (!this.startDate || (this.startDate && this.endDate)) {
+            this.startDate = iso;
+            this.endDate = '';
+        }
+        else {
+            if (iso < this.startDate) {
+                this.endDate = this.startDate;
+                this.startDate = iso;
+            }
+            else {
+                this.endDate = iso;
+            }
+            this.open = false;
+            this.dropiRangeChange.emit({ start: this.startDate, end: this.endDate });
+        }
+    }
+    buildDays() {
+        const year = this.viewYear;
+        const month = this.viewMonth;
+        const firstDay = new Date(year, month, 1).getDay();
+        // Adjust to Monday-first
+        const startOffset = (firstDay + 6) % 7;
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrevMonth = new Date(year, month, 0).getDate();
+        const cells = [];
+        // Previous month filler
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const d = daysInPrevMonth - i;
+            const m = month === 0 ? 11 : month - 1;
+            const y = month === 0 ? year - 1 : year;
+            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
+        }
+        // Current month
+        for (let d = 1; d <= daysInMonth; d++) {
+            cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
+        }
+        // Next month filler
+        const remaining = 42 - cells.length;
+        for (let d = 1; d <= remaining; d++) {
+            const m = month === 11 ? 0 : month + 1;
+            const y = month === 11 ? year + 1 : year;
+            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
+        }
+        return cells;
+    }
+    render() {
+        const days = this.buildDays();
+        const today = new Date().toISOString().slice(0, 10);
+        return (h("div", { key: 'ee619ad7d2528fa29f74cd9e149a9a4f8250c1b5', class: "dp-wrap" }, this.label && h("label", { key: 'faffc20912e7e27cf27f6b8895050df117f2fcd9', class: "dp-label" }, this.label), h("button", { key: '6249c8e76c7b19bd54bedb3f2e98342b45eb9444', class: { 'dp-trigger': true, 'dp-trigger--disabled': this.disabled }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled, type: "button" }, h("dropi-icon", { key: '3033520703a6c58fb30d8231196a206e1f2a153c', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'c426b0a12c17108d4f32d2d01732bfc13ec15b26', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '218703644316e36b4a2bece89975db723eaa0bfa', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4ca8fa76344e960a42e4aec332e6ecdabab3bc6c', class: "dp-popup" }, h("div", { key: '04b2b43eb0b209127a31adb2d0721b70449e84ab', class: "dp-nav" }, h("button", { key: '4f7e1208d4a6b2e03f30730fb38306f4aaf365af', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '307a5dcbd86c26f13a22e0d69a8f61b7a646378b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '1c094b7fb9385cc7673a2dd3038eebdc11a247c7', class: "dp-nav__title" }, MONTHS_ES[this.viewMonth], " ", this.viewYear), h("button", { key: '70c629dc1f1229fffcceec2f01ed8acc72bf1794', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'ab1847f3771ccc80c9257a82f31ed7cd2cb0dd0a', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '92ff7685583877bed3a63ea74c92fd4581b9a777', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            const isSelected = !this.range
+                ? iso === this.value
+                : iso === this.startDate || iso === this.endDate;
+            const isRangeStart = this.range && iso === this.startDate;
+            const isRangeEnd = this.range && iso === this.endDate;
+            const inRange = this.isInRange(iso);
+            const disabled = this.isDisabled(iso);
+            const isToday = iso === today;
+            return (h("button", { class: {
+                    'dp-cell': true,
+                    'dp-cell--other-month': !currentMonth,
+                    'dp-cell--today': isToday,
+                    'dp-cell--selected': isSelected,
+                    'dp-cell--range-start': isRangeStart,
+                    'dp-cell--range-end': isRangeEnd,
+                    'dp-cell--in-range': inRange,
+                    'dp-cell--disabled': disabled,
+                }, type: "button", disabled: disabled, onClick: () => this.selectDate(iso), onMouseEnter: () => {
+                    if (this.range && this.startDate && !this.endDate)
+                        this.hoverDate = iso;
+                }, onMouseLeave: () => this.hoverDate = '' }, day));
+        })), h("div", { key: '2e1a6e5e3f016b68b9486e6acadb94738671fe7f', class: "dp-footer" }, h("button", { key: 'cef6300ccd52c617426522d3977ac72829cb40cc', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.value = '';
+                this.startDate = '';
+                this.endDate = '';
+                this.open = false;
+            } }, "Limpiar"), h("button", { key: 'a5627d87cdc24d70368618fb8c67eff30b0800c7', class: "dp-footer__today", type: "button", onClick: () => {
+                if (!this.range) {
+                    this.value = today;
+                    this.open = false;
+                    this.dropiDateChange.emit(today);
+                }
+                else {
+                    this.startDate = today;
+                    this.endDate = '';
+                }
+            } }, "Hoy"))))));
+    }
+};
+DropiDatePicker.style = dropiDatePickerCss();
+
+export { DropiDatePicker as dropi_date_picker };

package/dist/esm/dropi-drawer.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiDrawerCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #fff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header__title{font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}.drawer-header__close{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;border-radius:var(--Border-1, 4px);transition:background 0.15s}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px)}.drawer-footer{flex-shrink:0;padding:var(--Size-3, 12px) var(--Size-4, 16px);border-top:1px solid var(--Gray-Gray-100, #eceef4)}.drawer-footer:empty{display:none}`;
+
+const DropiDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
+    }
+    /** Controls visibility */
+    open = false;
+    /** Side from which the drawer slides in */
+    position = 'right';
+    /** Drawer title */
+    drawerTitle = '';
+    /** Width (for left/right drawers) */
+    width = '400px';
+    /** Height (for top/bottom drawers) */
+    height = '50vh';
+    /** Close on backdrop click */
+    closeOnBackdrop = true;
+    /** Emitted when drawer closes */
+    dropiClose;
+    openChanged(val) {
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = val ? 'hidden' : '';
+        }
+    }
+    close() {
+        this.open = false;
+        this.dropiClose.emit();
+    }
+    render() {
+        const isHorizontal = this.position === 'left' || this.position === 'right';
+        return (h("div", { key: '49b9f893c2c05018301b67234142d4ad2e38a511', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '4a2263c0ffe74bdb53e1ff4992d3b04f39a55856', class: "drawer-backdrop", onClick: () => {
+                if (this.closeOnBackdrop)
+                    this.close();
+            } }), h("div", { key: 'd2cf49005f3b8a970361fdd725d9903b212abd37', class: `drawer-panel drawer-panel--${this.position}`, style: isHorizontal ? { width: this.width } : { height: this.height }, role: "dialog", "aria-modal": "true" }, h("div", { key: '4f04806b747df0e079e01a27ba307f1625679a08', class: "drawer-header" }, h("span", { key: '211b77262547ac3b45e97966e6cc6b18dbf92b39', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '1a18631b15de75687cab1e21869c8948461716d7', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '94c49ce2bc26e65be60d0bb7fb0d05c3e4d260e6', name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))), h("div", { key: '900cafee62e4dd5b4e6dd89aec680bd19bb44bd8', class: "drawer-body" }, h("slot", { key: 'ef7d81f315b0aaea94bd68048d133a8026685a66' })), h("div", { key: 'd4e6058b84c1fe015b66c540bb1951666bafb35e', class: "drawer-footer" }, h("slot", { key: 'e66380715a41bc41310ff4b3241e868c5e2609b1', name: "footer" })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+DropiDrawer.style = dropiDrawerCss();
+
+export { DropiDrawer as dropi_drawer };

package/dist/esm/dropi-dropdown.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Property name to display as the option label */
+    valueModel = 'name';
+    /** Property name to use as the option image/avatar URL */
+    imageModel = '';
+    /** Max height of the list container (CSS value) */
+    height = '300px';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        return (h("div", { key: '7c8505a82b836b58ea73603249ed2143b0692fc2', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+            const label = opt[this.valueModel] ?? String(opt);
+            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
+            const active = this.isSelected(opt);
+            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+        })));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiDropdown.style = dropiDropdownCss();
+
+export { DropiDropdown as dropi_dropdown };

package/dist/esm/dropi-empty-state.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
 
-const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
+const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
 
 const DropiEmptyState = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiAction = createEvent(this, "dropiAction");
-        this.dropiSecondaryAction = createEvent(this, "dropiSecondaryAction");
+        this.dropiAction = createEvent(this, "dropiAction", 7);
+        this.dropiSecondaryAction = createEvent(this, "dropiSecondaryAction", 7);
     }
     /** Title text */
     header = '';
@@ -18,14 +18,18 @@ const DropiEmptyState = class {
     imageAlt = 'Sin resultados';
     /** Primary action button label (empty = hidden) */
     actionLabel = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) */
+    iconState = 'default';
     /** Secondary action button label (empty = hidden) */
     secondaryLabel = '';
+    /** Severity for the action buttons */
+    actionSeverity = 'tertiary';
     /** Emitted when primary action button is clicked */
     dropiAction;
     /** Emitted when secondary action button is clicked */
     dropiSecondaryAction;
     render() {
-        return (h("div", { key: '1aea01715d0e50b308904d496be7bc2f607bf5aa', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: '41e5da8d482456f4b9006449a27a9f9d172d87b4', class: "empty-state-title" }, this.header), this.description && h("p", { key: 'ffa6399489ec56cd2cf84bb39d12c112bee64302', class: "empty-state-description" }, this.description), h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: '0da97fd516eccd1cabe846b2d002fdf75306674d', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'de1b1ad4d6a50cfd251de243a3b5ea3beb10019b', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '59f3b47ee14f3ac89aa4acc5b42d856f26d02d19', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: 'a4aec0618cd8a0900c4d5e82528a86d30c027669', class: "empty-state" }, h("div", { key: '80565c251e85146d824c640cbce4602d509311bb', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.iconState}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.header && h("h3", { key: '9cd0fc5aac1aeb089f1ef4c46291c9ad5d630d9c', class: "empty-state-title" }, this.header), this.description && h("p", { key: '4f2fd55693d6376a7d782a8df5d71c33fa8ea523', class: "empty-state-description" }, this.description), h("slot", { key: 'a48aa738f9f9a3a2c1f62d86e36010f2eb6c9b06' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'dd2978b2422d1382461eaba5c92eba37817ddb61', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'b2d76dd6da170d8af85384ffbe800a4789ea96d9', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '68efcbb4c4069302839501c74affc6d43f7d4c6b', text: this.actionLabel, severity: this.actionSeverity, onDropiClick: () => this.dropiAction.emit() }))))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();

package/dist/esm/dropi-favorite-button.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:8px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White);cursor:pointer;transition:all 0.2s ease-in-out}.fav-btn:hover,.fav-btn--active{background:var(--Gray-Gray-50)}.fav-btn:active{transform:scale(0.95)}`;
+
+const DropiFavoriteButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiToggleFavorite = createEvent(this, "dropiToggleFavorite", 7);
+    }
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.dropiToggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (h("button", { key: '1911efe67d8e0ab2f7531e01a844880054fdf693', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: 'be817f295f9e3e36ca86027f487781f07ae1561d', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+};
+DropiFavoriteButton.style = dropiFavoriteButtonCss();
+
+export { DropiFavoriteButton as dropi_favorite_button };

package/dist/esm/dropi-file-upload-progress-bar.entry.js

@@ -0,0 +1,50 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiFileUploadProgressBarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.upload-item--success{border-color:var(--Success-Success-200, #a7edbb)}.upload-item--error{border-color:var(--Error-Error-200, #f9b4b4)}.upload-item__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--Gray-Gray-50, #f7f8fa);border-radius:var(--Border-1, 4px)}.upload-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.upload-item__header{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-2, 8px)}.upload-item__name{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.upload-item__size{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);flex-shrink:0}.upload-item__bar-wrap{display:flex;align-items:center;gap:var(--Size-2, 8px)}.upload-item__bar{flex:1;height:6px;background:var(--Gray-Gray-100, #eceef4);border-radius:100px;overflow:hidden}.upload-item__bar-fill{height:100%;background:var(--Primary-Primary-500, #f49a3d);border-radius:100px;transition:width 0.3s ease}.upload-item--success .upload-item__bar-fill{background:var(--Success-Success-500, #34c55a)}.upload-item--error .upload-item__bar-fill{background:var(--Error-Error-500, #f46a6b)}.upload-item--paused .upload-item__bar-fill{background:var(--Warning-Warning-500, #f49a3d)}.upload-item__pct{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);width:32px;text-align:right;flex-shrink:0}.upload-item__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.upload-item__cancel{background:none;border:none;padding:2px;cursor:pointer;display:flex;align-items:center;flex-shrink:0;border-radius:var(--Border-1, 4px);transition:background 0.15s}.upload-item__cancel:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+
+const DropiFileUploadProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiCancel = createEvent(this, "dropiCancel", 7);
+    }
+    /** File name */
+    fileName = '';
+    /** File size label (e.g. "1.2 MB") */
+    fileSize = '';
+    /** Upload progress 0–100 */
+    progress = 0;
+    /** Current status */
+    status = 'uploading';
+    /** Error message shown when status is "error" */
+    errorMessage = 'Error al cargar el archivo';
+    /** Show cancel/remove button */
+    showCancel = true;
+    /** Emitted when cancel/remove clicked */
+    dropiCancel;
+    get clampedProgress() {
+        return Math.min(100, Math.max(0, this.progress));
+    }
+    get iconName() {
+        switch (this.status) {
+            case 'success': return 'Check-circle';
+            case 'error': return 'Close-circle';
+            case 'paused': return 'Pause-circle';
+            default: return 'Document';
+        }
+    }
+    get iconColor() {
+        switch (this.status) {
+            case 'success': return 'Success-Success-500';
+            case 'error': return 'Error-Error-500';
+            case 'paused': return 'Warning-Warning-500';
+            default: return 'Primary-Primary-500';
+        }
+    }
+    render() {
+        const pct = this.clampedProgress;
+        return (h("div", { key: '1a7e98a56a7f60be4f9934f6e124ed9b78d815a2', class: `upload-item upload-item--${this.status}` }, h("div", { key: 'a3bd11ec50244ba045361e015202bf895e74ef54', class: "upload-item__icon" }, h("dropi-icon", { key: '0cbd181eb3cebab1feff8bc21748a62c66a4a38f', name: this.iconName, width: "24px", height: "24px", color: this.iconColor })), h("div", { key: 'fde507232d8105da36820a2dcd5e555ef28da37e', class: "upload-item__content" }, h("div", { key: '6d800c22fe3c659bfe39bf8b75f62668cfda6195', class: "upload-item__header" }, h("span", { key: 'cec4dc4b7c0658bf2f086742cc53caea655ef493', class: "upload-item__name" }, this.fileName), this.fileSize && h("span", { key: '9c523619ef47586b4236de2f21f9e483c6c100fc', class: "upload-item__size" }, this.fileSize)), this.status === 'error' ? (h("p", { class: "upload-item__error" }, this.errorMessage)) : (h("div", { class: "upload-item__bar-wrap" }, h("div", { class: "upload-item__bar" }, h("div", { class: "upload-item__bar-fill", style: { width: `${pct}%` } })), h("span", { class: "upload-item__pct" }, pct, "%")))), this.showCancel && (h("button", { key: '375c0fb876e6d2073ae55a96a2fe9654f399870e', class: "upload-item__cancel", onClick: () => this.dropiCancel.emit(), "aria-label": "Cancelar" }, h("dropi-icon", { key: '84dc8576cabe8846b7759411ad57fe7bab218ec2', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))));
+    }
+};
+DropiFileUploadProgressBar.style = dropiFileUploadProgressBarCss();
+
+export { DropiFileUploadProgressBar as dropi_file_upload_progress_bar };

package/dist/esm/dropi-file-upload.entry.js

@@ -0,0 +1,82 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiFileUploadCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-wrap{display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.upload-label{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066)}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-2, 8px);padding:var(--Size-6, 32px) var(--Size-4, 16px);border:2px dashed var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);cursor:pointer;transition:border-color 0.2s, background 0.2s;text-align:center}.upload-zone:hover:not(.upload-zone--disabled){border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.upload-zone--dragging{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.upload-zone--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.upload-zone__text{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.upload-zone__hint{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.upload-hidden{display:none}.upload-error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}`;
+
+const DropiFileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiFilesSelected = createEvent(this, "dropiFilesSelected", 7);
+        this.dropiFileError = createEvent(this, "dropiFileError", 7);
+    }
+    /** Accepted MIME types (comma-separated, e.g. "image/*,application/pdf") */
+    accept = '';
+    /** Allow multiple file selection */
+    multiple = false;
+    /** Max file size in MB */
+    maxSizeMb = 10;
+    /** Disabled state */
+    disabled = false;
+    /** Label text above zone */
+    label = '';
+    /** Helper text inside drop zone */
+    helperText = 'Arrastra o haz clic para subir un archivo';
+    dragging = false;
+    errors = [];
+    inputRef;
+    /** Emitted with array of UploadedFile when files are selected/dropped */
+    dropiFilesSelected;
+    /** Emitted when a file fails validation. e.detail = error message */
+    dropiFileError;
+    async readFiles(fileList) {
+        const errs = [];
+        const valid = [];
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList[i];
+            if (this.maxSizeMb && file.size > this.maxSizeMb * 1024 * 1024) {
+                const msg = `"${file.name}" supera el tamaño máximo de ${this.maxSizeMb} MB`;
+                errs.push(msg);
+                this.dropiFileError.emit(msg);
+                continue;
+            }
+            const dataUrl = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(file);
+            });
+            valid.push({ name: file.name, size: file.size, type: file.type, dataUrl });
+        }
+        this.errors = errs;
+        if (valid.length)
+            this.dropiFilesSelected.emit(valid);
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (this.disabled || !e.dataTransfer?.files.length)
+            return;
+        this.readFiles(e.dataTransfer.files);
+    }
+    handleInputChange(e) {
+        const input = e.target;
+        if (input.files?.length)
+            this.readFiles(input.files);
+        input.value = '';
+    }
+    render() {
+        return (h("div", { key: '5498c6aa5d81a5265bf4e954e7674f4db8c5c538', class: "upload-wrap" }, this.label && h("label", { key: '94cd8bcaf7dba51e9d7861412d6a509841518367', class: "upload-label" }, this.label), h("div", { key: 'c3b5417103abab569b8a883967d567a4ec6ab483', class: {
+                'upload-zone': true,
+                'upload-zone--dragging': this.dragging,
+                'upload-zone--disabled': this.disabled,
+            }, onClick: () => {
+                if (!this.disabled)
+                    this.inputRef.click();
+            }, onDragOver: (e) => {
+                e.preventDefault();
+                if (!this.disabled)
+                    this.dragging = true;
+            }, onDragLeave: () => this.dragging = false, onDrop: (e) => this.handleDrop(e) }, h("dropi-icon", { key: '436802ec23dc677807ecac36947cd58f9d253e4d', name: "Upload", width: "32px", height: "32px", color: "Primary-Primary-500" }), h("p", { key: 'c80ed3536466ae22dcd96fabf353a736515e5bab', class: "upload-zone__text" }, this.helperText), this.maxSizeMb && (h("p", { key: '26defe6cece9a9ba6e9d7e2a1913a65607a20036', class: "upload-zone__hint" }, "Tama\u00F1o m\u00E1ximo: ", this.maxSizeMb, " MB")), h("input", { key: '00f7657bfc1646f01dfbc0339df6ed9f04a71ab0', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.handleInputChange(e) })), this.errors.map(err => (h("p", { class: "upload-error" }, err)))));
+    }
+};
+DropiFileUpload.style = dropiFileUploadCss();
+
+export { DropiFileUpload as dropi_file_upload };