@andespindola/ui-core 0.2.0 → 0.4.0

package/dist/esm/ui-combobox.entry.js

@@ -0,0 +1,151 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-COlwaVJP.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom-DDtwbwIl.js';
+
+const uiComboboxCss = () => `:host{display:block}.field{display:flex;align-items:center;gap:0.5rem;width:100%;height:2.75rem;padding:0 0.875rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-panel);backdrop-filter:blur(22px);transition:all var(--ui-duration) var(--ui-ease);box-sizing:border-box}.field:hover{border-color:var(--ui-border-strong)}.field:focus-within{border-color:var(--ui-accent);box-shadow:0 0 0 2px var(--ui-ring)}.input{flex:1;min-width:0;height:100%;border:none;background:transparent;color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.875rem;outline:none}.input::placeholder{color:var(--ui-text-faint)}.list{position:fixed;top:0;left:0;z-index:50;max-height:16rem;overflow-y:auto;padding:0.25rem;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius);visibility:hidden;opacity:0;transition:opacity var(--ui-duration) var(--ui-ease),     visibility var(--ui-duration) var(--ui-ease)}.list.is-open{visibility:visible;opacity:1}.option{padding:0.5rem 0.75rem;font-size:0.875rem;color:var(--ui-foreground);border-radius:var(--ui-radius-sm);cursor:pointer;transition:background var(--ui-duration) var(--ui-ease)}.option.active{background:var(--ui-chip)}.option.selected{color:var(--ui-accent)}.empty{padding:0.5rem 0.75rem;font-size:0.875rem;color:var(--ui-text-faint)}`;
+
+const UiCombobox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiChange = createEvent(this, "uiChange");
+        /** Opções disponíveis para autocomplete. */
+        this.options = [];
+        /** Valor selecionado. */
+        this.value = "";
+        /** Placeholder do campo. */
+        this.placeholder = "";
+        /** Texto digitado no campo. */
+        this.query = "";
+        /** Indica se a lista flutuante está aberta. */
+        this.open = false;
+        /** Índice da opção destacada. */
+        this.activeIndex = -1;
+        this.listId = `ui-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+        this.onInput = (event) => {
+            this.query = event.target.value;
+            this.activeIndex = -1;
+            this.setOpen(true);
+        };
+        this.onFocus = () => {
+            this.setOpen(true);
+        };
+        this.onKeydown = (event) => {
+            const items = this.filtered;
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    if (!this.open) {
+                        this.setOpen(true);
+                        return;
+                    }
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex = (this.activeIndex + 1) % items.length;
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex =
+                        (this.activeIndex - 1 + items.length) % items.length;
+                    break;
+                case "Enter":
+                    if (this.open && this.activeIndex >= 0 && items[this.activeIndex]) {
+                        event.preventDefault();
+                        this.select(items[this.activeIndex]);
+                    }
+                    break;
+                case "Escape":
+                    if (this.open) {
+                        event.preventDefault();
+                        this.setOpen(false);
+                    }
+                    break;
+            }
+        };
+        this.onDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.host))
+                return;
+            this.setOpen(false);
+        };
+    }
+    componentWillLoad() {
+        const selected = this.options.find((option) => option.value === this.value);
+        if (selected)
+            this.query = selected.label;
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+    }
+    get filtered() {
+        const term = this.query.toLowerCase();
+        return this.options.filter((option) => option.label.toLowerCase().includes(term));
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        if (value) {
+            requestAnimationFrame(() => this.start());
+            document.addEventListener("click", this.onDocumentClick);
+        }
+        else {
+            this.stop();
+            this.activeIndex = -1;
+            document.removeEventListener("click", this.onDocumentClick);
+        }
+    }
+    start() {
+        if (!this.inputEl || !this.listEl)
+            return;
+        this.stop();
+        this.cleanup = autoUpdate(this.inputEl, this.listEl, () => {
+            if (!this.inputEl || !this.listEl)
+                return;
+            computePosition(this.inputEl, this.listEl, {
+                placement: "bottom-start",
+                middleware: [
+                    offset(6),
+                    flip(),
+                    shift({ padding: 8 }),
+                    size({
+                        apply: ({ rects, elements }) => {
+                            Object.assign(elements.floating.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                Object.assign(this.listEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    select(option) {
+        this.value = option.value;
+        this.query = option.label;
+        this.setOpen(false);
+        this.uiChange.emit(option.value);
+    }
+    render() {
+        const items = this.filtered;
+        return (h(Host, { key: '64d332f96d0cb39e1889eb56dbf448f67e5ed240' }, h("div", { key: '30f829b5eff180aa97a2bbb2f90a4e289768df71', class: "field" }, h("input", { key: 'f6df95047db674d2e49d34fed6057cffc86eab49', class: "input", type: "text", role: "combobox", value: this.query, placeholder: this.placeholder, autocomplete: "off", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.listId, "aria-autocomplete": "list", ref: (el) => (this.inputEl = el), onInput: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown })), h("div", { key: 'de55c7ad59dfa3e35aeac8799366e3ee849d1398', id: this.listId, class: { list: true, "is-open": this.open }, role: "listbox", ref: (el) => (this.listEl = el) }, items.length === 0 ? (h("div", { class: "empty" }, "Nenhum resultado")) : (items.map((option, index) => (h("div", { class: {
+                option: true,
+                active: index === this.activeIndex,
+                selected: option.value === this.value,
+            }, role: "option", "aria-selected": option.value === this.value ? "true" : "false", onMouseEnter: () => (this.activeIndex = index), onMouseDown: (event) => {
+                event.preventDefault();
+                this.select(option);
+            } }, option.label)))))));
+    }
+    get host() { return getElement(this); }
+};
+UiCombobox.style = uiComboboxCss();
+
+export { UiCombobox as ui_combobox };

package/dist/esm/ui-command.entry.js

@@ -0,0 +1,135 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-COlwaVJP.js';
+
+const uiCommandCss = () => `.command{padding:0;border:none;background:transparent;max-width:none;max-height:none;color:var(--ui-foreground)}.command::backdrop{background:var(--ui-overlay);backdrop-filter:blur(4px)}.panel{margin:12vh auto 0;width:min(40rem, 92vw);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px) saturate(140%);border-radius:var(--ui-radius-xl);overflow:hidden;font-family:var(--ui-font-sans)}.search{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--ui-border);background:transparent;color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:1rem;padding:1rem;outline:none}.search::placeholder{color:var(--ui-text-faint)}.list{max-height:50vh;overflow:auto;padding:0.5rem}.group{text-transform:uppercase;font-size:0.7rem;letter-spacing:0.04em;color:var(--ui-text-faint);padding:0.5rem 0.75rem 0.25rem}.item{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.5rem 0.75rem;border-radius:var(--ui-radius-sm);cursor:pointer}.item.active{background:var(--ui-chip)}.label{color:var(--ui-foreground)}.hint{color:var(--ui-text-faint);font-size:0.8rem}.empty{text-align:center;color:var(--ui-text-faint);padding:1.5rem 1rem}`;
+
+const UiCommand = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiSelect = createEvent(this, "uiSelect");
+        /** Controla a abertura da paleta de comandos. */
+        this.open = false;
+        /** Itens disponíveis na paleta. */
+        this.items = [];
+        /** Placeholder do campo de busca. */
+        this.placeholder = "Buscar comando…";
+        /** Abre/fecha com Cmd/Ctrl+K quando habilitado. */
+        this.hotkey = true;
+        /** Texto digitado na busca. */
+        this.query = "";
+        /** Índice do item destacado na lista filtrada. */
+        this.activeIndex = 0;
+        this.onHotkey = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+                event.preventDefault();
+                this.open = !this.open;
+            }
+        };
+        this.onClose = () => {
+            if (this.open)
+                this.open = false;
+            this.query = "";
+            this.activeIndex = 0;
+        };
+        this.onInput = (event) => {
+            this.query = event.target.value;
+            this.activeIndex = 0;
+        };
+        this.onKeydown = (event) => {
+            const items = this.filtered;
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex = (this.activeIndex + 1) % items.length;
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex =
+                        (this.activeIndex - 1 + items.length) % items.length;
+                    break;
+                case "Enter":
+                    if (items[this.activeIndex]) {
+                        event.preventDefault();
+                        this.select(items[this.activeIndex]);
+                    }
+                    break;
+            }
+        };
+    }
+    onOpenChange(value) {
+        this.sync(value);
+        if (value) {
+            requestAnimationFrame(() => this.inputEl?.focus());
+        }
+    }
+    componentDidLoad() {
+        this.sync(this.open);
+    }
+    connectedCallback() {
+        if (this.hotkey && typeof document !== "undefined") {
+            document.addEventListener("keydown", this.onHotkey);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof document !== "undefined") {
+            document.removeEventListener("keydown", this.onHotkey);
+        }
+    }
+    sync(value) {
+        if (!this.dialogEl)
+            return;
+        if (value && !this.dialogEl.open)
+            this.dialogEl.showModal();
+        else if (!value && this.dialogEl.open)
+            this.dialogEl.close();
+    }
+    /** Abre a paleta imperativamente. */
+    async show() {
+        this.open = true;
+    }
+    /** Fecha a paleta imperativamente. */
+    async close() {
+        this.open = false;
+    }
+    get filtered() {
+        const term = this.query.toLowerCase();
+        return this.items.filter((item) => item.label.toLowerCase().includes(term));
+    }
+    select(item) {
+        this.uiSelect.emit(item.value);
+        this.open = false;
+        this.query = "";
+        this.activeIndex = 0;
+    }
+    render() {
+        const items = this.filtered;
+        let flatIndex = -1;
+        const seenGroups = new Set();
+        return (h(Host, { key: '2c99a55d42f0fa90a2b2ec4cae3d0952429fe861' }, h("dialog", { key: '514c6b029111f2fbba14ce430f515c3528b6666f', class: "command", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose }, h("div", { key: '430a2fd81e35ff4f2478a45d1398df7a575ce92d', class: "panel" }, h("input", { key: '2eb475315a08d49f5716fd3aac87e1ce9d3d937b', class: "search", type: "text", role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", value: this.query, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), onInput: this.onInput, onKeyDown: this.onKeydown }), h("div", { key: '031e45085143e13aa360b0f2641a1fc80c4f75ab', class: "list", role: "listbox" }, items.length === 0 ? (h("div", { class: "empty" }, "Nenhum comando")) : (items.map((item) => {
+            flatIndex += 1;
+            const index = flatIndex;
+            const showGroup = item.group !== undefined && !seenGroups.has(item.group);
+            if (item.group !== undefined)
+                seenGroups.add(item.group);
+            return [
+                showGroup ? (h("div", { class: "group" }, item.group)) : null,
+                h("div", { class: { item: true, active: index === this.activeIndex }, role: "option", "aria-selected": index === this.activeIndex ? "true" : "false", onMouseEnter: () => (this.activeIndex = index), onMouseDown: (event) => {
+                        event.preventDefault();
+                        this.select(item);
+                    } }, h("span", { class: "label" }, item.label), item.hint ? (h("span", { class: "hint" }, item.hint)) : null),
+            ];
+        })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+UiCommand.style = uiCommandCss();
+
+export { UiCommand as ui_command };

package/dist/esm/ui-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-DYwlrXg_.js';
+import { r as registerInstance, h, H as Host } from './index-COlwaVJP.js';
 
 const uiContainerCss = () => `:host{display:block;width:100%}.container{margin-inline:auto;width:100%;font-family:var(--ui-font-sans)}.size-sm{max-width:40rem}.size-md{max-width:48rem}.size-lg{max-width:64rem}.size-xl{max-width:80rem}.size-full{max-width:none}.padded{padding-inline:1.25rem}@media (min-width: 640px){.padded{padding-inline:2rem}}`;
 
@@ -16,7 +16,7 @@ const UiContainer = class {
             [`size-${this.size}`]: true,
             padded: this.padded,
         };
-        return (h(Host, { key: '4f00ee39f0ae347fafac349ee8e42c991c8013dd' }, h("div", { key: 'a0f8f0c6d418f119c6631d0387f9328af8fbb416', class: classes }, h("slot", { key: '86178f8371c958123fcf8b7e6bfe059aeed9f690' }))));
+        return (h(Host, { key: '474a0aeda3c1caad66af3108381f325dbec41566' }, h("div", { key: 'df5fdea525ac34873923b65408f971957fb53186', class: classes }, h("slot", { key: 'e83ff090d3634368b7425db0d4c94f860934c951' }))));
     }
 };
 UiContainer.style = uiContainerCss();

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

@@ -0,0 +1,169 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-COlwaVJP.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-DDtwbwIl.js';
+
+const uiDatePickerCss = () => `:host{display:inline-block;font-family:var(--ui-font-sans)}.field{display:inline-flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-width:12rem;height:2.75rem;padding:0 0.875rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-panel);color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.875rem;text-align:left;cursor:pointer;backdrop-filter:blur(22px);transition:all var(--ui-duration) var(--ui-ease);box-sizing:border-box}.field:hover{border-color:var(--ui-border-strong)}.field:focus-visible{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 2px var(--ui-ring)}.label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-foreground)}.label.placeholder{color:var(--ui-text-faint)}.icon{flex:none;color:var(--ui-text-muted)}.calendar{position:fixed;top:0;left:0;z-index:50;width:17rem;max-width:calc(100vw - 1rem);padding:1rem;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius);visibility:hidden;opacity:0;transform:scale(0.96);transition:opacity var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.calendar.is-open{visibility:visible;opacity:1;transform:scale(1)}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:0.875rem;font-weight:600;text-transform:capitalize;color:var(--ui-foreground)}.nav{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--ui-radius-full);background:transparent;color:var(--ui-text-soft);cursor:pointer;transition:all var(--ui-duration) var(--ui-ease)}.nav:hover{background:var(--ui-chip);color:var(--ui-foreground)}.weekdays{display:grid;grid-template-columns:repeat(7, 1fr);margin-bottom:0.25rem}.weekday{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:0.7rem;color:var(--ui-text-faint)}.grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.125rem;justify-items:center}.day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:1px solid transparent;border-radius:var(--ui-radius-full);background:transparent;color:var(--ui-foreground);font-family:var(--ui-font-sans);font-size:0.8125rem;cursor:pointer;transition:all var(--ui-duration) var(--ui-ease)}.day.empty{cursor:default;pointer-events:none}.day:hover:not(.empty):not(.selected){background:var(--ui-chip)}.day.today{border-color:var(--ui-accent)}.day.selected{background:var(--ui-accent);color:var(--ui-accent-contrast);border-color:transparent}`;
+
+const WEEKDAYS = ["D", "S", "T", "Q", "Q", "S", "S"];
+const UiDatePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiChange = createEvent(this, "uiChange");
+        /** Data selecionada no formato ISO "YYYY-MM-DD". */
+        this.value = "";
+        /** Texto exibido quando nenhuma data está selecionada. */
+        this.placeholder = "Selecione a data";
+        /** Controla a visibilidade do calendário. */
+        this.open = false;
+        this.onTriggerClick = (event) => {
+            event.stopPropagation();
+            this.setOpen(!this.open);
+        };
+        this.onDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.host))
+                return;
+            this.setOpen(false);
+        };
+        this.onKeydown = (event) => {
+            if (event.key === "Escape" && this.open)
+                this.setOpen(false);
+        };
+        this.prevMonth = (event) => {
+            event.stopPropagation();
+            if (this.viewMonth === 0) {
+                this.viewMonth = 11;
+                this.viewYear -= 1;
+            }
+            else {
+                this.viewMonth -= 1;
+            }
+        };
+        this.nextMonth = (event) => {
+            event.stopPropagation();
+            if (this.viewMonth === 11) {
+                this.viewMonth = 0;
+                this.viewYear += 1;
+            }
+            else {
+                this.viewMonth += 1;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.syncViewFromValue();
+    }
+    onValueChange() {
+        this.syncViewFromValue();
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+        document.removeEventListener("keydown", this.onKeydown);
+    }
+    syncViewFromValue() {
+        const parsed = this.parseValue(this.value);
+        const base = parsed ?? new Date();
+        this.viewYear = base.getFullYear();
+        this.viewMonth = base.getMonth();
+    }
+    /** Converte o ISO em Date local, evitando shift de fuso. */
+    parseValue(value) {
+        if (!value)
+            return null;
+        const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+        if (!match)
+            return null;
+        const [, y, m, d] = match;
+        return new Date(Number(y), Number(m) - 1, Number(d));
+    }
+    /** Gera o ISO "YYYY-MM-DD" a partir de componentes locais. */
+    toISO(year, month, day) {
+        const mm = String(month + 1).padStart(2, "0");
+        const dd = String(day).padStart(2, "0");
+        return `${year}-${mm}-${dd}`;
+    }
+    formatValue() {
+        const parsed = this.parseValue(this.value);
+        return parsed ? parsed.toLocaleDateString("pt-BR") : "";
+    }
+    monthLabel() {
+        return new Date(this.viewYear, this.viewMonth, 1).toLocaleDateString("pt-BR", { month: "long", year: "numeric" });
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        if (value) {
+            this.syncViewFromValue();
+            requestAnimationFrame(() => this.start());
+            document.addEventListener("click", this.onDocumentClick);
+            document.addEventListener("keydown", this.onKeydown);
+        }
+        else {
+            this.stop();
+            document.removeEventListener("click", this.onDocumentClick);
+            document.removeEventListener("keydown", this.onKeydown);
+        }
+    }
+    start() {
+        if (!this.triggerEl || !this.floatingEl)
+            return;
+        this.stop();
+        this.cleanup = autoUpdate(this.triggerEl, this.floatingEl, () => {
+            if (!this.triggerEl || !this.floatingEl)
+                return;
+            computePosition(this.triggerEl, this.floatingEl, {
+                placement: "bottom-start",
+                middleware: [offset(6), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.floatingEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    selectDay(day) {
+        this.value = this.toISO(this.viewYear, this.viewMonth, day);
+        this.setOpen(false);
+        this.uiChange.emit(this.value);
+    }
+    buildDays() {
+        const firstWeekday = new Date(this.viewYear, this.viewMonth, 1).getDay();
+        const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+        const leading = Array.from({ length: firstWeekday }, () => 0);
+        const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+        return [...leading, ...days];
+    }
+    isToday(day) {
+        const now = new Date();
+        return (day === now.getDate() &&
+            this.viewMonth === now.getMonth() &&
+            this.viewYear === now.getFullYear());
+    }
+    isSelected(day) {
+        return this.value === this.toISO(this.viewYear, this.viewMonth, day);
+    }
+    render() {
+        const display = this.formatValue();
+        return (h(Host, { key: '2c7c34f0f2b688e7f4788c135ce46dc27576390a' }, h("button", { key: '0e36f9b8e3a96376b186e97eba82621d513ca041', type: "button", class: "field", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick, "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false" }, h("span", { key: '74e80a1defef918550ad375440ed96bbc77e4545', class: { label: true, placeholder: !display } }, display || this.placeholder), h("svg", { key: 'bdc13113d3545c1978bd5c0654e38baac83e8ef4', class: "icon", viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'a67ced294fbaf97735a027773d5900b8e444e1fb', x: "3", y: "4", width: "18", height: "18", rx: "2" }), h("path", { key: 'ab89ca2d6b92e0e094439e07aa8f33a77d00520d', d: "M16 2v4M8 2v4M3 10h18" }))), h("div", { key: 'cdd601edb1497cea10eaa026037684530aec0f0e', class: { calendar: true, "is-open": this.open }, role: "dialog", ref: (el) => (this.floatingEl = el) }, h("div", { key: '83dda2789c83c34fb1996a7601c564eefe0403f9', class: "header" }, h("button", { key: '4e2a0966a1f17a17005f767c9d8a396cf1e8e8bc', type: "button", class: "nav", "aria-label": "M\u00EAs anterior", onClick: this.prevMonth }, h("svg", { key: '3ff66e36cd36166da633c3c8d5379af0d561a973', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '677dcab4309b5814429a6cd5528cf4a84d836fdf', d: "m15 18-6-6 6-6" }))), h("span", { key: 'd478e154bb6c3ad7f43e37c042a0ee8de73bdc55', class: "month-label" }, this.monthLabel()), h("button", { key: '8b7a399d6885f38cba8b9b79f5911cf8e1d3b97f', type: "button", class: "nav", "aria-label": "Pr\u00F3ximo m\u00EAs", onClick: this.nextMonth }, h("svg", { key: '1b3b7558875c3328af1cae826bebe9b488dfe822', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '9c486397121befd51b7e0b8dcdc04afe8d8ecc90', d: "m9 18 6-6-6-6" })))), h("div", { key: '460ae2803e427ed67625355c88a97b46cf307311', class: "weekdays" }, WEEKDAYS.map((label) => (h("span", { class: "weekday" }, label)))), h("div", { key: '6bd0d6b507f75a66b9496a18fba9fe2b8dcc3f7e', class: "grid" }, this.buildDays().map((day) => day === 0 ? (h("span", { class: "day empty" })) : (h("button", { type: "button", class: {
+                day: true,
+                today: this.isToday(day),
+                selected: this.isSelected(day),
+            }, onClick: (event) => {
+                event.stopPropagation();
+                this.selectDay(day);
+            } }, day)))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+UiDatePicker.style = uiDatePickerCss();
+
+export { UiDatePicker as ui_date_picker };

package/dist/esm/ui-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DYwlrXg_.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-COlwaVJP.js';
 
 const uiDialogCss = () => `.dialog{padding:0;border:none;background:transparent;max-width:32rem;width:calc(100% - 2rem);color:var(--ui-foreground)}.dialog::backdrop{background:var(--ui-overlay);backdrop-filter:blur(4px)}.dialog[open]{animation:ui-dialog-in var(--ui-duration) var(--ui-ease)}.content{border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px) saturate(140%);border-radius:var(--ui-radius-xl);padding:1.5rem;font-family:var(--ui-font-sans)}::slotted([slot="title"]){font-size:1.125rem;font-weight:600}::slotted([slot="description"]){color:var(--ui-text-muted);font-size:0.875rem}@keyframes ui-dialog-in{from{opacity:0;transform:scale(0.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}`;
 
@@ -42,7 +42,7 @@ const UiDialog = class {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'e6c34700dc04fd3754eedeab279a67cd3997fb3d' }, h("dialog", { key: 'fdb23f89bd4b9aef79abaec586bf39add47ce013', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '8a86f47c263d4fac68debdcef9cc8ed7e0be7ca8', class: "content" }, h("slot", { key: 'fe9d9105c13670104b5a60c939f9256b44694e8e' })))));
+        return (h(Host, { key: '84c982a7870da6b7517f7f989574c41684fd47d1' }, h("dialog", { key: 'f83e558d1344f2612d719032df6e4d652212ce94', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: 'f0506fc17bb608a4b4a33c113e749d9fdb637508', class: "content" }, h("slot", { key: 'ceab792ebd46acefe430467fb9b6c260e658b7bc' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DYwlrXg_.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-COlwaVJP.js';
 
 const uiDrawerCss = () => `:host{display:contents}.drawer{position:fixed;margin:0;padding:0;border:none;max-width:none;max-height:none;background:transparent;overflow:visible}.drawer::backdrop{background:var(--ui-overlay);backdrop-filter:blur(2px)}.side-right{top:0;right:0;bottom:0;height:100%;width:min(24rem, 100%)}.side-bottom{left:0;right:0;bottom:0;width:100%;max-height:85vh}.content{box-sizing:border-box;width:100%;height:100%;padding:1.5rem;overflow:auto;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px)}.side-right .content{border-top-left-radius:var(--ui-radius-xl);border-bottom-left-radius:var(--ui-radius-xl)}.side-bottom .content{border-top-left-radius:var(--ui-radius-xl);border-top-right-radius:var(--ui-radius-xl)}.side-right[open]{animation:ui-drawer-slide-right var(--ui-duration) var(--ui-ease)}.side-bottom[open]{animation:ui-drawer-slide-bottom var(--ui-duration) var(--ui-ease)}@keyframes ui-drawer-slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes ui-drawer-slide-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}`;
 
@@ -44,7 +44,7 @@ const UiDrawer = class {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '5d44e7d604eab21d2d30d5cbaaa225658c8e7e71' }, h("dialog", { key: 'ecdfc2057a8864f6b8dc961ddcd51c3f349b2b54', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: 'c14965ebb97a2c77d06c4a50466d00bf4036bafa', class: "content" }, h("slot", { key: '2bdbb4cbd2cd30ade870090c5383d398cfb6772b' })))));
+        return (h(Host, { key: '54cb020ae5aa52d797edea5e2fe52c176255a6db' }, h("dialog", { key: '20ffadd987ef28b2f5a0907258e325a6aa12eead', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: 'a2acad5175956ee2033fec822c7448ec290976fc', class: "content" }, h("slot", { key: '0aa72c14305d3766a4b860ebfd69d5d74825b8a2' })))));
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/ui-dropdown-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DYwlrXg_.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-COlwaVJP.js';
 
 const uiDropdownItemCss = () => `:host{display:block}.item{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0.5rem 0.625rem;font-family:var(--ui-font-sans);font-size:0.875rem;text-align:left;color:var(--ui-foreground);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;outline:none;transition:background var(--ui-duration) var(--ui-ease)}.item:hover,.item:focus-visible{background:var(--ui-chip)}.item:focus-visible{box-shadow:0 0 0 2px var(--ui-ring)}.item:disabled{pointer-events:none;opacity:0.5;cursor:default}`;
 
@@ -16,7 +16,7 @@ const UiDropdownItem = class {
         };
     }
     render() {
-        return (h(Host, { key: 'a73d394ff94b232151c37e749d398f4485f46bde' }, h("button", { key: '3827857b88fc5d63681e80dc2cc470b58faf69e1', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'a6dbd79c7b171ef6a8a53aa5da39fbca37725e1c' }))));
+        return (h(Host, { key: 'f4da8e0539fe502d384b1a1f423d6ade545db2b7' }, h("button", { key: '7c21a87c78f86be58837d1aa3c3936f23a94b875', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'dba824914003737f6f00380d5c0b20151bf4ac98' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/ui-dropdown-menu.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DYwlrXg_.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-CyBRmmbs.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-COlwaVJP.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-DDtwbwIl.js';
 
 const uiDropdownMenuCss = () => `:host{display:inline-block}.trigger{display:inline-flex}.menu{position:fixed;top:0;left:0;z-index:50;display:flex;flex-direction:column;gap:0.125rem;min-width:10rem;max-width:calc(100vw - 1rem);padding:0.375rem;font-family:var(--ui-font-sans);color:var(--ui-foreground);border:1px solid var(--ui-border);background:var(--ui-panel-strong);box-shadow:var(--ui-shadow-lg);backdrop-filter:blur(22px);border-radius:var(--ui-radius);visibility:hidden;opacity:0;transform:scale(0.96);transition:opacity var(--ui-duration) var(--ui-ease),     transform var(--ui-duration) var(--ui-ease)}.menu.is-open{visibility:visible;opacity:1;transform:scale(1)}`;
 
@@ -81,7 +81,7 @@ const UiDropdownMenu = class {
         this.cleanup = undefined;
     }
     render() {
-        return (h(Host, { key: '6d1ac3cd9096527745a84f24443a3b230bf2aaf0' }, h("span", { key: '5594e37030b1fd69260b4de30393aacfbc636ca3', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '763b6bf28fe4c79a13a2cc5a620d19e51ae5f6e2', name: "trigger" })), h("div", { key: '0bec01181593abbcb1a8634eb027ce0cef0d860d', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: '1b1fa528fc1186c81dd433d0cb9b775df8357641' }))));
+        return (h(Host, { key: 'dba2609a1d3e10b1c4c51dc9e4d0679f85a3ac2f' }, h("span", { key: '8d031050b223a1a36e4cf6397f2c2643ec6ba24e', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'ce5c02c8237a2fdeb20b24cbb314ea4759644250', name: "trigger" })), h("div", { key: '1d30dd7ec7a9d5df68bb4e3755437a10e4eaac31', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: 'a79af6f26779ade4b263c8ae602f2ec5b585a0e3' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ui-field.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-DYwlrXg_.js';
+import { r as registerInstance, h, H as Host } from './index-COlwaVJP.js';
 
 const uiFieldCss = () => `:host{display:block}.field{display:flex;flex-direction:column;gap:0.375rem}.label{font-family:var(--ui-font-sans);font-size:0.875rem;font-weight:500;color:var(--ui-foreground)}.required{color:var(--ui-danger)}.error{margin:0;font-family:var(--ui-font-sans);font-size:0.75rem;color:var(--ui-danger)}.description{margin:0;font-family:var(--ui-font-sans);font-size:0.75rem;color:var(--ui-text-muted)}`;
 
@@ -9,7 +9,7 @@ const UiField = class {
         this.required = false;
     }
     render() {
-        return (h(Host, { key: '1910a6ce3a389ab7faa9e3b46e0397e6a9bfbaab' }, h("div", { key: 'fb76fb030b9af9129578f7b2f0b85eaffefc8d67', class: "field" }, this.label && (h("label", { key: '659a7c0982360c133891a1a22a98cdae32a529ed', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: 'de93f19b8a2dd063df1175c00c68c0b7c9b092d6', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: 'a510f107aab90a202c178f1d22727689db828fdc' }), this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : (this.description && h("p", { class: "description" }, this.description)))));
+        return (h(Host, { key: '39a0e70cee489fd42753b1ce7a8c6fea25915bbb' }, h("div", { key: 'b20f08499de84d3af305d6ce6f74a1c880a05dfe', class: "field" }, this.label && (h("label", { key: '88a56e87813dcbc42fb087e9ba3472a98cbb7ad9', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: '7b5143e178547005dc7e2559c0c28a23f105c2a3', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: '71f80cc67afb75615e058d42fab0db72e13cc89f' }), this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : (this.description && h("p", { class: "description" }, this.description)))));
     }
 };
 UiField.style = uiFieldCss();

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

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-COlwaVJP.js';
+
+const uiFileUploadCss = () => `:host{display:block}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:1.5rem;border:2px dashed var(--ui-border-strong);border-radius:var(--ui-radius-lg);background:transparent;font-family:var(--ui-font-sans);cursor:pointer;transition:background var(--ui-duration) var(--ui-ease),     border-color var(--ui-duration) var(--ui-ease)}.dropzone:hover,.dropzone.dragging{background:var(--ui-chip)}.dropzone:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-ring)}.icon{color:var(--ui-text-soft)}.label{font-size:0.875rem;color:var(--ui-text-muted)}.hint{font-size:0.75rem;color:var(--ui-text-faint)}.files{list-style:none;margin:0.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.375rem}.file{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-panel);font-family:var(--ui-font-sans)}.file-name{font-size:0.875rem;color:var(--ui-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{flex-shrink:0;font-size:0.75rem;color:var(--ui-text-muted)}`;
+
+const UiFileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiChange = createEvent(this, "uiChange");
+        /** Permite múltiplos arquivos. */
+        this.multiple = false;
+        /** Texto principal da zona de upload. */
+        this.label = "Arraste arquivos ou clique para enviar";
+        /** Arquivos atualmente selecionados. */
+        this.files = [];
+        /** Indica se há arraste sobre a zona. */
+        this.dragging = false;
+        this.openPicker = () => {
+            this.inputEl?.click();
+        };
+        this.onInputChange = (event) => {
+            const target = event.target;
+            this.setFiles(target.files);
+        };
+        this.onDragOver = (event) => {
+            event.preventDefault();
+            this.dragging = true;
+        };
+        this.onDragLeave = () => {
+            this.dragging = false;
+        };
+        this.onDrop = (event) => {
+            event.preventDefault();
+            this.dragging = false;
+            this.setFiles(event.dataTransfer?.files ?? null);
+        };
+    }
+    setFiles(list) {
+        if (!list)
+            return;
+        this.files = Array.from(list);
+        this.uiChange.emit(this.files);
+    }
+    formatSize(bytes) {
+        if (bytes >= 1024 * 1024) {
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    render() {
+        return (h(Host, { key: 'a8ca0fb9e4fbbfdba11a8f290124af65a0480093' }, h("button", { key: 'fd077d08e014e28b1f2411bb09a7d8a49afd7ceb', type: "button", class: { dropzone: true, dragging: this.dragging }, onClick: this.openPicker, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("svg", { key: '2d68e2377435eeb88645a887091c0b6c2d707c5c', class: "icon", viewBox: "0 0 24 24", width: "2rem", height: "2rem", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '677380bbdb141a320a97d1163c5410312b003ed4', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '42deea2aa62b6908fdd0e45ec64e9cabcf225da6', points: "17 8 12 3 7 8" }), h("line", { key: '12a28663905914b21b4c355bc96064d8e9ae4045', x1: "12", y1: "3", x2: "12", y2: "15" })), h("span", { key: '77bedaa863521eb1960fedd51b82e453606fe3e5', class: "label" }, this.label), this.accept ? (h("span", { class: "hint" }, this.accept)) : null), h("input", { key: '9facb4fee3805f4c0a9286e5bed67eae1b8e799b', type: "file", hidden: true, accept: this.accept, multiple: this.multiple, ref: (el) => (this.inputEl = el), onChange: this.onInputChange }), this.files.length > 0 ? (h("ul", { class: "files" }, this.files.map((file) => (h("li", { class: "file" }, h("span", { class: "file-name" }, file.name), h("span", { class: "file-size" }, this.formatSize(file.size))))))) : null));
+    }
+};
+UiFileUpload.style = uiFileUploadCss();
+
+export { UiFileUpload as ui_file_upload };

package/dist/esm/ui-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-DYwlrXg_.js';
+import { r as registerInstance, h, H as Host } from './index-COlwaVJP.js';
 
 const uiGridCss = () => `:host{display:block}.grid{display:grid;font-family:var(--ui-font-sans)}`;
 
@@ -24,7 +24,7 @@ const UiGrid = class {
                 : `repeat(${this.columns}, minmax(0, 1fr))`,
             gap: GAP[this.gap],
         };
-        return (h(Host, { key: '465a816e064af42d8282185ee92e32477a6112fd' }, h("div", { key: 'da2e151c56959ced55477e3fe6c99aa5563b38aa', class: "grid", style: style }, h("slot", { key: '5bb285ce0feaf16d066b627010fc3fb595a85c15' }))));
+        return (h(Host, { key: 'ecafabf2b7902db681cd4ce15e8d4f8d8480f0d6' }, h("div", { key: '52aac0fe0cea374a7a083c5fb385882c1fd7b2e7', class: "grid", style: style }, h("slot", { key: '8b686a8e53fb33a94def9b6675df0df94dad14a6' }))));
     }
 };
 UiGrid.style = uiGridCss();