@andespindola/ui-core 0.2.0 → 0.3.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: '4ba4b256b16f49d1e65ffbe774c50065f097482f' }, h("button", { key: '0fa06810a3533cafcc808e680f61c3f289148ec5', type: "button", class: "field", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick, "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false" }, h("span", { key: 'fd6c3f01d8ba6212284b70c8830a007fc6dc4fcb', class: { label: true, placeholder: !display } }, display || this.placeholder), h("svg", { key: 'aebef2e4b5928db3fdd0eee7754d6d7c430459d4', 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: '8a87dd6a1230546145cd0d6626309c4c3835d379', x: "3", y: "4", width: "18", height: "18", rx: "2" }), h("path", { key: 'e3bca802e11ff11bbbd767c92233843a2b767e78', d: "M16 2v4M8 2v4M3 10h18" }))), h("div", { key: '1a8d439b816c7dcf0789e26788aee838e311b087', class: { calendar: true, "is-open": this.open }, role: "dialog", ref: (el) => (this.floatingEl = el) }, h("div", { key: '82d98e286b405ddfd12cc65cffe26b14ace1a31c', class: "header" }, h("button", { key: '6a01a9a3458d3e7b1dfc5ff153266106b9242511', type: "button", class: "nav", "aria-label": "M\u00EAs anterior", onClick: this.prevMonth }, h("svg", { key: 'cea0c6c7aecdf96eb2b4e42bf1b559fe7ea6e443', 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: '54d095e51205b3df5f52af6d2d28f89f2dd4db5c', d: "m15 18-6-6 6-6" }))), h("span", { key: '2dd822f49aa7f8bb419079a0c47f29bbfb7a22c4', class: "month-label" }, this.monthLabel()), h("button", { key: '553659e9903e96b84dcecbc86270d915dcd947f5', type: "button", class: "nav", "aria-label": "Pr\u00F3ximo m\u00EAs", onClick: this.nextMonth }, h("svg", { key: 'a73cdb32bedad0004a1d84b44e7866e008864fd8', 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: 'dac9e5c1fc22d2eefc73046269246ae07af53037', d: "m9 18 6-6-6-6" })))), h("div", { key: 'e731ae7eab8fee747826a58634cad540a60317a5', class: "weekdays" }, WEEKDAYS.map((label) => (h("span", { class: "weekday" }, label)))), h("div", { key: '4aa9f208fb5b20b3b35ae14f27d435918db3f380', 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: 'f0ba1e147438e9941bd748b84cca800b93e0058a' }, h("dialog", { key: '54a38db84cc2bcd5064401499c8cbc48f9355021', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '658cf9b13efe14c8db0c02b14b6ace5686ca686a', class: "content" }, h("slot", { key: '00cc3a3657049aabb7c80dfdefba059a5767da78' })))));
     }
     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: '92e328d6068d3e183463e06897b9dc16e36c3be7' }, h("dialog", { key: 'd18eb940d959341831da313ee342f21f181aacfc', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '9edf182db03b796ef944fbd4340d1d31db8b5321', class: "content" }, h("slot", { key: '34a67441244720ee301b9f4c2b871889a2a87d0b' })))));
     }
     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: '46fe995e0d6496002cb4ffda00e444731f195805' }, h("button", { key: '5938fcad75c81029a321bdce5c1b2c98cb4cb6a2', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '32227bb1f298ab6ba3d97d1bae86b6ce713703b8' }))));
     }
     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: '3224e4bac8bcfeda15aa6a5411a95574795231a8' }, h("span", { key: '5f0c50e0cb28c349469be5971ac0622f05d8dd19', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '616a2917a7377d00414c8fe9745ef6c1297841fa', name: "trigger" })), h("div", { key: 'efa36b327e9ba6a89b939170c296a69ffbe18e90', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: 'aaffbbb6b8fe37072c8344d95a902dcb667416ba' }))));
     }
     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: 'f39f480b04be85c60eaa8821358b8921d52a7801' }, h("div", { key: '22303a73ad07ca344ef29c25947443e4d43e95fb', class: "field" }, this.label && (h("label", { key: 'bf355b9c884ee0393c91f4d3cdaa38ab6d0132dc', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: '94614ebcee5a68e180e135f5294370e272836b90', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: '7d4b22b2741540aac3b017b882f9abfdb67c7492' }), 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);
+}