@andespindola/ui-core 0.1.1 → 0.3.0

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: 'f7265dce62bf0d590da4b9d8f8756f11991680fb' }, h("div", { key: 'ba70adcb04fae5ba2f78089ac95f8dfed4014efd', 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-rating/ui-rating.css

@@ -0,0 +1,52 @@
+:host {
+  display: inline-flex;
+}
+
+.rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.star {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--ui-border-strong);
+  transition: color var(--ui-duration) var(--ui-ease),
+    transform var(--ui-duration) var(--ui-ease);
+}
+
+.star svg {
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.star.filled {
+  color: var(--ui-warning);
+}
+
+.star.filled svg {
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.star:not(.readonly):hover {
+  transform: scale(1.15);
+}
+
+.star:focus-visible {
+  outline: none;
+  border-radius: var(--ui-radius);
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.star.readonly {
+  pointer-events: none;
+  cursor: default;
+}

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

@@ -0,0 +1,134 @@
+import { h, Host, } from "@stencil/core";
+export class UiRating {
+    constructor() {
+        /** Valor selecionado. */
+        this.value = 0;
+        /** Quantidade de estrelas. */
+        this.max = 5;
+        /** Apenas leitura, sem interação. */
+        this.readonly = false;
+        /** Estrela atualmente sob o cursor (-1 quando sem hover). */
+        this.hoverValue = -1;
+        this.onLeave = () => {
+            this.hoverValue = -1;
+        };
+    }
+    select(index) {
+        if (this.readonly)
+            return;
+        this.value = index;
+        this.uiChange.emit(this.value);
+    }
+    onEnter(index) {
+        if (this.readonly)
+            return;
+        this.hoverValue = index;
+    }
+    render() {
+        const active = this.hoverValue > 0 ? this.hoverValue : this.value;
+        const stars = Array.from({ length: this.max }, (_, i) => i + 1);
+        return (h(Host, { key: 'b334c2aea5f4b15907ef5d386f344403b97f0324' }, h("div", { key: '635e2ec90f98eb3f90c4f365d32fc82b5763cf42', class: "rating", role: "radiogroup", "aria-label": "Avalia\u00E7\u00E3o", onMouseLeave: this.onLeave }, stars.map((index) => {
+            const filled = index <= active;
+            return (h("button", { class: { star: true, filled, readonly: this.readonly }, type: "button", role: "radio", "aria-checked": index === this.value ? "true" : "false", "aria-label": `${index} estrelas`, onClick: () => this.select(index), onMouseEnter: () => this.onEnter(index) }, h("svg", { viewBox: "0 0 24 24", width: "100%", height: "100%" }, h("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }))));
+        }))));
+    }
+    static get is() { return "ui-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-rating.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade de estrelas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apenas leitura, sem intera\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hoverValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o valor muda."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -26,7 +26,7 @@ export class UiReveal {
         this.observer?.disconnect();
     }
     render() {
-        return (h(Host, { key: '0af93c131bf8564bf952ca61637041089b5c34b7' }, h("div", { key: '94a0fc0cf5445b9832994c19eb5600f6227ccc97', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: '2a47e0af589790cbe5cfbc10ef49ffde1aced931' }))));
+        return (h(Host, { key: '5bb285428644e0c3e130178e5c34811ff5c52d5a' }, h("div", { key: '1884cbc6f94fdee392ed94ab8fbc4a449747138a', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: '270ee6624c2ba58edc786d80fb3d777ff3cebb41' }))));
     }
     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: '36bb4460d8219c028ff63216ef562f0d157fd04d' }, h("div", { key: '345b9675be89ede7875c56ad3f86ae2eecdf4f16', 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: 'fee75a94ba6949fffe43501b672492795632f687' }, h("div", { key: 'fc881ac42582dc50df17861b918d96331216b86f', 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.js

@@ -9,7 +9,7 @@ export class UiSection {
         this.description = "";
     }
     render() {
-        return (h(Host, { key: '17a6e52fb6d1822d7a8a08eef052d972cc322c0a' }, h("section", { key: '228e9c1e4ca2515f585cafa2684932bfac70a25b' }, this.eyebrow && h("p", { key: '93c307b49c39fe2c0b2363d75c9763b3c09446a5', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: '889c652e358f1788c5785f1154f5a45508fa2a61', class: "heading" }, this.heading), this.description && h("p", { key: '09cb09edfbc0dce2b7fd5e9938cafc63e2ddbd9a', class: "description" }, this.description), h("slot", { key: '4f480d0c56263f1e38909e8af8d7cd8d8c2375fe' }))));
+        return (h(Host, { key: '541fff68d5138d9c8767a22f4fc031d77d532010' }, h("section", { key: 'a05b3596b2dae7e78216b087af28f0be57d79468' }, this.eyebrow && h("p", { key: 'd429995b90a7877792fb4c2def70a2dd9fd1865d', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: '41849c37d94c9d91cfedaa0bceec0a453089326d', class: "heading" }, this.heading), this.description && h("p", { key: '5b244c629c70ed213426d141bec5c67da670d566', class: "description" }, this.description), h("slot", { key: '7ad5eafe43915eb69f31532417f1ea28f232b5c8' }))));
     }
     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: 'ff4e74a388b0c7db02c4065e32c93b66d1338fb8' }, h("div", { key: '163708540ba5221f2b7a90dc7778c2d83072b6e4', 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.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: 'a1abda48256851c19e13b1516c9789ff270fd55f' }, h("div", { key: '9556917c11784833418565b305b814e176b4ce22', class: "wrapper" }, h("select", { key: '6f724cd6c5c83d841839c1a13b8e1f74720edd57', class: "select", name: this.name, disabled: this.disabled, onChange: this.onChange }, this.placeholder && (h("option", { key: '2b70163c4f64850d05f8194b310041bc32d18930', 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: '748cda678998b6739fc56aaa7df36964a37a0f12', 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: '957613dc5eeb6471f4dfc1cc4e8203c90d291cdb', 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: '64211b51121d5c090a1f7e3feb88e7c076dc5b7b', 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.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class UiSkeleton {
     render() {
-        return (h(Host, { key: 'a7ce8aa1c475aaa92353b0eb6bad5ded231a5cd1' }, h("span", { key: '0611976380d3fb93d1ac64bfdc5d4686568c5129', class: "skeleton" })));
+        return (h(Host, { key: 'b8c2b1288e037ec55d582d07a6f9d83ad63789b4' }, h("span", { key: '3a939a4d6ab7ce5791bd3ffb7210743ad68e0db8', 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: '08226142947909bff3ccecd5fc780d75515c2ee2' }, h("input", { key: '192bd60cd8b0c1e8d6029272fd317c0d786b36ca', 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: 'eeb569c6927ebcda5c1702c8bdbade3e15ede9c2' }, h("input", { key: '1fd45574a52ed9d857941c870650995f092283f8', 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: '3ce50c4de9703a057c0971fbaa71f6535a30c196', role: "status" }, h("span", { key: '83aba34de038600be6535662d7243489d4db79f1', class: { spinner: true, [`size-${this.size}`]: true } }), h("span", { key: 'ff7523e8ab8e073dea03314b72c93aaf566fa32e', 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: 'f10c42228c323efa8c5ded4e8ca552e38d1ef923' }, h("div", { key: 'c296191b05e5ad4e9fdec382808b24b6e798867d', class: "stack", style: style }, h("slot", { key: '8cc418111a0833cf404e0578e81c23f9aaa69fda' }))));
+    }
+    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"
+            }
+        };
+    }
+}