@1doc/1ds-react 2.7.2 → 2.9.0

package/src/teste/Tooltip.test.tsx

@@ -0,0 +1,219 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import Tooltip from "../components/Tooltip/Tooltip";
+import Modal from "../components/Modal/Modal";
+import Drawer from "../components/Drawer/Drawer";
+
+/**
+ * O Tooltip embrulha o gatilho num <span> que não recebe foco. O
+ * `aria-describedby` morava nesse span — e o leitor de tela lê a descrição
+ * de quem tem o FOCO, o botão. O texto nunca era anunciado. Estes testes
+ * guardam que a descrição chega ao elemento focável, que o foco abre a
+ * bolha e que o Esc a fecha.
+ */
+
+describe("Tooltip · descrição no elemento focável", () => {
+  it("o botão dentro do Tooltip é descrito pelo texto", () => {
+    render(
+      <Tooltip content="Salva o documento atual">
+        <button type="button">Salvar</button>
+      </Tooltip>,
+    );
+    expect(screen.getByRole("button", { name: "Salvar" })).toHaveAccessibleDescription(
+      "Salva o documento atual",
+    );
+  });
+
+  it("título e conteúdo entram os dois na descrição", () => {
+    render(
+      <Tooltip title="Atalho" content="Ctrl+S">
+        <button type="button">Salvar</button>
+      </Tooltip>,
+    );
+    expect(screen.getByRole("button")).toHaveAccessibleDescription(
+      "Atalho Ctrl+S",
+    );
+  });
+
+  it("soma ao aria-describedby que o filho já tinha", () => {
+    render(
+      <>
+        <span id="dica-externa">Obrigatório</span>
+        <Tooltip content="Formato DD/MM/AAAA">
+          <input aria-label="Data" aria-describedby="dica-externa" />
+        </Tooltip>
+      </>,
+    );
+    expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
+      "Obrigatório Formato DD/MM/AAAA",
+    );
+  });
+
+  it("disabled não descreve", () => {
+    render(
+      <Tooltip content="Bloqueado" disabled>
+        <button type="button">Publicar</button>
+      </Tooltip>,
+    );
+    expect(screen.getByRole("button")).not.toHaveAttribute("aria-describedby");
+  });
+
+  it("ao ficar disabled, o filho volta ao aria-describedby original", () => {
+    const { rerender } = render(
+      <Tooltip content="Dica">
+        <input aria-label="Nome" aria-describedby="erro" />
+      </Tooltip>,
+    );
+    const campo = screen.getByRole("textbox");
+    expect(campo.getAttribute("aria-describedby")).toMatch(/^erro umds-tooltip-/);
+    rerender(
+      <Tooltip content="Dica" disabled>
+        <input aria-label="Nome" aria-describedby="erro" />
+      </Tooltip>,
+    );
+    expect(campo).toHaveAttribute("aria-describedby", "erro");
+  });
+});
+
+describe("Tooltip · foco e Esc", () => {
+  it("abre no foco do filho e fecha no Esc", async () => {
+    render(
+      <Tooltip content="Salva o documento atual">
+        <button type="button">Salvar</button>
+      </Tooltip>,
+    );
+    screen.getByRole("button").focus();
+    await waitFor(() =>
+      expect(screen.getByRole("tooltip")).toHaveClass(
+        "umds-tooltip__bubble--open",
+      ),
+    );
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "Escape" });
+    await waitFor(() =>
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(),
+    );
+  });
+
+  it("fecha quando o foco sai do gatilho", async () => {
+    render(
+      <>
+        <Tooltip content="Dica">
+          <button type="button">Com dica</button>
+        </Tooltip>
+        <button type="button">Outro</button>
+      </>,
+    );
+    screen.getByRole("button", { name: "Com dica" }).focus();
+    await waitFor(() => expect(screen.getByRole("tooltip")).toBeInTheDocument());
+    screen.getByRole("button", { name: "Outro" }).focus();
+    await waitFor(() =>
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(),
+    );
+  });
+});
+
+describe("Tooltip · Esc dentro de overlay", () => {
+  /**
+   * Modal, Drawer e BottomSheet fecham no Esc escutando o document. Com um
+   * tooltip aberto dentro deles, o primeiro Esc tem de fechar SÓ o tooltip:
+   * quem aperta Esc para dispensar a dica não espera perder o formulário
+   * inteiro. O segundo Esc, já sem tooltip, volta a ser do overlay.
+   */
+  const abrirDica = async (nome: string) => {
+    screen.getByRole("button", { name: nome }).focus();
+    await waitFor(() =>
+      expect(screen.getByRole("tooltip")).toHaveClass(
+        "umds-tooltip__bubble--open",
+      ),
+    );
+  };
+
+  it("com o tooltip aberto, o Esc fecha a dica e não fecha o Modal", async () => {
+    const aoFechar = vi.fn();
+    render(
+      <Modal open title="Editar processo" onClose={aoFechar}>
+        <Tooltip content="Salva sem enviar">
+          <button type="button">Salvar rascunho</button>
+        </Tooltip>
+      </Modal>,
+    );
+    await abrirDica("Salvar rascunho");
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "Escape" });
+    await waitFor(() =>
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(),
+    );
+    expect(aoFechar).not.toHaveBeenCalled();
+  });
+
+  it("com o tooltip fechado, o Esc segue para o Modal", async () => {
+    const aoFechar = vi.fn();
+    render(
+      <Modal open title="Editar processo" onClose={aoFechar}>
+        <Tooltip content="Salva sem enviar">
+          <button type="button">Salvar rascunho</button>
+        </Tooltip>
+      </Modal>,
+    );
+    await abrirDica("Salvar rascunho");
+
+    // Primeiro Esc: só a dica.
+    fireEvent.keyDown(document.activeElement as Element, { key: "Escape" });
+    await waitFor(() =>
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(),
+    );
+    expect(aoFechar).not.toHaveBeenCalled();
+
+    // Segundo Esc, sem tooltip: agora é do Modal.
+    fireEvent.keyDown(document.activeElement as Element, { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("com o tooltip aberto, o Esc não fecha o Drawer", async () => {
+    const aoFechar = vi.fn();
+    render(
+      <Drawer open title="Detalhes" onClose={aoFechar}>
+        <Tooltip content="Copia o número do processo">
+          <button type="button">Copiar</button>
+        </Tooltip>
+      </Drawer>,
+    );
+    await abrirDica("Copiar");
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "Escape" });
+    await waitFor(() =>
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(),
+    );
+    expect(aoFechar).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("tooltip que nunca abriu não engole o Esc", () => {
+    const aoFechar = vi.fn();
+    render(
+      <Modal open title="Editar processo" onClose={aoFechar}>
+        <Tooltip content="Salva sem enviar">
+          <button type="button">Salvar rascunho</button>
+        </Tooltip>
+      </Modal>,
+    );
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Tooltip · servidor", () => {
+  it("o HTML do servidor é determinístico", () => {
+    const html = () =>
+      renderToString(
+        <Tooltip content="Dica">
+          <button type="button">Salvar</button>
+        </Tooltip>,
+      );
+    expect(html()).toBe(html());
+  });
+});

package/src/teste/TooltipDark.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import Tooltip from "../components/Tooltip/Tooltip";
+
+async function abrir(ui: React.ReactElement) {
+  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(
+      <Tooltip content="Atualizar" variant="dark">
+        <button type="button">Atualizar</button>
+      </Tooltip>,
+    );
+    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(
+      <Tooltip content="Atualizar">
+        <button type="button">Atualizar</button>
+      </Tooltip>,
+    );
+    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(
+      <Tooltip content="Texto longo" variant="dark" maxWidth="140px">
+        <button type="button">x</button>
+      </Tooltip>,
+    );
+    expect(balao.parentElement?.style.maxWidth).toBe("140px");
+  });
+
+  it("a descrição acessível não muda com a variante", () => {
+    render(
+      <Tooltip content="Atualizar" variant="dark">
+        <button type="button">Recarregar</button>
+      </Tooltip>,
+    );
+    expect(screen.getByRole("button")).toHaveAccessibleDescription("Atualizar");
+  });
+});

package/src/utils/calendario.ts

@@ -0,0 +1,78 @@
+/**
+ * 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: number): string => n < 10 ? "0" + n : String(n);
+
+/** `Date` local → `YYYY-MM-DD`. */
+export const toIso = (data: Date): string => data.getFullYear() + "-" + doisDigitos(data.getMonth() + 1) + "-" + doisDigitos(data.getDate());
+
+/** `YYYY-MM-DD` → `Date` à meia-noite local. */
+export const parseIso = (iso: string): Date => {
+  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: any): string => {
+  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: string, dias: number): string => {
+  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: string, meses: number): string => {
+  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: string): number => 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: string, comecaEm: number): string => {
+  const recuo = (weekdayOf(iso) - comecaEm + 7) % 7;
+  return addDays(iso, -recuo);
+};
+export const startOfMonth = (iso: string): string => iso.slice(0, 8) + "01";
+export const endOfMonth = (iso: string): string => {
+  const data = parseIso(iso);
+  return toIso(new Date(data.getFullYear(), data.getMonth() + 1, 0));
+};
+export const isSameMonth = (a: string, b: string): boolean => a.slice(0, 7) === b.slice(0, 7);
+
+/** Os sete dias da semana que contém `iso`. */
+export const weekDays = (iso: string, comecaEm: number): string[] => {
+  const inicio = startOfWeek(iso, comecaEm);
+  const dias: string[] = [];
+  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: string, comecaEm: number): string[][] => {
+  const ultimo = endOfMonth(iso);
+  let cursor = startOfWeek(startOfMonth(iso), comecaEm);
+  const semanas: string[][] = [];
+  while (cursor <= ultimo) {
+    semanas.push(weekDays(cursor, comecaEm));
+    cursor = addDays(cursor, 7);
+  }
+  return semanas;
+}

package/src/utils/chart.ts

@@ -490,6 +490,10 @@ export interface ChartEntradaCartesiana extends ChartFormato {
   ariaLabel?: string;
   showLegend?: any;
   showGrid?: any;
+  /** Nome do tipo de gráfico (legenda da tabela sem título e começo do resumo automático). */
+  typeLabel?: string;
+  /** Nome da lista de alvos focáveis; o título, se houver, vem depois de " — ". */
+  valuesListLabel?: string;
 }
 export interface ChartGradeLinha {
   chave: string;
@@ -564,7 +568,8 @@ export function modeloCartesiano(tipo: "barras" | "linhas", entrada: ChartEntrad
     serie: j + 1,
     nome: s.name
   }));
-  const nomeDoTipo = tipo === "barras" ? "Gráfico de barras" : "Gráfico de linhas";
+  const nomeDoTipo = entrada.typeLabel || (tipo === "barras" ? "Gráfico de barras" : "Gráfico de linhas");
+  const nomeDaLista = entrada.valuesListLabel || "Valores por categoria";
   const base: ChartModeloCartesiano = {
     vazio: true,
     viewBox: `0 0 ${largo} ${alto}`,
@@ -585,7 +590,7 @@ export function modeloCartesiano(tipo: "barras" | "linhas", entrada: ChartEntrad
     pontos: [],
     legenda,
     resumo: entrada.ariaLabel || `${nomeDoTipo} sem dados.`,
-    rotuloDaLista: entrada.title ? `Valores por categoria — ${entrada.title}` : "Valores por categoria",
+    rotuloDaLista: entrada.title ? `${nomeDaLista} — ${entrada.title}` : nomeDaLista,
     legendaDaTabela: entrada.title || nomeDoTipo,
     cabecalhos: legenda,
     tabela: []

package/src/utils/html-seguro.ts

@@ -0,0 +1,94 @@
+/**
+ * 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: string): string => 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: string): string => {
+  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: string): string => {
+  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: any, saida: any, documento: any): void => {
+  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: string): string => {
+  const bruto = html || "";
+  if (typeof document === "undefined") return escapar(bruto);
+  const molde: any = document.createElement("template");
+  molde.innerHTML = bruto;
+  const saida: any = 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: string): boolean => {
+  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: string): string => {
+  const seguro = escapar(endereco);
+  return '<a href="' + seguro + '">' + seguro + "</a>";
+}

package/src/utils/id.ts

@@ -0,0 +1,24 @@
+/**
+ * Ids automáticos que não quebram a hidratação SSR.
+ *
+ * O padrão antigo da biblioteca sorteava o id na inicialização do store
+ * (`"umds-x-" + Math.random()`). No servidor sai um número, no cliente sai
+ * outro, e o React/Vue reclamam de hidratação divergente — e, pior, o
+ * `aria-describedby` que o servidor mandou aponta para um id que o cliente
+ * trocou.
+ *
+ * A regra agora: o componente começa SEM id automático (servidor e primeira
+ * renderização do cliente saem idênticos) e chama `gerarId` no `onMount`,
+ * que só roda no navegador. O contador é de módulo, mas como só avança no
+ * cliente não acumula entre requisições do servidor. Quem precisa do id já
+ * no HTML do servidor passa a prop `id`.
+ *
+ * Singleton por bundle, compartilhado entre os componentes gerados.
+ */
+let contador = 0;
+
+/** Próximo id da página para o prefixo dado, ex.: `umds-select-3`. */
+export const gerarId = (prefixo: string): string => {
+  contador += 1;
+  return prefixo + "-" + contador;
+}

package/src/utils/paleta-de-cores.ts

@@ -0,0 +1,34 @@
+/**
+ * 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;
+};
+const cor = (family: string, tone: string, label: string, onLight: boolean): PaletteColor => ({
+  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: PaletteColor[] = [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: string): boolean => /^#?[0-9a-fA-F]{6}$/.test((texto || "").trim())

package/src/utils/texto.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 const semAcento = (texto: string): string => String(texto || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim()