@andespindola/ui-core 0.2.0 → 0.4.0

package/dist/collection/components/ui-date-picker/ui-date-picker.css

@@ -0,0 +1,176 @@
+: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;
+}

package/dist/collection/components/ui-date-picker/ui-date-picker.js

@@ -0,0 +1,243 @@
+import { h, Host, } from "@stencil/core";
+import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+const WEEKDAYS = ["D", "S", "T", "Q", "Q", "S", "S"];
+export class UiDatePicker {
+    constructor() {
+        /** 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)))))));
+    }
+    static get is() { return "ui-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data selecionada no formato ISO \"YYYY-MM-DD\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido quando nenhuma data est\u00E1 selecionada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"Selecione a data\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "viewYear": {},
+            "viewMonth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao selecionar uma data (ISO \"YYYY-MM-DD\")."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

package/dist/collection/components/ui-dialog/ui-dialog.js

@@ -37,7 +37,7 @@ export class UiDialog {
         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 is() { return "ui-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-drawer/ui-drawer.js

@@ -39,7 +39,7 @@ export class UiDrawer {
         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 is() { return "ui-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-dropdown-item/ui-dropdown-item.js

@@ -11,7 +11,7 @@ export class UiDropdownItem {
         };
     }
     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' }))));
     }
     static get is() { return "ui-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-dropdown-menu/ui-dropdown-menu.js

@@ -76,7 +76,7 @@ export class UiDropdownMenu {
         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' }))));
     }
     static get is() { return "ui-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-field/ui-field.js

@@ -5,7 +5,7 @@ export class UiField {
         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)))));
     }
     static get is() { return "ui-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-file-upload/ui-file-upload.css

@@ -0,0 +1,79 @@
+: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);
+}