@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/teste/StatCardRotuloTopo.test.js

@@ -0,0 +1,34 @@
+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 StatCard from "../components/StatCard/StatCard";
+const raiz = (c) => c.firstElementChild;
+describe("StatCard · labelPosition", () => {
+    it("top escreve a classe; sem a prop o cartão é o de antes", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", labelPosition: "top" }), _jsx(StatCard, { value: 44, label: "N\u00E3o lidos" })] }));
+        expect(container.children[0]).toHaveClass("umds-stat-card--rotulo-topo");
+        expect(container.children[1]).not.toHaveClass("umds-stat-card--rotulo-topo");
+    });
+    it("o número continua antes do rótulo no HTML (ordem do leitor de tela)", () => {
+        const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", labelPosition: "top" }));
+        const valor = container.querySelector(".umds-stat-card__valor");
+        const rotulo = container.querySelector(".umds-stat-card__rotulo");
+        expect(valor.compareDocumentPosition(rotulo) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+});
+describe("StatCard · infoTooltip", () => {
+    it("mostra o ⓘ como botão nomeado, dentro do rótulo, descrito pelo texto de ajuda", () => {
+        const { container } = render(_jsx(StatCard, { value: 44, label: "N\u00E3o lidos", infoTooltip: "Ainda n\u00E3o abertos por voc\u00EA." }));
+        const info = screen.getByRole("button", { name: "Mais informações" });
+        expect(container.querySelector(".umds-stat-card__rotulo")?.contains(info)).toBe(true);
+        expect(info).toHaveAccessibleDescription("Ainda não abertos por você.");
+    });
+    it("infoLabel traduz o nome do ⓘ", () => {
+        render(_jsx(StatCard, { value: 1, label: "Unread", infoTooltip: "Not opened yet.", infoLabel: "More info" }));
+        expect(screen.getByRole("button", { name: "More info" })).toBeInTheDocument();
+    });
+    it("sem infoTooltip não há botão", () => {
+        render(_jsx(StatCard, { value: 1, label: "x" }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+});

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

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

package/dist/teste/TabsContadorFechavel.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Tabs from "../components/Tabs/Tabs";
+import Tab from "../components/Tabs/Tab";
+describe("Tab · count", () => {
+    it("mostra o contador em pílula e ele entra no nome da aba", () => {
+        render(_jsxs(Tabs, { value: "0", ariaLabel: "Tarefas", children: [_jsx(Tab, { label: "Todas", index: "0", count: 31 }), _jsx(Tab, { label: "Atribu\u00EDdas", index: "1", count: 9 })] }));
+        expect(screen.getByRole("tab", { name: "Todas 31" })).toBeInTheDocument();
+        expect(screen.getByRole("tab", { name: "Atribuídas 9" })).toBeInTheDocument();
+    });
+    it("o 0 aparece; sem count, não há pílula", () => {
+        const { container } = render(_jsxs(Tabs, { value: "0", children: [_jsx(Tab, { label: "Conclu\u00EDdas", index: "0", count: 0 }), _jsx(Tab, { label: "Sem contador", index: "1" })] }));
+        const pilulas = container.querySelectorAll(".umds-tabs__count");
+        expect(pilulas).toHaveLength(1);
+        expect(pilulas[0].textContent).toBe("0");
+    });
+    it("a pílula fica dentro da aba selecionada (que a pinta de azul pelo CSS)", () => {
+        const { container } = render(_jsxs(Tabs, { value: "1", children: [_jsx(Tab, { label: "A", index: "0", count: 1 }), _jsx(Tab, { label: "B", index: "1", count: 2 })] }));
+        const selecionada = container.querySelector(".umds-tabs__tab--selected");
+        expect(selecionada?.querySelector(".umds-tabs__count")?.textContent).toBe("2");
+    });
+});
+describe("Tab · closable", () => {
+    it("o × é um botão irmão da aba, com o nome 'Fechar <aba>'", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "Documento 1", index: "0", closable: true }) }));
+        const fechar = screen.getByRole("button", { name: "Fechar Documento 1" });
+        const aba = screen.getByRole("tab");
+        expect(aba.contains(fechar)).toBe(false);
+        expect(fechar.parentElement).toBe(aba.parentElement);
+    });
+    it("o rótulo do × vem por prop", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "Doc 1", index: "0", closable: true, closeLabel: "Close" }) }));
+        expect(screen.getByRole("button", { name: "Close Doc 1" })).toBeInTheDocument();
+    });
+    it("clicar no × chama onClose com o index e não troca de aba", () => {
+        const aoFechar = vi.fn();
+        const aoTrocar = vi.fn();
+        render(_jsxs(Tabs, { value: "0", onChange: aoTrocar, children: [_jsx(Tab, { label: "Um", index: "0" }), _jsx(Tab, { label: "Dois", index: "1", closable: true, onClose: aoFechar })] }));
+        fireEvent.click(screen.getByRole("button", { name: "Fechar Dois" }));
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+        expect(aoFechar.mock.calls[0][0]).toBe("1");
+        expect(aoTrocar).not.toHaveBeenCalled();
+    });
+    it("Delete na aba focada fecha; sem closable, não", () => {
+        const aoFechar = vi.fn();
+        render(_jsxs(Tabs, { value: "0", children: [_jsx(Tab, { label: "Fech\u00E1vel", index: "0", closable: true, onClose: aoFechar }), _jsx(Tab, { label: "Fixa", index: "1", onClose: aoFechar })] }));
+        fireEvent.keyDown(screen.getByRole("tab", { name: "Fechável" }), { key: "Delete" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+        fireEvent.keyDown(screen.getByRole("tab", { name: "Fixa" }), { key: "Delete" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("sem closable não há ×", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "Fixa", index: "0" }) }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("o tablist só tem abas como filhas de papel (o × não é tab)", () => {
+        render(_jsxs(Tabs, { value: "0", children: [_jsx(Tab, { label: "A", index: "0", closable: true }), _jsx(Tab, { label: "B", index: "1", closable: true })] }));
+        expect(screen.getAllByRole("tab")).toHaveLength(2);
+    });
+});
+describe("Tabs · onAdd", () => {
+    it("mostra o + fora do tablist e chama onAdd", () => {
+        const aoAdicionar = vi.fn();
+        render(_jsx(Tabs, { value: "0", onAdd: aoAdicionar, children: _jsx(Tab, { label: "A", index: "0" }) }));
+        const mais = screen.getByRole("button", { name: "Adicionar aba" });
+        expect(screen.getByRole("tablist").contains(mais)).toBe(false);
+        fireEvent.click(mais);
+        expect(aoAdicionar).toHaveBeenCalledTimes(1);
+    });
+    it("o rótulo do + vem por prop", () => {
+        render(_jsx(Tabs, { value: "0", onAdd: () => { }, addLabel: "New tab", children: _jsx(Tab, { label: "A", index: "0" }) }));
+        expect(screen.getByRole("button", { name: "New tab" })).toBeInTheDocument();
+    });
+    it("sem onAdd não há botão", () => {
+        render(_jsx(Tabs, { value: "0", children: _jsx(Tab, { label: "A", index: "0" }) }));
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+});

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

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

package/dist/teste/TooltipDark.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import Tooltip from "../components/Tooltip/Tooltip";
+async function abrir(ui) {
+    render(ui);
+    screen.getByRole("button").focus();
+    await waitFor(() => expect(screen.getByRole("tooltip")).toHaveClass("umds-tooltip__bubble--open"));
+    return screen.getByRole("tooltip");
+}
+describe("Tooltip · variant dark e maxWidth", () => {
+    it("dark escreve a classe no balão e no wrapper flutuante", async () => {
+        const balao = await abrir(_jsx(Tooltip, { content: "Atualizar", variant: "dark", children: _jsx("button", { type: "button", children: "Atualizar" }) }));
+        expect(balao).toHaveClass("umds-tooltip__bubble--dark");
+        expect(balao.parentElement).toHaveClass("umds-tooltip__floating--dark");
+    });
+    it("sem variant o balão é o padrão", async () => {
+        const balao = await abrir(_jsx(Tooltip, { content: "Atualizar", children: _jsx("button", { type: "button", children: "Atualizar" }) }));
+        expect(balao).not.toHaveClass("umds-tooltip__bubble--dark");
+        expect(balao.parentElement).not.toHaveClass("umds-tooltip__floating--dark");
+        expect(balao.parentElement?.style.maxWidth).toBe("");
+    });
+    it("maxWidth vai ao wrapper flutuante, em qualquer variante", async () => {
+        const balao = await abrir(_jsx(Tooltip, { content: "Texto longo", variant: "dark", maxWidth: "140px", children: _jsx("button", { type: "button", children: "x" }) }));
+        expect(balao.parentElement?.style.maxWidth).toBe("140px");
+    });
+    it("a descrição acessível não muda com a variante", () => {
+        render(_jsx(Tooltip, { content: "Atualizar", variant: "dark", children: _jsx("button", { type: "button", children: "Recarregar" }) }));
+        expect(screen.getByRole("button")).toHaveAccessibleDescription("Atualizar");
+    });
+});

package/dist/utils/calendario.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Datas do `Calendar`, em ISO local (`YYYY-MM-DD`) e sem biblioteca.
+ *
+ * Tudo aqui trabalha com o DIA como texto: `"2026-05-15"`. O `Date` só aparece
+ * por dentro, sempre à meia-noite LOCAL (`new Date(ano, mes, dia)`), nunca
+ * `new Date("2026-05-15")`, que o JavaScript lê como UTC e, no fuso do Brasil,
+ * devolve o dia anterior.
+ */
+/** `Date` local → `YYYY-MM-DD`. */
+export declare const toIso: (data: Date) => string;
+/** `YYYY-MM-DD` → `Date` à meia-noite local. */
+export declare const parseIso: (iso: string) => Date;
+/** Aceita `Date` ou texto (`2026-05-15` e `2026-05-15T10:00`) e devolve `YYYY-MM-DD`; "" se não der. */
+export declare const normalizeIso: (valor: any) => string;
+export declare const addDays: (iso: string, dias: number) => string;
+/** Soma meses mantendo o dia, ou o último dia do mês de chegada (31/01 + 1 mês = 28/02). */
+export declare const addMonths: (iso: string, meses: number) => string;
+/** Dia da semana: 0 = domingo. */
+export declare const weekdayOf: (iso: string) => number;
+/** Primeiro dia da semana que contém `iso`, dado o dia em que a semana começa (0 = domingo, 1 = segunda). */
+export declare const startOfWeek: (iso: string, comecaEm: number) => string;
+export declare const startOfMonth: (iso: string) => string;
+export declare const endOfMonth: (iso: string) => string;
+export declare const isSameMonth: (a: string, b: string) => boolean;
+/** Os sete dias da semana que contém `iso`. */
+export declare const weekDays: (iso: string, comecaEm: number) => string[];
+/** O mês de `iso` em semanas inteiras (de 4 a 6 linhas), com os dias dos meses vizinhos que completam as pontas. */
+export declare const monthMatrix: (iso: string, comecaEm: number) => string[][];

package/dist/utils/calendario.js

@@ -0,0 +1,73 @@
+/**
+ * Datas do `Calendar`, em ISO local (`YYYY-MM-DD`) e sem biblioteca.
+ *
+ * Tudo aqui trabalha com o DIA como texto: `"2026-05-15"`. O `Date` só aparece
+ * por dentro, sempre à meia-noite LOCAL (`new Date(ano, mes, dia)`), nunca
+ * `new Date("2026-05-15")`, que o JavaScript lê como UTC e, no fuso do Brasil,
+ * devolve o dia anterior.
+ */
+const doisDigitos = (n) => n < 10 ? "0" + n : String(n);
+/** `Date` local → `YYYY-MM-DD`. */
+export const toIso = (data) => data.getFullYear() + "-" + doisDigitos(data.getMonth() + 1) + "-" + doisDigitos(data.getDate());
+/** `YYYY-MM-DD` → `Date` à meia-noite local. */
+export const parseIso = (iso) => {
+    const partes = iso.slice(0, 10).split("-");
+    return new Date(Number(partes[0]), Number(partes[1]) - 1, Number(partes[2]));
+};
+/** Aceita `Date` ou texto (`2026-05-15` e `2026-05-15T10:00`) e devolve `YYYY-MM-DD`; "" se não der. */
+export const normalizeIso = (valor) => {
+    if (!valor)
+        return "";
+    if (typeof valor === "string")
+        return /^\d{4}-\d{2}-\d{2}/.test(valor) ? valor.slice(0, 10) : "";
+    if (valor instanceof Date && !isNaN(valor.getTime()))
+        return toIso(valor);
+    return "";
+};
+export const addDays = (iso, dias) => {
+    const data = parseIso(iso);
+    data.setDate(data.getDate() + dias);
+    return toIso(data);
+};
+/** Soma meses mantendo o dia, ou o último dia do mês de chegada (31/01 + 1 mês = 28/02). */
+export const addMonths = (iso, meses) => {
+    const data = parseIso(iso);
+    const dia = data.getDate();
+    data.setDate(1);
+    data.setMonth(data.getMonth() + meses);
+    const ultimo = new Date(data.getFullYear(), data.getMonth() + 1, 0).getDate();
+    data.setDate(Math.min(dia, ultimo));
+    return toIso(data);
+};
+/** Dia da semana: 0 = domingo. */
+export const weekdayOf = (iso) => parseIso(iso).getDay();
+/** Primeiro dia da semana que contém `iso`, dado o dia em que a semana começa (0 = domingo, 1 = segunda). */
+export const startOfWeek = (iso, comecaEm) => {
+    const recuo = (weekdayOf(iso) - comecaEm + 7) % 7;
+    return addDays(iso, -recuo);
+};
+export const startOfMonth = (iso) => iso.slice(0, 8) + "01";
+export const endOfMonth = (iso) => {
+    const data = parseIso(iso);
+    return toIso(new Date(data.getFullYear(), data.getMonth() + 1, 0));
+};
+export const isSameMonth = (a, b) => a.slice(0, 7) === b.slice(0, 7);
+/** Os sete dias da semana que contém `iso`. */
+export const weekDays = (iso, comecaEm) => {
+    const inicio = startOfWeek(iso, comecaEm);
+    const dias = [];
+    for (let i = 0; i < 7; i++)
+        dias.push(addDays(inicio, i));
+    return dias;
+};
+/** O mês de `iso` em semanas inteiras (de 4 a 6 linhas), com os dias dos meses vizinhos que completam as pontas. */
+export const monthMatrix = (iso, comecaEm) => {
+    const ultimo = endOfMonth(iso);
+    let cursor = startOfWeek(startOfMonth(iso), comecaEm);
+    const semanas = [];
+    while (cursor <= ultimo) {
+        semanas.push(weekDays(cursor, comecaEm));
+        cursor = addDays(cursor, 7);
+    }
+    return semanas;
+};

package/dist/utils/html-seguro.d.ts

@@ -0,0 +1,27 @@
+/**
+ * HTML seguro para o `RichTextEditor`.
+ *
+ * O editor devolve HTML (`onChange`) e recebe HTML (`value`). HTML que vem de
+ * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
+ * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
+ * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação e link.
+ *
+ * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
+ * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
+ * (servidor), devolve o texto escapado.
+ */
+/**
+ * Endereço de link que o editor aceita: `http:`, `https:`, `mailto:`, `tel:`,
+ * caminho (`/x`, `./x`, `../x`) ou âncora (`#x`). Devolve o endereço limpo, ou ""
+ * se for perigoso (`javascript:`, `data:`, `vbscript:`...).
+ */
+export declare const enderecoSeguro: (bruto: string) => string;
+/** Devolve o endereço pronto para `href`: o seguro como veio, ou `https://` + o texto quando não tem esquema. "" se perigoso ou vazio. */
+export declare const normalizarEndereco: (bruto: string) => string;
+/** Reduz `html` ao que o editor escreve. Sem DOM, devolve o texto escapado. */
+export declare const sanitizarHtml: (html: string) => string;
+/** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
+export declare const htmlVazio: (html: string) => boolean;
+/** O `<a>` que o editor escreve quando o link não tem texto escolhido: o endereço (já seguro) é o href e o texto. */
+export declare const htmlDoLink: (endereco: string) => string;

package/dist/utils/html-seguro.js

@@ -0,0 +1,97 @@
+/**
+ * HTML seguro para o `RichTextEditor`.
+ *
+ * O editor devolve HTML (`onChange`) e recebe HTML (`value`). HTML que vem de
+ * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
+ * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
+ * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação e link.
+ *
+ * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
+ * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
+ * (servidor), devolve o texto escapado.
+ */
+const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE"];
+const DESCARTADAS = ["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "TEMPLATE", "NOSCRIPT", "SVG", "MATH", "FORM", "INPUT", "BUTTON", "TEXTAREA", "SELECT"];
+const escapar = (texto) => texto.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+/**
+ * Endereço de link que o editor aceita: `http:`, `https:`, `mailto:`, `tel:`,
+ * caminho (`/x`, `./x`, `../x`) ou âncora (`#x`). Devolve o endereço limpo, ou ""
+ * se for perigoso (`javascript:`, `data:`, `vbscript:`...).
+ */
+export const enderecoSeguro = (bruto) => {
+    const texto = (bruto || "").trim();
+    if (!texto)
+        return "";
+    // Caracteres de controle e espaços no meio do esquema são o truque clássico (`java\nscript:`).
+    const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+    if (/^(https?:\/\/|mailto:|tel:|\/|\.\.?\/|#)/i.test(semControle))
+        return texto;
+    if (/^[a-z][a-z0-9+.-]*:/i.test(semControle))
+        return "";
+    return "";
+};
+/** Devolve o endereço pronto para `href`: o seguro como veio, ou `https://` + o texto quando não tem esquema. "" se perigoso ou vazio. */
+export const normalizarEndereco = (bruto) => {
+    const texto = (bruto || "").trim();
+    if (!texto)
+        return "";
+    const seguro = enderecoSeguro(texto);
+    if (seguro)
+        return seguro;
+    const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+    if (/^[a-z][a-z0-9+.-]*:/i.test(semControle))
+        return "";
+    return "https://" + texto;
+};
+const limparNo = (no, saida, documento) => {
+    const filhos = Array.prototype.slice.call(no.childNodes);
+    for (let i = 0; i < filhos.length; i++) {
+        const filho = filhos[i];
+        if (filho.nodeType === 3) {
+            saida.appendChild(documento.createTextNode(filho.nodeValue));
+            continue;
+        }
+        if (filho.nodeType !== 1)
+            continue;
+        const tag = String(filho.tagName).toUpperCase();
+        if (DESCARTADAS.indexOf(tag) !== -1)
+            continue;
+        if (PERMITIDAS.indexOf(tag) === -1) {
+            // Tag desconhecida: some a tag, fica o conteúdo.
+            limparNo(filho, saida, documento);
+            continue;
+        }
+        const novo = documento.createElement(tag.toLowerCase());
+        if (tag === "A") {
+            const href = enderecoSeguro(filho.getAttribute("href") || "");
+            if (href) {
+                novo.setAttribute("href", href);
+                novo.setAttribute("rel", "noopener noreferrer");
+            }
+        }
+        limparNo(filho, novo, documento);
+        saida.appendChild(novo);
+    }
+};
+/** Reduz `html` ao que o editor escreve. Sem DOM, devolve o texto escapado. */
+export const sanitizarHtml = (html) => {
+    const bruto = html || "";
+    if (typeof document === "undefined")
+        return escapar(bruto);
+    const molde = document.createElement("template");
+    molde.innerHTML = bruto;
+    const saida = document.createElement("div");
+    limparNo(molde.content, saida, document);
+    return saida.innerHTML;
+};
+/** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
+export const htmlVazio = (html) => {
+    const texto = (html || "").replace(/<br\s*\/?>/gi, "").replace(/<\/?(div|p|span)[^>]*>/gi, "").trim();
+    return texto === "";
+};
+/** O `<a>` que o editor escreve quando o link não tem texto escolhido: o endereço (já seguro) é o href e o texto. */
+export const htmlDoLink = (endereco) => {
+    const seguro = escapar(endereco);
+    return '<a href="' + seguro + '">' + seguro + "</a>";
+};

package/dist/utils/paleta-de-cores.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Paleta de cor categórica do 1DS: os primitivos `--umds-primitive-<família>-<tom>`.
+ *
+ * É a lista que o `ColorPicker` mostra por padrão. Ela existe como constante
+ * exportada para o app mapear o valor guardado (o nome do token) de volta para
+ * um rótulo, ou montar a própria lista a partir dela (`COLOR_PALETTE.filter(...)`).
+ *
+ * Primitivo não muda com o tema: é o certo para cor de DADO (marcador, tipo de
+ * documento, setor), que precisa ser a mesma no claro e no escuro. Para cor com
+ * PAPEL (primário, erro, sucesso) use os semânticos `--umds-semantic-color-*`,
+ * que não entram aqui.
+ */
+export type PaletteColor = {
+    /** Nome da variável CSS, ex.: `--umds-primitive-blue-pure`. Use como `var(${value})`. */
+    value: string;
+    /** Nome em português, ex.: "Azul escuro". */
+    label: string;
+    /** Família: blue, red, green, orange, yellow, purple ou gray. */
+    family: string;
+    /** Tom claro o bastante para o ícone de marcação sair escuro (contraste mínimo de 3:1). */
+    onLight: boolean;
+};
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export declare const COLOR_PALETTE: PaletteColor[];
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export declare const isHexColor: (texto: string) => boolean;

package/dist/utils/paleta-de-cores.js

@@ -0,0 +1,10 @@
+const cor = (family, tone, label, onLight) => ({
+    value: "--umds-primitive-" + family + "-" + tone,
+    label,
+    family,
+    onLight
+});
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export const COLOR_PALETTE = [cor("blue", "dark", "Azul escuro", false), cor("blue", "pure", "Azul", false), cor("blue", "medium", "Azul médio", false), cor("blue", "light", "Azul claro", true), cor("red", "dark", "Vermelho escuro", false), cor("red", "pure", "Vermelho", false), cor("red", "medium", "Vermelho médio", false), cor("red", "light", "Vermelho claro", true), cor("green", "dark", "Verde escuro", false), cor("green", "pure", "Verde", false), cor("green", "medium", "Verde médio", false), cor("green", "light", "Verde claro", true), cor("orange", "dark", "Laranja escuro", false), cor("orange", "pure", "Laranja", false), cor("orange", "medium", "Laranja médio", true), cor("orange", "light", "Laranja claro", true), cor("yellow", "dark", "Amarelo escuro", false), cor("yellow", "pure", "Amarelo", true), cor("yellow", "medium", "Amarelo médio", true), cor("yellow", "light", "Amarelo claro", true), cor("purple", "dark", "Roxo escuro", false), cor("purple", "pure", "Roxo", false), cor("purple", "medium", "Roxo médio", false), cor("purple", "light", "Roxo claro", true), cor("gray", "darkest", "Cinza muito escuro", false), cor("gray", "darker", "Cinza escuro", false), cor("gray", "dark", "Cinza", false), cor("gray", "medium", "Cinza médio", true), cor("gray", "light", "Cinza claro", true), cor("gray", "lighter", "Cinza mais claro", true), cor("gray", "lightest", "Cinza muito claro", true)];
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export const isHexColor = (texto) => /^#?[0-9a-fA-F]{6}$/.test((texto || "").trim());

package/dist/utils/texto.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export declare const semAcento: (texto: string) => string;

package/dist/utils/texto.js

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export const semAcento = (texto) => String(texto || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.8.0",
-    "@1doc/1ds-tokens": "0.4.3"
+    "@1doc/1ds-core": "2.9.0",
+    "@1doc/1ds-tokens": "0.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -5,6 +5,8 @@ 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";
 
@@ -12,6 +14,9 @@ export { library } from "@fortawesome/fontawesome-svg-core";
 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";
@@ -33,11 +38,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";
@@ -46,15 +53,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";
@@ -62,6 +75,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";
@@ -94,6 +108,9 @@ export { default as Tree } from "./components/Tree/Tree";
 export type * from "./components/Accordion/Accordion";
 export type * from "./components/AILabel/AILabel";
 export type * from "./components/AIContent/AIContent";
+export type * from "./components/Calendar/Calendar";
+export type * from "./components/Coachmark/Coachmark";
+export type * from "./components/CodeBlock/CodeBlock";
 export type * from "./components/ConfirmAIAction/ConfirmAIAction";
 export type * from "./components/Alert/Alert";
 export type * from "./components/AppHeader/AppHeader";
@@ -115,11 +132,13 @@ export type * from "./components/Button/Button";
 export type * from "./components/Card/Card";
 export type * from "./components/Checkbox/Checkbox";
 export type * from "./components/Chips/Chips";
+export type * from "./components/ColorPicker/ColorPicker";
 export type * from "./components/Combobox/Combobox";
 export type * from "./components/ConfirmDialog/ConfirmDialog";
 export type * from "./components/Container/Container";
 export type * from "./components/DataTable/DataTable";
 export type * from "./components/DatePicker/DatePicker";
+export type * from "./components/DescriptionList/DescriptionList";
 export type * from "./components/Divider/Divider";
 export type * from "./components/Chart/DonutChart";
 export type * from "./components/Drawer/Drawer";
@@ -128,15 +147,21 @@ export type * from "./components/EmptyState/EmptyState";
 export type * from "./components/FileInput/FileInput";
 export type * from "./components/Grid/Grid";
 export type * from "./components/Icon/Icon";
+export type * from "./components/IconPicker/IconPicker";
 export type * from "./components/Input/Input";
 export type * from "./components/Kanban/Kanban";
 export type * from "./components/Kanban/KanbanCard";
 export type * from "./components/Kanban/KanbanColumn";
+export type * from "./components/Kbd/Kbd";
 export type * from "./components/Link/Link";
 export type * from "./components/Chart/LineChart";
+export type * from "./components/List/List";
+export type * from "./components/List/ListItem";
 export type * from "./components/Logo/Logo";
 export type * from "./components/Modal/Modal";
 export type * from "./components/MultiSelect/MultiSelect";
+export type * from "./components/OrgChart/OrgChart";
+export type * from "./components/OtpInput/OtpInput";
 export type * from "./components/PageHeader/PageHeader";
 export type * from "./components/Pagination/Pagination";
 export type * from "./components/PhoneInput/PhoneInput";
@@ -144,6 +169,7 @@ export type * from "./components/Podium/Podium";
 export type * from "./components/ProgressBar/ProgressBar";
 export type * from "./components/Radio/Radio";
 export type * from "./components/Radio/RadioGroup";
+export type * from "./components/RichTextEditor/RichTextEditor";
 export type * from "./components/SegmentedControl/SegmentedControl";
 export type * from "./components/Select/Select";
 export type * from "./components/SidePanel/SidePanel";

package/src/teste/AILabel.test.tsx

@@ -0,0 +1,41 @@
+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(<AILabel explanation="Resumo dos despachos." defaultOpen />);
+    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(
+      <AILabel explanation="Resumo." defaultOpen 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(<AILabel explanation="Resumo." />);
+    expect(screen.queryByRole("region")).not.toBeInTheDocument();
+  });
+
+  it("`open` controlado vence o defaultOpen", () => {
+    render(<AILabel explanation="Resumo." defaultOpen open={false} />);
+    expect(screen.queryByRole("region")).not.toBeInTheDocument();
+  });
+});