@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/index.js

@@ -4,12 +4,17 @@ export * from "./utils/theme";
 export * from "./utils/toast";
 // Densidade global (modo touch ≥44px via data-density)
 export * from "./utils/density";
+// Paleta de cor categórica (primitivos) do ColorPicker
+export * from "./utils/paleta-de-cores";
 // FontAwesome
 export { library } from "@fortawesome/fontawesome-svg-core";
 // Components
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as AILabel } from "./components/AILabel/AILabel";
 export { default as AIContent } from "./components/AIContent/AIContent";
+export { default as Calendar } from "./components/Calendar/Calendar";
+export { default as Coachmark } from "./components/Coachmark/Coachmark";
+export { default as CodeBlock } from "./components/CodeBlock/CodeBlock";
 export { default as ConfirmAIAction } from "./components/ConfirmAIAction/ConfirmAIAction";
 export { default as Alert } from "./components/Alert/Alert";
 export { default as AppHeader } from "./components/AppHeader/AppHeader";
@@ -31,11 +36,13 @@ export { default as Button } from "./components/Button/Button";
 export { default as Card } from "./components/Card/Card";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as Chips } from "./components/Chips/Chips";
+export { default as ColorPicker } from "./components/ColorPicker/ColorPicker";
 export { default as Combobox } from "./components/Combobox/Combobox";
 export { default as ConfirmDialog } from "./components/ConfirmDialog/ConfirmDialog";
 export { default as Container } from "./components/Container/Container";
 export { default as DataTable } from "./components/DataTable/DataTable";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as DescriptionList } from "./components/DescriptionList/DescriptionList";
 export { default as Divider } from "./components/Divider/Divider";
 export { default as DonutChart } from "./components/Chart/DonutChart";
 export { default as Drawer } from "./components/Drawer/Drawer";
@@ -44,15 +51,21 @@ export { default as EmptyState } from "./components/EmptyState/EmptyState";
 export { default as FileInput } from "./components/FileInput/FileInput";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as Icon } from "./components/Icon/Icon";
+export { default as IconPicker } from "./components/IconPicker/IconPicker";
 export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";
+export { default as List } from "./components/List/List";
+export { default as ListItem } from "./components/List/ListItem";
 export { default as Logo } from "./components/Logo/Logo";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export { default as OrgChart } from "./components/OrgChart/OrgChart";
+export { default as OtpInput } from "./components/OtpInput/OtpInput";
 export { default as PageHeader } from "./components/PageHeader/PageHeader";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as PhoneInput } from "./components/PhoneInput/PhoneInput";
@@ -60,6 +73,7 @@ export { default as Podium } from "./components/Podium/Podium";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/Radio/RadioGroup";
+export { default as RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export { default as Select } from "./components/Select/Select";
 export { default as SidePanel } from "./components/SidePanel/SidePanel";

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

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

package/dist/teste/AILabel.test.js

@@ -0,0 +1,33 @@
+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 AILabel from "../components/AILabel/AILabel";
+/**
+ * `defaultOpen` era declarado e documentado, mas nunca lido: o painel nascia
+ * fechado de qualquer jeito, e a story "Em inglês" usava `open` (controlado)
+ * para contornar — o que travava o clique.
+ */
+describe("AILabel · defaultOpen", () => {
+    it("abre o painel na montagem", () => {
+        render(_jsx(AILabel, { explanation: "Resumo dos despachos.", defaultOpen: true }));
+        expect(screen.getByRole("region")).toHaveTextContent("Resumo dos despachos.");
+        expect(screen.getByRole("button", { name: "Conteúdo gerado por IA" })).toHaveAttribute("aria-expanded", "true");
+    });
+    it("continua não-controlado: o clique fecha e avisa", async () => {
+        const usuario = userEvent.setup();
+        const onOpenChange = vi.fn();
+        render(_jsx(AILabel, { explanation: "Resumo.", defaultOpen: true, onOpenChange: onOpenChange }));
+        await usuario.click(screen.getByRole("button", { name: "Conteúdo gerado por IA" }));
+        expect(screen.queryByRole("region")).not.toBeInTheDocument();
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+    it("sem defaultOpen nasce fechado", () => {
+        render(_jsx(AILabel, { explanation: "Resumo." }));
+        expect(screen.queryByRole("region")).not.toBeInTheDocument();
+    });
+    it("`open` controlado vence o defaultOpen", () => {
+        render(_jsx(AILabel, { explanation: "Resumo.", defaultOpen: true, open: false }));
+        expect(screen.queryByRole("region")).not.toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/AccordionConteudoLivre.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+describe("Accordion · conteúdo livre por item (React)", () => {
+    it("o content do item aceita qualquer nó (campos, botões)", () => {
+        render(_jsx(Accordion, { items: [
+                {
+                    id: "s1",
+                    title: "Seção 01",
+                    defaultOpen: true,
+                    content: (_jsxs("label", { children: ["Nome ", _jsx("input", { defaultValue: "Maria" })] })),
+                },
+                { id: "s2", title: "Seção 02", content: _jsx("button", { type: "button", children: "Anexar arquivo" }) },
+            ] }));
+        expect(screen.getByDisplayValue("Maria")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Anexar arquivo", hidden: true })).toBeInTheDocument();
+    });
+    it("o título do item é o botão do painel, sem cor própria (herda a neutra do gatilho)", () => {
+        const { container } = render(_jsx(Accordion, { items: [{ id: "a", title: "Seção", content: "x" }] }));
+        const titulo = container.querySelector(".umds-accordion__title");
+        expect(titulo.closest("button")).toHaveClass("umds-accordion__trigger");
+        expect(titulo.getAttribute("style")).toBeNull();
+    });
+    it("o texto simples continua funcionando", () => {
+        render(_jsx(Accordion, { items: [{ id: "a", title: "Seção", content: "Texto do painel", defaultOpen: true }] }));
+        expect(screen.getByText("Texto do painel")).toBeInTheDocument();
+    });
+});

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

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

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/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/BadgeTag.test.d.ts

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

package/dist/teste/BadgeTag.test.js

@@ -0,0 +1,42 @@
+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");
+    });
+});

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 {};