rl-core-front 0.16.2 → 0.16.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "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/calc.ts

@@ -0,0 +1,303 @@
+/**
+ * Avaliador de conta escrita à mão — o que a calculadora do campo de dinheiro
+ * usa para transformar `120+35*2` em `190`.
+ *
+ * **Não usa `eval` nem `new Function`.** O que se digita num campo é texto de
+ * usuário, e texto de usuário que vira código executável é a porta aberta
+ * clássica; além disso, `eval` aceitaria `1+1;alert(1)` e devolveria número,
+ * enquanto este parser recusa o que não entende em vez de tentar adivinhar.
+ *
+ * O que ele entende: `+ - * / %`, parênteses, sinal negativo, e número no
+ * formato brasileiro (ponto de milhar, vírgula decimal).
+ */
+
+/**
+ * Por que a conta não fechou. É código e não frase pronta porque a mensagem é
+ * texto de tela: quem traduz é o componente, com o dicionário de quem está
+ * olhando.
+ */
+export enum CalcErrorCode {
+  /** Apareceu um caractere que não é número nem operador. */
+  UNKNOWN_CHARACTER = "unknownCharacter",
+  /** O que parece número não é: `1,2,3`. */
+  INVALID_NUMBER = "invalidNumber",
+  /** A conta para no meio: `120+`. */
+  INCOMPLETE = "incomplete",
+  /** Abriu parêntese e não fechou. */
+  UNCLOSED_PAREN = "unclosedParen",
+  /** Fechou parêntese que ninguém abriu, ou sobrou algo depois do fim. */
+  TRAILING = "trailing",
+  DIVISION_BY_ZERO = "divisionByZero",
+}
+
+/** O erro que o parser lança. O `code` é o que vira mensagem. */
+export class CalcError extends Error {
+  constructor(
+    readonly code: CalcErrorCode,
+    /** O caractere recusado, quando o código é `UNKNOWN_CHARACTER`. */
+    readonly character?: string,
+  ) {
+    super(code);
+    this.name = "CalcError";
+  }
+}
+
+type SymbolType = "+" | "-" | "*" | "/" | "%" | "(" | ")";
+
+interface NumberToken {
+  type: "number";
+  value: number;
+}
+
+interface SymbolToken {
+  type: SymbolType;
+}
+
+type Token = NumberToken | SymbolToken;
+
+/** O que compõe um número: dígito, ponto de milhar e vírgula decimal. */
+const NUMBER_PART = /[0-9.,]/;
+
+/**
+ * Os operadores que a tela desenha diferente de como o parser os lê.
+ *
+ * Uma tabela só, percorrida nos dois sentidos: daqui saem o desenho das teclas
+ * e o texto do visor, e por ela o tokenizador volta ao símbolo canônico. Antes
+ * o `×` estava escrito em três lugares, e acrescentar um operador significava
+ * lembrar dos três.
+ */
+const OPERATOR_GLYPHS: ReadonlyArray<readonly [SymbolType, string]> = [
+  ["*", "×"],
+  ["/", "÷"],
+  ["-", "−"],
+];
+
+const GLYPH_TO_SYMBOL = new Map<string, SymbolType>([
+  ...OPERATOR_GLYPHS.map(([symbol, glyph]) => [glyph, symbol] as const),
+  // O `x` do teclado de quem aprendeu a multiplicar assim.
+  ["x", "*"] as const,
+  ["X", "*"] as const,
+]);
+
+const SYMBOL_TO_GLYPH = new Map<string, string>(OPERATOR_GLYPHS);
+
+const SYMBOLS = "+-*/%()";
+
+/**
+ * A conta como se lê na tela: `120*2+10%` vira `120×2+10%`.
+ *
+ * Mora aqui, junto do que faz o caminho de volta, e não no componente: são a
+ * mesma correspondência, e separadas elas saem de sincronia calada.
+ */
+export const toDisplayExpression = (source: string): string =>
+  Array.from(source)
+    .map((character) => SYMBOL_TO_GLYPH.get(character) ?? character)
+    .join("");
+
+/**
+ * O caractere pode entrar numa conta?
+ *
+ * É o que o teclado físico consulta antes de escrever. Sem isso, a lista de
+ * caracteres aceitos existiria duas vezes — aqui e num regex do componente —,
+ * e um operador novo entraria pelo botão mas não pela tecla.
+ */
+export const isCalcCharacter = (character: string): boolean =>
+  NUMBER_PART.test(character) ||
+  SYMBOLS.includes(character) ||
+  GLYPH_TO_SYMBOL.has(character);
+
+/**
+ * Número brasileiro para `number`.
+ *
+ * A ambiguidade real é o ponto sozinho: `1.200` é mil e duzentos para quem
+ * digita em reais, e 1,2 para o `Number`. A regra é a do país — havendo
+ * vírgula, todo ponto é milhar; sem vírgula, o ponto ainda é milhar quando
+ * separa exatamente três dígitos no fim, ou quando aparece mais de uma vez.
+ */
+const toNumber = (raw: string): number => {
+  let text: string = raw;
+
+  if (text.includes(",")) {
+    text = text.replace(/\./g, "").replace(/,/g, ".");
+  } else if ((text.match(/\./g) ?? []).length > 1 || /\d\.\d{3}$/.test(text)) {
+    text = text.replace(/\./g, "");
+  }
+
+  const parsed: number = Number(text);
+  if (text === "" || !Number.isFinite(parsed)) {
+    throw new CalcError(CalcErrorCode.INVALID_NUMBER);
+  }
+
+  return parsed;
+};
+
+const tokenize = (source: string): Token[] => {
+  const tokens: Token[] = [];
+  let index = 0;
+
+  while (index < source.length) {
+    const character: string = source[index];
+
+    if (character === " ") {
+      index += 1;
+      continue;
+    }
+
+    if (NUMBER_PART.test(character)) {
+      let end: number = index;
+      while (end < source.length && NUMBER_PART.test(source[end])) {
+        end += 1;
+      }
+      tokens.push({ type: "number", value: toNumber(source.slice(index, end)) });
+      index = end;
+      continue;
+    }
+
+    const symbol: string = GLYPH_TO_SYMBOL.get(character) ?? character;
+    if (SYMBOLS.includes(symbol)) {
+      tokens.push({ type: symbol as SymbolType });
+      index += 1;
+      continue;
+    }
+
+    throw new CalcError(CalcErrorCode.UNKNOWN_CHARACTER, character);
+  }
+
+  return tokens;
+};
+
+/**
+ * Um pedaço já resolvido da conta.
+ *
+ * `percent` marca o número que ainda espera o contexto do operador anterior: é
+ * o que faz `200+10%` valer 220 e `200*10%` valer 20 — a porcentagem da
+ * calculadora de bolso, que é a que quem lança despesa tem na cabeça.
+ */
+interface Operand {
+  value: number;
+  percent: boolean;
+}
+
+const parse = (tokens: Token[]): number => {
+  let position = 0;
+
+  const peek = (): Token | undefined => tokens[position];
+
+  const eat = (type: SymbolType): boolean => {
+    const token: Token | undefined = peek();
+    if (token && token.type === type) {
+      position += 1;
+      return true;
+    }
+    return false;
+  };
+
+  const primary = (): Operand => {
+    const token: Token | undefined = peek();
+    if (!token) {
+      throw new CalcError(CalcErrorCode.INCOMPLETE);
+    }
+
+    if (token.type === "number") {
+      position += 1;
+      return { value: token.value, percent: false };
+    }
+
+    if (token.type === "(") {
+      position += 1;
+      const inner: Operand = expression();
+      if (!eat(")")) {
+        throw new CalcError(CalcErrorCode.UNCLOSED_PAREN);
+      }
+      return { value: inner.value, percent: false };
+    }
+
+    // Sinal na frente do número: `-50` e `+50`.
+    if (token.type === "-") {
+      position += 1;
+      const operand: Operand = unary();
+      return { value: -operand.value, percent: operand.percent };
+    }
+    if (token.type === "+") {
+      position += 1;
+      return unary();
+    }
+
+    throw new CalcError(CalcErrorCode.INCOMPLETE);
+  };
+
+  const unary = (): Operand => {
+    const base: Operand = primary();
+    return eat("%") ? { value: base.value, percent: true } : base;
+  };
+
+  const term = (): Operand => {
+    let left: Operand = unary();
+
+    while (peek()?.type === "*" || peek()?.type === "/") {
+      const operator: SymbolType = (tokens[position] as SymbolToken).type;
+      position += 1;
+      const right: Operand = unary();
+      // Multiplicando ou dividindo, `10%` é simplesmente 0,1.
+      const factor: number = right.percent ? right.value / 100 : right.value;
+
+      if (operator === "/" && factor === 0) {
+        throw new CalcError(CalcErrorCode.DIVISION_BY_ZERO);
+      }
+
+      left = {
+        value: operator === "*" ? left.value * factor : left.value / factor,
+        percent: false,
+      };
+    }
+
+    return left;
+  };
+
+  const expression = (): Operand => {
+    let left: Operand = term();
+
+    while (peek()?.type === "+" || peek()?.type === "-") {
+      const operator: SymbolType = (tokens[position] as SymbolToken).type;
+      position += 1;
+      const right: Operand = term();
+      // Somando ou subtraindo, `10%` é 10% do que veio antes.
+      const delta: number = right.percent
+        ? (left.value * right.value) / 100
+        : right.value;
+
+      left = {
+        value: operator === "+" ? left.value + delta : left.value - delta,
+        percent: false,
+      };
+    }
+
+    return left;
+  };
+
+  const result: Operand = expression();
+  if (position < tokens.length) {
+    throw new CalcError(CalcErrorCode.TRAILING);
+  }
+
+  return result.value;
+};
+
+/**
+ * Resolve a conta e devolve o valor **já arredondado em centavos**.
+ *
+ * O arredondamento não é enfeite: `0,1+0,2` em ponto flutuante dá
+ * 0,30000000000000004, e o destino do resultado é uma coluna `decimal(12,2)`.
+ *
+ * Lança `CalcError` quando a conta não fecha — inclusive para texto vazio, que
+ * é `INCOMPLETE`.
+ */
+export const evaluateExpression = (source: string): number => {
+  const value: number = parse(tokenize(source));
+
+  if (!Number.isFinite(value)) {
+    throw new CalcError(CalcErrorCode.INVALID_NUMBER);
+  }
+
+  return Math.round((value + Number.EPSILON) * 100) / 100;
+};

package/src/_utils/calendar.ts

@@ -253,6 +253,110 @@ export const maskDay = (raw: string, locale: string, previous = ""): string => {
   return saida.join("/");
 };
 
+/** Onde está o próximo dígito a partir de `posicao` — barra não se digita. */
+const proximoDigito = (texto: string, posicao: number): number => {
+  let atual = posicao;
+
+  while (atual < texto.length && texto[atual] === "/") {
+    atual += 1;
+  }
+
+  return atual;
+};
+
+/**
+ * Um dígito digitado **sobre** uma data já escrita: troca o de baixo do cursor.
+ *
+ * É o que faz o cursor parado no começo de `01/01/2026` servir para algo. Sem
+ * isto, a tecla se enfiaria no texto: `3` no começo produziria `301/01/2026`,
+ * que a máscara — que lê campo a campo — remonta como `30/10/1202`, uma data
+ * que ninguém digitou.
+ *
+ * Trabalha **por campo**, e não por caractere do texto: é o campo que tem teto
+ * (dia até 31, mês até 12) e é ele que diz quando a tecla seguinte muda de
+ * lugar. Duas saídas, conforme o dígito caiba ou não:
+ *
+ * - cabe: é correção, e o resto do campo fica de pé — `1` sobre o `2` de
+ *   `2026` dá `1026`, e não um ano recomeçado do zero;
+ * - não cabe: o campo recomeça daquele dígito, como se estivesse sendo
+ *   digitado agora — `9` sobre o dia `11` dá `09`, porque 9 não começa dia
+ *   nenhum, e o cursor já passa para o mês.
+ *
+ * A posição devolvida é a do próximo dígito a digitar, pulando a barra: quem
+ * teclar `3`, `1`, `0`, `8` escreve 31/08 sem tocar em seta nenhuma. Campo que
+ * ficou pela metade (o mês `1`, que ainda pode virar 10, 11 ou 12) mantém o
+ * cursor nele, esperando o segundo dígito.
+ */
+export const overtypeDay = (
+  texto: string,
+  posicao: number,
+  digito: string,
+  locale: string,
+): { texto: string; posicao: number } => {
+  const order = dayFieldOrder(locale);
+  const campos = texto.split("/");
+
+  // Só sobre uma data inteira. Meia data é o campo sendo preenchido, e ali a
+  // digitação normal já escreve no fim.
+  if (campos.length !== order.length) {
+    return { texto, posicao };
+  }
+
+  /*
+    Em que campo o cursor está, e em que dígito dele.
+
+    O cursor em cima da barra conta como o começo do campo seguinte — é onde
+    ele está depois de fechar o dia. E o cursor no fim de um campo que ainda
+    não está cheio continua nesse campo: é o `1` do mês esperando o `2`.
+  */
+  let base = 0;
+  let alvo = -1;
+  let offset = 0;
+
+  for (let indice = 0; indice < campos.length; indice += 1) {
+    const fim = base + campos[indice].length;
+    const cheio = campos[indice].length >= DAY_FIELD_SIZES[order[indice]];
+
+    if (posicao < fim || (posicao === fim && !cheio)) {
+      alvo = indice;
+      offset = Math.max(0, posicao - base);
+      break;
+    }
+
+    base = fim + 1;
+  }
+
+  // Depois do último dígito não há o que sobrescrever, e acrescentar faria a
+  // data crescer para além do formato.
+  if (alvo === -1) {
+    return { texto, posicao };
+  }
+
+  const tamanho = DAY_FIELD_SIZES[order[alvo]];
+  const max = DAY_FIELD_MAX[order[alvo]];
+  const campo = campos[alvo];
+  const trocado = `${campo.slice(0, offset)}${digito}${campo.slice(offset + 1)}`;
+  const cabe =
+    trocado.length <= tamanho && Number(trocado) >= 1 && Number(trocado) <= max;
+  const valor = cabe ? trocado : fitDayField(digito, max, tamanho, true).value;
+  const novo = campos
+    .map((atual, indice) => (indice === alvo ? valor : atual))
+    .join("/");
+
+  // Quantos dígitos do campo a tecla consumiu: um, quando corrigiu; o campo
+  // todo, quando ele recomeçou (o `9` que já vira `09`).
+  const consumido = cabe ? offset + 1 : valor.length;
+  const parou = base + consumido;
+
+  return {
+    texto: novo,
+    posicao:
+      consumido >= valor.length && valor.length === tamanho
+        ? proximoDigito(novo, parou)
+        : parou,
+  };
+};
+
 /**
  * O que foi digitado vira `"yyyy-MM-dd"`, ou `null` enquanto não for uma data.
  *

package/src/_utils/format.ts

@@ -73,3 +73,24 @@ export function formatCurrencyBR(value: number | null | undefined): string {
   }
   return maskCurrencyBR(String(Math.round(value * 100)));
 }
+
+/**
+ * Real por extenso, com o símbolo: `R$ 1.234,56`.
+ *
+ * Diferente do `formatCurrencyBR`, que é a máscara do campo e por isso não tem
+ * símbolo — este é para leitura: extrato, cartão, eixo de gráfico, o visor da
+ * calculadora do `MoneyInput`. Escrever `"R$ " + formatCurrencyBR(v)` na tela
+ * parece a mesma coisa e não é: perde o espaço não-quebrável que o `Intl` põe
+ * entre símbolo e número, e o valor quebra linha no meio.
+ *
+ * Aceita texto porque `decimal` chega da API como string, e `Number(null)` é 0:
+ * o campo ausente vira `R$ 0,00` em vez de `R$ NaN`.
+ */
+export function formatMoneyBR(
+  value: number | string | null | undefined,
+): string {
+  return Number(value ?? 0).toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+  });
+}

package/src/components/app-shell.tsx

@@ -178,6 +178,16 @@ const ADMIN_CHILDREN: NavItem[] = [
   },
   { key: "nav.rbac", href: "/rbac", icon: ShieldCheck, perm: "roles:read:any" },
   { key: "nav.logs", href: "/logs", icon: ScrollText, perm: "audit:read:any" },
+  // Logo abaixo do log de requisições, que é o vizinho natural: os dois contam
+  // o que aconteceu no sistema, um por chamada e outro por alteração de dado.
+  // Restrito a administradores — só quem tem audit:read-trail:any (só Super
+  // Admin) vê este item.
+  {
+    key: "nav.audit",
+    href: "/auditoria",
+    icon: History,
+    perm: "audit:read-trail:any",
+  },
   // Só aparece para quem opera a fila — em ambiente sem Redis ninguém tem a
   // permissão, e o item some sozinho.
   {
@@ -186,13 +196,6 @@ const ADMIN_CHILDREN: NavItem[] = [
     icon: ListChecks,
     perm: "queues:read:any",
   },
-  // Restrito a administradores — só quem tem audit:read-trail:any (só Super Admin) vê este item.
-  {
-    key: "nav.audit",
-    href: "/auditoria",
-    icon: History,
-    perm: "audit:read-trail:any",
-  },
 ];
 
 export interface AppShellProps {

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
-import type { JSX } from "react";
-import { useState } from "react";
+import type { JSX, KeyboardEvent } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 
 import {
   addMonths,
@@ -14,6 +14,7 @@ import {
   maskDay,
   monthGrid,
   monthLabel,
+  overtypeDay,
   parseTypedDay,
   today,
   toIsoDay,
@@ -55,10 +56,12 @@ export interface DatePickerProps {
  * 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.
  *
- * Focar o campo marca a data inteira, e por isso a digitação sempre começa
- * pelo dia. Com o cursor solto no fim do ano — onde o navegador o deixa —
- * escrever outra data exigia apagar dez caracteres primeiro, e um dígito
- * digitado ali entrava no meio do ano.
+ * Focar o campo põe o cursor **antes do dia**, e o dígito digitado sobrescreve
+ * o que está embaixo dele em vez de empurrar o resto: `3` sobre `01/01/2026`
+ * dá `31/01/2026` com o cursor já no mês. Com o cursor solto no fim do ano —
+ * onde o navegador o deixa — trocar a data exigia apagar dez caracteres
+ * primeiro; marcar tudo resolvia isso, mas obrigava a redigitar mês e ano para
+ * corrigir só o dia.
  */
 export function DatePicker({
   value,
@@ -81,23 +84,37 @@ export function DatePicker({
   const selected = fromIsoDay(value);
   const [month, setMonth] = useState<Date>(() => selected ?? today());
 
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  /*
+    Onde o cursor deve ficar depois do próximo render.
+
+    O input é controlado, então quem escreve o valor é o React — e ele repõe o
+    cursor no fim. A posição precisa ser reaplicada depois da pintura, e por
+    isso vive num ref: em estado, ela causaria um render só para dizer onde o
+    cursor está.
+  */
+  const caret = useRef<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (caret.current === null || !inputRef.current) {
+      return;
+    }
+
+    inputRef.current.setSelectionRange(caret.current, caret.current);
+    caret.current = null;
+  });
+
   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) : ""));
+  /** O que o campo mostra agora: o rascunho, ou a data gravada. */
+  const escrito = (): string => typed ?? (value ? formatDay(value, locale) : "");
+
+  /** O texto vira rascunho e, se já for uma data, valor. */
+  const aplicar = (texto: string): void => {
     setTyped(texto);
 
     if (texto === "") {
@@ -118,6 +135,50 @@ export function DatePicker({
     }
   };
 
+  /**
+   * 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.
+    aplicar(maskDay(raw, locale, escrito()));
+  };
+
+  /**
+   * Dígito sobre uma data já escrita: troca o de baixo do cursor.
+   *
+   * Só quando a data está completa e nada está selecionado. Data pela metade é
+   * o campo sendo preenchido, e ali o cursor já está no fim; com um trecho
+   * marcado, digitar substitui o trecho, que é o que qualquer campo de texto
+   * faz e ninguém espera diferente.
+   */
+  const sobrescrever = (event: KeyboardEvent<HTMLInputElement>): void => {
+    const campo = event.currentTarget;
+    const inicio = campo.selectionStart ?? 0;
+
+    if (
+      !/^\d$/.test(event.key) ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.altKey ||
+      campo.value.length < dayPlaceholder(locale).length ||
+      (campo.selectionEnd ?? inicio) !== inicio
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const { texto, posicao } = overtypeDay(campo.value, inicio, event.key, locale);
+
+    caret.current = posicao;
+    aplicar(texto);
+  };
+
   const dayClass = (day: Date): string => {
     if (selected && isSameDay(day, selected)) {
       return "bg-primary text-primary-foreground font-semibold";
@@ -142,18 +203,20 @@ export function DatePicker({
           )}
         >
           <input
+            ref={inputRef}
             aria-label={label}
-            value={typed ?? (value ? formatDay(value, locale) : "")}
+            value={escrito()}
             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)}
-            // Chegou o foco, a data inteira fica marcada: o próximo dígito
-            // reescreve a data do dia em diante, em vez de se enfiar no meio
-            // do ano.
-            onFocus={(event) => event.currentTarget.select()}
+            onKeyDown={sobrescrever}
+            // Chegou o foco, o cursor vai para antes do dia: é por ele que se
+            // começa a escrever uma data, e o navegador deixaria o cursor no
+            // fim do ano.
+            onFocus={(event) => event.currentTarget.setSelectionRange(0, 0)}
             // O clique é o nosso, e não o do navegador: o dele põe o cursor
             // onde se clicou e desfaz, no `mouseup`, a seleção que o foco
             // acabou de fazer. Só no primeiro clique — dentro do campo já

package/src/components/ui/index.ts

@@ -24,6 +24,7 @@ export * from "./image-upload";
 export * from "./input";
 export * from "./job-progress";
 export * from "./label";
+export * from "./money-input";
 export * from "./password-requirements";
 export * from "./popover";
 export * from "./row-actions";

package/src/components/ui/money-input.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import { Calculator, Delete } from "lucide-react";
+import type { JSX, KeyboardEvent } from "react";
+import { useRef, useState } from "react";
+
+import {
+  CalcError,
+  CalcErrorCode,
+  evaluateExpression,
+  isCalcCharacter,
+  toDisplayExpression,
+} from "#core/_utils/calc";
+import {
+  formatCurrencyBR,
+  formatMoneyBR,
+  maskCurrencyBR,
+  parseCurrencyBR,
+} from "#core/_utils/format";
+import { Button } from "#core/components/ui/button";
+import { Input } from "#core/components/ui/input";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from "#core/components/ui/popover";
+import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface MoneyInputProps {
+  /** O valor já mascarado — `1.234,56`. É o que o formulário guarda. */
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  id?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+/**
+ * O maior valor que a máscara do core representa: onze dígitos, dois deles
+ * centavos. Passar disso não dá erro — `maskCurrencyBR` corta os dígitos que
+ * sobram e devolve outro número, calado. Por isso a calculadora recusa antes.
+ */
+const MAX_MASKED_VALUE = 999_999_999.99;
+
+/** O que uma tecla faz: escreve na conta, ou mexe no que já está escrito. */
+type KeyRole = "digit" | "operator" | "aux";
+
+interface CalcKey {
+  /**
+   * O que a tecla acrescenta à conta — e também o seu desenho, passado pelo
+   * `toDisplayExpression`: a tecla do `*` mostra `×` sem que o glifo precise
+   * ser escrito aqui de novo.
+   */
+  input?: string;
+  role: KeyRole;
+  /** Rótulo acessível e desenho da tecla que não escreve na conta. */
+  labelKey?: string;
+  label?: string;
+  action?: "clear" | "backspace";
+}
+
+const KEYS: readonly CalcKey[] = [
+  { role: "aux", label: "C", action: "clear", labelKey: "calculator.clear" },
+  { role: "aux", input: "(" },
+  { role: "aux", input: ")" },
+  { role: "operator", input: "/" },
+  { role: "digit", input: "7" },
+  { role: "digit", input: "8" },
+  { role: "digit", input: "9" },
+  { role: "operator", input: "*" },
+  { role: "digit", input: "4" },
+  { role: "digit", input: "5" },
+  { role: "digit", input: "6" },
+  { role: "operator", input: "-" },
+  { role: "digit", input: "1" },
+  { role: "digit", input: "2" },
+  { role: "digit", input: "3" },
+  { role: "operator", input: "+" },
+  { role: "operator", input: "%" },
+  { role: "digit", input: "0" },
+  { role: "digit", input: "," },
+  { role: "aux", action: "backspace", labelKey: "calculator.backspace" },
+];
+
+/** O resultado da conta, ou o motivo de ela não poder ser usada. */
+interface CalcOutcome {
+  value: number | null;
+  message: string | null;
+}
+
+/**
+ * Campo de dinheiro com calculadora — a máscara do core mais um lugar para
+ * fazer a conta antes de lançar o valor.
+ *
+ * A conta acontece num painel, e não no próprio campo, porque a máscara entra
+ * **pela direita**, como caixa de supermercado: cada tecla empurra o valor uma
+ * casa, e um `+` digitado ali seria descartado antes de virar operador.
+ *
+ * Vem do core e não de cada projeto porque campo de dinheiro é o mesmo em
+ * todos: sem ele aqui, cada sistema remonta o par `Input` + `maskCurrencyBR` à
+ * mão em cada formulário, e a segunda cópia é a que esquece de recusar o
+ * resultado negativo.
+ */
+export const MoneyInput = ({
+  value,
+  onChange,
+  onBlur,
+  name,
+  id,
+  placeholder,
+  disabled = false,
+}: MoneyInputProps): JSX.Element => {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [expression, setExpression] = useState("");
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Traduz o erro do parser. O código vem do `calc.util`, que não conhece
+   * idioma nenhum — quem escolhe a frase é quem sabe quem está olhando.
+   */
+  const messageOf = (error: unknown): string => {
+    if (error instanceof CalcError) {
+      return t(`calculator.error.${error.code}`, {
+        character: error.character ?? "",
+      });
+    }
+    return t(`calculator.error.${CalcErrorCode.INCOMPLETE}`);
+  };
+
+  const outcome = ((): CalcOutcome => {
+    if (expression.trim() === "") {
+      return { value: null, message: null };
+    }
+
+    try {
+      const result: number = evaluateExpression(expression);
+
+      // A máscara não guarda sinal: um resultado negativo entraria no campo
+      // como positivo, e ninguém veria a troca acontecer.
+      if (result <= 0) {
+        return { value: null, message: t("calculator.error.notPositive") };
+      }
+      if (result > MAX_MASKED_VALUE) {
+        return { value: null, message: t("calculator.error.outOfRange") };
+      }
+
+      return { value: result, message: null };
+    } catch (error) {
+      return { value: null, message: messageOf(error) };
+    }
+  })();
+
+  /** Abrir semeia a conta com o que já está no campo, para somar em cima. */
+  const handleOpenChange = (next: boolean): void => {
+    if (next) {
+      setExpression(parseCurrencyBR(value) > 0 ? value : "");
+    }
+    setOpen(next);
+  };
+
+  const press = (key: CalcKey): void => {
+    if (key.action === "clear") {
+      setExpression("");
+      return;
+    }
+    if (key.action === "backspace") {
+      setExpression((current) => current.slice(0, -1));
+      return;
+    }
+    setExpression((current) => current + (key.input ?? ""));
+  };
+
+  const apply = (): void => {
+    if (outcome.value === null) {
+      return;
+    }
+    onChange(maskCurrencyBR(formatCurrencyBR(outcome.value)));
+    setOpen(false);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+    const onButton: boolean =
+      event.target instanceof HTMLElement && event.target.tagName === "BUTTON";
+
+    // Com o foco numa tecla, o Enter é o clique dela — mexer nisso quebraria
+    // quem navega por Tab.
+    if (event.key === "Enter" && !onButton) {
+      event.preventDefault();
+      apply();
+      return;
+    }
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      setExpression((current) => current.slice(0, -1));
+      return;
+    }
+    if (event.key.length === 1 && isCalcCharacter(event.key)) {
+      event.preventDefault();
+      // No teclado numérico o decimal é ponto; em reais, é vírgula.
+      setExpression((current) => current + (event.key === "." ? "," : event.key));
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverAnchor asChild>
+        <div className="relative">
+          <Input
+            id={id}
+            name={name}
+            value={value}
+            onChange={(event) => onChange(maskCurrencyBR(event.target.value))}
+            onBlur={onBlur}
+            placeholder={placeholder}
+            disabled={disabled}
+            prefix="R$"
+            inputMode="decimal"
+            className="pr-11"
+          />
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="iconSm"
+              disabled={disabled}
+              aria-label={t("calculator.open")}
+              className={cn(
+                "absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-primary",
+                open && "bg-primary/15 text-primary",
+              )}
+            >
+              <Calculator />
+            </Button>
+          </PopoverTrigger>
+        </div>
+      </PopoverAnchor>
+
+      <PopoverContent
+        ref={panelRef}
+        align="end"
+        aria-label={t("calculator.title")}
+        onKeyDown={handleKeyDown}
+        // O foco fica no painel, e não na primeira tecla: assim o Enter usa o
+        // valor em vez de apertar o "C".
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          panelRef.current?.focus();
+        }}
+        tabIndex={-1}
+        className="w-72"
+      >
+        <div className="flex min-h-17 flex-col justify-between gap-1 rounded-md border border-border bg-muted/50 px-3 py-2 text-right">
+          <span className="min-h-5 break-all font-mono text-xs text-muted-foreground">
+            {toDisplayExpression(expression)}
+          </span>
+          {outcome.message ? (
+            <span className="break-words text-xs text-destructive">{outcome.message}</span>
+          ) : (
+            <span className="break-all font-mono text-lg font-medium tabular-nums">
+              {formatMoneyBR(outcome.value ?? 0)}
+            </span>
+          )}
+        </div>
+
+        <div className="mt-2 grid grid-cols-4 gap-1.5">
+          {KEYS.map((key, index) => (
+            <Button
+              key={key.label ?? key.action ?? index}
+              type="button"
+              variant={key.role === "aux" ? "outline" : "secondary"}
+              aria-label={key.labelKey ? t(key.labelKey) : undefined}
+              onClick={() => press(key)}
+              className={cn(
+                "h-9 px-0 font-mono text-sm",
+                key.role === "operator" && "text-primary",
+                key.role === "aux" && "text-muted-foreground",
+              )}
+            >
+              {key.label ?? (key.input ? toDisplayExpression(key.input) : <Delete />)}
+            </Button>
+          ))}
+        </div>
+
+        <div className="mt-2 flex gap-1.5">
+          <Button
+            type="button"
+            variant="outline"
+            className="h-9 flex-1"
+            onClick={() => setOpen(false)}
+          >
+            {t("calculator.cancel")}
+          </Button>
+          <Button
+            type="button"
+            className="h-9 flex-1"
+            disabled={outcome.value === null}
+            onClick={apply}
+          >
+            {t("calculator.apply")}
+          </Button>
+        </div>
+
+        <p className="mt-2 text-center text-[10px] text-muted-foreground">
+          {t("calculator.hint")}
+        </p>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/i18n/messages/en.ts

@@ -265,6 +265,25 @@ export const en: Messages = {
     markAllRead: "Mark all as read",
     empty: "No notifications",
   },
+  calculator: {
+    open: "Open the calculator",
+    title: "Calculator",
+    apply: "Use value",
+    cancel: "Cancel",
+    clear: "Clear",
+    backspace: "Delete last character",
+    hint: "Enter uses the value · Esc closes",
+    error: {
+      unknownCharacter: "“{character}” cannot be used in a calculation",
+      invalidNumber: "That is not a number",
+      incomplete: "The calculation is unfinished",
+      unclosedParen: "A parenthesis was left open",
+      trailing: "There is something after the end of the calculation",
+      divisionByZero: "Cannot divide by zero",
+      notPositive: "The result must be greater than zero",
+      outOfRange: "The result is above the highest value this field takes",
+    },
+  },
   common: {
     save: "Save",
     optional: "optional",

package/src/i18n/messages/pt.ts

@@ -268,6 +268,25 @@ export const pt = {
     markAllRead: "Marcar todas como lidas",
     empty: "Nenhuma notificação",
   },
+  calculator: {
+    open: "Abrir a calculadora",
+    title: "Calculadora",
+    apply: "Usar valor",
+    cancel: "Cancelar",
+    clear: "Limpar a conta",
+    backspace: "Apagar o último caractere",
+    hint: "Enter usa o valor · Esc fecha",
+    error: {
+      unknownCharacter: "Não dá para usar “{character}” numa conta",
+      invalidNumber: "Esse número não existe",
+      incomplete: "Falta terminar a conta",
+      unclosedParen: "Falta fechar o parêntese",
+      trailing: "Sobrou algo depois do fim da conta",
+      divisionByZero: "Não dá para dividir por zero",
+      notPositive: "O resultado precisa ser maior que zero",
+      outOfRange: "O resultado passa do maior valor que o campo aceita",
+    },
+  },
   common: {
     save: "Salvar",
     optional: "opcional",

package/src/index.ts

@@ -63,6 +63,7 @@ export { anyOrTeam } from "#core/_utils/permission";
 // segunda cópia é sempre a que esquece o teto de dígitos.
 export {
   formatCurrencyBR,
+  formatMoneyBR,
   maskCurrencyBR,
   maskPhoneBR,
   parseCurrencyBR,