rl-core-front 0.15.4 → 0.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_utils/calendar.ts

@@ -66,16 +66,19 @@ export const today = (): Date => {
 };
 
 /**
- * Grade do mês: 6 semanas × 7 dias, começando na segunda-feira.
+ * Grade do mês: 6 semanas × 7 dias, começando no domingo.
+ *
+ * Domingo na primeira coluna porque é como o calendário é lido aqui — o de
+ * parede, o do celular e o do banco começam nele, e uma grade que começa na
+ * segunda faz quem procura o dia 12 contar coluna por coluna.
  *
  * Seis semanas fixas de propósito — com 5 ou 6 conforme o mês, o painel muda de
  * altura ao navegar e o calendário "pula" na tela.
  */
 export const monthGrid = (month: Date): Date[] => {
   const first = dayOf(month.getFullYear(), month.getMonth(), 1);
-  // getDay(): 0 = domingo. Queremos segunda como primeira coluna.
-  const offset = (first.getDay() + 6) % 7;
-  const start = addDays(first, -offset);
+  // getDay(): 0 = domingo, que é a primeira coluna.
+  const start = addDays(first, -first.getDay());
   return Array.from({ length: 42 }, (_, index) => addDays(start, index));
 };
 
@@ -85,12 +88,12 @@ export const monthLabel = (month: Date, locale: string): string =>
     month,
   );
 
-/** Iniciais dos dias da semana, de segunda a domingo, no locale. */
+/** Iniciais dos dias da semana, de domingo a sábado, no locale. */
 export const weekdayLabels = (locale: string): string[] => {
   const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
-  // 2026-06-01 é uma segunda-feira — âncora só para varrer a semana.
+  // Dia 0 de junho é 31/05/2026, um domingo — âncora só para varrer a semana.
   return Array.from({ length: 7 }, (_, index) =>
-    formatter.format(dayOf(2026, 5, 1 + index)).replace(".", ""),
+    formatter.format(dayOf(2026, 5, index)).replace(".", ""),
   );
 };
 
@@ -101,3 +104,204 @@ export const formatDay = (value: string, locale: string): string => {
     ? new Intl.DateTimeFormat(locale, { dateStyle: "short" }).format(date)
     : value;
 };
+
+/**
+ * A ordem em que o locale escreve dia, mês e ano.
+ *
+ * Sai do próprio `Intl` e não de uma tabela: `pt-BR` escreve 11/08/2026 e
+ * `en-US`, 08/11/2026 — a mesma sequência de dígitos significa dias
+ * diferentes, e é ela que o campo digitado precisa respeitar.
+ */
+export const dayFieldOrder = (locale: string): ("day" | "month" | "year")[] =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "short" })
+    .formatToParts(dayOf(2026, 7, 11))
+    .map((part) => part.type)
+    .filter((type): type is "day" | "month" | "year" =>
+      type === "day" || type === "month" || type === "year",
+    );
+
+/** `dd/mm/aaaa` no locale — o que o campo mostra enquanto está vazio. */
+export const dayPlaceholder = (locale: string): string => {
+  const letra = { day: "dd", month: "mm", year: locale.startsWith("pt") ? "aaaa" : "yyyy" };
+
+  return dayFieldOrder(locale)
+    .map((field) => letra[field])
+    .join("/");
+};
+
+/** Quantos dígitos cabem em cada campo da data, e o maior valor de cada um. */
+const DAY_FIELD_SIZES: Record<"day" | "month" | "year", number> = {
+  day: 2,
+  month: 2,
+  year: 4,
+};
+const DAY_FIELD_MAX: Record<"day" | "month" | "year", number> = {
+  day: 31,
+  month: 12,
+  // O ano não tem teto que ajude enquanto se digita: 2 é o começo de 2026.
+  year: Infinity,
+};
+
+/** O campo formado e quantos dígitos ele consumiu — o resto vai para o próximo. */
+interface FittedField {
+  value: string;
+  used: number;
+}
+
+/**
+ * O campo enquanto ele é digitado, dentro do que existe no calendário.
+ *
+ * Três regras, todas para o campo nunca mostrar o que não existe:
+ *
+ * - dígito que não pode **começar** valor nenhum fecha o campo com zero na
+ *   frente — no mês, `3` só poderia virar 30 a 39, então já vira `03`;
+ * - dígito que estoura o par não é engolido, transborda: `3` e `2` no dia
+ *   viram `3/2`, que é o que quem digitou `3` e `2` queria dizer;
+ * - `00` não é dia nem mês.
+ *
+ * O zero na frente só entra quando se está **digitando**. Apagando, ele
+ * devolveria na hora o dígito recém-tirado, e o campo ficaria impossível de
+ * corrigir.
+ */
+const fitDayField = (
+  digits: string,
+  max: number,
+  size: number,
+  autoZero: boolean,
+): FittedField => {
+  const primeiro = digits.slice(0, 1);
+
+  if (autoZero && primeiro !== "" && Number(primeiro) * 10 > max) {
+    return { value: `0${primeiro}`, used: 1 };
+  }
+
+  const cheio = digits.slice(0, size);
+
+  // `00` não é dia nem mês, e o segundo zero não serve para o campo seguinte:
+  // some, em vez de virar um mês zero logo ali.
+  if (cheio.length === size && Number(cheio) === 0) {
+    return { value: cheio.slice(0, size - 1), used: size };
+  }
+
+  if (cheio.length === size && Number(cheio) > max) {
+    return { value: cheio.slice(0, size - 1), used: size - 1 };
+  }
+
+  return { value: cheio, used: cheio.length };
+};
+
+/**
+ * Põe as barras enquanto se digita: `1108` vira `11/08`.
+ *
+ * Campo a campo, e não recontando os dígitos do começo: apagar o `3` de
+ * `31/08/2026` deixa `1/08/2026`, e não `10/82/026` — o que sobra de um campo
+ * cheio transborda para o seguinte, mas nada é puxado de volta.
+ *
+ * O locale entra porque é ele que diz qual campo é o dia e qual é o mês, e os
+ * dois têm tetos diferentes: `13` é dia e não é mês. O texto anterior entra
+ * para separar quem digita de quem apaga — ver `fitDayField`.
+ */
+export const maskDay = (raw: string, locale: string, previous = ""): string => {
+  const order = dayFieldOrder(locale);
+  const partes = raw.replace(/[^\d/]/g, "").split("/").slice(0, order.length);
+  const apagando = raw.length < previous.length;
+  const saida: string[] = [];
+  let resto = "";
+
+  for (let posicao = 0; posicao < order.length; posicao += 1) {
+    const campo = order[posicao];
+    const tamanho = DAY_FIELD_SIZES[campo];
+    const digits = `${resto}${partes[posicao] ?? ""}`.replace(/\D/g, "");
+    const { value, used } = fitDayField(
+      digits,
+      DAY_FIELD_MAX[campo],
+      tamanho,
+      !apagando,
+    );
+
+    saida.push(value);
+
+    /*
+      O que sobra só empurra os campos seguintes quando eles ainda estão
+      vazios.
+
+      Digitando do zero, empurrar é o que faz `1108` virar `11/08`. Mas
+      corrigindo o dia de uma data já escrita, o dígito recusado empurrava o
+      resto inteiro: trocar o `31` de `31/02/2056` por `32` devolvia
+      `3/02/0220`, com mês e ano remontados a partir do que sobrou. Aqui ele
+      simplesmente não entra — a data continua a que estava, com o campo em
+      correção mais curto.
+
+      A exceção é o excedente de tamanho: quem digitou mais dígitos do que o
+      campo comporta (colando, ou apagando uma barra) quis mesmo dizer o campo
+      seguinte.
+    */
+    const temConteudoDepois = partes
+      .slice(posicao + 1)
+      .some((parte) => parte !== "");
+    const sobraPorTamanho = digits.length > tamanho;
+
+    resto = temConteudoDepois && !sobraPorTamanho ? "" : digits.slice(used);
+
+    // Sem transbordo e sem mais nada digitado, a data acaba aqui: acrescentar
+    // um campo vazio escreveria a barra que ninguém pediu.
+    if (resto === "" && partes.length <= posicao + 1) {
+      break;
+    }
+  }
+
+  return saida.join("/");
+};
+
+/**
+ * O que foi digitado vira `"yyyy-MM-dd"`, ou `null` enquanto não for uma data.
+ *
+ * Lê os campos separados pelas barras, na ordem do locale: `1/8/2026` é uma
+ * data tão boa quanto `01/08/2026`, e exigir o zero à esquerda faria o campo
+ * recusar o que ele mesmo acabou de mostrar.
+ *
+ * O ano pode faltar: `1108` é 11 de agosto do ano de referência — quase todo
+ * lançamento é do ano corrente, e obrigar a digitar `2026` toda vez é o tipo
+ * de exigência que faz o campo ser abandonado pelo calendário. Ano começado
+ * (`202`) ainda não é ano, e não vale como digitado.
+ *
+ * A conferência é de existência, não de formato: `31/02` casa com a máscara e
+ * não existe, e o `Date` do JavaScript o transformaria em 03/03 em silêncio.
+ */
+export const parseTypedDay = (
+  text: string,
+  locale: string,
+  fallbackYear: number,
+): string | null => {
+  const campos = maskDay(text, locale).split("/");
+
+  if (campos.length < 2) {
+    return null;
+  }
+
+  const order = dayFieldOrder(locale);
+  const campoDe = (field: "day" | "month" | "year"): string =>
+    campos[order.indexOf(field)] ?? "";
+
+  const anoDigitado = campoDe("year");
+
+  if (anoDigitado !== "" && anoDigitado.length < 4) {
+    return null;
+  }
+
+  const day = Number(campoDe("day"));
+  const month = Number(campoDe("month"));
+  const year = anoDigitado === "" ? fallbackYear : Number(anoDigitado);
+
+  if (!day || !month) {
+    return null;
+  }
+
+  const date = dayOf(year, month - 1, day);
+  const existe =
+    date.getFullYear() === year &&
+    date.getMonth() === month - 1 &&
+    date.getDate() === day;
+
+  return existe ? toIsoDay(date) : null;
+};

package/src/components/ui/data-table.tsx

@@ -79,6 +79,14 @@ interface DataTableProps<T extends RowData> {
   loading?: boolean;
   /** Ações à esquerda da toolbar (ex.: botão "Novo"). */
   toolbar?: React.ReactNode;
+  /**
+   * Ações à direita, antes de "Filtros" e "Colunas".
+   *
+   * É onde mora o que age sobre **a listagem inteira** — exportar, por
+   * exemplo. À esquerda ficam as ações de criar; misturar as duas coisas na
+   * mesma ponta faz o botão de exportar parecer mais um "novo".
+   */
+  toolbarEnd?: React.ReactNode;
   pageSizeOptions?: number[];
   /** Paginação no servidor: informe rowCount, pagination e onPaginationChange. */
   manualPagination?: boolean;
@@ -115,6 +123,18 @@ interface DataTableProps<T extends RowData> {
    * indistinguível de bug, e manda o usuário procurar defeito onde não há.
    */
   emptyMessage?: string;
+  /**
+   * Esconde o rodapé de contagem, paginação e "por página".
+   *
+   * Para a listagem que já vem inteira numa resposta — um cadastro de vinte
+   * linhas não precisa de página. Sem o rodapé a tabela mostra **todas** as
+   * linhas, senão esconder a navegação esconderia registros.
+   *
+   * Ignorado quando a paginação é do servidor (`manualPagination`): ali a
+   * tabela só tem em mãos a página atual, e tirar o rodapé faria as outras
+   * sumirem sem aviso.
+   */
+  hideFooter?: boolean;
   /**
    * Arrastar a linha pela alça para reordenar a listagem.
    *
@@ -172,6 +192,7 @@ export function DataTable<T extends RowData>({
   storageKey,
   loading,
   toolbar,
+  toolbarEnd,
   pageSizeOptions = [10, 20, 50],
   manualPagination,
   rowCount,
@@ -184,6 +205,7 @@ export function DataTable<T extends RowData>({
   filters,
   hiddenFilterFields,
   emptyMessage,
+  hideFooter = false,
   onRowReorder,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
@@ -228,6 +250,16 @@ export function DataTable<T extends RowData>({
     },
   );
 
+  /*
+    Rodapé escondido é lista inteira na tela: sem a navegação, um `pageSize` de
+    10 esconderia da décima primeira linha em diante sem nada dizer. Não vale
+    para a paginação do servidor, onde a tabela só tem a página atual em mãos.
+  */
+  const semRodape = hideFooter && !manualPagination;
+  const paginacaoLocal = semRodape
+    ? { pageIndex: 0, pageSize: Math.max(data.length, 1) }
+    : internalPagination;
+
   const table = useTable({
     features: dataTableFeatures,
     data,
@@ -236,7 +268,7 @@ export function DataTable<T extends RowData>({
     state: {
       columnVisibility,
       sorting: manualSorting ? sorting : internalSorting,
-      pagination: manualPagination ? pagination : internalPagination,
+      pagination: manualPagination ? pagination : paginacaoLocal,
     },
     onColumnVisibilityChange: (updater) => {
       const next =
@@ -404,6 +436,7 @@ export function DataTable<T extends RowData>({
           {toolbar}
         </div>
         <div className="flex flex-wrap items-center gap-2">
+          {toolbarEnd}
           {/* Filtro antes de colunas: filtrar é a ação do dia a dia, escolher
               coluna se faz uma vez e a tela guarda. */}
           {filtersEnabled && (
@@ -594,73 +627,75 @@ export function DataTable<T extends RowData>({
           uma vez fica na ponta, e a navegação, que se usa o tempo todo, no
           centro. Em tela estreita eles empilham em vez de espremer.
         */}
-        <div className="flex flex-col items-center gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:flex-row sm:justify-between">
-          <span className="sm:flex-1">
-            {total} {t("table.results")}
-          </span>
-
-          <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label={t("table.previousPage")}
-              disabled={!table.getCanPreviousPage()}
-              onClick={() => table.previousPage()}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-
-            {pageRange(pageIndex, pageCount).map((item, posicao) =>
-              item === "gap" ? (
-                // O buraco não é botão: `key` pela posição porque duas elipses
-                // são indistinguíveis entre si.
-                <span
-                  key={`gap-${posicao}`}
-                  className="px-1 text-muted-foreground"
-                >
-                  …
-                </span>
-              ) : (
-                <Button
-                  key={item}
-                  variant={item === pageIndex + 1 ? "default" : "ghost"}
-                  size="icon"
-                  // Quadrado de 40px como base, mas cresce com o número: a
-                  // página 128 não pode vazar do botão.
-                  className="w-auto min-w-10 px-2 tabular-nums"
-                  aria-current={item === pageIndex + 1 ? "page" : undefined}
-                  onClick={() => table.setPageIndex(item - 1)}
-                >
-                  {item}
-                </Button>
-              ),
-            )}
-
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label={t("table.nextPage")}
-              disabled={!table.getCanNextPage()}
-              onClick={() => table.nextPage()}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
+        {!semRodape && (
+          <div className="flex flex-col items-center gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:flex-row sm:justify-between">
+            <span className="sm:flex-1">
+              {total} {t("table.results")}
+            </span>
+
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                aria-label={t("table.previousPage")}
+                disabled={!table.getCanPreviousPage()}
+                onClick={() => table.previousPage()}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+
+              {pageRange(pageIndex, pageCount).map((item, posicao) =>
+                item === "gap" ? (
+                  // O buraco não é botão: `key` pela posição porque duas elipses
+                  // são indistinguíveis entre si.
+                  <span
+                    key={`gap-${posicao}`}
+                    className="px-1 text-muted-foreground"
+                  >
+                    …
+                  </span>
+                ) : (
+                  <Button
+                    key={item}
+                    variant={item === pageIndex + 1 ? "default" : "ghost"}
+                    size="icon"
+                    // Quadrado de 40px como base, mas cresce com o número: a
+                    // página 128 não pode vazar do botão.
+                    className="w-auto min-w-10 px-2 tabular-nums"
+                    aria-current={item === pageIndex + 1 ? "page" : undefined}
+                    onClick={() => table.setPageIndex(item - 1)}
+                  >
+                    {item}
+                  </Button>
+                ),
+              )}
 
-          <div className="sm:flex-1 sm:text-right">
-            <select
-              value={pageSize}
-              onChange={(e) => table.setPageSize(Number(e.target.value))}
-              className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
-            >
-              {pageSizeOptions.map((n) => (
-                <option key={n} value={n}>
-                  {n} {t("table.perPage")}
-                </option>
-              ))}
-            </select>
+              <Button
+                variant="ghost"
+                size="icon"
+                aria-label={t("table.nextPage")}
+                disabled={!table.getCanNextPage()}
+                onClick={() => table.nextPage()}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="sm:flex-1 sm:text-right">
+              <select
+                value={pageSize}
+                onChange={(e) => table.setPageSize(Number(e.target.value))}
+                className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
+              >
+                {pageSizeOptions.map((n) => (
+                  <option key={n} value={n}>
+                    {n} {t("table.perPage")}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
-        </div>
+        )}
       </Card>
 
       {storageKey && (

package/src/components/ui/date-picker.tsx

@@ -6,12 +6,15 @@ import { useState } from "react";
 
 import {
   addMonths,
+  dayPlaceholder,
   formatDay,
   fromIsoDay,
   isSameDay,
   isSameMonth,
+  maskDay,
   monthGrid,
   monthLabel,
+  parseTypedDay,
   today,
   toIsoDay,
   weekdayLabels,
@@ -19,6 +22,7 @@ import {
 import { Button } from "#core/components/ui/button";
 import {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from "#core/components/ui/popover";
@@ -46,6 +50,10 @@ export interface DatePickerProps {
  * O valor continua sendo a string ISO do dia, e não `Date`: é o que o backend
  * grava (`char(10)`) e o que evita a viagem por fuso que transforma dia 1º às
  * 00:00 locais no dia 30 em UTC.
+ *
+ * O campo é **digitável**: `1108` já é 11 de agosto, e quem sabe a data não
+ * precisa navegar meses no calendário para dizê-la. O calendário continua ali,
+ * no ícone — é o caminho de quem procura o dia, não de quem já o conhece.
  */
 export function DatePicker({
   value,
@@ -56,15 +64,55 @@ export function DatePicker({
 }: DatePickerProps): JSX.Element {
   const { t, locale } = useI18n();
   const [open, setOpen] = useState(false);
+  /*
+    O que está sendo digitado, enquanto ainda não é uma data.
+
+    Sem este rascunho o campo teria de apagar cada tecla que não fecha um dia
+    válido — digitar `1` já voltaria para o valor gravado, e não haveria como
+    chegar ao `11`.
+  */
+  const [typed, setTyped] = useState<string | null>(null);
 
   const selected = fromIsoDay(value);
   const [month, setMonth] = useState<Date>(() => selected ?? today());
 
   const pickDay = (day: Date): void => {
     onChange(toIsoDay(day));
+    setTyped(null);
     setOpen(false);
   };
 
+  /**
+   * Cada tecla: a máscara põe as barras, e a data sai assim que existir.
+   *
+   * O ano em branco é o do dia que está no campo — ou o de hoje, quando não há
+   * nenhum. Campo esvaziado limpa o valor: apagar é uma escolha, não um
+   * rascunho pela metade.
+   */
+  const digitar = (raw: string): void => {
+    // O texto que estava lá antes: é ele que diz se a tecla foi um dígito novo
+    // ou um apagar — e o campo se comporta diferente nos dois casos.
+    const texto = maskDay(raw, locale, typed ?? (value ? formatDay(value, locale) : ""));
+    setTyped(texto);
+
+    if (texto === "") {
+      onChange(undefined);
+
+      return;
+    }
+
+    const iso = parseTypedDay(
+      texto,
+      locale,
+      (selected ?? today()).getFullYear(),
+    );
+
+    if (iso) {
+      onChange(iso);
+      setMonth(fromIsoDay(iso) ?? month);
+    }
+  };
+
   const dayClass = (day: Date): string => {
     if (selected && isSameDay(day, selected)) {
       return "bg-primary text-primary-foreground font-semibold";
@@ -77,16 +125,41 @@ export function DatePicker({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        disabled={disabled}
-        aria-label={label}
-        className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        <span className={cn("truncate", !value && "text-muted-foreground")}>
-          {value ? formatDay(value, locale) : (placeholder ?? t("filters.selectDate"))}
-        </span>
-        <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
-      </PopoverTrigger>
+      {/*
+        A âncora é a linha inteira, e não o ícone: presa ao botão, o painel
+        abriria alinhado a ele e com a largura dele — um calendário de 16px.
+      */}
+      <PopoverAnchor asChild>
+        <div
+          className={cn(
+            "flex h-10 w-full items-center rounded-md border border-input bg-transparent shadow-sm transition-colors hover:border-ring focus-within:ring-2 focus-within:ring-ring",
+            disabled && "cursor-not-allowed opacity-50",
+          )}
+        >
+          <input
+            aria-label={label}
+            value={typed ?? (value ? formatDay(value, locale) : "")}
+            disabled={disabled}
+            // Só dígitos, e o teclado do celular abre no numérico: a máscara é
+            // quem escreve as barras.
+            inputMode="numeric"
+            placeholder={placeholder ?? dayPlaceholder(locale)}
+            onChange={(event) => digitar(event.target.value)}
+            // Sai do campo e o rascunho some: `11/0` não é data, e deixá-lo
+            // escrito faria o campo mostrar uma coisa e o formulário guardar
+            // outra.
+            onBlur={() => setTyped(null)}
+            className="h-full w-full min-w-0 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+          />
+          <PopoverTrigger
+            disabled={disabled}
+            aria-label={t("filters.openCalendar")}
+            className="flex h-full shrink-0 items-center px-3 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed"
+          >
+            <Calendar className="h-4 w-4" />
+          </PopoverTrigger>
+        </div>
+      </PopoverAnchor>
 
       <PopoverContent
         // Largura do campo, e não fixa: o painel é a continuação dele, e
@@ -160,6 +233,7 @@ export function DatePicker({
               size="sm"
               onClick={() => {
                 onChange(undefined);
+                setTyped(null);
                 setOpen(false);
               }}
             >

package/src/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Expand, Shrink, X } from "lucide-react";
 import * as React from "react";
 
+import { Button, type ButtonProps } from "#core/components/ui/button";
 import {
   EXPAND_SHORTCUT_KEY,
   EXPAND_SHORTCUT_LABEL,
@@ -11,6 +12,25 @@ import {
 } from "#core/hooks/use-shortcut";
 import { cn } from "#core/lib/utils";
 
+/**
+ * Como pedir para fechar o modal **passando pela guarda**.
+ *
+ * O `Esc`, o clique fora e o `X` passam pelo `DialogContent`, que pergunta
+ * antes de descartar o que foi preenchido. O botão "Cancelar" mora na tela e
+ * chamava o `onClose` dela direto — mesma saída, sem a pergunta. Este contexto
+ * é o caminho que faltava: quem pede daqui recebe a mesma confirmação.
+ */
+const DialogCloseRequestContext = React.createContext<() => void>(() => {});
+
+/**
+ * Pede o fechamento do modal em que o componente está.
+ *
+ * Fora de um `DialogContent` não faz nada — nunca quebra, só não tem o que
+ * fechar.
+ */
+const useDialogCloseRequest = (): (() => void) =>
+  React.useContext(DialogCloseRequestContext);
+
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
@@ -248,6 +268,22 @@ const DialogContent = React.forwardRef<
     setConfirmandoSaida(true);
   };
 
+  /**
+   * A saída pedida de dentro do corpo — é o que o "Cancelar" usa.
+   *
+   * Sem evento para segurar: aqui o fechamento nem começa, ou é a pergunta que
+   * aparece, ou é o `Close` escondido que fecha de uma vez.
+   */
+  const pedirSaida = React.useCallback((): void => {
+    if (unsavedChanges) {
+      setConfirmandoSaida(true);
+
+      return;
+    }
+
+    fecharRef.current?.click();
+  }, [unsavedChanges]);
+
   // O cabeçalho sai da lista para dividir a primeira linha com os botões; o
   // resto segue na ordem em que o chamador escreveu.
   const items = React.Children.toArray(children);
@@ -338,7 +374,9 @@ const DialogContent = React.forwardRef<
             </DialogPrimitive.Close>
           </div>
         </div>
-        {body}
+        <DialogCloseRequestContext.Provider value={pedirSaida}>
+          {body}
+        </DialogCloseRequestContext.Provider>
 
         <DialogPrimitive.Close ref={fecharRef} className="hidden" tabIndex={-1} />
       </DialogPrimitive.Content>
@@ -467,8 +505,49 @@ const DialogDescription = React.forwardRef<
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+/**
+ * O "Cancelar" do rodapé — a mesma saída do `Esc`, com a mesma pergunta.
+ *
+ * Existe porque o botão que a tela escrevia à mão chamava o `onClose` dela
+ * direto: fechava sem perguntar nada, e o formulário preenchido ia junto.
+ * Aqui o fechamento é pedido ao modal, que decide se pergunta antes.
+ *
+ * O texto vem de fora — este arquivo não depende do provider de i18n, e passar
+ * a depender quebraria todo uso fora dele.
+ *
+ * ```tsx
+ * <DialogFooter>
+ *   <DialogCancel>{t("common.cancel")}</DialogCancel>
+ *   <Button type="submit">{t("common.save")}</Button>
+ * </DialogFooter>
+ * ```
+ */
+const DialogCancel = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "outline", type = "button", onClick, ...props }, ref) => {
+    const pedirSaida = useDialogCloseRequest();
+
+    return (
+      <Button
+        ref={ref}
+        type={type}
+        variant={variant}
+        onClick={(event) => {
+          onClick?.(event);
+
+          if (!event.defaultPrevented) {
+            pedirSaida();
+          }
+        }}
+        {...props}
+      />
+    );
+  },
+);
+DialogCancel.displayName = "DialogCancel";
+
 export {
   Dialog,
+  DialogCancel,
   DialogClose,
   DialogContent,
   DialogDescription,
@@ -479,4 +558,5 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  useDialogCloseRequest,
 };

package/src/i18n/messages/en.ts

@@ -183,6 +183,7 @@ export const en: Messages = {
     toChip: "until",
     selectPeriod: "Select a period",
     selectDate: "Select a date",
+    openCalendar: "Open calendar",
     today: "Today",
     lastDays: "{days} days",
     previousMonth: "Previous month",

package/src/i18n/messages/pt.ts

@@ -186,6 +186,7 @@ export const pt = {
     toChip: "até",
     selectPeriod: "Selecione o período",
     selectDate: "Selecione a data",
+    openCalendar: "Abrir calendário",
     today: "Hoje",
     lastDays: "{days} dias",
     previousMonth: "Mês anterior",