@andespindola/ui-core 0.1.0

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

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+export class UiButton {
+    constructor() {
+        /** Variante visual. */
+        this.variant = "default";
+        /** Tamanho. */
+        this.size = "md";
+        /** Desabilita o botão. */
+        this.disabled = false;
+        /** Exibe spinner e desabilita durante uma ação assíncrona. */
+        this.loading = false;
+        /** Tipo do botão nativo. */
+        this.type = "button";
+    }
+    render() {
+        return (h(Host, { key: 'bf18a1f72babada2698ce42f54bf2d73b0d41d0b' }, h("button", { key: 'f08a766e14d139d7031dac4fa5846fbc0749328f', class: {
+                btn: true,
+                [`variant-${this.variant}`]: true,
+                [`size-${this.size}`]: true,
+            }, type: this.type, disabled: this.disabled || this.loading, "aria-busy": this.loading ? "true" : null }, this.loading && h("span", { key: 'a3e87dd124b697050a657b9957884c231aa58c54', class: "spinner", "aria-hidden": "true" }), h("slot", { key: '87a720f06602011042d70a91918a0b2157abb163' }))));
+    }
+    static get is() { return "ui-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiButtonVariant",
+                    "resolved": "\"default\" | \"destructive\" | \"ghost\" | \"link\" | \"outline\" | \"solid\" | \"subtle\"",
+                    "references": {
+                        "UiButtonVariant": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-button/ui-button.tsx",
+                            "id": "src/components/ui-button/ui-button.tsx::UiButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"default\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiButtonSize",
+                    "resolved": "\"icon\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "UiButtonSize": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-button/ui-button.tsx",
+                            "id": "src/components/ui-button/ui-button.tsx::UiButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"md\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o bot\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe spinner e desabilita durante uma a\u00E7\u00E3o ass\u00EDncrona."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"button\" | \"submit\" | \"reset\"",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo do bot\u00E3o nativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"button\""
+            }
+        };
+    }
+}

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

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+}
+
+.card {
+  border: 1px solid var(--ui-border);
+  background: var(--ui-panel);
+  box-shadow: var(--ui-shadow-lg);
+  backdrop-filter: blur(22px) saturate(140%);
+  border-radius: var(--ui-radius-xl);
+  color: var(--ui-foreground);
+  padding: 1.5rem;
+}
+
+::slotted([slot="title"]) {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+::slotted([slot="description"]) {
+  color: var(--ui-text-muted);
+  font-size: 0.875rem;
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiCard {
+    render() {
+        return (h(Host, { key: '7e2833cdc6f37c6b8577c17677840913fb7cd9e1' }, h("div", { key: '223c291e98af73ee2c299b8649773cfcf54388d7', class: "card" }, h("slot", { key: 'e948386bcd492c31e264d50cf27d26e98dd771eb' }))));
+    }
+    static get is() { return "ui-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-card.css"]
+        };
+    }
+}

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

@@ -0,0 +1,46 @@
+:host {
+  display: inline-flex;
+}
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-panel);
+  cursor: pointer;
+  outline: none;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.checkbox:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.checkbox[aria-checked="true"] {
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+}
+
+.checkbox:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.check {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--ui-accent-contrast);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.checkbox[aria-checked="true"] .check {
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,136 @@
+import { h, Host } from "@stencil/core";
+export class UiCheckbox {
+    constructor() {
+        /** Estado marcado/desmarcado. */
+        this.checked = false;
+        /** Desabilita o controle. */
+        this.disabled = false;
+        this.toggle = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.uiChange.emit(this.checked);
+        };
+        this.onKeyDown = (event) => {
+            if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                this.toggle();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: '218342fd572fe2a937ef30501ceb1286ed9872ac' }, h("button", { key: 'c54f4b4d663c472e08aeff9016da9d3fe63072fd', class: "checkbox", type: "button", role: "checkbox", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("svg", { key: 'a4f460f90eeaa930b0d867ad1aadf99550ff3c9a', class: "check", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'e96040e1a3058b910203023d882aa8da62ec9fce', points: "20 6 9 17 4 12" })))));
+    }
+    static get is() { return "ui-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado marcado/desmarcado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o controle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "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"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor associado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o estado muda."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,140 @@
+import { h, Host } from "@stencil/core";
+export class UiDialog {
+    constructor() {
+        /** Controla a abertura do modal. */
+        this.open = false;
+        this.onClose = () => {
+            if (this.open) {
+                this.open = false;
+                this.uiClose.emit();
+            }
+        };
+        this.onBackdropClick = (event) => {
+            if (event.target === this.dialogEl)
+                this.close();
+        };
+    }
+    onOpenChange(value) {
+        this.sync(value);
+    }
+    componentDidLoad() {
+        this.sync(this.open);
+    }
+    sync(value) {
+        if (!this.dialogEl)
+            return;
+        if (value && !this.dialogEl.open)
+            this.dialogEl.showModal();
+        else if (!value && this.dialogEl.open)
+            this.dialogEl.close();
+    }
+    /** Abre o modal imperativamente. */
+    async show() {
+        this.open = true;
+    }
+    /** Fecha o modal imperativamente. */
+    async close() {
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: 'c61dad5c30282e7a0ff063b713fff567be0b2183' }, h("dialog", { key: '55e3de816fcdaafce020a8edb30e469f6d579df7', class: "dialog", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '39b8436aca48ee79ff63a1cd81640697be8007cf', class: "content" }, h("slot", { key: 'e8d509cd882aa1e3a97f66486baf4afacdf36767' })))));
+    }
+    static get is() { return "ui-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-dialog.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 modal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiClose",
+                "name": "uiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o modal \u00E9 fechado (Esc, backdrop ou close())."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "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 modal imperativamente.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha o modal imperativamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

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

@@ -0,0 +1,88 @@
+: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);
+}
+
+/* Ancoragem por borda */
+.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;
+}
+
+/* Conteúdo glass */
+.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);
+}
+
+/* Animação de entrada */
+.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);
+  }
+}