@aurea-uds/native 0.7.0 → 0.8.1

package/dist/midia.js

@@ -0,0 +1,181 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Aurea nativo — a MÍDIA: `Image` e `Gallery`.
+//
+// Lote 7 do `NATIVE.md` §8, terceira das três lacunas medidas pelo consumidor — e a que ele
+// classificou como acabamento. A frase dele é exata: *"O `PhotoInput` entra foto. Nada mostra
+// foto."* Conferido: o `sistema.tsx:184-225` devolve `AureaPhoto {uri, width, height}` e o único
+// componente do pacote que desenha um bitmap é o `Avatar` (`display.tsx:279-297`), que é outro
+// papel — um retrato redondo do tamanho de um controle, com iniciais por trás.
+//
+// ── A RESPOSTA "USA O `Image` DO RN E NÃO É LACUNA" FOI CONSIDERADA, E RECUSADA ──────────────
+// Era uma das três saídas possíveis, e é tentadora porque o RN já tem um `Image`. Ela cai por
+// medição, não por gosto: a ficha da web (`packages/contracts/registry/Image.json`) diz que o
+// componente é *"uma imagem que RESERVA A CAIXA antes dos bytes chegarem, e CAI PARA UM
+// SUBSTITUTO quando eles nunca chegam"*. O `Image` cru do RN não faz nenhuma das duas.
+//
+// E o custo de não fazê-las já está pago e registrado nesta casa: o `Avatar` foi medido em
+// 31/07/2026 com `src` quebrado e **não caía no substituto**. O conserto virou o `useEffect` por
+// `source` do `display.tsx:283-284`. Mandar cada tela do app reescrever isso é devolver ao
+// consumidor o problema que o design system existe para resolver — e é a terceira vez que esta
+// casa corrigiria a mesma coisa em três lugares (a regra do `CLAUDE.md` sobre correção local).
+//
+// ── O QUE FOI MEDIDO NO CSS, COM A LINHA ─────────────────────────────────────────────────────
+//   .image          aurea.css:1434   bloco, 100% de largura, `object-fit:cover`, raio LG, fundo surface-3
+//   .image-contain  :1435            `object-fit:contain`, fundo transparente
+//   .image-broken   :1436            grade centrada, cor mutedForeground
+//   .gallery        :1448            grade auto-fill de `--gallery-min` (8rem), gap space-3
+//   .gallery-tile   :1450            grade com gap space-1, padding space-1, raio LG
+//   .gallery-tile:not(.is-selected)  :1458   fundo transparente, cor mutedForeground
+//   .gallery-caption :1459           textSm
+//
+// ── TRÊS COISAS DA WEB NÃO ATRAVESSAM, E CADA UMA POR UM MOTIVO DIFERENTE ────────────────────
+//   `loading="lazy"`  não existe no RN — a decodificação preguiçosa é do motor de lista, não da
+//                     imagem. Quem quer isso usa `FlatList`, que é o que a `Gallery` faz;
+//   `ratio="16/9"`    a web aceita a STRING do CSS; o `aspectRatio` do RN é **número**. Aqui as
+//                     duas formas entram, e a string é convertida — quem porta uma tela da web
+//                     não deveria descobrir isso por um layout de altura zero;
+//   `render`          a web troca o elemento pelo `useRender` do Base UI. Aqui é `cloneElement`,
+//                     e serve ao mesmo caso real: o consumidor que já usa `expo-image`.
+import * as React from "react";
+import { Image as ImageRN, Pressable, View, } from "react-native";
+import { criarFolha } from "./estilos.js";
+import { Icon } from "./icon.js";
+import { Grid } from "./layout.js";
+import { Dialog } from "./overlays.js";
+import { Text } from "./text.js";
+import { useAureaStrings, useAureaTokens } from "./theme.js";
+const folha = criarFolha((t) => ({
+    // O fundo NÃO é enfeite: ele é o marcador de carregamento inteiro. A web decidiu isso em
+    // prosa (`media-client.tsx`, "O MARCADOR DE CARREGAMENTO NÃO TEM ESTADO") e a razão vale aqui
+    // com mais força — um `useState` por imagem numa galeria de trinta fotos é trinta renders a
+    // mais numa lista que já rola.
+    imagem: {
+        width: "100%",
+        borderRadius: t.size.radiusLg,
+        backgroundColor: t.color.surface3 ?? t.color.muted,
+    },
+    contain: { backgroundColor: "transparent" },
+    quebrada: { alignItems: "center", justifyContent: "center" },
+    ladrilho: { gap: t.size.space1, padding: t.size.space1, borderRadius: t.size.radiusLg },
+    ladrilhoEscolhido: { backgroundColor: t.color.secondary },
+}));
+/** `"16/9"`, `"4:3"` ou o número que o RN quer. Devolve `undefined` quando não dá para ler. */
+function razao(v) {
+    if (v == null)
+        return undefined;
+    if (typeof v === "number")
+        return Number.isFinite(v) && v > 0 ? v : undefined;
+    // A web escreve `16/9`; alguém vai escrever `16:9`. As duas entram.
+    const partes = v.split(/[/:]/);
+    if (partes.length === 2) {
+        const a = Number(partes[0]), b = Number(partes[1]);
+        if (Number.isFinite(a) && Number.isFinite(b) && b !== 0)
+            return a / b;
+    }
+    const n = Number(v);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+}
+// Interno de propósito: não sai pelo barril. O consumidor escreve `string` ou `require()` e o
+// componente converte — expor o conversor seria superfície pública sem caso de uso.
+const fonteDaImagem = (s) => typeof s === "string" ? { uri: s } : s;
+/**
+ * A foto, com a caixa reservada e um substituto quando ela não vem.
+ *
+ * ```tsx
+ * <Image source={foto.uri} alt="Frente do item" ratio="4/3" />
+ * ```
+ *
+ * ⚠ **A caixa nasce reservada e pintada** com a mesma superfície do `Skeleton` — sem `ratio`, o
+ * layout salta quando o bitmap chega, e num telefone esse salto acontece com o dedo já a caminho
+ * do botão.
+ *
+ * ⚠ **O substituto continua sendo a imagem para quem usa leitor de tela**, com o mesmo `alt`.
+ * Trocar o bitmap por uma caixa muda o que se vê, não o que a foto É — e o `role="image"` mapeia
+ * nos dois sistemas (`ReactAccessibilityDelegate.kt:461`, `RCTConversions.h:96`).
+ */
+export function Image({ source, alt, ratio, fit = "cover", fallback, fallbackIcon = "image", render, onError, style, testID, }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const [quebrou, setQuebrou] = React.useState(false);
+    // A `source` nova merece uma tentativa nova — é a mesma linha do `Avatar` (`display.tsx:283`),
+    // e sem ela uma URL quebrada deixa um buraco permanente mesmo depois de o app trocar a foto.
+    React.useEffect(() => { setQuebrou(false); }, [source]);
+    const proporcao = razao(ratio);
+    const caixa = [
+        s.imagem,
+        fit === "contain" && s.contain,
+        proporcao != null && { aspectRatio: proporcao },
+        style,
+    ];
+    if (quebrou) {
+        return (_jsx(View, { testID: testID, style: [caixa, s.quebrada], accessible: true, accessibilityRole: "image", accessibilityLabel: alt || undefined, children: fallback ?? (fallbackIcon
+                ? _jsx(Icon, { name: fallbackIcon, size: "lg", color: t.color.mutedForeground })
+                : null) }));
+    }
+    const comuns = {
+        source: fonteDaImagem(source),
+        style: caixa,
+        onError: () => { setQuebrou(true); onError?.(); },
+        // `alt=""` é decorativo explícito: some da árvore em vez de entrar com nome vazio.
+        accessible: alt !== "",
+        accessibilityRole: alt !== "" ? "image" : undefined,
+        accessibilityLabel: alt !== "" ? alt : undefined,
+        testID,
+    };
+    // `cloneElement` e não `useRender`: o idioma do Base UI não existe aqui, e o que o caso real
+    // precisa é de um elemento pronto recebendo as nossas props. As props do consumidor vêm
+    // primeiro no objeto do elemento e as nossas depois — `source` e `onError` são o contrato
+    // deste componente, e deixá-las sobrescrevíveis seria prometer o substituto e não entregá-lo.
+    if (render)
+        return React.cloneElement(render, comuns);
+    // ⚠ O molde é `ImageStyle` e não `ViewStyle`, e a conversão é CONSCIENTE: os dois tipos só
+    // divergem em duas coisas — o `overflow` do `ViewStyle` aceita `"scroll"`, que o `ImageStyle`
+    // não tem, e o `ImageStyle` soma `resizeMode`/`tintColor`/`overlayColor`. **Nada aqui escreve
+    // nenhuma das duas**: a folha põe largura, raio, fundo e proporção, e o `resizeMode` vai como
+    // prop, ao lado. A API pública fica em `ViewStyle` de propósito — quem chama pensa em caixa, e
+    // fazer o consumidor importar `ImageStyle` para passar um raio seria vazar o primitivo.
+    return _jsx(ImageRN, { ...comuns, style: caixa, resizeMode: fit });
+}
+/**
+ * A grade de fotos, e a foto grande quando se toca.
+ *
+ * ```tsx
+ * <Gallery items={fotos} zoom selected={atual} onSelect={setAtual} />
+ * ```
+ *
+ * ⚠ **Ampliar é DIÁLOGO, e diálogo já existe.** É a trava que a web escreveu no item L2 e ela
+ * atravessa inteira: a foto grande abre no `Dialog` do Lote 5, com o confinamento de foco que o
+ * `Modal` do RN dá pelo sistema e a saída pelo botão VOLTAR do Android. Uma segunda superfície
+ * flutuante aqui seria uma segunda linguagem.
+ *
+ * ⚠ **Legenda visível torna a miniatura decorativa**, e quem exigiu isso na web foi o axe, não a
+ * teoria: com `alt` e legenda dizendo a mesma coisa, o leitor de tela anuncia duas vezes seguidas.
+ * Aqui a tradução é outra (não há `alt=""` no RN) mas a regra é a mesma — **com legenda, quem
+ * carrega o nome é o LADRILHO, e a imagem sai da árvore**. O `alt` não se perde: ele continua
+ * nomeando a foto ampliada, que é onde não há legenda ao lado.
+ *
+ * ⚠ **Sem `onSelect` e sem `zoom` os ladrilhos não são alvos.** Um `Pressable` que não faz nada é
+ * um alvo que engana quem navega por leitor de tela — mesma decisão da web, mesma razão.
+ */
+export function Gallery({ items, label, selected, onSelect, zoom, ratio = 1, minTileWidth = 128, style, testID, }) {
+    const s = folha(useAureaTokens());
+    const strings = useAureaStrings();
+    const [ampliado, setAmpliado] = React.useState(null);
+    const interativo = !!onSelect || !!zoom;
+    const aberto = items.find((i) => i.id === ampliado) ?? null;
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { testID: testID, minColumnWidth: minTileWidth, accessibilityRole: "list", accessibilityLabel: label ?? strings.galleryLabel, style: style, children: items.map((item) => {
+                    const temLegenda = item.caption != null;
+                    const miolo = (_jsxs(_Fragment, { children: [_jsx(Image, { source: item.source, alt: temLegenda ? "" : item.alt, ratio: ratio }), temLegenda && (typeof item.caption === "string"
+                                ? _jsx(Text, { size: "sm", numberOfLines: 2, children: item.caption })
+                                : item.caption)] }));
+                    if (!interativo) {
+                        return _jsx(View, { style: s.ladrilho, children: miolo }, item.id);
+                    }
+                    return (_jsx(Pressable, { testID: testID ? `${testID}-${item.id}` : undefined, onPress: () => { onSelect?.(item.id); if (zoom)
+                            setAmpliado(item.id); }, accessibilityRole: "imagebutton", 
+                        // Com legenda, o nome do ladrilho é a legenda e a imagem já saiu da árvore (o
+                        // `alt=""` acima). Sem legenda, o nome é o `alt`.
+                        accessibilityLabel: temLegenda && typeof item.caption === "string"
+                            ? item.caption : item.alt, accessibilityState: { selected: item.id === selected }, style: [s.ladrilho, item.id === selected && s.ladrilhoEscolhido], children: miolo }, item.id));
+                }) }), zoom && (_jsx(Dialog, { open: aberto != null, title: aberto ? (typeof aberto.caption === "string" ? aberto.caption : aberto.alt) : "", onClose: () => setAmpliado(null), testID: testID ? `${testID}-ampliada` : undefined, children: aberto && _jsx(Image, { source: aberto.source, alt: aberto.alt, fit: "contain", ratio: ratio }) }))] }));
+}

package/dist/numero.d.ts

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type AureaFieldSize } from "./inputs.js";
+/** Os separadores de um locale, derivados de um número-sonda. */
+export type AureaSeparadores = {
+    decimal: string;
+    grupo: string;
+};
+/** Descobre o separador decimal e o de milhar do locale. Memoizado por locale. */
+export declare function separadoresDoLocale(locale?: string): AureaSeparadores;
+/**
+ * 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 declare function formatarNumero(n: number, locale?: string, format?: Intl.NumberFormatOptions): string;
+/**
+ * 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 declare function lerNumero(texto: string, locale?: string): number | null;
+export interface NumberFieldProps {
+    /** Controlado. `null` é **vazio**, e é diferente de `0`. */
+    value?: number | null;
+    defaultValue?: number;
+    onValueChange?: (v: number | null) => void;
+    min?: number;
+    max?: number;
+    /** Quanto os botões somam e tiram. Padrão **1**. */
+    step?: number;
+    /**
+     * As opções do `Intl.NumberFormat`. **Mesma prop, mesmo tipo e mesmo significado da web** —
+     * lá elas iam para o Base UI, aqui vão para o `Intl` direto.
+     *
+     *     moeda    {style: "currency", currency: "BRL"}          com locale "pt-BR"
+     *     medida   {maximumFractionDigits: 1}                    12,4
+     *     contador nenhuma — o padrão já é o inteiro agrupado
+     *
+     * ⚠ **`notation: "compact"` não é aceito**, e a recusa é medida: está quebrado no motor nos
+     * dois sistemas (motor#768, motor#1035). Em `__DEV__` sai aviso; em produção a opção é
+     * ignorada, porque um "1,2 mi" errado numa tela de lançamento é pior que "1.234.567".
+     */
+    format?: Intl.NumberFormatOptions;
+    /** O locale do `Intl`. Sem ele, o do aparelho. */
+    locale?: string;
+    disabled?: boolean;
+    /** Mostra o valor e não deixa editar — os botões também somem. */
+    readOnly?: boolean;
+    size?: AureaFieldSize;
+    /**
+     * Ocupa a largura disponível em vez de abraçar o conteúdo. Padrão **false**.
+     *
+     * O padrão segue o `.number-field` da web, que é `inline-flex` (`aurea.css:704`) — e o mesmo
+     * eixo existe na HeroUI (`fullWidth`, medido no inventário). **Ligue para moeda:** o campo em
+     * repouso tem `--space-16` (64dp), que cabe um contador e não cabe `R$ 1.234,50`.
+     */
+    fullWidth?: boolean;
+    /** O nome para o leitor de tela quando não há `Field` em volta. */
+    label?: string;
+    placeholder?: string;
+    /**
+     * O teclado. Sem ele a escolha é derivada: **`decimal-pad`**, ou o teclado com sinal quando
+     * `min` é negativo — porque o `decimal-pad` do iOS **não tem tecla de menos**, e um campo que
+     * aceita −5 e não deixa digitá-lo é um campo quebrado.
+     */
+    keyboardType?: "numeric" | "decimal-pad" | "number-pad" | "numbers-and-punctuation";
+    /** Os glifos dos botões. Registre-os, ou passe `false` para tirar os dois. */
+    icons?: {
+        increment: IconNameLocal;
+        decrement: IconNameLocal;
+    } | false;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+type IconNameLocal = string;
+/**
+ * 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 declare function NumberField({ value, defaultValue, onValueChange, min, max, step, format, locale, disabled, readOnly, size, fullWidth, label, placeholder, keyboardType, icons, style, testID, }: NumberFieldProps): React.JSX.Element;
+export {};

package/dist/numero.js

@@ -0,0 +1,327 @@
+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) => ({
+    // 🔴 ELE ESTICAVA, E NÃO DEVIA — achado em 12/09/2026, olhando a primeira imagem da vitrine.
+    //
+    // O `.number-field` da web é `inline-flex` (`aurea.css:704`) e o `.number-field-group` também
+    // (`:705`): os dois **ABRAÇAM o conteúdo**. A primeira versão daqui punha `flex: 1` no campo,
+    // que PREENCHE — e o resultado é um campo enorme com o `−` e o `+` jogados nas pontas. Era
+    // divergência do nosso próprio CSS, entregue sem declarar, e ela só apareceu quando houve
+    // imagem para olhar.
+    //
+    // ⚠ **A saída é o eixo da HeroUI, e não uma invenção minha:** o `number-field` deles publica
+    // `fullWidth: [base, false, group, true]` (`INVENTORY-HEROUI.json`, medido em 22/08/2026).
+    // Esticar ou abraçar é DECISÃO DE USO, então vira prop — com o padrão em abraçar, que é o que
+    // o nosso CSS já dizia.
+    grupo: { flexDirection: "row", alignItems: "center", gap: t.size.space1,
+        alignSelf: "flex-start" },
+    grupoLargo: { alignSelf: "stretch" },
+    // `--space-16` = 64dp, medido. É a largura do `.number-field-input` (`aurea.css:706`), e ela
+    // serve ao caso que o componente foi feito para: contador e medida curta. **Moeda formatada
+    // não cabe em 64dp — nem aqui nem na web**, e é para isso que existe o `fullWidth`.
+    campo: {
+        width: t.size.space16, 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",
+    },
+    campoLargo: { width: undefined, flex: 1, minWidth: t.size.space16 },
+    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, fullWidth = false, 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;
+    // 🔴 ACHADO PELA REFERÊNCIA, e não por mim — 12/09/2026. O inventário da HeroUI que já morava
+    // no repositório (`audit/activity-2/INVENTORY-HEROUI.json`, medido em 22/08 sobre
+    // `@heroui/react@3.2.4`) lista os estados do `number-field` deles:
+    //
+    //     disabled · focus-visible · FOCUS-WITHIN · hovered · invalid · pressed
+    //
+    // Este componente nasceu **sem estado de foco nenhum** — e era o ÚNICO campo de texto do pacote
+    // sem ele: o `Input` do Lote 4 marca (`inputs.tsx:344`), o `Textarea` herda, o `SearchField`
+    // marca (`busca.tsx:520`). Inconsistência dentro da própria biblioteca, e invisível em teste
+    // até alguém comparar com uma referência.
+    //
+    // ⚠ **A BORDA vai no CAMPO, e não no grupo — e aqui a Aurea diverge da HeroUI de propósito.**
+    // Lá o `Group` carrega a caixa e o `Input` fica nu dentro dela. Aqui não: o `.number-field-group`
+    // do nosso CSS (`aurea.css:705`) é só `inline-flex` + `gap`, e quem tem borda é o `.input`
+    // (`aurea.css:685`), com os dois botões FORA dela. O estado que faltava é o deles; a geometria
+    // continua sendo a nossa.
+    const [focado, setFocado] = React.useState(false);
+    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, 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: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); 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,
+                    fullWidth && s.campoLargo,
+                    { height: alturaDoTamanho(t, tam), fontSize: fonteDoTamanho(t, tam),
+                        fontFamily: t.font.ui[400], color: t.color.foreground },
+                    campo?.invalido && s.invalido,
+                    // A ORDEM IMPORTA e é a mesma do `Input` do Lote 4: o inválido vem antes, o foco
+                    // depois. Um campo inválido que está sendo corrigido tem de mostrar que está ativo —
+                    // invertendo, a pessoa digita sem pista nenhuma de onde o teclado está batendo.
+                    focado && { borderColor: t.color.focusStrong },
+                ] }), 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>;
 }