@andespindola/ui-core 0.1.0

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

@@ -0,0 +1,100 @@
+import { h, Host } from "@stencil/core";
+export class UiProgress {
+    constructor() {
+        /** Valor atual do progresso. `null` torna o componente indeterminado. */
+        this.value = null;
+        /** Valor máximo. */
+        this.max = 100;
+        /** Força o estado indeterminado. */
+        this.indeterminate = false;
+    }
+    get isIndeterminate() {
+        return this.indeterminate || this.value === null;
+    }
+    get percent() {
+        if (this.value === null || this.max <= 0)
+            return 0;
+        const clamped = Math.min(Math.max(this.value, 0), this.max);
+        return (clamped / this.max) * 100;
+    }
+    render() {
+        const determinate = !this.isIndeterminate;
+        return (h(Host, { key: '0be3e6f551bf5401e033a7faba2787eb4166eb0a', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: '89151bf96326053ce60b71a2f2f9b6c13d721e39', class: "track" }, h("div", { key: '2cdf8f8cbbe7729813e8e78b671fc43b7ebec153', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
+    }
+    static get is() { return "ui-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor atual do progresso. `null` torna o componente indeterminado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor m\u00E1ximo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For\u00E7a o estado indeterminado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-radio-group/ui-radio-group.css

@@ -0,0 +1,67 @@
+:host {
+  display: block;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  cursor: pointer;
+  outline: none;
+}
+
+.radio:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-panel);
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.radio:focus-visible .indicator {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.radio[aria-checked="true"] .indicator {
+  border-color: var(--ui-accent);
+}
+
+.dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-accent);
+  opacity: 0;
+  transform: scale(0.4);
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.radio[aria-checked="true"] .dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.label {
+  line-height: 1.25rem;
+}

package/dist/collection/components/ui-radio-group/ui-radio-group.js

@@ -0,0 +1,155 @@
+import { h, Host } from "@stencil/core";
+export class UiRadioGroup {
+    constructor() {
+        /** Opções disponíveis. */
+        this.options = [];
+        /** Desabilita o grupo. */
+        this.disabled = false;
+        this.select = (value) => {
+            if (this.disabled || value === this.value)
+                return;
+            this.value = value;
+            this.uiChange.emit(value);
+        };
+        this.onKeyDown = (event, index) => {
+            if (this.disabled)
+                return;
+            const total = this.options.length;
+            if (total === 0)
+                return;
+            let next = -1;
+            if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+                next = (index + 1) % total;
+            }
+            else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+                next = (index - 1 + total) % total;
+            }
+            if (next >= 0) {
+                event.preventDefault();
+                this.select(this.options[next].value);
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: '80b7e45cfc95e7e82015db2fa893b374ba73cf07' }, h("div", { key: '1133cd7ad3f9eb9ebaa0ac6c8a2ca3e2a52c46a9', class: "group", role: "radiogroup" }, this.options.map((option, index) => {
+            const selected = option.value === this.value;
+            return (h("button", { class: "radio", type: "button", role: "radio", "aria-checked": selected ? "true" : "false", tabindex: selected || (!this.value && index === 0) ? "0" : "-1", disabled: this.disabled, onClick: () => this.select(option.value), onKeyDown: (event) => this.onKeyDown(event, index) }, h("span", { class: "indicator" }, h("span", { class: "dot" })), h("span", { class: "label" }, option.label)));
+        }))));
+    }
+    static get is() { return "ui-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-radio-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiRadioOption[]",
+                    "resolved": "UiRadioOption[]",
+                    "references": {
+                        "UiRadioOption": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-radio-group/ui-radio-group.tsx",
+                            "id": "src/components/ui-radio-group/ui-radio-group.tsx::UiRadioOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Op\u00E7\u00F5es dispon\u00EDveis."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o grupo."
+                },
+                "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 a sele\u00E7\u00E3o muda."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(16px);
+  filter: blur(8px);
+  transition: opacity 0.6s var(--ui-ease), transform 0.6s var(--ui-ease),
+    filter 0.6s var(--ui-ease);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: none;
+  filter: none;
+}

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

@@ -0,0 +1,73 @@
+import { h, Host } from "@stencil/core";
+export class UiReveal {
+    constructor() {
+        /** Atraso da transição em milissegundos. */
+        this.delay = 0;
+        /** Indica se o conteúdo já foi revelado. */
+        this.visible = false;
+    }
+    connectedCallback() {
+        if (typeof IntersectionObserver === "undefined") {
+            this.visible = true;
+            return;
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    this.visible = true;
+                    this.observer?.disconnect();
+                    break;
+                }
+            }
+        });
+        this.observer.observe(this.host);
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    render() {
+        return (h(Host, { key: '926e1c25b8463f92dc35a010d58b9bd622932c21' }, h("div", { key: '0561142e1b0955e22d12056f316c98556cb5365d', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: 'bd53a6ca33153d3f7768a7662e5e5b78ea221cc6' }))));
+    }
+    static get is() { return "ui-reveal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-reveal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-reveal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Atraso da transi\u00E7\u00E3o em milissegundos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+}
+
+.bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  transform-origin: left;
+  transform: scaleX(0);
+  background: linear-gradient(
+    90deg,
+    var(--ui-accent),
+    var(--ui-accent-strong)
+  );
+  z-index: 100;
+  transition: transform var(--ui-duration) var(--ui-ease);
+}

package/dist/collection/components/ui-scroll-progress/ui-scroll-progress.js

@@ -0,0 +1,45 @@
+import { h, Host } from "@stencil/core";
+export class UiScrollProgress {
+    constructor() {
+        /** Progresso da rolagem (0 a 1). */
+        this.progress = 0;
+        this.onScroll = () => {
+            if (typeof document === "undefined")
+                return;
+            const el = document.documentElement;
+            const scrollable = el.scrollHeight - el.clientHeight;
+            this.progress = scrollable > 0 ? el.scrollTop / scrollable : 0;
+        };
+    }
+    connectedCallback() {
+        if (typeof window === "undefined")
+            return;
+        window.addEventListener("scroll", this.onScroll, { passive: true });
+        this.onScroll();
+    }
+    disconnectedCallback() {
+        if (typeof window === "undefined")
+            return;
+        window.removeEventListener("scroll", this.onScroll);
+    }
+    render() {
+        return (h(Host, { key: '7eced0439a2d6ef04d085396a6fc0e69fbe798ed' }, h("div", { key: '30db3ea1a3fce2a26ebca96568e939c4a0183922', class: "bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(this.progress * 100), style: { transform: `scaleX(${this.progress})` } })));
+    }
+    static get is() { return "ui-scroll-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-scroll-progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-scroll-progress.css"]
+        };
+    }
+    static get states() {
+        return {
+            "progress": {}
+        };
+    }
+}

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

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  font-family: var(--ui-font-sans);
+}
+
+section {
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 5rem 1.25rem;
+}
+
+.eyebrow {
+  margin: 0 0 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ui-accent);
+}
+
+.heading {
+  margin: 0 0 1rem;
+  font-size: 1.875rem;
+  font-weight: 600;
+  color: var(--ui-foreground);
+}
+
+.description {
+  margin: 0 0 2rem;
+  max-width: 42rem;
+  color: var(--ui-text-muted);
+}

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

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+export class UiSection {
+    constructor() {
+        /** Texto curto exibido acima do título. */
+        this.eyebrow = "";
+        /** Título principal da seção. */
+        this.heading = "";
+        /** Descrição complementar. */
+        this.description = "";
+    }
+    render() {
+        return (h(Host, { key: '63ee126b1e457a4dcd01a66aa519e6fae8377db6' }, h("section", { key: '34f3c07dca2e9f6a3c288b7c41abaf2a3502129f' }, this.eyebrow && h("p", { key: '7c71e3e38e56872757d017ba4f59949f50518c6f', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: 'b8f42a4ae5d2e5d8fb80a4cb9de07ca10c2423fd', class: "heading" }, this.heading), this.description && h("p", { key: 'faeba9733afaa52e7a08629459dd708b4f647740', class: "description" }, this.description), h("slot", { key: '99e906d4ca93461c35125acb4eb3401ed76929fe' }))));
+    }
+    static get is() { return "ui-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eyebrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto curto exibido acima do t\u00EDtulo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "eyebrow",
+                "defaultValue": "\"\""
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "T\u00EDtulo principal da se\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "\"\""
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Descri\u00E7\u00E3o complementar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+}

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

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+}
+
+.wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.select {
+  width: 100%;
+  height: 2.75rem;
+  padding: 0 2.5rem 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;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.select:focus-visible {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.select:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.chevron {
+  position: absolute;
+  top: 50%;
+  right: 0.875rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--ui-text-muted);
+  transform: translateY(-50%);
+  pointer-events: none;
+}