@aurea-uds/native 0.7.0 → 0.8.0

package/dist/inputs.d.ts

@@ -61,10 +61,34 @@ export interface InputProps {
     /**
      * O teclado que sobe. **O plano do consumidor pede `numeric` nos campos de medida e moeda**, e
      * é a prop que faz a diferença entre digitar 12,4 em dois toques ou em oito.
+     *
+     * ⚠ **Teclado não é formato, e esta prop resolve só a metade fácil** — foi a segunda lacuna
+     * que o consumidor mediu. Moeda, medida decimal e contador são o `NumberField` (Lote 7,
+     * `numero.tsx`), que formata no blur e devolve `number`. Este campo continua devolvendo texto.
      */
     keyboardType?: KeyboardTypeOptions;
     secureTextEntry?: boolean;
     autoCapitalize?: "none" | "sentences" | "words" | "characters";
+    /**
+     * Normaliza o texto **quando o foco sai** — placa, documento, telefone.
+     *
+     * ⚠ **A Aurea entrega o MOMENTO, não o formato**, e isso é a [ADR-0024] inteira: formatar
+     * enquanto se digita é o defeito que o USWDS publicou com reprovação WCAG registrada e que o
+     * MUI abandonou na v6. O formato é conhecimento de DOMÍNIO — a Aurea não sabe o que é um
+     * documento válido em lugar nenhum, e uma tabela de formatos por país dentro de uma biblioteca
+     * de interface envelhece sem ninguém perceber.
+     *
+     *     <Input value={placa} onChangeText={setPlaca} formatOnBlur={(v) => v.toUpperCase()} />
+     *
+     * ⚠ **Exige o campo CONTROLADO** (`value` + `onChangeText`), e a diferença com a web é honesta:
+     * lá o componente escreve em `e.currentTarget.value` e o `<input>` não controlado obedece. Aqui
+     * o texto do `TextInput` não controlado vive dentro do nó nativo, e escrevê-lo de fora exigiria
+     * `setNativeProps` — API que a Nova Arquitetura desencoraja. Então o que sai daqui é o valor
+     * formatado por `onChangeText`; quem guarda o estado desenha.
+     *
+     * Para MOEDA e MEDIDA não use isto: use o `NumberField`, que já faz a conta e devolve `number`.
+     */
+    formatOnBlur?: (value: string) => string;
     onBlur?: () => void;
     onFocus?: () => void;
     /** Várias linhas. É o que o `Textarea` liga — raramente se põe à mão. */
@@ -79,7 +103,7 @@ export interface InputProps {
  * (`aurea.css:686`); **não há ponteiro no telefone**. O foco continua existindo e é o que marca o
  * campo ativo.
  */
-export declare function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, onBlur, onFocus, multiline, style, testID, }: InputProps): React.JSX.Element;
+export declare function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, }: InputProps): React.JSX.Element;
 export interface TextareaProps extends InputProps {
     /** Linhas visíveis. Vira altura mínima, porque no RN não há `rows`. */
     rows?: number;
@@ -169,6 +193,12 @@ export interface SelectProps {
  * ⚠ **O papel é `button` e não `combobox`.** `combobox` promete um campo em que se DIGITA para
  * filtrar; isto só abre uma lista. Prometer o que não se faz é o mesmo defeito do `tablist` no
  * Lote 3.
+ *
+ * ⚠ **Quem DIGITA para filtrar é o `Combobox`** (Lote 7, `busca.tsx`), e ele nasceu desta
+ * lacuna — o consumidor bateu nela no cadastro. **A escolha entre os dois é de tamanho de
+ * lista, e a linha é dura:** este monta todos os itens num `ScrollView` (abaixo), o que serve
+ * para unidades, estados e tipos; um catálogo de milhares de linhas aqui não fica lento, trava.
+ * O `Combobox` usa `FlatList` e aceita busca remota.
  */
 export declare function Select({ items, value, onChange, placeholder, disabled, size, chevron, style, testID, }: SelectProps): React.JSX.Element;
 export interface FormProps extends ViewProps {

package/dist/inputs.js

@@ -147,14 +147,25 @@ export function Label({ children, trailing, style, ...rest }) {
  * (`aurea.css:686`); **não há ponteiro no telefone**. O foco continua existindo e é o que marca o
  * campo ativo.
  */
-export function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, onBlur, onFocus, multiline, style, testID, }) {
+export function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
     const [focado, setFocado] = React.useState(false);
-    return (_jsx(TextInput, { testID: testID, value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, editable: !inativo, keyboardType: keyboardType, secureTextEntry: secureTextEntry, autoCapitalize: autoCapitalize, multiline: multiline, onFocus: () => { setFocado(true); onFocus?.(); }, onBlur: () => { setFocado(false); onBlur?.(); }, 
+    return (_jsx(TextInput, { testID: testID, value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, editable: !inativo, keyboardType: keyboardType, secureTextEntry: secureTextEntry, autoCapitalize: autoCapitalize, multiline: multiline, onFocus: () => { setFocado(true); onFocus?.(); }, onBlur: () => {
+            setFocado(false);
+            // Só avisa quando o texto MUDOU: emitir o mesmo valor a cada saída de foco faria o app
+            // re-renderizar sem motivo, e num formulário de dez campos isso é dez renders por
+            // preenchimento. Mesma guarda da web (`inputs-client.tsx:194`).
+            if (formatOnBlur && value != null) {
+                const formatado = formatOnBlur(value);
+                if (formatado !== value)
+                    onChangeText?.(formatado);
+            }
+            onBlur?.();
+        }, 
         // O nome e a dica vêm do `Field` — ver o bloco acima sobre por que a ligação da web não
         // atravessa. Sem isto, o campo é um nó anônimo para o leitor de tela.
         accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, "aria-invalid": campo?.invalido, style: [
@@ -319,6 +330,12 @@ export function SegmentedControl({ items, value, onChange, label, disabled, styl
  * ⚠ **O papel é `button` e não `combobox`.** `combobox` promete um campo em que se DIGITA para
  * filtrar; isto só abre uma lista. Prometer o que não se faz é o mesmo defeito do `tablist` no
  * Lote 3.
+ *
+ * ⚠ **Quem DIGITA para filtrar é o `Combobox`** (Lote 7, `busca.tsx`), e ele nasceu desta
+ * lacuna — o consumidor bateu nela no cadastro. **A escolha entre os dois é de tamanho de
+ * lista, e a linha é dura:** este monta todos os itens num `ScrollView` (abaixo), o que serve
+ * para unidades, estados e tipos; um catálogo de milhares de linhas aqui não fica lento, trava.
+ * O `Combobox` usa `FlatList` e aceita busca remota.
  */
 export function Select({ items, value, onChange, placeholder, disabled, size, chevron = "chevron--down", style, testID, }) {
     const t = useAureaTokens();

package/dist/midia.d.ts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from "react-native";
+import { type IconName } from "./icon.js";
+/** URL ou `require()` de um asset local — as duas formas do `Image` do RN, como no `Avatar`. */
+export type AureaImageSource = ImageSourcePropType | string;
+export interface ImageProps {
+    source: AureaImageSource;
+    /**
+     * O nome acessível. **É o `alt` da web, e é obrigatório pelo mesmo motivo que o `label` do
+     * `IconButton`:** uma foto sem texto alternativo não diz nada a quem não a vê. Decorativa de
+     * verdade se escreve `alt=""` — explícito, como manda a WAI.
+     */
+    alt: string;
+    /** `16/9`, `"16/9"`, `"16:9"` ou `1.777…`. Sem ela, a imagem ocupa a altura que o `style` der. */
+    ratio?: number | string;
+    fit?: "cover" | "contain";
+    /** O que aparece no lugar quando o bitmap não vem. Sem ele, o glifo `image` sobre a caixa reservada. */
+    fallback?: React.ReactNode;
+    /** O glifo do substituto. Registre-o, ou passe `false`. */
+    fallbackIcon?: IconName | false;
+    /**
+     * Desenha OUTRO componente de imagem com a nossa pele — é o caso do consumidor que já usa
+     * `expo-image` por cache de disco.
+     *
+     *     <Image render={<ExpoImage contentFit="cover" transition={150} />} source={u} alt="…" />
+     *
+     * Recebe `source`, `style`, `onError` e o nome acessível. **`fit` NÃO é traduzido para ele** —
+     * `resizeMode` é do `Image` do RN, e o `expo-image` chama a mesma coisa de `contentFit`; quem
+     * passa o elemento escreve a prop dele.
+     */
+    render?: React.ReactElement;
+    onError?: () => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * 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 declare function Image({ source, alt, ratio, fit, fallback, fallbackIcon, render, onError, style, testID, }: ImageProps): React.JSX.Element;
+export interface AureaGalleryItem {
+    id: string;
+    source: AureaImageSource;
+    alt: string;
+    caption?: React.ReactNode;
+}
+export interface GalleryProps {
+    items: AureaGalleryItem[];
+    /** O nome da grade para o leitor de tela. Sem ele, a frase `galleryLabel` do provider. */
+    label?: string;
+    /** O `id` escolhido. **A galeria não guarda escolha** — é constante do app, como na web. */
+    selected?: string;
+    onSelect?: (id: string) => void;
+    /** Tocar abre a foto grande no `Dialog` que já existe. */
+    zoom?: boolean;
+    /** Proporção dos ladrilhos. Padrão **1** (quadrado), como o `ratio="1/1"` da web. */
+    ratio?: number | string;
+    /**
+     * Largura mínima de cada ladrilho, em dp. O `--gallery-min` da web é `8rem` — e `1rem = 16dp`,
+     * medido, então **128**.
+     */
+    minTileWidth?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * 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 declare function Gallery({ items, label, selected, onSelect, zoom, ratio, minTileWidth, style, testID, }: GalleryProps): React.JSX.Element;

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,100 @@
+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;
+    /** 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, label, placeholder, keyboardType, icons, style, testID, }: NumberFieldProps): React.JSX.Element;
+export {};