@aurea-uds/native 0.7.0 → 0.8.0

package/dist/numero.js

@@ -0,0 +1,291 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Aurea nativo — o NÚMERO: `NumberField`, e o formatador que a ADR-0024 delegava ao motor.
+//
+// Lote 7 do `NATIVE.md` §8, segunda das três lacunas medidas pelo consumidor. O `Input` do Lote 4
+// tem `keyboardType` e o comentário dele já cita a demanda (`inputs.tsx:232-235`: *"o plano do
+// consumidor pede `numeric` nos campos de medida e moeda"*) — mas teclado numérico é a metade
+// fácil. **A que faltava é o FORMATO**: moeda, medida decimal e contador.
+//
+// ── A ADR-0024 ATRAVESSA, E FOI CONFERIDA ANTES DE SE AFIRMAR ISSO ───────────────────────────
+// A decisão da web é *"a Aurea entrega o MOMENTO, não o formato"*: formatar no **blur**, nunca
+// enquanto se digita. As três medições que a sustentam (o `Input mask` do USWDS publicado com
+// reprovação WCAG registrada, o abandono da máscara pelo MUI na v6, a prática de acessibilidade)
+// são sobre COMPORTAMENTO HUMANO, não sobre plataforma — então elas valem igual aqui, e não há
+// evidência nova que reabra a decisão (`decisions/README.md`).
+//
+// **A dúvida que a demanda levantou era outra, e estava errada:** *"no nativo não há blur
+// equivalente garantido"*. Há. O `TextInput` do RN tem `onBlur` e `onFocus`, o `Input` do Lote 4
+// já os expõe (`inputs.tsx:239-240`) e já os liga (`inputs.tsx:278-279`). O blur dispara ao
+// perder foco, ao fechar o teclado e ao sair da tela.
+//
+// **O que MUDA de verdade é quem formata.** Na web, `NumberFieldRoot` do `@base-ui/react` recebe
+// `format`/`locale` e chama o `Intl`. **Não há Base UI aqui.** Então a chamada ao `Intl` passa a
+// ser nossa — e com ela a volta, que na web ninguém escreveu: **converter de volta o que a pessoa
+// digitou**. Isto é o que o arquivo faz.
+//
+// ── O `Intl` NO MOTOR JS DO RN: o que foi lido, e o que dele NÃO se usa ──────────────────────
+// Medido no `doc/IntlAPIs.md` do próprio motor (a fonte, não um blog), em 11/09/2026:
+//
+//   • `Intl.NumberFormat` com `format` e `resolvedOptions` existe **nos dois sistemas**, e a
+//     implementação delega à plataforma — ICU no Android, `NSFormatter` no iOS. Moeda e decimal,
+//     que é a demanda, estão cobertos;
+//   • `formatToParts` é **só Android**. Por isso este arquivo NÃO o usa para descobrir os
+//     separadores — ele os deriva formatando um número-sonda, que funciona onde `format` funciona;
+//   • o resultado **varia com a versão do Android**, porque varia o ICU do aparelho. É o preço de
+//     não embutir ICU no bundle, e o motor o declara;
+//   • abaixo do Android 21 o locale cai para inglês. Fora do alvo deste pacote.
+//
+// **Três defeitos conhecidos, e a biblioteca fica longe dos três:**
+//   `notation: "compact"`   quebrado nos dois (motor#768, motor#1035). **Recusado com aviso em `__DEV__`**;
+//   `signDisplay: "always"` com moeda, some o símbolo nos positivos no Android (motor#789);
+//   `format()` com STRING   não é lido como decimal (motor#1418). Aqui só entra `number`, nunca texto.
+//
+// ⚠ **E há a possibilidade de não haver `Intl` nenhum** — o consumidor pode compilar o motor sem
+// ele, ou trocar de motor. A queda é declarada e visível (o número cru, com o separador do
+// locale), nunca um `R$` inventado à mão: uma moeda formatada errado é pior que uma não
+// formatada, porque parece certa.
+import * as React from "react";
+import { Platform, TextInput, View } from "react-native";
+import { IconButton } from "./actions.js";
+import { criarFolha } from "./estilos.js";
+import { useCampo } from "./inputs.js";
+import { useAureaStrings, useAureaTokens } from "./theme.js";
+const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
+const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textXs : s === "lg" ? t.size.textBase : t.size.textMd;
+const folha = criarFolha((t) => ({
+    // `.number-field-group` da web (`aurea.css:705`): linha, centro, `--space-1` entre as peças.
+    grupo: { flexDirection: "row", alignItems: "center", gap: t.size.space1 },
+    // O `.number-field-input` (`aurea.css:706`) é `--space-16` de largura e CENTRALIZADO. A largura
+    // fixa atravessa como mínimo e não como fixa: num telefone de 360dp, com dois botões ao lado,
+    // um campo rígido estoura a linha em `spacious`.
+    campo: {
+        flex: 1, minWidth: t.size.space16 ?? 64, textAlign: "center",
+        borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
+        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+        // A mesma correção de Android do `Input` do Lote 4 — ver `inputs.tsx:280-296`.
+        paddingVertical: 0, textAlignVertical: "center",
+    },
+    invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
+    desabilitado: { opacity: 0.5 },
+}));
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// O formatador, e a volta que a web não precisou escrever
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+const TEM_INTL = (() => {
+    try {
+        return typeof Intl !== "undefined" && typeof Intl.NumberFormat === "function";
+    }
+    catch {
+        return false;
+    }
+})();
+// A sonda é `12345.6`: ela tem separador de grupo E casa decimal, então a saída carrega os dois
+// em posições conhecidas — o PRIMEIRO não-dígito é o de grupo, o ÚLTIMO é o decimal.
+//
+//     pt-BR  -> "12.345,6"   grupo "."   decimal ","
+//     en-US  -> "12,345.6"   grupo ","   decimal "."
+//     fr-FR  -> "12 345,6"   grupo U+202F (espaço estreito), decimal ","
+//
+// É por isso que a derivação é por SONDA e não por tabela: o espaço estreito do francês é o tipo
+// de detalhe que uma tabela escrita à mão erra, e que o `formatToParts` resolveria — se ele
+// existisse no iOS.
+const SONDA = 12345.6;
+const cacheDeSeparadores = new Map();
+/** Descobre o separador decimal e o de milhar do locale. Memoizado por locale. */
+export function separadoresDoLocale(locale) {
+    const chave = locale ?? "";
+    const guardado = cacheDeSeparadores.get(chave);
+    if (guardado)
+        return guardado;
+    let achado = { decimal: ".", grupo: "," };
+    if (TEM_INTL) {
+        try {
+            const amostra = new Intl.NumberFormat(locale).format(SONDA);
+            const naoDigitos = amostra.replace(/\p{Nd}/gu, "");
+            if (naoDigitos.length >= 1) {
+                achado = {
+                    decimal: naoDigitos.slice(-1),
+                    grupo: naoDigitos.length >= 2 ? naoDigitos.slice(0, 1) : "",
+                };
+            }
+        }
+        catch {
+            // Locale inválido, ou `Intl` presente e capenga. O padrão acima é o do `Number.prototype`,
+            // que é o que a queda inteira usa.
+        }
+    }
+    cacheDeSeparadores.set(chave, achado);
+    return achado;
+}
+const cacheDeFormatos = new Map();
+/**
+ * Formata um número para EXIBIÇÃO. Nunca para o valor que o app guarda.
+ *
+ * ⚠ Sem `Intl`, devolve o número cru com o separador decimal do locale — **não** uma moeda
+ * montada à mão. Ver a nota no topo do módulo.
+ */
+export function formatarNumero(n, locale, format) {
+    if (TEM_INTL) {
+        const chave = `${locale ?? ""}|${format ? JSON.stringify(format) : ""}`;
+        try {
+            let f = cacheDeFormatos.get(chave);
+            if (!f) {
+                f = new Intl.NumberFormat(locale, format);
+                cacheDeFormatos.set(chave, f);
+            }
+            // ⚠ Sempre `number`, nunca `String(n)`: o motor não lê string como decimal (motor#1418).
+            return f.format(n);
+        }
+        catch {
+            // Opção que este motor não conhece. Cai para o cru em vez de derrubar a tela.
+        }
+    }
+    const { decimal } = separadoresDoLocale(locale);
+    return String(n).replace(".", decimal);
+}
+/**
+ * Lê de volta o que a pessoa digitou. **Devolve `null` quando não há número** — e `null` não é
+ * zero: um campo vazio e um campo com `0` são coisas diferentes num lançamento.
+ *
+ * Aceita o que a pessoa realmente digita ou cola: `R$ 1.234,50`, `1 234,50`, `-12,4`, `12.4`.
+ * A regra é simples e por isso previsível — **tudo que não é dígito, sinal ou o separador
+ * decimal DO LOCALE é lixo** e sai fora, inclusive o separador de milhar.
+ */
+export function lerNumero(texto, locale) {
+    const { decimal } = separadoresDoLocale(locale);
+    const negativo = /-/.test(texto);
+    // `\p{Nd}` e não `[0-9]`: o teclado de alguns locales entrega dígitos que não são ASCII, e um
+    // filtro ASCII os jogaria fora em silêncio — devolvendo `null` para um número que a pessoa vê
+    // na tela.
+    let cru = "";
+    for (const c of texto) {
+        if (/\p{Nd}/u.test(c))
+            cru += c;
+        else if (c === decimal)
+            cru += ".";
+    }
+    // Duas casas decimais digitadas por engano ("1.2.3") não viram número — melhor devolver `null`
+    // e deixar o campo mostrar o que era antes do que adivinhar qual ponto a pessoa quis.
+    if (cru === "" || cru === ".")
+        return null;
+    if (cru.indexOf(".") !== cru.lastIndexOf("."))
+        return null;
+    const n = Number(cru);
+    if (!Number.isFinite(n))
+        return null;
+    return negativo ? -n : n;
+}
+const prender = (n, min, max) => {
+    let v = n;
+    if (min != null && v < min)
+        v = min;
+    if (max != null && v > max)
+        v = max;
+    return v;
+};
+// O texto que o campo mostra ENQUANTO SE EDITA: o número sem grupo e sem símbolo, com o separador
+// decimal do locale. É o oposto do que se mostra em repouso, e é a decisão da ADR-0024 — editar
+// "R$ 1.234,50" com o cursor no meio é o defeito que o MUI filmou.
+const paraEdicao = (n, locale) => {
+    if (n == null)
+        return "";
+    const { decimal } = separadoresDoLocale(locale);
+    return String(n).replace(".", decimal);
+};
+/**
+ * O número que se digita OU se empurra de um em um.
+ *
+ * ```tsx
+ * <Field label="Valor">
+ *   <NumberField value={valor} onValueChange={setValor}
+ *                format={{style: "currency", currency: "BRL"}} locale="pt-BR" />
+ * </Field>
+ *
+ * <Field label="Litros">
+ *   <NumberField value={litros} onValueChange={setLitros}
+ *                format={{maximumFractionDigits: 1}} locale="pt-BR" min={0} />
+ * </Field>
+ *
+ * <Field label="Quantidade">
+ *   <NumberField value={qtd} onValueChange={setQtd} min={0} step={1} />
+ * </Field>
+ * ```
+ *
+ * ⚠ **O que sai por `onValueChange` é o número CRU, sempre.** `1234.5`, nunca `"R$ 1.234,50"`.
+ * É a mesma trava da ADR-0024 — lá o motor renderiza um input escondido com o valor cru; aqui não
+ * há formulário nativo para esconder nada, então o contrato É a assinatura da função.
+ *
+ * ⚠ **Formata no blur, e só no blur.** Enquanto o campo tem foco, ele mostra exatamente o que foi
+ * digitado — essa é a decisão inteira da ADR-0024, e o teste que a cobra está no lote.
+ */
+export function NumberField({ value, defaultValue, onValueChange, min, max, step = 1, format, locale, disabled, readOnly, size, label, placeholder, keyboardType, icons = { increment: "add", decrement: "subtract" }, style, testID, }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const strings = useAureaStrings();
+    const campo = useCampo();
+    const tam = size ?? campo?.size ?? "md";
+    const inativo = disabled ?? campo?.disabled;
+    const [interno, setInterno] = React.useState(defaultValue ?? null);
+    const numero = value !== undefined ? value : interno;
+    // `null` = o campo está em repouso e mostra o FORMATADO. Uma string = está sendo editado, e a
+    // string é literalmente o que foi digitado. Os dois estados não se misturam, e é isso que faz
+    // "digitar não é interrompido" ser verdade em vez de intenção.
+    const [emEdicao, setEmEdicao] = React.useState(null);
+    if (__DEV__ && format && format.notation === "compact") {
+        console.warn("Aurea NumberField: `notation: \"compact\"` está quebrado no motor nos dois sistemas " +
+            "(motor#768, motor#1035) e por isso é ignorado. Formate o número no app se precisar de " +
+            "\"1,2 mi\" — e teste em aparelho, não no simulador.");
+    }
+    const formatoSeguro = React.useMemo(() => {
+        if (!format || format.notation !== "compact")
+            return format;
+        const { notation: _fora, compactDisplay: _fora2, ...resto } = format;
+        return resto;
+    }, [format]);
+    const emitir = React.useCallback((n) => {
+        if (value === undefined)
+            setInterno(n);
+        onValueChange?.(n);
+    }, [value, onValueChange]);
+    const mostrar = emEdicao != null
+        ? emEdicao
+        : numero == null ? "" : formatarNumero(numero, locale, formatoSeguro);
+    const confirmar = React.useCallback(() => {
+        if (emEdicao == null)
+            return;
+        const lido = lerNumero(emEdicao, locale);
+        setEmEdicao(null);
+        // Texto ilegível devolve o valor de antes — o campo volta a mostrar o formatado, e nada se
+        // perde. Apagar tudo, que é diferente, devolve `null`.
+        if (lido == null) {
+            if (emEdicao.trim() === "")
+                emitir(null);
+            return;
+        }
+        emitir(prender(lido, min, max));
+    }, [emEdicao, locale, emitir, min, max]);
+    const empurrar = React.useCallback((direcao) => {
+        // Se o campo está sendo editado, o que vale é o que está escrito — empurrar por cima do valor
+        // antigo descartaria a digitação em silêncio.
+        const base = emEdicao != null ? (lerNumero(emEdicao, locale) ?? 0) : (numero ?? 0);
+        setEmEdicao(null);
+        emitir(prender(base + direcao * step, min, max));
+    }, [emEdicao, numero, locale, emitir, step, min, max]);
+    const tecladoPadrao = min != null && min < 0
+        ? (Platform.OS === "ios" ? "numbers-and-punctuation" : "numeric")
+        : "decimal-pad";
+    const noLimite = (direcao) => {
+        const base = numero ?? 0;
+        return direcao === 1 ? (max != null && base >= max) : (min != null && base <= min);
+    };
+    const mostrarBotoes = icons !== false && !readOnly;
+    return (_jsxs(View, { testID: testID, style: [s.grupo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: setEmEdicao, onFocus: () => setEmEdicao(paraEdicao(numero, locale)), onBlur: confirmar, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
+                // O nome vem do `Field`, como em todo controle deste pacote — e `label` cobre quem usa o
+                // campo solto. Sem um dos dois, é um nó anônimo para o leitor de tela.
+                accessibilityLabel: label ?? campo?.label, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, "aria-invalid": campo?.invalido, style: [
+                    s.campo,
+                    { height: alturaDoTamanho(t, tam), fontSize: fonteDoTamanho(t, tam),
+                        fontFamily: t.font.ui[400], color: t.color.foreground },
+                    campo?.invalido && s.invalido,
+                ] }), mostrarBotoes && (_jsx(IconButton, { name: icons.increment, label: strings.increment, appearance: "ghost", size: tam, disabled: inativo || noLimite(1), onPress: () => empurrar(1), testID: testID ? `${testID}-mais` : undefined }))] }));
+}

package/dist/strings.d.ts

@@ -44,6 +44,32 @@ export interface AureaStrings {
     tableLabel: string;
     /** O nome do `Chart` sem `label`. Mesmo nome da web. */
     chartLabel: string;
+    /** O botão que soma um passo no `NumberField`. Mesmo nome da web. */
+    increment: string;
+    /** O botão que tira um passo no `NumberField`. Mesmo nome da web. */
+    decrement: string;
+    /** O que o `Combobox` mostra quando a busca não achou nada. Mesmo nome da web. */
+    comboboxEmpty: string;
+    /** O botão que desfaz a escolha do `Combobox`. Mesmo nome da web. */
+    comboboxClear: string;
+    /** O que o `Combobox` anuncia enquanto a busca remota não voltou. Mesmo nome da web. */
+    comboboxLoading: string;
+    /**
+     * O nome e o texto-guia do campo de busca DENTRO da folha do `Combobox`.
+     *
+     * ⚠ **Não existe na web**, e é uma das duas chaves deste pacote sem par lá — porque a anatomia
+     * é outra: lá o `<input>` É o combobox e o texto-guia vem do consumidor; aqui a folha tem um
+     * campo próprio, que precisa de nome mesmo quando ninguém passou um.
+     */
+    comboboxSearch: string;
+    /**
+     * O botão que apaga o que foi digitado numa busca — no `SearchField` e no campo da folha do
+     * `Combobox`. **Não existe na web** pela mesma razão: lá o `type="search"` do navegador desenha
+     * o "x" sozinho, e no React Native não há nada equivalente.
+     */
+    searchClear: string;
+    /** O nome da grade de fotos da `Gallery`. Mesmo nome da web. */
+    galleryLabel: string;
     /** A frase de cada estado universal. */
     universalState: Record<AureaUniversalState, string>;
 }

package/dist/strings.js

@@ -43,6 +43,14 @@ export const defaultStrings = {
     dismissNotification: "Dismiss notification",
     tableLabel: "Table",
     chartLabel: "Chart",
+    increment: "Increase",
+    decrement: "Decrease",
+    comboboxEmpty: "No results",
+    comboboxClear: "Clear selection",
+    comboboxLoading: "Loading…",
+    comboboxSearch: "Search",
+    searchClear: "Clear search",
+    galleryLabel: "Gallery",
     universalState: {
         waiting_user: "Waiting for someone to act.",
         waiting_approval: "Waiting for approval.",
@@ -70,6 +78,14 @@ export const ptBR = {
     dismissNotification: "Dispensar notificação",
     tableLabel: "Tabela",
     chartLabel: "Gráfico",
+    increment: "Aumentar",
+    decrement: "Diminuir",
+    comboboxEmpty: "Nenhum resultado",
+    comboboxClear: "Limpar seleção",
+    comboboxLoading: "Carregando…",
+    comboboxSearch: "Buscar",
+    searchClear: "Limpar busca",
+    galleryLabel: "Galeria",
     universalState: {
         waiting_user: "Esperando alguém agir.",
         waiting_approval: "Esperando aprovação.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React Native target for Aurea UDS: the theme x density provider, the first components and the Carbon icons, drawn on react-native-svg.",
   "keywords": [
     "aurea",
@@ -47,7 +47,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.7.0"
+    "@aurea-uds/tokens": "^0.8.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",