@andespindola/ui-core 0.1.0 → 0.2.0

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

@@ -73,7 +73,7 @@ export class UiPopover {
         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' }))));
+        return (h(Host, { key: '61b4088ff4d61701a3466619274e60ac64fcc420' }, h("span", { key: 'd2d00f4dbf391ea1bc119870e399187d98634de6', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'ece70edbdda096821de68295e55a3fba3caeada4', name: "trigger" })), h("div", { key: 'f30e5a570e49eb9c7056fd820bc57408dd78e013', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: '5823d3c7ed47946d812a2c34002fc5fd0cfc8a29' }))));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,26 +7,31 @@
   height: 0.5rem;
   border-radius: var(--ui-radius-full);
   background: var(--ui-chip);
+  border: 1px solid var(--ui-border);
   overflow: hidden;
+  box-sizing: border-box;
 }
 
 .indicator {
   height: 100%;
+  min-width: 0.5rem;
   border-radius: var(--ui-radius-full);
-  background: var(--ui-accent);
+  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-strong));
+  box-shadow: 0 0 12px color-mix(in srgb, var(--ui-accent) 55%, transparent);
   transition: width var(--ui-duration) var(--ui-ease);
 }
 
 .indicator.indeterminate {
   width: 40%;
-  animation: ui-progress-slide 1.2s ease-in-out infinite;
+  min-width: 0;
+  animation: ui-progress-slide 1.3s var(--ui-ease) infinite;
 }
 
 @keyframes ui-progress-slide {
   0% {
-    transform: translateX(-100%);
+    transform: translateX(-110%);
   }
   100% {
-    transform: translateX(250%);
+    transform: translateX(360%);
   }
 }

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

@@ -19,7 +19,7 @@ export class UiProgress {
     }
     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 }))));
+        return (h(Host, { key: '8f40e0e4a439959e1474d2952f0f891438fb3ecf', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: '9bfd7557efbfad05a8b170764b96935f00cbdaeb', class: "track" }, h("div", { key: '02205ac65e75f27f52869991b168c6397c8b2760', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
     }
     static get is() { return "ui-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class UiRadioGroup {
         };
     }
     render() {
-        return (h(Host, { key: '80b7e45cfc95e7e82015db2fa893b374ba73cf07' }, h("div", { key: '1133cd7ad3f9eb9ebaa0ac6c8a2ca3e2a52c46a9', class: "group", role: "radiogroup" }, this.options.map((option, index) => {
+        return (h(Host, { key: '67c377ec552ea8cb6ea3d015bab1ee3d66ee436c' }, h("div", { key: 'aa52c74b8473ca06b762811a900d90cdfc8f7422', 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)));
         }))));

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

@@ -26,7 +26,7 @@ export class UiReveal {
         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' }))));
+        return (h(Host, { key: '4ab570c0eaa9fb6b4d6a9d01887fde6edd72ba8d' }, h("div", { key: 'cf0287499bfa5107fb49cadc85c85f2f70063967', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: 'b46502732e597f13d60ec55be0d456dba8181386' }))));
     }
     static get is() { return "ui-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class UiScrollProgress {
         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})` } })));
+        return (h(Host, { key: 'cb2d746b6e0ca3642a0460cff5685f2eb83a6301' }, h("div", { key: '7fdb8b414f833110c389aef8620c313fb8c001c7', 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"; }

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

@@ -6,22 +6,29 @@
 section {
   max-width: 80rem;
   margin: 0 auto;
-  padding: 5rem 1.25rem;
+  padding: 3.5rem 1.5rem;
 }
 
 .eyebrow {
+  display: inline-block;
   margin: 0 0 0.75rem;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  font-size: 0.6875rem;
   font-weight: 600;
   color: var(--ui-accent);
 }
 
 .heading {
-  margin: 0 0 1rem;
-  font-size: 1.875rem;
+  margin: 0 0 0.75rem;
+  font-size: 2.25rem;
   font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
   color: var(--ui-foreground);
 }
 

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

@@ -9,7 +9,7 @@ export class UiSection {
         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' }))));
+        return (h(Host, { key: '71344e4d5a4c6bccade1bf5151aeba1dffa14d7f' }, h("section", { key: '404cb27c6db128f60608b4eff44fa6e05520016b' }, this.eyebrow && h("p", { key: '204ced95531d3bf77c2a32f940c3ec4bc0e76f53', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: '46818123dd264ef60db8ff9c7a2ad93979d71434', class: "heading" }, this.heading), this.description && h("p", { key: 'eaba39853cd12a874c9079e2181aca9e0fc130b7', class: "description" }, this.description), h("slot", { key: '24d02b1d9176e42d7906ef43881807d7cfda2e52' }))));
     }
     static get is() { return "ui-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,46 @@
+:host {
+  display: inline-block;
+}
+
+.track {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+  font-family: var(--ui-font-sans);
+}
+
+.segment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.875rem;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-text-muted);
+  font-family: var(--ui-font-sans);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.segment:hover {
+  color: var(--ui-foreground);
+}
+
+.segment:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.segment.active {
+  background: var(--ui-panel-strong);
+  color: var(--ui-foreground);
+  box-shadow: var(--ui-shadow-sm);
+}

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

@@ -0,0 +1,99 @@
+import { h, Host } from "@stencil/core";
+export class UiSegmented {
+    constructor() {
+        /** Lista de segmentos. */
+        this.items = [];
+        /** Valor do segmento ativo. */
+        this.value = "";
+        this.select = (value) => {
+            if (value === this.value)
+                return;
+            this.value = value;
+            this.uiChange.emit(value);
+        };
+    }
+    render() {
+        return (h(Host, { key: '92649a392383aebb62bab90e3f20a008783f2ed2' }, h("div", { key: '22983cd496ee1f9ed1dbf49d989c409cdca3c8b4', class: "track", role: "radiogroup" }, this.items.map((item) => {
+            const active = item.value === this.value;
+            return (h("button", { key: item.value, class: { segment: true, active }, type: "button", role: "radio", "aria-checked": active ? "true" : "false", onClick: () => this.select(item.value) }, item.label));
+        }))));
+    }
+    static get is() { return "ui-segmented"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-segmented.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-segmented.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiSegmentedItem[]",
+                    "resolved": "UiSegmentedItem[]",
+                    "references": {
+                        "UiSegmentedItem": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-segmented/ui-segmented.tsx",
+                            "id": "src/components/ui-segmented/ui-segmented.tsx::UiSegmentedItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de segmentos."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor do segmento ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o segmento ativo muda."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -27,6 +27,10 @@
   appearance: none;
 }
 
+.select:hover:not(:disabled) {
+  border-color: var(--ui-border-strong);
+}
+
 .select:focus-visible {
   border-color: var(--ui-accent);
   box-shadow: 0 0 0 2px var(--ui-ring);

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

@@ -13,7 +13,7 @@ export class UiSelect {
     }
     render() {
         const hasValue = this.value !== undefined && this.value !== "";
-        return (h(Host, { key: '1ebd6a8472a116ad071e9504ab0756daddb27824' }, h("div", { key: '5d2d00f41b8f74202156d0af7c150b89d79dc1a4', class: "wrapper" }, h("select", { key: '7b370433247f03a126ce13005a3697ba5b04845f', class: "select", name: this.name, disabled: this.disabled, onChange: this.onChange }, this.placeholder && (h("option", { key: '9e482642eebeab0b1b1c5b56a6730fb5ecbd9617', value: "", disabled: true, selected: !hasValue }, this.placeholder)), this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))), h("svg", { key: '7d66788b8d8b51169ae28e5e5c5a31c0b637e377', class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'aaa00671ba95ebd20f81174fc27bf218b16dfc64', points: "6 9 12 15 18 9" })))));
+        return (h(Host, { key: '5f41047362d77643cc663925900c15c6cd10ec60' }, h("div", { key: '53ec77b2100bdd6de568ad549a42ad8fd080ac6a', class: "wrapper" }, h("select", { key: 'b0b4b1def7b7166bf24f996f9736a670a9b7b052', class: "select", name: this.name, disabled: this.disabled, onChange: this.onChange }, this.placeholder && (h("option", { key: 'e83b039418ac74bb3124c151dca9af43ff05dd61', value: "", disabled: true, selected: !hasValue }, this.placeholder)), this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))), h("svg", { key: 'bb3165c856d11b352b2c7a64cc12ab4284541fb4', class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'ab5e3cb2419dc63fbcd3804740b781c856ae8240', points: "6 9 12 15 18 9" })))));
     }
     static get is() { return "ui-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class UiSeparator {
         this.orientation = "horizontal";
     }
     render() {
-        return (h(Host, { key: '212e4b763ad309ef74ba2e21592a0d4091fb0fcf', role: "separator", "aria-orientation": this.orientation, class: `orientation-${this.orientation}` }));
+        return (h(Host, { key: '33e452485ff7838e37a378f9acba10f242069cfc', role: "separator", "aria-orientation": this.orientation, class: `orientation-${this.orientation}` }));
     }
     static get is() { return "ui-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,22 +6,25 @@
   display: block;
   width: 100%;
   height: 100%;
+  min-height: 1rem;
   border-radius: var(--ui-radius-sm);
-  background: linear-gradient(
+  background-color: var(--ui-chip);
+  background-image: linear-gradient(
     90deg,
-    var(--ui-chip),
-    var(--ui-panel),
-    var(--ui-chip)
+    transparent,
+    color-mix(in srgb, var(--ui-foreground) 12%, transparent),
+    transparent
   );
   background-size: 200% 100%;
+  background-repeat: no-repeat;
   animation: ui-skeleton-shimmer 1.5s ease-in-out infinite;
 }
 
 @keyframes ui-skeleton-shimmer {
   0% {
-    background-position: 200% 0;
+    background-position: -150% 0;
   }
   100% {
-    background-position: -200% 0;
+    background-position: 150% 0;
   }
 }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class UiSkeleton {
     render() {
-        return (h(Host, { key: '19b59c75e9ff1607c731227bd344a0d082de5366' }, h("span", { key: '6eb968b5bd87768818381db897a090a2783ad938', class: "skeleton" })));
+        return (h(Host, { key: '8f839817a493a8221e9d3b2e95fd7ae5ece2e70e' }, h("span", { key: '295dce8e9e6489def8b20a703f04c65ad3740ce8', class: "skeleton" })));
     }
     static get is() { return "ui-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class UiSlider {
         };
     }
     render() {
-        return (h(Host, { key: 'dc7f810ebfdde28731d2e1c491596caf03c2476e' }, h("input", { key: 'cac37f559b5587d18fee732e11d6515d57d23466', class: "slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.onInput, onChange: this.onChange })));
+        return (h(Host, { key: '22fe57f0e95edb2e169718c8b1fb5c2f3d78ddfe' }, h("input", { key: 'a9e16ef8f97f412c22911f72c4b7212f6d04a293', class: "slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.onInput, onChange: this.onChange })));
     }
     static get is() { return "ui-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class UiSpinner {
         this.size = "md";
     }
     render() {
-        return (h(Host, { key: 'cedf6e857d1f4e6561c78f3fd3076341c2d8ecdc', role: "status" }, h("span", { key: '7200580dccc32b30829725ad84e913c3b1afee60', class: { spinner: true, [`size-${this.size}`]: true } }), h("span", { key: '63d4cfee2e5cebabc3c7b3b6ed95a656daa65705', class: "sr-only" }, "Carregando")));
+        return (h(Host, { key: '0414d6e3be8588ad4c71c5e4cf227075ac7494ab', role: "status" }, h("span", { key: '61e5d0a16b5fd566767ef098477c3144a9c1c987', class: { spinner: true, [`size-${this.size}`]: true } }), h("span", { key: 'ea33b6e6603ba23e7a117ef978329c83818a044b', class: "sr-only" }, "Carregando")));
     }
     static get is() { return "ui-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.stack {
+  display: flex;
+  font-family: var(--ui-font-sans);
+}

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

@@ -0,0 +1,184 @@
+import { h, Host } from "@stencil/core";
+const GAP = {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+};
+const ALIGN = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch",
+};
+const JUSTIFY = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between",
+};
+export class UiStack {
+    constructor() {
+        /** Direção do empilhamento. */
+        this.direction = "vertical";
+        /** Espaçamento entre itens. */
+        this.gap = "md";
+        /** Alinhamento no eixo cruzado. */
+        this.align = "stretch";
+        /** Distribuição no eixo principal. */
+        this.justify = "start";
+        /** Permite quebra de linha dos itens. */
+        this.wrap = false;
+    }
+    render() {
+        const style = {
+            flexDirection: this.direction === "horizontal" ? "row" : "column",
+            gap: GAP[this.gap],
+            alignItems: ALIGN[this.align],
+            justifyContent: JUSTIFY[this.justify],
+            flexWrap: this.wrap ? "wrap" : "nowrap",
+        };
+        return (h(Host, { key: 'ba9547e72877aa05a5e93afbe098d7402b315df3' }, h("div", { key: 'e0fd73777e2211925435f2fd8bfcb74ad2eb8085', class: "stack", style: style }, h("slot", { key: '3a5aa50721c641f0cc81328a21262ff5d375e55c' }))));
+    }
+    static get is() { return "ui-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-stack.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiStackDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "UiStackDirection": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-stack/ui-stack.tsx",
+                            "id": "src/components/ui-stack/ui-stack.tsx::UiStackDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dire\u00E7\u00E3o do empilhamento."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "\"vertical\""
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiStackGap",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "UiStackGap": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-stack/ui-stack.tsx",
+                            "id": "src/components/ui-stack/ui-stack.tsx::UiStackGap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Espa\u00E7amento entre itens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "\"md\""
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiStackAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "UiStackAlign": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-stack/ui-stack.tsx",
+                            "id": "src/components/ui-stack/ui-stack.tsx::UiStackAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alinhamento no eixo cruzado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "\"stretch\""
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiStackJustify",
+                    "resolved": "\"between\" | \"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "UiStackJustify": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-stack/ui-stack.tsx",
+                            "id": "src/components/ui-stack/ui-stack.tsx::UiStackJustify"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Distribui\u00E7\u00E3o no eixo principal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify",
+                "defaultValue": "\"start\""
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permite quebra de linha dos itens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.25rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-panel);
+  backdrop-filter: blur(22px);
+  font-family: var(--ui-font-sans);
+}
+
+.label {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--ui-text-faint);
+}
+
+.value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.625rem;
+}
+
+.value {
+  font-size: 1.875rem;
+  font-weight: 600;
+  line-height: 1.1;
+  color: var(--ui-foreground);
+}
+
+.delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--ui-radius-full);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.delta svg {
+  display: block;
+}
+
+.trend-up {
+  color: var(--ui-success);
+  background: color-mix(in srgb, var(--ui-success) 14%, transparent);
+}
+.trend-down {
+  color: var(--ui-danger);
+  background: color-mix(in srgb, var(--ui-danger) 14%, transparent);
+}
+.trend-neutral {
+  color: var(--ui-text-muted);
+  background: var(--ui-chip);
+}
+
+.extra {
+  font-size: 0.8125rem;
+  color: var(--ui-text-muted);
+}