@andespindola/ui-core 0.1.0

package/dist/collection/components/ui-input/ui-input.css

@@ -0,0 +1,40 @@
+:host {
+  display: block;
+}
+
+.input {
+  width: 100%;
+  height: 2.75rem;
+  padding: 0 1rem;
+  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;
+  outline: none;
+  backdrop-filter: blur(22px);
+  transition: all var(--ui-duration) var(--ui-ease);
+  box-sizing: border-box;
+}
+
+.input::placeholder {
+  color: var(--ui-text-faint);
+}
+
+.input:focus-visible {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.input:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.input.invalid {
+  border-color: var(--ui-danger);
+}
+.input.invalid:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-danger) 40%, transparent);
+}

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

@@ -0,0 +1,191 @@
+import { h, Host } from "@stencil/core";
+export class UiInput {
+    constructor() {
+        /** Valor do campo. */
+        this.value = "";
+        /** Tipo do input nativo. */
+        this.type = "text";
+        /** Desabilita o campo. */
+        this.disabled = false;
+        /** Marca o campo como inválido (estilo + aria-invalid). */
+        this.invalid = false;
+        this.onInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.uiInput.emit(target.value);
+        };
+        this.onChange = (event) => {
+            this.uiChange.emit(event.target.value);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'e2ca2973fb898cde6988d2422f8b346662caf375' }, h("input", { key: '6e2b0358dc583f448a71f95f319d0fd675536c60', class: { input: true, invalid: this.invalid }, type: this.type, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange })));
+    }
+    static get is() { return "ui-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor do campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo do input nativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"text\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca o campo como inv\u00E1lido (estilo + aria-invalid)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiInput",
+                "name": "uiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido a cada digita\u00E7\u00E3o."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao confirmar (change)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/ui-label/ui-label.css

@@ -0,0 +1,10 @@
+:host {
+  display: inline-block;
+}
+
+.label {
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ui-foreground);
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiLabel {
+    render() {
+        return (h(Host, { key: 'bb726d8b26a82776e688532b6fbe69c178308c75' }, h("label", { key: 'bfd33ad1561fcee62395be37e83894cdce0ec259', class: "label" }, h("slot", { key: 'c0ac5938df3aea7219a59caf46cb7cd152046770' }))));
+    }
+    static get is() { return "ui-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-label.css"]
+        };
+    }
+}

package/dist/collection/components/ui-loading-overlay/ui-loading-overlay.css

@@ -0,0 +1,24 @@
+:host {
+  display: contents;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background: var(--ui-overlay);
+  backdrop-filter: blur(4px);
+  border-radius: inherit;
+  font-family: var(--ui-font-sans);
+}
+
+.label {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--ui-text-soft);
+}

package/dist/collection/components/ui-loading-overlay/ui-loading-overlay.js

@@ -0,0 +1,102 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Sobreposição de carregamento que cobre o elemento pai.
+ * O host pai deve ter `position: relative` para que a sobreposição
+ * absoluta (inset 0) o cubra corretamente.
+ */
+export class UiLoadingOverlay {
+    constructor() {
+        /** Controla a exibição da sobreposição. */
+        this.visible = false;
+        /** Tamanho do spinner. */
+        this.spinnerSize = "md";
+    }
+    render() {
+        if (!this.visible) {
+            return h(Host, null);
+        }
+        return (h(Host, { role: "status", "aria-live": "polite" }, h("div", { class: "overlay" }, h("ui-spinner", { size: this.spinnerSize }), this.label && h("p", { class: "label" }, this.label))));
+    }
+    static get is() { return "ui-loading-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-loading-overlay.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-loading-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla a exibi\u00E7\u00E3o da sobreposi\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto opcional exibido abaixo do spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "spinnerSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiSpinnerSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "UiSpinnerSize": {
+                            "location": "import",
+                            "path": "../ui-spinner/ui-spinner",
+                            "id": "src/components/ui-spinner/ui-spinner.tsx::UiSpinnerSize",
+                            "referenceLocation": "UiSpinnerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spinner-size",
+                "defaultValue": "\"md\""
+            }
+        };
+    }
+}

package/dist/collection/components/ui-popover/ui-popover.css

@@ -0,0 +1,36 @@
+:host {
+  display: inline-block;
+}
+
+.trigger {
+  display: inline-flex;
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  width: 18rem;
+  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);
+}
+
+.panel.is-open {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,204 @@
+import { h, Host, } from "@stencil/core";
+import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+export class UiPopover {
+    constructor() {
+        /** Controla a abertura do conteúdo flutuante. */
+        this.open = false;
+        /** Posição preferida do conteúdo relativo ao gatilho. */
+        this.placement = "bottom";
+        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);
+        };
+    }
+    onOpenChange(value) {
+        if (value) {
+            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);
+        }
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+        document.removeEventListener("keydown", this.onKeydown);
+    }
+    /** Abre o popover imperativamente. */
+    async show() {
+        this.setOpen(true);
+    }
+    /** Fecha o popover imperativamente. */
+    async close() {
+        this.setOpen(false);
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        this.uiOpenChange.emit(value);
+    }
+    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: this.placement,
+                middleware: [offset(8), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.floatingEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    render() {
+        return (h(Host, { key: '193a3f6fb440dc2da1837c2387511d38f71e7da3' }, h("span", { key: '8732b0b40340e39ac26b80e38864438cf9bf01cc', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'd51743b5fa62e8fd5c5639ba2d9681caa8556fb0', name: "trigger" })), h("div", { key: 'a2ae9fd5bb67dc1ad4243ac478ecc11cb4c28665', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: '655d8b979962d25dabe8497516be51199ce16452' }))));
+    }
+    static get is() { return "ui-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla a abertura do conte\u00FAdo flutuante."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posi\u00E7\u00E3o preferida do conte\u00FAdo relativo ao gatilho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "\"bottom\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiOpenChange",
+                "name": "uiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o estado de abertura muda."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre o popover imperativamente.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha o popover imperativamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

package/dist/collection/components/ui-progress/ui-progress.css

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+}
+
+.track {
+  width: 100%;
+  height: 0.5rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+  overflow: hidden;
+}
+
+.indicator {
+  height: 100%;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-accent);
+  transition: width var(--ui-duration) var(--ui-ease);
+}
+
+.indicator.indeterminate {
+  width: 40%;
+  animation: ui-progress-slide 1.2s ease-in-out infinite;
+}
+
+@keyframes ui-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}