@andespindola/ui-core 0.1.0

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

@@ -0,0 +1,98 @@
+import { h, Host } from "@stencil/core";
+export class UiSwitch {
+    constructor() {
+        /** Estado ligado/desligado. */
+        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: '495f30df67c0277471c4d01920f5608700943132' }, h("button", { key: '8327f2d141877994b6ddd3ba8b474e816cb2f949', class: "switch", type: "button", role: "switch", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("span", { key: 'e91d3ffd7b8fdfb1a64f96746c5a396ecaecb882', class: "thumb" }))));
+    }
+    static get is() { return "ui-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado ligado/desligado."
+                },
+                "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"
+            }
+        };
+    }
+    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-tabs/ui-tabs.css

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+  font-family: var(--ui-font-sans);
+}
+
+.tablist {
+  display: inline-flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+}
+
+.tab {
+  appearance: none;
+  border: none;
+  padding: 0.375rem 0.875rem;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-text-muted);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  transition: background var(--ui-duration) var(--ui-ease),
+    color var(--ui-duration) var(--ui-ease);
+}
+
+.tab:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.tab.active {
+  background: var(--ui-panel-strong);
+  color: var(--ui-foreground);
+}

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

@@ -0,0 +1,99 @@
+import { h, Host } from "@stencil/core";
+export class UiTabs {
+    constructor() {
+        /** Valor da aba ativa. */
+        this.value = "";
+        /** Lista de abas. */
+        this.items = [];
+        this.select = (value) => {
+            if (value === this.value)
+                return;
+            this.value = value;
+            this.uiChange.emit(value);
+        };
+    }
+    render() {
+        return (h(Host, { key: '8828dc9385a8c206a751e39fda9869116dda3001' }, h("div", { key: '8e13dc53f1c03da5a52adb8ec86da91c78c502b2', class: "tablist", role: "tablist" }, this.items.map((item) => {
+            const active = item.value === this.value;
+            return (h("button", { key: item.value, class: { tab: true, active }, type: "button", role: "tab", "aria-selected": active ? "true" : "false", onClick: () => this.select(item.value) }, item.label));
+        })), h("slot", { key: '1cd08dfe5ae2e2b6bf55eb90cb55f2c757c5589f', name: this.value })));
+    }
+    static get is() { return "ui-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor da aba ativa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiTabItem[]",
+                    "resolved": "UiTabItem[]",
+                    "references": {
+                        "UiTabItem": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-tabs/ui-tabs.tsx",
+                            "id": "src/components/ui-tabs/ui-tabs.tsx::UiTabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de abas."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando a aba ativa muda."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,191 @@
+import { h, Host } from "@stencil/core";
+export class UiTextarea {
+    constructor() {
+        /** Valor do campo. */
+        this.value = "";
+        /** Desabilita o campo. */
+        this.disabled = false;
+        /** Marca o campo como inválido (estilo + aria-invalid). */
+        this.invalid = false;
+        /** Número de linhas visíveis. */
+        this.rows = 4;
+        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: '9dfb606e8b193b4ce3cc9f085454ff849892e838' }, h("textarea", { key: '0f4aa4078cae931c3e246613d51645162673b7d5', class: { textarea: true, invalid: this.invalid }, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange }, this.value)));
+    }
+    static get is() { return "ui-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-textarea.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"
+            },
+            "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"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero de linhas vis\u00EDveis."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            }
+        };
+    }
+    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-theme-toggle/ui-theme-toggle.css

@@ -0,0 +1,28 @@
+:host {
+  display: inline-flex;
+}
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+  color: var(--ui-foreground);
+  cursor: pointer;
+  outline: none;
+  transition: background var(--ui-duration) var(--ui-ease),
+    color var(--ui-duration) var(--ui-ease);
+}
+
+.toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.toggle:hover {
+  color: var(--ui-accent);
+}

package/dist/collection/components/ui-theme-toggle/ui-theme-toggle.js

@@ -0,0 +1,90 @@
+import { h, Host, } from "@stencil/core";
+const STORAGE_KEY = "ui-theme";
+export class UiThemeToggle {
+    constructor() {
+        /** Indica se o tema escuro está ativo. */
+        this.isDark = false;
+        this.toggle = () => {
+            this.isDark = !this.isDark;
+            if (typeof window !== "undefined") {
+                try {
+                    window.localStorage.setItem(STORAGE_KEY, this.isDark ? "dark" : "light");
+                }
+                catch {
+                    // Persistência indisponível: segue apenas em memória.
+                }
+            }
+            this.applyTheme();
+            this.uiThemeChange.emit(this.isDark ? "dark" : "light");
+        };
+    }
+    connectedCallback() {
+        this.isDark = this.resolveInitialTheme();
+        this.applyTheme();
+    }
+    resolveInitialTheme() {
+        if (typeof window === "undefined")
+            return false;
+        try {
+            const stored = window.localStorage.getItem(STORAGE_KEY);
+            if (stored === "dark")
+                return true;
+            if (stored === "light")
+                return false;
+        }
+        catch {
+            // localStorage indisponível: usa preferência do sistema.
+        }
+        return (typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+    }
+    applyTheme() {
+        if (typeof document === "undefined")
+            return;
+        document.documentElement.classList.toggle("dark", this.isDark);
+    }
+    renderIcon() {
+        if (this.isDark) {
+            return (h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })));
+        }
+        return (h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "4" }), h("line", { x1: "12", y1: "2", x2: "12", y2: "4" }), h("line", { x1: "12", y1: "20", x2: "12", y2: "22" }), h("line", { x1: "2", y1: "12", x2: "4", y2: "12" }), h("line", { x1: "20", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }), h("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }), h("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }), h("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })));
+    }
+    render() {
+        return (h(Host, { key: 'f4bbcb8298cf3dbc50c31a816e97b32b45a115a4' }, h("button", { key: 'f86adcf499252f07d2aaae4c6b07cf0d4bcb4c01', class: "toggle", type: "button", "aria-label": this.isDark ? "Ativar tema claro" : "Ativar tema escuro", "aria-pressed": this.isDark ? "true" : "false", onClick: this.toggle }, this.renderIcon())));
+    }
+    static get is() { return "ui-theme-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-theme-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-theme-toggle.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isDark": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiThemeChange",
+                "name": "uiThemeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o tema \u00E9 alterado."
+                },
+                "complexType": {
+                    "original": "\"light\" | \"dark\"",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,81 @@
+:host {
+  display: block;
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--ui-border);
+  border-left: 3px solid var(--ui-accent);
+  border-radius: var(--ui-radius);
+  background: var(--ui-panel-strong);
+  backdrop-filter: blur(22px);
+  box-shadow: var(--ui-shadow-lg);
+  font-family: var(--ui-font-sans);
+  animation: ui-toast-pop var(--ui-duration) var(--ui-ease);
+}
+
+.variant-default {
+  border-left-color: var(--ui-accent);
+}
+.variant-success {
+  border-left-color: var(--ui-success);
+}
+.variant-warning {
+  border-left-color: var(--ui-warning);
+}
+.variant-danger {
+  border-left-color: var(--ui-danger);
+}
+
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.heading {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ui-foreground);
+}
+
+.description {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--ui-text-muted);
+}
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0.125rem;
+  border: none;
+  background: transparent;
+  color: var(--ui-text-muted);
+  cursor: pointer;
+  border-radius: var(--ui-radius-sm);
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+.close:hover {
+  color: var(--ui-foreground);
+}
+
+@keyframes ui-toast-pop {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}