@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/AtributosRepassados.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Text from "../components/Text/Text";
+import Grid from "../components/Grid/Grid";
+import Logo from "../components/Logo/Logo";
+import Button from "../components/Button/Button";
+import DataTable from "../components/DataTable/DataTable";
+/**
+ * Paridade com o Vue: no Vue gerado, Text, Grid e Logo descartavam
+ * `title`, `style` e `aria-*`, o Button escrevia `autofocus="false"` e o
+ * DataTable a classe `--selected.value`. O React nunca teve o defeito; o teste
+ * garante que a correção do Vue não o introduza aqui (mesma fonte Mitosis).
+ */
+describe("atributos repassados ao elemento raiz", () => {
+    it("Text repassa title, style e aria-*", () => {
+        const { container } = render(_jsx(Text, { title: "Dica", style: { marginTop: 4 }, "aria-live": "polite", "data-x": "1", children: "Ol\u00E1" }));
+        const el = container.firstElementChild;
+        expect(el.getAttribute("title")).toBe("Dica");
+        expect(el.style.marginTop).toBe("4px");
+        expect(el.getAttribute("aria-live")).toBe("polite");
+        expect(el.getAttribute("data-x")).toBe("1");
+    });
+    it("Grid repassa title, style e aria-*", () => {
+        const { container } = render(_jsx(Grid, { container: true, spacing: "xxxs", title: "Dica", style: { marginTop: 4 }, "aria-label": "\u00C1rea", children: "x" }));
+        const el = container.firstElementChild;
+        expect(el.getAttribute("title")).toBe("Dica");
+        expect(el.style.marginTop).toBe("4px");
+        expect(el.getAttribute("aria-label")).toBe("Área");
+    });
+    it("Logo repassa title, style e aria-*", () => {
+        const { container } = render(_jsx(Logo, { title: "Dica", style: { width: 80 }, "aria-hidden": "true" }));
+        const el = container.firstElementChild;
+        expect(el.getAttribute("title")).toBe("Dica");
+        expect(el.style.width).toBe("80px");
+        expect(el.getAttribute("aria-hidden")).toBe("true");
+    });
+});
+describe("Button · autoFocus", () => {
+    it("não escreve autofocus quando falso ou ausente", () => {
+        const { container } = render(_jsx(Button, { children: "Salvar" }));
+        expect(container.querySelector("[autofocus]")).toBeNull();
+    });
+});
+describe("DataTable · linha selecionada", () => {
+    it("a classe --selected vai limpa, só na linha selecionada", () => {
+        const { container } = render(_jsx(DataTable, { columns: [{ key: "nome", label: "Nome" }], data: [{ nome: "Cris Lima" }, { nome: "Ana Paula" }], selectable: true, selectedRows: [0] }));
+        const marcadas = container.querySelectorAll(".umds-datatable__row--selected");
+        expect(marcadas).toHaveLength(1);
+        expect(container.innerHTML).not.toContain(".value");
+    });
+});

package/dist/teste/AttachmentCardIA.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/AttachmentCardIA.test.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+beforeAll(() => {
+    if (!globalThis.ResizeObserver) {
+        globalThis.ResizeObserver = class {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+    }
+});
+function cartaoDeIA(extra = {}) {
+    const aoAplicar = vi.fn();
+    const ui = (_jsx(AttachmentCard, { fileName: "protocolo.pdf", documentType: "Protocolo", status: "ai", statusLabel: "Recursos IA", onOpen: () => { }, panel: _jsxs("div", { children: [_jsx("p", { children: "A IA sugere um assunto." }), _jsx("button", { type: "button", onClick: aoAplicar, children: "Aplicar sugest\u00E3o" })] }), ...extra }));
+    return { aoAplicar, ...render(ui) };
+}
+describe("AttachmentCard · status ai", () => {
+    it("escreve a classe do selo de IA e usa a varinha por padrão", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "x.pdf", status: "ai", statusLabel: "Recursos IA" }));
+        const selo = container.querySelector(".umds-attachment-card__status");
+        expect(selo).toHaveClass("umds-attachment-card__status--ai");
+        expect(selo.querySelector("svg")).not.toBeNull();
+    });
+    it("só o selo de IA ganha ícone por padrão", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "x.pdf", status: "positive", statusLabel: "Ok" }));
+        expect(container.querySelector(".umds-attachment-card__status svg")).toBeNull();
+    });
+});
+describe("AttachmentCard · slot panel", () => {
+    it("o painel livre substitui o resultado da conferência, e o selo vira botão sem statusDetails", async () => {
+        const usuario = userEvent.setup();
+        cartaoDeIA();
+        const selo = screen.getByRole("button", { name: /^Recursos IA/ });
+        expect(selo).toHaveAttribute("aria-haspopup", "dialog");
+        await usuario.click(selo);
+        const painel = await screen.findByRole("dialog");
+        expect(painel).toHaveTextContent("A IA sugere um assunto.");
+        expect(screen.getByRole("button", { name: "Aplicar sugestão" })).toBeInTheDocument();
+        // sem título interno: o painel é nomeado pelo selo
+        expect(painel).not.toHaveAttribute("aria-labelledby");
+        expect(painel).toHaveAccessibleName(/Recursos IA/);
+    });
+    it("sem panel nem statusDetails o selo não é botão", () => {
+        render(_jsx(AttachmentCard, { fileName: "x.pdf", status: "ai", statusLabel: "Recursos IA" }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("panelWidth escreve a largura do painel; sem ela não há style", async () => {
+        const usuario = userEvent.setup();
+        cartaoDeIA({ panelWidth: 280 });
+        await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+        expect((await screen.findByRole("dialog")).style.width).toBe("280px");
+    });
+    it("sem panelWidth o painel não leva style", async () => {
+        const usuario = userEvent.setup();
+        cartaoDeIA();
+        await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+        expect((await screen.findByRole("dialog")).getAttribute("style")).toBeNull();
+    });
+});
+describe("AttachmentCard · closePanelOnAction", () => {
+    it("acionar um botão do painel fecha, devolve o foco ao selo e a ação chega ao app", async () => {
+        const usuario = userEvent.setup();
+        const { aoAplicar } = cartaoDeIA({ closePanelOnAction: true });
+        const selo = screen.getByRole("button", { name: /^Recursos IA/ });
+        await usuario.click(selo);
+        await usuario.click(await screen.findByRole("button", { name: "Aplicar sugestão" }));
+        expect(aoAplicar).toHaveBeenCalledTimes(1);
+        await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+        expect(selo).toHaveFocus();
+    });
+    it("sem a prop o painel continua aberto depois da ação", async () => {
+        const usuario = userEvent.setup();
+        const { aoAplicar } = cartaoDeIA();
+        await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+        await usuario.click(await screen.findByRole("button", { name: "Aplicar sugestão" }));
+        expect(aoAplicar).toHaveBeenCalledTimes(1);
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    it("o botão de copiar um campo não fecha o painel", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(AttachmentCard, { fileName: "cpf.pdf", status: "positive", statusLabel: "Pr\u00E9-aprovado", closePanelOnAction: true, statusDetails: { fields: [{ label: "CPF", value: "384.221.760-05", copyable: true }] } }));
+        await usuario.click(screen.getByRole("button", { name: /^Pré-aprovado/ }));
+        await usuario.click(await screen.findByRole("button", { name: "Copiar CPF" }));
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+});

package/dist/teste/AttachmentCardLista.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/AttachmentCardLista.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+const DETALHES = {
+    description: "Documento legível.",
+    fields: [
+        { label: "Nome completo", value: "Marcos Vinícius Tavares", copyable: true },
+        { label: "CPF", value: "123.456.789-09" },
+    ],
+};
+async function abrirPainel() {
+    const usuario = userEvent.setup();
+    render(_jsx(AttachmentCard, { fileName: "cnh.pdf", documentType: "CNH", status: "positive", statusLabel: "Pr\u00E9-aprovado", statusDetails: DETALHES }));
+    await usuario.click(screen.getByRole("button", { name: /Pré-aprovado/ }));
+    return usuario;
+}
+describe("AttachmentCard · o <dl> do painel é válido (axe definition-list)", () => {
+    it("o dl só tem div filhos, e cada div só tem dt e dd, nessa ordem", async () => {
+        await abrirPainel();
+        const dl = document.querySelector(".umds-attachment-card__campos");
+        expect(dl.tagName).toBe("DL");
+        const grupos = [...dl.children];
+        expect(grupos).toHaveLength(2);
+        for (const grupo of grupos) {
+            expect(grupo.tagName).toBe("DIV");
+            expect([...grupo.children].map((f) => f.tagName)).toEqual(["DT", "DD"]);
+        }
+    });
+    it("o botão de copiar mora dentro do dd, ao lado do valor, e continua com nome", async () => {
+        await abrirPainel();
+        const dd = document.querySelector(".umds-attachment-card__campo-valor");
+        expect(dd.tagName).toBe("DD");
+        expect(dd.querySelector(".umds-attachment-card__campo-valor-texto")).toHaveTextContent("Marcos Vinícius Tavares");
+        const botao = dd.querySelector("button");
+        expect(botao).toHaveAttribute("aria-label", "Copiar Nome completo");
+        // nenhum botão solto direto num div do dl
+        for (const grupo of document.querySelectorAll(".umds-attachment-card__campo")) {
+            expect(grupo.querySelector(":scope > button")).toBeNull();
+        }
+    });
+    it("o campo sem copyable não tem botão e o valor segue no dd", async () => {
+        await abrirPainel();
+        const campos = document.querySelectorAll(".umds-attachment-card__campo");
+        expect(campos[1].querySelector("button")).toBeNull();
+        expect(campos[1].querySelector("dd")).toHaveTextContent("123.456.789-09");
+    });
+});

package/dist/teste/AttachmentCardSm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/AttachmentCardSm.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+const tamanho = (el) => el.style.width;
+describe("AttachmentCard · size", () => {
+    it("md (padrão): ícone do preview de 48px e o do rodapé no sm do Icon", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "Protocolo 104-2026.pdf" }));
+        expect(container.firstElementChild).not.toHaveClass("umds-attachment-card--sm");
+        expect(tamanho(container.querySelector(".umds-attachment-card__preview .umds-icon"))).toBe("48px");
+        const rodape = container.querySelector(".umds-attachment-card__rodape-icone .umds-icon");
+        expect(rodape).toHaveClass("umds-icon--sm");
+        expect(rodape.style.width).toBe("");
+    });
+    it("sm: ícone do preview de 40px e o do rodapé de 12px", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "Protocolo 104-2026.pdf", size: "sm" }));
+        expect(container.firstElementChild).toHaveClass("umds-attachment-card--sm");
+        expect(tamanho(container.querySelector(".umds-attachment-card__preview .umds-icon"))).toBe("40px");
+        expect(tamanho(container.querySelector(".umds-attachment-card__rodape-icone .umds-icon"))).toBe("12px");
+    });
+    it("o ícone central escolhido continua valendo no sm", () => {
+        const { container } = render(_jsx(AttachmentCard, { fileName: "a.pdf", size: "sm", documentType: "CNH", status: "positive", statusLabel: "Pr\u00E9-aprovado" }));
+        expect(container.querySelector(".umds-attachment-card__tipo-texto")).toHaveTextContent("CNH");
+        expect(container.querySelector(".umds-attachment-card__status-texto")).toHaveTextContent("Pré-aprovado");
+    });
+});

package/dist/teste/AvatarGroupOverlap.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/AvatarGroupOverlap.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import AvatarGroup from "../components/Avatar/AvatarGroup";
+const PESSOAS = [
+    { name: "Ana Souza" },
+    { name: "Bruno Lima" },
+    { name: "Carla Dias" },
+    { name: "Diego Ferraz" },
+    { name: "Eduarda Neves" },
+];
+const grupo = (c) => c.firstElementChild;
+describe("AvatarGroup · overflowCount", () => {
+    it("sem a prop, o +N é o que passou de max (como antes)", () => {
+        render(_jsx(AvatarGroup, { avatars: PESSOAS, max: 3 }));
+        expect(screen.getByText("+2")).toBeInTheDocument();
+    });
+    it("overflowCount vira o +N sem itens-fantasma", () => {
+        render(_jsx(AvatarGroup, { avatars: PESSOAS.slice(0, 3), max: 3, overflowCount: 12 }));
+        expect(screen.getByText("+12")).toBeInTheDocument();
+    });
+    it("soma com o que passou de max dentro de avatars", () => {
+        render(_jsx(AvatarGroup, { avatars: PESSOAS, max: 3, overflowCount: 10 }));
+        expect(screen.getByText("+12")).toBeInTheDocument();
+    });
+    it("o rótulo traduzido recebe o total escondido", () => {
+        render(_jsx(AvatarGroup, { avatars: PESSOAS.slice(0, 2), max: 2, overflowCount: 7, overflowTitle: (n) => n + " others", overflowAriaLabel: (n) => n + " more avatars" }));
+        expect(screen.getByTitle("7 others")).toBeInTheDocument();
+    });
+    it("sem excedente nenhum, não há +N", () => {
+        render(_jsx(AvatarGroup, { avatars: PESSOAS.slice(0, 2), max: 4 }));
+        expect(screen.queryByText(/^\+/)).toBeNull();
+    });
+    it("overflowCount 0 não cria +0", () => {
+        render(_jsx(AvatarGroup, { avatars: PESSOAS.slice(0, 2), max: 4, overflowCount: 0 }));
+        expect(screen.queryByText(/^\+/)).toBeNull();
+    });
+});
+describe("AvatarGroup · overlap e ring", () => {
+    it("escrevem as variáveis do grupo em px", () => {
+        const { container } = render(_jsx(AvatarGroup, { avatars: PESSOAS, overlap: 6, ring: 1 }));
+        const el = grupo(container);
+        expect(el.style.getPropertyValue("--umds-avatar-group-overlap")).toBe("6px");
+        expect(el.style.getPropertyValue("--umds-avatar-group-ring")).toBe("1px");
+    });
+    it("só overlap não mexe no anel", () => {
+        const { container } = render(_jsx(AvatarGroup, { avatars: PESSOAS, overlap: 4 }));
+        const el = grupo(container);
+        expect(el.style.getPropertyValue("--umds-avatar-group-overlap")).toBe("4px");
+        expect(el.style.getPropertyValue("--umds-avatar-group-ring")).toBe("");
+    });
+    it("sem as props, nenhum style: valem os padrões do CSS", () => {
+        const { container } = render(_jsx(AvatarGroup, { avatars: PESSOAS }));
+        expect(grupo(container).getAttribute("style")).toBeNull();
+    });
+});

package/dist/teste/BadgeNeutroColado.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/BadgeNeutroColado.test.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+/** A cascata de CSS de arquivo não existe no jsdom: a regra é conferida na fonte pelo teste do Vue; aqui, as classes no DOM. */
+describe("Badge attached neutral", () => {
+    it("o neutro colado e sólido leva as três classes que a regra de CSS escolhe", () => {
+        const { container } = render(_jsx(Badge, { attached: true, variant: "neutral", appearance: "solid", children: "Tarefa manual" }));
+        expect(container.firstElementChild).toHaveClass("umds-badge--attached", "umds-badge--neutral", "umds-badge--solid");
+    });
+});

package/dist/teste/BadgeTag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/BadgeTag.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import Tag from "../components/Tag/Tag";
+const raiz = (c) => c.firstElementChild;
+describe("Badge compacto, novidade e colado", () => {
+    it("size 2xs escreve a classe; sem size continua md", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Badge, { size: "2xs", children: "A" }), _jsx(Badge, { children: "B" })] }));
+        expect(container.children[0]).toHaveClass("umds-badge--2xs");
+        expect(container.children[1]).toHaveClass("umds-badge--md");
+    });
+    it("variant new escreve a classe da variante", () => {
+        const { container } = render(_jsx(Badge, { variant: "new", children: "Novidade" }));
+        expect(raiz(container)).toHaveClass("umds-badge--new");
+    });
+    it("attached escreve o modificador; sem ele não há", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Badge, { attached: true, children: "A" }), _jsx(Badge, { children: "B" })] }));
+        expect(container.children[0]).toHaveClass("umds-badge--attached");
+        expect(container.children[1]).not.toHaveClass("umds-badge--attached");
+    });
+});
+describe("Tag compacta, soft, pílula e novidade", () => {
+    it("size xs escreve a classe e sm continua", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Tag, { label: "a", size: "xs" }), _jsx(Tag, { label: "b", size: "sm" })] }));
+        expect(container.children[0]).toHaveClass("umds-tag--xs");
+        expect(container.children[1]).toHaveClass("umds-tag--sm");
+    });
+    it("appearance soft e pill escrevem as classes", () => {
+        const { container } = render(_jsx(Tag, { label: "SOBR", appearance: "soft", variant: "primary", pill: true }));
+        expect(raiz(container)).toHaveClass("umds-tag--soft", "umds-tag--primary", "umds-tag--pill");
+    });
+    it("sem pill não há a classe; padrão segue outlined", () => {
+        const { container } = render(_jsx(Tag, { label: "x" }));
+        expect(raiz(container)).toHaveClass("umds-tag--outlined");
+        expect(raiz(container)).not.toHaveClass("umds-tag--pill");
+    });
+    it("variant new escreve a classe", () => {
+        const { container } = render(_jsx(Tag, { label: "Dado simulado", variant: "new", appearance: "soft" }));
+        expect(raiz(container)).toHaveClass("umds-tag--new", "umds-tag--soft");
+    });
+});
+describe("Badge attachedSide", () => {
+    it("right escreve o modificador do canto direito; left e o padrão não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Badge, { attached: true, attachedSide: "right", children: "A" }), _jsx(Badge, { attached: true, attachedSide: "left", children: "B" }), _jsx(Badge, { attached: true, children: "C" })] }));
+        expect(container.children[0]).toHaveClass("umds-badge--attached", "umds-badge--attached-right");
+        expect(container.children[1]).not.toHaveClass("umds-badge--attached-right");
+        expect(container.children[2]).not.toHaveClass("umds-badge--attached-right");
+    });
+    it("attachedSide sem attached não faz nada", () => {
+        const { container } = render(_jsx(Badge, { attachedSide: "right", children: "A" }));
+        expect(raiz(container)).not.toHaveClass("umds-badge--attached-right");
+        expect(raiz(container)).not.toHaveClass("umds-badge--attached");
+    });
+});

package/dist/teste/BoxItemFlex.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/BoxItemFlex.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Box from "../components/Box/Box";
+describe("Box como item flex e com `as`", () => {
+    it("sem `as` continua um div", () => {
+        const { container } = render(_jsx(Box, { padding: "md", children: "x" }));
+        expect(container.firstElementChild?.tagName).toBe("DIV");
+    });
+    for (const tag of ["div", "span", "ul", "ol", "li", "section", "nav", "header", "footer", "form"]) {
+        it(`as="${tag}" renderiza <${tag}> e só ele`, () => {
+            const { container } = render(_jsx(Box, { as: tag, children: "x" }));
+            expect(container.firstElementChild?.tagName).toBe(tag.toUpperCase());
+            expect(container.children).toHaveLength(1);
+        });
+    }
+    it("ul e ol mantêm a semântica de lista (role=list)", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Box, { as: "ul", "aria-label": "Itens", children: _jsx(Box, { as: "li", children: "a" }) }), _jsx(Box, { as: "ol", "aria-label": "Passos", children: _jsx(Box, { as: "li", children: "b" }) })] }));
+        expect(screen.getByRole("list", { name: "Itens" }).tagName).toBe("UL");
+        expect(screen.getByRole("list", { name: "Passos" }).tagName).toBe("OL");
+    });
+    it("nav com aria-label vira região de navegação nomeada", () => {
+        render(_jsx(Box, { as: "nav", "aria-label": "Atalhos", children: "x" }));
+        expect(screen.getByRole("navigation", { name: "Atalhos" })).toBeInTheDocument();
+    });
+    it("as=form chama onSubmit", () => {
+        const aoEnviar = vi.fn((e) => e.preventDefault());
+        const { container } = render(_jsx(Box, { as: "form", onSubmit: aoEnviar, children: _jsx("button", { type: "submit", children: "Enviar" }) }));
+        fireEvent.submit(container.querySelector("form"));
+        expect(aoEnviar).toHaveBeenCalledTimes(1);
+    });
+    it("escreve as classes de item flex", () => {
+        const { container } = render(_jsx(Box, { grow: true, shrink: "0", basis: "50", minWidth: "auto", overflow: "hidden", overflowX: "auto", overflowY: "scroll", fullHeight: true, fullWidth: true, children: "x" }));
+        const el = container.firstElementChild;
+        for (const c of [
+            "umds-box--grow",
+            "umds-box--shrink-0",
+            "umds-box--basis-50",
+            "umds-box--min-w-auto",
+            "umds-box--overflow-hidden",
+            "umds-box--overflow-x-auto",
+            "umds-box--overflow-y-scroll",
+            "umds-box--full-height",
+            "umds-box--full",
+        ]) {
+            expect(el).toHaveClass(c);
+        }
+    });
+    it("sem as props de item não escreve nenhuma classe delas", () => {
+        const { container } = render(_jsx(Box, { padding: "md", children: "x" }));
+        const classes = container.firstElementChild.className;
+        expect(classes).not.toMatch(/grow|shrink|basis|min-w|overflow|full-height/);
+    });
+});

package/dist/teste/BoxLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/BoxLayout.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Box from "../components/Box/Box";
+describe("Box de layout", () => {
+    it("sem props de layout não vira flex", () => {
+        const { container } = render(_jsx(Box, { padding: "md", bordered: true, children: "x" }));
+        expect(container.firstElementChild).not.toHaveClass("umds-box--flex");
+    });
+    it("com direction, gap, align, justify e wrap vira flex", () => {
+        const { container } = render(_jsx(Box, { direction: "horizontal", gap: "xxxs", align: "center", justify: "between", wrap: true, padding: "md", children: "x" }));
+        const el = container.firstElementChild;
+        for (const c of [
+            "umds-box--flex",
+            "umds-box--horizontal",
+            "umds-box--gap-xxxs",
+            "umds-box--align-center",
+            "umds-box--justify-between",
+            "umds-box--wrap",
+            "umds-box--p-md",
+        ]) {
+            expect(el).toHaveClass(c);
+        }
+    });
+    it("só com gap vira flex vertical", () => {
+        const { container } = render(_jsx(Box, { gap: "xs", children: "x" }));
+        expect(container.firstElementChild).toHaveClass("umds-box--flex", "umds-box--vertical");
+    });
+    it("repassa id, role, aria-label e style", () => {
+        render(_jsx(Box, { id: "r", role: "region", "aria-label": "Resumo", style: { marginTop: 4 }, children: "x" }));
+        const el = screen.getByRole("region", { name: "Resumo" });
+        expect(el.id).toBe("r");
+        expect(el.style.marginTop).toBe("4px");
+    });
+});

package/dist/teste/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/Button.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import Button from "../components/Button/Button";
+describe("Button: variante neutral-text e tamanho xs", () => {
+    it("neutral-text escreve a classe da variante", () => {
+        render(_jsx(Button, { variant: "neutral-text", children: "Simular" }));
+        expect(screen.getByRole("button", { name: "Simular" })).toHaveClass("umds-button--neutral-text");
+    });
+    it("neutral continua sendo o contornado cinza", () => {
+        render(_jsx(Button, { variant: "neutral", children: "Ordenar" }));
+        const botao = screen.getByRole("button", { name: "Ordenar" });
+        expect(botao).toHaveClass("umds-button--neutral");
+        expect(botao).not.toHaveClass("umds-button--neutral-text");
+    });
+    it("size xs escreve a classe e o botão sem size continua md", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { size: "xs", children: "Resolver" }), _jsx(Button, { children: "Padr\u00E3o" })] }));
+        expect(screen.getByRole("button", { name: "Resolver" })).toHaveClass("umds-button--xs");
+        expect(screen.getByRole("button", { name: "Padrão" })).toHaveClass("umds-button--md");
+    });
+    it("no xs o ícone usa o tamanho sm do Icon (o CSS do botão o reduz)", () => {
+        const { container } = render(_jsx(Button, { size: "xs", startIcon: faPlus, children: "Novo" }));
+        expect(container.querySelector(".umds-icon")).toHaveClass("umds-icon--sm");
+        expect(container.querySelector(".umds-icon--xs")).toBeNull();
+    });
+});

package/dist/teste/Calendar.test.d.ts

@@ -0,0 +1 @@
+export {};