@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/teste/DataTableDocumento.test.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DataTable from "../components/DataTable/DataTable";
+import DescriptionList from "../components/DescriptionList/DescriptionList";
+const COLUNAS = [
+    { key: "descricao", label: "Descrição", sortable: true },
+    { key: "quantidade", label: "Quantidade", align: "right" },
+];
+const DADOS = [
+    { descricao: "Diesel S10", quantidade: "5.760" },
+    { descricao: "Gasolina comum", quantidade: "1.200" },
+];
+describe("DataTable variant=document", () => {
+    it("é a tabela de documento: classe própria, cabeçalho e linhas", () => {
+        const { container } = render(_jsx(DataTable, { variant: "document", columns: COLUNAS, data: DADOS }));
+        expect(container.querySelector(".umds-datatable--document")).not.toBeNull();
+        expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+        expect(screen.getByText("Diesel S10")).toBeInTheDocument();
+    });
+    it("não ordena: sem botão de ordenar, sem aria-sort", () => {
+        render(_jsx(DataTable, { variant: "document", columns: COLUNAS, data: DADOS, sortKey: "descricao", sortDirection: "asc" }));
+        expect(screen.queryByRole("button")).toBeNull();
+        for (const th of screen.getAllByRole("columnheader"))
+            expect(th).not.toHaveAttribute("aria-sort");
+    });
+    it("não seleciona: selectable é ignorado", () => {
+        render(_jsx(DataTable, { variant: "document", selectable: true, columns: COLUNAS, data: DADOS }));
+        expect(screen.queryByRole("checkbox")).toBeNull();
+        expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+    });
+    it("linha não é clicável nem entra na ordem de Tab", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        const { container } = render(_jsx(DataTable, { variant: "document", columns: COLUNAS, data: DADOS, onRowClick: aoClicar }));
+        const linha = container.querySelector("tbody tr");
+        expect(linha).not.toHaveAttribute("tabindex");
+        expect(linha).not.toHaveClass("umds-datatable__row--clickable");
+        await usuario.click(linha);
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("a tabela de interface continua igual (ordena, seleciona, clica)", async () => {
+        const usuario = userEvent.setup();
+        const aoOrdenar = vi.fn();
+        render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, selectable: true, onSort: aoOrdenar }));
+        expect(screen.getAllByRole("checkbox").length).toBeGreaterThan(0);
+        await usuario.click(screen.getByRole("button", { name: /Descrição/ }));
+        expect(aoOrdenar).toHaveBeenCalledWith("descricao", "asc");
+    });
+});
+describe("DescriptionList", () => {
+    const ITENS = [
+        { label: "Dotação", value: "02.031.0001" },
+        { label: "Empenho", value: "2026NE000184" },
+        { label: "Fonte", value: "" },
+    ];
+    it("é um dl com um dt e um dd por par", () => {
+        const { container } = render(_jsx(DescriptionList, { items: ITENS, ariaLabel: "Dados de empenho" }));
+        const dl = container.querySelector("dl");
+        expect(dl).toHaveAttribute("aria-label", "Dados de empenho");
+        expect(dl.querySelectorAll("dt")).toHaveLength(3);
+        expect(dl.querySelectorAll("dd")).toHaveLength(3);
+        expect(dl.querySelector("dt")).toHaveTextContent("Dotação");
+        expect(dl.querySelector("dd")).toHaveTextContent("02.031.0001");
+    });
+    it("valor vazio mostra o traço, ou o texto de emptyValue", () => {
+        const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS }));
+        expect(container.querySelectorAll("dd")[2]).toHaveTextContent("—");
+        rerender(_jsx(DescriptionList, { items: ITENS, emptyValue: "N\u00E3o informado" }));
+        expect(container.querySelectorAll("dd")[2]).toHaveTextContent("Não informado");
+    });
+    it("inline é o padrão; fit encolhe", () => {
+        const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS }));
+        const dl = container.querySelector("dl");
+        expect(dl).toHaveClass("umds-description-list--inline");
+        expect(dl).not.toHaveClass("umds-description-list--fit");
+        rerender(_jsx(DescriptionList, { items: ITENS, fit: true }));
+        expect(container.querySelector("dl")).toHaveClass("umds-description-list--fit");
+    });
+    it("stacked ganha as colunas e a caixa do valor", () => {
+        const { container } = render(_jsx(DescriptionList, { items: ITENS, layout: "stacked", columns: 3, bordered: true }));
+        const dl = container.querySelector("dl");
+        expect(dl).toHaveClass("umds-description-list--stacked");
+        expect(dl).toHaveClass("umds-description-list--cols-3");
+        expect(dl).toHaveClass("umds-description-list--bordered");
+    });
+    it("sem itens, não desenha par nenhum", () => {
+        const { container } = render(_jsx(DescriptionList, {}));
+        expect(container.querySelectorAll("dt")).toHaveLength(0);
+    });
+});

package/dist/teste/DatePicker.test.js

@@ -69,3 +69,26 @@ describe("DatePicker · teclado", () => {
         expect(screen.getByRole("combobox")).toHaveTextContent(/15\/\d{2}\/\d{4}/);
     });
 });
+/**
+ * A story "Com valor" mostrava "Selecione o período" com `value="2025-12-31"`.
+ * Não era a story: no modo single o componente só lia `range`, e `value` e
+ * `defaultValue` eram declarados e nunca chegavam ao campo.
+ */
+describe("DatePicker · valor no modo single", () => {
+    it("`value` aparece no campo, no formato pedido", () => {
+        render(_jsx(DatePicker, { label: "Vencimento", value: "2025-12-31", format: "DD/MM/YYYY" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("31/12/2025");
+    });
+    it("`defaultValue` semeia o campo no modo não-controlado", () => {
+        render(_jsx(DatePicker, { label: "Vencimento", defaultValue: "2025-06-15" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("15/06/2025");
+    });
+    it("`value` vazio no modo controlado mostra o placeholder", () => {
+        render(_jsx(DatePicker, { label: "Vencimento", value: "", placeholder: "DD/MM/AAAA" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("DD/MM/AAAA");
+    });
+    it("o modo range continua lendo `range`, não `value`", () => {
+        render(_jsx(DatePicker, { mode: "range", label: "Per\u00EDodo", value: "2025-01-01", range: { from: "2025-03-01", to: "2025-03-10" } }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("01/03/2025 – 10/03/2025");
+    });
+});

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

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

package/dist/teste/FileInputTrigger.test.js

@@ -0,0 +1,53 @@
+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 FileInput from "../components/FileInput/FileInput";
+const arquivo = (nome) => new File(["conteudo"], nome, { type: "application/pdf" });
+describe("FileInput · variant trigger", () => {
+    it("renderiza o conteúdo como gatilho, sem a caixa de arrastar", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", children: _jsx("button", { type: "button", children: "Anexar arquivo" }) }));
+        expect(screen.getByRole("button", { name: "Anexar arquivo" })).toBeInTheDocument();
+        expect(container.querySelector(".umds-file-input__drop-zone")).toBeNull();
+        expect(container.querySelector(".umds-file-input--trigger")).not.toBeNull();
+    });
+    it("clicar no conteúdo abre o seletor (clique no input nativo)", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", children: _jsx("button", { type: "button", children: "Anexar arquivo" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        const clique = vi.spyOn(nativo, "click");
+        fireEvent.click(screen.getByRole("button", { name: "Anexar arquivo" }));
+        expect(clique).toHaveBeenCalledTimes(1);
+    });
+    it("disabled não abre o seletor", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", disabled: true, children: _jsx("span", { children: "Alterar foto" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        const clique = vi.spyOn(nativo, "click");
+        fireEvent.click(screen.getByText("Alterar foto"));
+        expect(clique).not.toHaveBeenCalled();
+    });
+    it("escolher arquivos chama onChange, e accept e multiple chegam ao input", () => {
+        const aoMudar = vi.fn();
+        const { container } = render(_jsx(FileInput, { variant: "trigger", accept: ".pdf", multiple: true, onChange: aoMudar, children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        expect(nativo).toHaveAttribute("accept", ".pdf");
+        expect(nativo).toHaveAttribute("multiple");
+        fireEvent.change(nativo, { target: { files: [arquivo("a.pdf"), arquivo("b.pdf")] } });
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+        expect(aoMudar.mock.calls[0][0].map((f) => f.name)).toEqual(["a.pdf", "b.pdf"]);
+    });
+    it("o input nativo não entra no Tab e tem nome acessível", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", label: "Anexar arquivo", children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        expect(nativo).toHaveAttribute("tabindex", "-1");
+        expect(nativo).toHaveAttribute("aria-label", "Anexar arquivo");
+        // o rótulo visível não aparece: o gatilho é o conteúdo
+        expect(container.querySelector(".umds-file-input__label")).toBeNull();
+    });
+    it("a lista de arquivos continua aparecendo no modo trigger", () => {
+        render(_jsx(FileInput, { variant: "trigger", files: [{ name: "oficio.pdf", size: 2048 }], children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        expect(screen.getByText("oficio.pdf")).toBeInTheDocument();
+    });
+    it("as variantes base e card seguem com a caixa", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(FileInput, { variant: "base" }), _jsx(FileInput, { variant: "card" })] }));
+        expect(container.querySelectorAll(".umds-file-input__drop-zone")).toHaveLength(2);
+    });
+});

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

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

package/dist/teste/IconPicker.test.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faBuilding, faFileLines, faFolder, faGavel, faUser } from "@fortawesome/free-solid-svg-icons";
+import IconPicker from "../components/IconPicker/IconPicker";
+const ICONES = [
+    faUser,
+    faFolder,
+    faFileLines,
+    { icon: faBuilding, label: "Prédio", keywords: ["prefeitura", "órgão"] },
+    { icon: faGavel, label: "Martelo", keywords: ["jurídico", "decisão"] },
+];
+const radios = () => screen.getAllByRole("radio");
+describe("IconPicker", () => {
+    it("é um radiogroup com um radio por ícone, nomeado pelo iconName sem hífen", () => {
+        render(_jsx(IconPicker, { ariaLabel: "\u00CDcone da categoria", icons: ICONES }));
+        expect(screen.getByRole("radiogroup", { name: "Ícone da categoria" })).toBeInTheDocument();
+        expect(radios()).toHaveLength(5);
+        expect(screen.getByRole("radio", { name: "user" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "file lines" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "Prédio" })).toBeInTheDocument();
+    });
+    it("iconLabel traduz os nomes que não vêm com label", () => {
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: [faUser, faFolder], iconLabel: (n) => ({ user: "Pessoa", folder: "Pasta" }[n]) }));
+        expect(screen.getByRole("radio", { name: "Pessoa" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "Pasta" })).toBeInTheDocument();
+    });
+    it("clicar escolhe e entrega o NOME do ícone e o item em onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, onChange: aoMudar }));
+        await usuario.click(screen.getByRole("radio", { name: "folder" }));
+        expect(aoMudar).toHaveBeenCalledWith("folder", faFolder);
+        expect(screen.getByRole("radio", { name: "folder" })).toHaveAttribute("aria-checked", "true");
+        await usuario.click(screen.getByRole("radio", { name: "Prédio" }));
+        expect(aoMudar).toHaveBeenLastCalledWith("building", ICONES[3]);
+    });
+    it("defaultValue marca o escolhido; só ele entra na ordem de Tab", () => {
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, defaultValue: "file-lines" }));
+        expect(screen.getByRole("radio", { name: "file lines" })).toHaveAttribute("aria-checked", "true");
+        const comTab = radios().filter((r) => r.getAttribute("tabindex") === "0");
+        expect(comTab).toHaveLength(1);
+        expect(comTab[0]).toHaveAccessibleName("file lines");
+    });
+    it("sem valor, Tab entra no primeiro", () => {
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES }));
+        expect(radios()[0]).toHaveAttribute("tabindex", "0");
+    });
+    it("a busca filtra por nome, rótulo e palavras-chave, sem acento nem caixa", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES }));
+        const campo = screen.getByRole("searchbox", { name: "Buscar ícone" });
+        await usuario.type(campo, "PREFEITURA");
+        expect(radios()).toHaveLength(1);
+        expect(radios()[0]).toHaveAccessibleName("Prédio");
+        await usuario.clear(campo);
+        await usuario.type(campo, "juridico");
+        expect(radios().map((r) => r.getAttribute("aria-label"))).toEqual(["Martelo"]);
+        await usuario.clear(campo);
+        await usuario.type(campo, "fol");
+        expect(radios().map((r) => r.getAttribute("aria-label"))).toEqual(["folder"]);
+    });
+    it("a quantidade de resultados é anunciada e resultsLabel traduz", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, resultsLabel: "{count} icons" }));
+        expect(screen.getByRole("status")).toHaveTextContent("5 icons");
+        await usuario.type(screen.getByRole("searchbox"), "user");
+        expect(screen.getByRole("status")).toHaveTextContent("1 icons");
+    });
+    it("sem resultado mostra o texto e some a grade", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, emptyText: "Nada por aqui" }));
+        await usuario.type(screen.getByRole("searchbox"), "zzz");
+        expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+        expect(screen.queryByRole("radiogroup")).toBeNull();
+    });
+    it("setas movem a escolha e o foco; cima e baixo andam uma linha (columns)", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, columns: 2, defaultValue: "user", onChange: aoMudar }));
+        radios()[0].focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(aoMudar).toHaveBeenLastCalledWith("folder", faFolder);
+        expect(radios()[1]).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(radios()[3]).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(radios()[1]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(radios()[4]).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(radios()[0]).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(radios()[4]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(radios()[0]).toHaveFocus();
+    });
+    it("seta para baixo no campo de busca leva à grade", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, defaultValue: "folder" }));
+        await usuario.click(screen.getByRole("searchbox"));
+        await usuario.keyboard("{ArrowDown}");
+        expect(screen.getByRole("radio", { name: "folder" })).toHaveFocus();
+    });
+    it("hideSearch tira o campo; disabled desabilita tudo", () => {
+        const { rerender } = render(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, hideSearch: true }));
+        expect(screen.queryByRole("searchbox")).toBeNull();
+        rerender(_jsx(IconPicker, { ariaLabel: "x", icons: ICONES, disabled: true }));
+        for (const r of radios())
+            expect(r).toBeDisabled();
+    });
+    it("textos da busca por prop; label visível nomeia o grupo; columns vira o grid", () => {
+        const { container } = render(_jsx(IconPicker, { label: "\u00CDcone", id: "ip", icons: ICONES, searchLabel: "Search icon", searchPlaceholder: "Search...", columns: 4, maxHeight: 120 }));
+        expect(screen.getByRole("radiogroup", { name: "Ícone" })).toBeInTheDocument();
+        expect(screen.getByRole("searchbox", { name: "Search icon" })).toHaveAttribute("placeholder", "Search...");
+        const grade = container.querySelector(".umds-icon-picker__grid");
+        expect(grade.style.gridTemplateColumns).toBe("repeat(4, var(--umds-icon-picker-tile))");
+        expect(grade.style.maxHeight).toBe("120px");
+    });
+    it("controlado: reflete o value", () => {
+        function Pai() {
+            const [valor, setValor] = useState("gavel");
+            return _jsx(IconPicker, { ariaLabel: "x", icons: ICONES, value: valor, onChange: setValor });
+        }
+        render(_jsx(Pai, {}));
+        expect(screen.getByRole("radio", { name: "Martelo" })).toHaveAttribute("aria-checked", "true");
+    });
+});

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

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

package/dist/teste/InputMascaraEAfins.test.js

@@ -0,0 +1,99 @@
+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 userEvent from "@testing-library/user-event";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import Input from "../components/Input/Input";
+describe("Input · onChange a cada tecla, uma vez só", () => {
+    it("digitar chama onChange uma vez por tecla, com o valor novo", async () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Nome", onChange: aoMudar }));
+        await userEvent.type(screen.getByLabelText("Nome"), "ab");
+        expect(aoMudar.mock.calls.map((c) => c[0])).toEqual(["a", "ab"]);
+    });
+    it("change disparado à mão também chega (testes de quem consome)", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Nome", onChange: aoMudar }));
+        fireEvent.change(screen.getByLabelText("Nome"), { target: { value: "xyz" } });
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+        expect(aoMudar).toHaveBeenCalledWith("xyz");
+    });
+    it("onBlur continua sendo o evento de saída do campo", async () => {
+        const aoSair = vi.fn();
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Nome", onBlur: aoSair, onChange: aoMudar }));
+        const campo = screen.getByLabelText("Nome");
+        await userEvent.type(campo, "a");
+        expect(aoSair).not.toHaveBeenCalled();
+        await userEvent.tab();
+        expect(aoSair).toHaveBeenCalledTimes(1);
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Input · mask", () => {
+    async function digitar(mask, texto) {
+        const aoMudar = vi.fn();
+        render(_jsx(Input, { label: "Campo", mask: mask, onChange: aoMudar }));
+        const campo = screen.getByLabelText("Campo");
+        await userEvent.type(campo, texto);
+        return { campo, aoMudar };
+    }
+    it("cpf", async () => {
+        const { campo, aoMudar } = await digitar("cpf", "12345678901");
+        expect(campo.value).toBe("123.456.789-01");
+        expect(aoMudar).toHaveBeenLastCalledWith("123.456.789-01");
+    });
+    it("cnpj", async () => {
+        const { campo } = await digitar("cnpj", "12345678000190");
+        expect(campo.value).toBe("12.345.678/0001-90");
+    });
+    it("cep", async () => {
+        const { campo } = await digitar("cep", "80010000");
+        expect(campo.value).toBe("80010-000");
+    });
+    it("phone troca de formato com 10 ou 11 dígitos", async () => {
+        expect((await digitar("phone", "4133334444")).campo.value).toBe("(41) 3333-4444");
+    });
+    it("phone de 11 dígitos", async () => {
+        expect((await digitar("phone", "41999998888")).campo.value).toBe("(41) 99999-8888");
+    });
+    it("ignora letras e passa do tamanho, sem estourar", async () => {
+        const { campo } = await digitar("cpf", "12a3.4b5-678901999");
+        expect(campo.value).toBe("123.456.789-01");
+    });
+    it("valor controlado com dígitos aparece formatado", () => {
+        render(_jsx(Input, { label: "CPF", mask: "cpf", value: "12345678901", onChange: () => { } }));
+        expect(screen.getByLabelText("CPF").value).toBe("123.456.789-01");
+    });
+    it("abre o teclado numérico e limita o tamanho; sem máscara, nenhum dos dois", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Input, { label: "Com", mask: "cep" }), _jsx(Input, { label: "Sem" })] }));
+        expect(screen.getByLabelText("Com")).toHaveAttribute("inputmode", "numeric");
+        expect(screen.getByLabelText("Com")).toHaveAttribute("maxlength", "9");
+        expect(screen.getByLabelText("Sem")).not.toHaveAttribute("inputmode");
+        expect(screen.getByLabelText("Sem")).not.toHaveAttribute("maxlength");
+    });
+});
+describe("Input · iconRight e borderless", () => {
+    it("iconRight é decorativo: aparece, não é botão e fica fora da árvore de acessibilidade", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "N\u00FAmero", iconRight: faMagnifyingGlass }));
+        const icone = container.querySelector(".umds-input__icon-right");
+        expect(icone).not.toBeNull();
+        expect(icone).toHaveAttribute("aria-hidden", "true");
+        expect(icone.querySelector("svg")).not.toBeNull();
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("sem iconRight não há ícone à direita", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "x" }));
+        expect(container.querySelector(".umds-input__icon-right")).toBeNull();
+    });
+    it("borderless escreve a classe; sem a prop não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Input, { ariaLabel: "a", borderless: true }), _jsx(Input, { ariaLabel: "b" })] }));
+        expect(container.children[0]).toHaveClass("umds-input--borderless");
+        expect(container.children[1]).not.toHaveClass("umds-input--borderless");
+    });
+    it("borderless com erro continua marcando o erro", () => {
+        const { container } = render(_jsx(Input, { ariaLabel: "a", borderless: true, errorMessage: "Obrigat\u00F3rio" }));
+        expect(container.firstElementChild).toHaveClass("umds-input--borderless", "umds-input--error");
+        expect(screen.getByLabelText("a")).toHaveAttribute("aria-invalid", "true");
+    });
+});

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

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

package/dist/teste/KbdCodeBlock.test.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Kbd from "../components/Kbd/Kbd";
+import CodeBlock from "../components/CodeBlock/CodeBlock";
+describe("Kbd", () => {
+    it("uma tecla é um kbd com o texto", () => {
+        const { container } = render(_jsx(Kbd, { children: "Esc" }));
+        const tecla = container.querySelector("kbd");
+        expect(tecla).toHaveTextContent("Esc");
+        expect(tecla).toHaveClass("umds-kbd", "umds-kbd--md");
+        expect(container.querySelectorAll("kbd")).toHaveLength(1);
+    });
+    it("keys desenha uma tecla por item, com o separador entre elas", () => {
+        const { container } = render(_jsx(Kbd, { keys: ["Ctrl", "Shift", "P"] }));
+        const conjunto = container.querySelector("kbd.umds-kbd-combo");
+        expect(conjunto).not.toBeNull();
+        expect(conjunto.querySelectorAll("kbd.umds-kbd")).toHaveLength(3);
+        expect(conjunto.textContent).toBe("Ctrl+Shift+P");
+    });
+    it("separator troca o texto entre as teclas; size vira classe", () => {
+        const { container } = render(_jsx(Kbd, { keys: ["Ctrl", "K"], separator: " + ", size: "sm" }));
+        expect(container.querySelector("kbd")).toHaveClass("umds-kbd--sm");
+        expect(container.textContent).toBe("Ctrl + K");
+    });
+    it("atributos HTML vão para o kbd", () => {
+        const { container } = render(_jsx(Kbd, { title: "Atalho", "data-x": "1", children: "Tab" }));
+        const tecla = container.querySelector("kbd");
+        expect(tecla).toHaveAttribute("title", "Atalho");
+        expect(tecla).toHaveAttribute("data-x", "1");
+    });
+});
+describe("CodeBlock", () => {
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    it("mostra o código em pre/code, mantendo as quebras, numa região focável e nomeada", () => {
+        const { container } = render(_jsx(CodeBlock, { code: '{\n  "ok": true\n}', ariaLabel: "Resposta" }));
+        const regiao = screen.getByRole("region", { name: "Resposta" });
+        expect(regiao.tagName).toBe("PRE");
+        expect(regiao).toHaveAttribute("tabindex", "0");
+        expect(container.querySelector("code")?.textContent).toBe('{\n  "ok": true\n}');
+    });
+    it("o texto também vem como conteúdo; o nome padrão é a linguagem, ou Código", () => {
+        const { rerender } = render(_jsx(CodeBlock, { language: "JSON", children: "{}" }));
+        expect(screen.getByRole("region", { name: "JSON" })).toHaveTextContent("{}");
+        expect(screen.getByText("JSON", { selector: ".umds-code-block__language" })).toBeInTheDocument();
+        rerender(_jsx(CodeBlock, { code: "x" }));
+        expect(screen.getByRole("region", { name: "Código" })).toBeInTheDocument();
+    });
+    it("wrap e maxHeight", () => {
+        const { container } = render(_jsx(CodeBlock, { code: "linha longa", wrap: true, maxHeight: 120 }));
+        expect(container.querySelector(".umds-code-block--wrap")).not.toBeNull();
+        expect(container.querySelector("pre").style.maxHeight).toBe("120px");
+    });
+    it("sem copyable e sem linguagem, não há cabeçalho nem botão", () => {
+        render(_jsx(CodeBlock, { code: "x" }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("copiar manda o texto inteiro à área de transferência, confirma e volta depois de 2 s", async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        const escrever = vi.fn(() => Promise.resolve());
+        const aoCopiar = vi.fn();
+        const usuario = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        // O userEvent.setup instala a própria área de transferência: o espião entra depois.
+        Object.defineProperty(navigator, "clipboard", { value: { writeText: escrever }, configurable: true });
+        render(_jsx(CodeBlock, { code: '{"a":1}', copyable: true, onCopy: aoCopiar }));
+        await usuario.click(screen.getByRole("button", { name: "Copiar" }));
+        expect(escrever).toHaveBeenCalledWith('{"a":1}');
+        expect(await screen.findByRole("button", { name: "Copiado" })).toBeInTheDocument();
+        expect(aoCopiar).toHaveBeenCalledWith('{"a":1}');
+        expect(screen.getByRole("status")).toHaveTextContent("Copiado");
+        await act(async () => {
+            vi.advanceTimersByTime(2100);
+        });
+        expect(screen.getByRole("button", { name: "Copiar" })).toBeInTheDocument();
+    });
+    it("copiar com o texto vindo como conteúdo lê o texto do bloco", async () => {
+        const escrever = vi.fn(() => Promise.resolve());
+        const usuario = userEvent.setup();
+        Object.defineProperty(navigator, "clipboard", { value: { writeText: escrever }, configurable: true });
+        render(_jsx(CodeBlock, { copyable: true, children: "npm run build" }));
+        await usuario.click(screen.getByRole("button", { name: "Copiar" }));
+        expect(escrever).toHaveBeenCalledWith("npm run build");
+    });
+    it("copyLabel e copiedLabel por prop", async () => {
+        const usuario = userEvent.setup();
+        Object.defineProperty(navigator, "clipboard", { value: { writeText: () => Promise.resolve() }, configurable: true });
+        render(_jsx(CodeBlock, { code: "x", copyable: true, copyLabel: "Copy", copiedLabel: "Copied" }));
+        await usuario.click(screen.getByRole("button", { name: "Copy" }));
+        expect(await screen.findByRole("button", { name: "Copied" })).toBeInTheDocument();
+    });
+});

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

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