@aurea-uds/native 0.8.0 → 0.8.2

package/dist/actions.d.ts

@@ -3,7 +3,7 @@ import { type PressableProps } from "react-native";
 import { type AureaIconRegistry, type IconName } from "./icon.js";
 /** Quanto peso a caixa tem. */
 export type AureaButtonAppearance = "solid" | "outline" | "ghost";
-/** O que a cor significa. Mesmos nomes da web (ADR-0016). */
+/** O que a cor significa. Mesmos nomes da web (ADR-0044). */
 export type AureaButtonTone = "neutral" | "brand" | "danger" | "success" | "warning" | "info";
 /** As cinco alturas de controle, todas de token de densidade. */
 export type AureaButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -14,6 +14,26 @@ export interface ButtonProps extends Omit<PressableProps, "children" | "style">
     size?: AureaButtonSize;
     leadingIcon?: IconName;
     trailingIcon?: IconName;
+    /**
+     * Um desenho QUALQUER na frente do texto, para quando a marca não pode ser um ícone nosso.
+     *
+     * ⚠ **Ele existe por causa de MARCA REGISTRADA, não por conveniência.** O botão "Entrar com
+     * Google" e o "Entrar com Apple" exigem o desenho oficial de cada um, e nenhum dos dois pode
+     * viver dentro desta biblioteca: o Google proíbe redesenhar e manda usar o arquivo do pacote
+     * dele; a Apple proíbe usar o logo sem licença escrita. **Então a marca entra pelo app**, e o
+     * que a Aurea dá é a cápsula em volta.
+     *
+     *     <Button appearance="outline" leading={<RNImage source={logoGoogle} style={{width: 18, height: 18}} />}>
+     *       Entrar com Google
+     *     </Button>
+     *
+     * ⚠ **A cor do texto NÃO atravessa para cá** — o que entra desenha a própria cor, e é assim
+     * que tem de ser: a marca do Google tem cor fixa, e tingi-la seria justamente o que a regra
+     * dele proíbe. Um `leadingIcon` nosso continua herdando a cor do botão.
+     */
+    leading?: React.ReactNode;
+    /** O mesmo, do outro lado. */
+    trailing?: React.ReactNode;
     /** Registro de ícones, quando não há um em contexto. Ver `criarRegistroDeIcones`. */
     icons?: AureaIconRegistry;
     fullWidth?: boolean;
@@ -29,7 +49,7 @@ export interface ButtonProps extends Omit<PressableProps, "children" | "style">
  * descreve: lá, um botão desabilitado some da ordem de foco e a explicação pendurada nele não é
  * lida por ninguém. Aqui não há o dilema, então não há o par `aria-disabled` — um só basta.
  */
-export declare function Button({ children, appearance, tone, size, leadingIcon, trailingIcon, icons, fullWidth, pressed, disabled, accessibilityLabel, ...rest }: ButtonProps): React.JSX.Element;
+export declare function Button({ children, appearance, tone, size, leadingIcon, trailingIcon, leading, trailing, icons, fullWidth, pressed, disabled, accessibilityLabel, ...rest }: ButtonProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children" | "leadingIcon" | "trailingIcon" | "fullWidth"> {
     name: IconName;
     /** **Obrigatório**: um botão que só tem glifo não tem texto para o leitor de tela anunciar. */

package/dist/actions.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Medida a ficha da web antes de escrever (passo 1 do BUILDING.md). Lá existem TRÊS props que
 // pintam a mesma coisa, e a própria ficha diz qual é qual: *"`variant` é atalho para o par
 // (appearance, tone). Os treze nomes continuam valendo e pintam exatamente o mesmo; a API de dois
-// eixos é appearance + tone"* — a ADR-0016.
+// eixos é appearance + tone"* — a ADR-0044.
 //
 // O `variant` existe lá porque a Aurea **está publicada** e aqueles treze nomes são contrato com
 // quem instalou. **Aqui não há nada publicado**, e nascer com o atalho seria nascer com a dívida:
@@ -88,7 +88,7 @@ const folha = criarFolha((t) => ({
  * descreve: lá, um botão desabilitado some da ordem de foco e a explicação pendurada nele não é
  * lida por ninguém. Aqui não há o dilema, então não há o par `aria-disabled` — um só basta.
  */
-export function Button({ children, appearance = "solid", tone = "neutral", size = "md", leadingIcon, trailingIcon, icons, fullWidth = false, pressed, disabled, accessibilityLabel, ...rest }) {
+export function Button({ children, appearance = "solid", tone = "neutral", size = "md", leadingIcon, trailingIcon, leading, trailing, icons, fullWidth = false, pressed, disabled, accessibilityLabel, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const cor = pintar(t, tone);
@@ -104,9 +104,9 @@ export function Button({ children, appearance = "solid", tone = "neutral", size
     return (_jsx(Pressable, { disabled: disabled, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled: !!disabled, ...(pressed === undefined ? null : { checked: pressed }) }, style: ({ pressed: tocando }) => [
             s.alvo, fullWidth && s.alvoLargura,
             tocando && s.pressionado, disabled && s.inerte,
-        ], ...rest, children: _jsxs(View, { style: [s.caixa, caixa], children: [leadingIcon ? _jsx(Icon, { name: leadingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, typeof children === "string"
+        ], ...rest, children: _jsxs(View, { style: [s.caixa, caixa], children: [leading ?? null, leadingIcon ? _jsx(Icon, { name: leadingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, typeof children === "string"
                     ? _jsx(Text, { size: FONTE[size], weight: 500, leading: "none", style: { color: corDoTexto }, children: children })
-                    : children, trailingIcon ? _jsx(Icon, { name: trailingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null] }) }));
+                    : children, trailingIcon ? _jsx(Icon, { name: trailingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, trailing ?? null] }) }));
 }
 /**
  * Botão quadrado, só glifo.

package/dist/busca.d.ts

@@ -46,6 +46,13 @@ export interface ComboboxProps {
     empty?: React.ReactNode;
     /** Mostra o botão de limpar no gatilho quando há escolha. Padrão **true**. */
     clearable?: boolean;
+    /**
+     * Arrastar o cabeçalho da folha para baixo fecha. Ligado.
+     *
+     * ⚠ **É a ÚNICA saída por gesto no iOS** — lá não há botão VOLTAR, então sem isto restaria só
+     * tocar no fundo. Mesmo gesto, mesmo limiar e mesma curva do `BottomSheet` do Lote 5.
+     */
+    draggable?: boolean;
     disabled?: boolean;
     size?: AureaFieldSize;
     /** O glifo da seta. Registre-o, ou passe `false`. */
@@ -84,7 +91,7 @@ export interface ComboboxProps {
  * na web e pela mesma razão do achado I1 da auditoria: um componente com a sua própria cópia do
  * estado é a segunda fonte de verdade que ninguém sabe que existe.
  */
-export declare function Combobox({ items, value, onValueChange, onSearchChange, searchDelay, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable, disabled, size, chevron, searchIcon, style, testID, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ items, value, onValueChange, onSearchChange, searchDelay, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable, draggable, disabled, size, chevron, searchIcon, style, testID, }: ComboboxProps): React.JSX.Element;
 export interface SearchFieldProps {
     value?: string;
     onChangeText?: (v: string) => void;

package/dist/busca.js

@@ -67,12 +67,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // aceita digitação, então `button` é o que ele É nos dois sistemas. Quem digita é o campo da
 // folha, e ele leva `search` — que mapeia nos dois.
 import * as React from "react";
-import { FlatList, Modal, Pressable, TextInput, View, } from "react-native";
+import { Animated, Easing, FlatList, Modal, PanResponder, Pressable, TextInput, View, } from "react-native";
 import { IconButton } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { Spinner } from "./feedback.js";
 import { Icon } from "./icon.js";
-import { useCampo } from "./inputs.js";
+import { KeyboardAvoiding, useCampo } from "./inputs.js";
+import { useReduceMotion } from "./movimento.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 // As mesmas contas do `inputs.tsx`, e elas são repetidas AQUI de propósito: exportá-las de lá
@@ -80,7 +81,23 @@ import { useAureaStrings, useAureaTokens } from "./theme.js";
 // módulos irmãos é o começo de um acoplamento que ninguém declara. São três linhas.
 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;
+// ⚠ O `13` do tamanho `md` NÃO é número inventado: é o `padding-inline` literal do `.input`
+// (`aurea.css:685`), e é o mesmo valor que o `inputs.tsx:60` usa. Não há token de 13 — a escala
+// tem `space3`=12 e `space4`=16 —, e é por isso que o CSS o escreve cru dos dois lados.
 const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
+// ── AS DUAS CONSTANTES DE INTERAÇÃO, e elas NÃO são geometria ────────────────────────────────
+// Ficam nomeadas e no topo porque número solto no meio do componente é o que o `CLAUDE.md`
+// passou a proibir em 12/09/2026. **Nenhuma das duas tem linha de `aurea.css` atrás, e não
+// deveria ter:** uma é tempo de digitação, a outra é fração de viewport do motor de lista.
+//
+// 250 ms é o intervalo entre teclas de quem digita corrido. Abaixo disso a espera não junta
+// letra nenhuma e cada tecla vira uma ida ao servidor; muito acima, a lista demora a reagir e a
+// pessoa acha que o campo travou. `searchDelay` existe para o app discordar.
+const ESPERA_PADRAO = 250;
+// Fração da altura visível que sobra abaixo antes de pedir a próxima página. Meia tela de
+// antecedência: menos que isso e a lista chega ao fim antes da resposta; mais, e o app pagina
+// páginas que ninguém vai ver. É prop do `FlatList`, não medida de desenho.
+const ANTECEDENCIA_DE_PAGINA = 0.5;
 const folha = criarFolha((t) => ({
     // O gatilho é o `.input` da web (`aurea.css:685`), igual ao do `Select` — mesma altura, mesma
     // borda, o mesmo raio de controle.
@@ -94,20 +111,28 @@ const folha = criarFolha((t) => ({
     desabilitado: { opacity: 0.5 },
     // As ações do gatilho — limpar e a seta. O `.combobox-actions` da web (`aurea.css:1673`) é
     // absoluto sobre o campo; aqui é um irmão na linha, porque não há campo por baixo.
-    acoes: { flexDirection: "row", alignItems: "center", gap: 2 },
+    // `space05` mede 2 — o mesmo valor, agora com nome. O `.combobox-actions` da web
+    // (`aurea.css:1673`) usa `gap:2px` literal; aqui o token existe, então é ele que entra.
+    acoes: { flexDirection: "row", alignItems: "center", gap: t.size.space05 },
     // A folha, com a mesma anatomia da do `Select` (`inputs.tsx:98-113`) — e é de propósito que
     // sejam iguais: são o mesmo gesto, e duas folhas diferentes para o mesmo gesto é como uma
     // biblioteca deixa de ter linguagem.
     fundoDaLista: { flex: 1, justifyContent: "flex-end", backgroundColor: "#00000080" },
     fundoDeToque: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
+    // 🔴 OS 85% E OS 45% ERAM INVENTADOS, e saíram em 12/09/2026. **A casa já tinha a medida:**
+    // o `folhaBaixo` do `BottomSheet` do Lote 5 (`overlays.tsx:104`) usa `maxHeight: "90%"`, e
+    // duas folhas que sobem do rodapé com alturas diferentes é como uma biblioteca deixa de ter
+    // linguagem. O `minHeight` sumiu: folha abraça o conteúdo, e uma altura mínima só servia para
+    // desenhar vazio.
     lista: {
-        // `maxHeight` MAIOR que a do `Select` (60%), e a razão é o teclado: aqui ele sobe junto, e
-        // uma folha de 60% com teclado aberto deixa três linhas visíveis. O `KeyboardAvoidingView`
-        // não entra — dentro de um `Modal` do RN ele não recebe as métricas do teclado no Android.
-        maxHeight: "85%", minHeight: "45%",
+        maxHeight: "90%",
         borderTopLeftRadius: t.size.radiusCard, borderTopRightRadius: t.size.radiusCard,
         backgroundColor: t.color.popover, borderWidth: t.size.borderWidth, borderColor: t.color.border,
     },
+    // O puxador, copiado do `BottomSheet` (`overlays.tsx:111-112`) — mesma medida, mesmo token.
+    puxadorArea: { alignItems: "center", paddingVertical: t.size.space2 },
+    puxador: { width: 40, height: 4, borderRadius: t.size.radiusFull,
+        backgroundColor: t.color.borderStrong },
     // O campo de digitar, no topo da folha. É o `.input-group` da web (`aurea.css:741`): a borda
     // mora no GRUPO e o campo dentro dele é transparente e sem borda.
     grupo: {
@@ -160,7 +185,7 @@ const folha = criarFolha((t) => ({
  * na web e pela mesma razão do achado I1 da auditoria: um componente com a sua própria cópia do
  * estado é a segunda fonte de verdade que ninguém sabe que existe.
  */
-export function Combobox({ items, value, onValueChange, onSearchChange, searchDelay = 250, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable = true, disabled, size, chevron = "chevron--down", searchIcon = "search", style, testID, }) {
+export function Combobox({ items, value, onValueChange, onSearchChange, searchDelay = ESPERA_PADRAO, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable = true, draggable = true, disabled, size, chevron = "chevron--down", searchIcon = "search", style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
@@ -169,6 +194,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
     const inativo = disabled ?? campo?.disabled;
     const [aberto, setAberto] = React.useState(false);
     const [texto, setTexto] = React.useState("");
+    const reduzir = useReduceMotion();
     // ── A ESPERA ────────────────────────────────────────────────────────────────────────────────
     // O timer vive num `ref` e é limpo em três lugares: à digitação seguinte, ao fechar a folha e
     // ao desmontar. O terceiro é o que importa e o que mais se esquece — sem ele, sair da tela com
@@ -206,6 +232,35 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
         setAberto(false);
         setTexto("");
     }, [cancelar]);
+    // ── O ARRASTO, copiado do `BottomSheet` do Lote 5 (`overlays.tsx:427-451`) ──────────────────
+    // Os números são os DE LÁ, não novos: 6dp para reivindicar, limiar de 80dp ou um terço da
+    // altura, velocidade 1.2. Copiar em vez de reinventar é o que mantém as duas folhas com o
+    // mesmo tato — e é a regra do `BUILDING.md` sobre não criar escala nova no meio de um
+    // componente.
+    const arrasto = React.useRef(new Animated.Value(0)).current;
+    const altura = React.useRef(0);
+    React.useEffect(() => { if (!aberto)
+        arrasto.setValue(0); }, [aberto, arrasto]);
+    const gestos = React.useMemo(() => PanResponder.create({
+        onMoveShouldSetPanResponder: (_e, g) => draggable && g.dy > 6,
+        onPanResponderMove: (_e, g) => { if (g.dy > 0)
+            arrasto.setValue(g.dy); },
+        onPanResponderRelease: (_e, g) => {
+            const limiar = Math.max(80, altura.current / 3);
+            if (g.dy > limiar || g.vy > 1.2) {
+                fechar();
+                return;
+            }
+            if (reduzir !== false) {
+                arrasto.setValue(0);
+                return;
+            }
+            Animated.timing(arrasto, {
+                toValue: 0, duration: t.size.durationSlow, useNativeDriver: true,
+                easing: Easing.bezier(...t.easing.easeEmphasized),
+            }).start();
+        },
+    }), [draggable, fechar, arrasto, reduzir, t.size.durationSlow, t.easing.easeEmphasized]);
     // ── O FILTRO, QUANDO ELE É NOSSO ────────────────────────────────────────────────────────────
     const filtrados = React.useMemo(() => {
         if (onSearchChange)
@@ -222,7 +277,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                     campo?.invalido && s.invalido,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "close", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground })] })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(View, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { style: s.lista, onStartShouldSetResponder: () => true, children: [_jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
+                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "close", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground })] })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [s.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, onStartShouldSetResponder: () => true, children: [_jsx(View, { style: s.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) }), _jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
                                             // ⚠ `autoFocus` é o que faz a folha valer a pena: abrir um campo de busca e
                                             // exigir um segundo toque para o teclado subir é um toque a mais em cada
                                             // cadastro. O foco entra com a folha; o teclado vem junto.
@@ -238,7 +293,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                     color: t.color.foreground },
                                             ] }), texto.length > 0 && (_jsx(IconButton, { name: "close", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: s.carregando, children: _jsx(Spinner, { label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: s.vazio, children: typeof empty === "string" || empty == null
                                         ? _jsx(Text, { size: "sm", tone: "muted", children: empty ?? strings.comboboxEmpty })
-                                        : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: 0.5, renderItem: ({ item }) => (_jsx(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", accessibilityState: {
+                                        : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsx(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", accessibilityState: {
                                             selected: item.value === value?.value, disabled: !!item.disabled,
                                         }, style: [
                                             s.opcao,
@@ -283,7 +338,7 @@ const dobrar = (v) => {
  * ⚠ **A borda mora no GRUPO, não no campo** — é o `.input-group` da web (`aurea.css:741`), e é o
  * que deixa lupa, campo e botão de limpar dentro de uma caixa só em vez de três.
  */
-export function SearchField({ value, onChangeText, onSearchChange, searchDelay = 250, placeholder, disabled, size, icon = "search", clearable = true, onSubmit, style, testID, }) {
+export function SearchField({ value, onChangeText, onSearchChange, searchDelay = ESPERA_PADRAO, placeholder, disabled, size, icon = "search", clearable = true, onSubmit, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();

package/dist/display.d.ts

@@ -10,7 +10,7 @@ export declare const formatarContagem: (count: number, max?: number) => string;
 export interface BadgeProps extends ViewProps {
     /**
      * O tom. Chama-se `tone` e não `variant`, como no `Button` do Lote 1 — o vocabulário de cor
-     * com significado é `tone` em todo o alvo nativo (ADR-0016 é quem separa os dois na web).
+     * com significado é `tone` em todo o alvo nativo (ADR-0044 é quem separa os dois na web).
      */
     tone?: AureaBadgeTone;
     emphasis?: AureaBadgeEmphasis;

package/dist/index.d.ts

@@ -25,6 +25,8 @@ export { BottomNav, Topbar, NavList, Stepper } from "./navigation.js";
 export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaTopbarVariant, } from "./navigation.js";
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
 export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
+export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";
+export type { InputGroupProps, InputGroupAddonProps, PasswordFieldProps } from "./inputs.js";
 export { Dialog, ConfirmDialog, Drawer, BottomSheet } from "./overlays.js";
 export type { DialogProps, ConfirmDialogProps, DrawerProps, BottomSheetProps, AureaDrawerSide, } from "./overlays.js";
 export { ToastHost, Toast, useToast } from "./toast.js";

package/dist/index.js

@@ -54,6 +54,11 @@ export { BottomNav, Topbar, NavList, Stepper } from "./navigation.js";
 // nome, a dica e o estado de inválido para o controle por CONTEXTO. É a tradução que decidiu o
 // lote — o RN não tem `id` nem `htmlFor`.
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
+// ⚠ O GRUPO e o campo de SENHA entraram depois do Lote 4, medidos pelo app na tela de entrar
+// (15/09/2026): o campo não tinha onde encaixar glifo, e `secureTextEntry` esconde a senha sem
+// dar botão para mostrá-la. **Os dois já existiam na web desde 29/08/2026** — a falta era só
+// deste lado, e o desenho daqui é o de lá traduzido, não um desenho novo.
+export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";
 // ⚠ `DatePicker` e `PhotoInput` NÃO saem daqui, e é de propósito: eles vivem em
 // `@aurea-uds/native/system`, pela mesma razão que os ícones vivem em `./icons/*` (ADR-0038).
 // Sair por este barril traria os dois módulos NATIVOS ao grafo de todo app — inclusive de quem

package/dist/inputs.d.ts

@@ -11,6 +11,14 @@ type ContextoDeCampo = {
 };
 /** O que os controles leem do `Field` acima deles. Público porque um controle novo vai precisar. */
 export declare function useCampo(): ContextoDeCampo | null;
+interface ContextoDeGrupo {
+    size: AureaFieldSize;
+    disabled: boolean;
+    /** O campo avisa o grupo quando ganha e perde o foco — no RN não existe `:focus-within`. */
+    aoFocar: (v: boolean) => void;
+}
+/** O grupo em volta do campo, quando existe um. `null` quando o campo está sozinho. */
+export declare function useGrupoDeCampo(): ContextoDeGrupo | null;
 export interface FieldProps extends ViewProps {
     label?: string;
     hint?: React.ReactNode;
@@ -120,6 +128,53 @@ interface ControleProps {
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
+export interface InputGroupProps extends ViewProps {
+    /** O degrau do sistema. Cai no `Field` em volta quando não vem, como no `Input`. */
+    size?: AureaFieldSize;
+    disabled?: boolean;
+    testID?: string;
+}
+/**
+ * A caixa de campo que aceita coisas dentro — glifo na frente, botão atrás, os dois.
+ *
+ *     <InputGroup>
+ *       <InputGroupAddon><Icon name="email" size="sm" /></InputGroupAddon>
+ *       <Input value={email} onChangeText={setEmail} keyboardType="email-address" />
+ *     </InputGroup>
+ *
+ * ⚠ **O `Input` lá dentro para de desenhar a própria caixa** — quem desenha borda, fundo, altura,
+ * foco e inválido passa a ser o grupo. Isso é automático: o campo enxerga o grupo por contexto.
+ */
+export declare function InputGroup({ size, disabled, children, style, testID, ...rest }: InputGroupProps): React.JSX.Element;
+export interface InputGroupAddonProps extends ViewProps {
+    testID?: string;
+}
+/**
+ * Um encaixe dentro do `InputGroup`. **A posição é a do JSX** — antes do campo fica na frente,
+ * depois fica atrás. Não há prop de lado, e o porquê está no bloco do grupo lá em cima.
+ */
+export declare function InputGroupAddon({ children, style, testID, ...rest }: InputGroupAddonProps): React.JSX.Element;
+/**
+ * O campo de senha, com o botão que mostra e esconde.
+ *
+ *     <Field label="Senha"><PasswordField value={senha} onChangeText={setSenha} /></Field>
+ *
+ * ⚠ **`secureTextEntry` não entra**: um campo de senha que aceitasse essa prop deixaria de ser
+ * um. É a mesma razão pela qual o `type` não atravessa no `PasswordField` da web.
+ *
+ * ⚠ **O rótulo do botão é o anúncio do estado** — ele troca entre "Mostrar senha" e "Ocultar
+ * senha". Não há estado de pressionado junto, e isso é decisão copiada da web: com os dois, o
+ * leitor de tela lê a mesma informação duas vezes.
+ *
+ * ⚠ **`autoCapitalize` nasce em `none`.** No Android o teclado maiúsculiza a primeira letra por
+ * padrão, e numa senha isso é o erro de digitação mais caro que existe: o campo está escondido,
+ * então ninguém vê o que deu errado.
+ */
+export interface PasswordFieldProps extends Omit<InputProps, "secureTextEntry" | "multiline" | "keyboardType"> {
+    /** Começa visível. Padrão: escondida. */
+    defaultVisible?: boolean;
+}
+export declare function PasswordField({ defaultVisible, size, disabled, autoCapitalize, testID, style, ...rest }: PasswordFieldProps): React.JSX.Element;
 export type CheckboxProps = ControleProps;
 export type RadioProps = ControleProps;
 /** A caixa que marca. `accessibilityRole="checkbox"` + `state.checked`. */

package/dist/inputs.js

@@ -40,10 +40,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
 import { criarFolha } from "./estilos.js";
+import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
 import { Text } from "./text.js";
-import { useAureaTokens } from "./theme.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 respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
@@ -61,6 +62,21 @@ const folha = criarFolha((t) => ({
     areaDeTexto: { minHeight: 104, paddingVertical: t.size.space3, borderRadius: t.size.radiusLg },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
     desabilitado: { opacity: 0.5 },
+    // O GRUPO é a mesma caixa do campo virada em LINHA, e os números são os mesmos: mesma borda,
+    // mesmo raio de controle, mesmo fundo. A altura e o respiro horizontal entram por tamanho, como
+    // no `Input`, porque é o grupo que passa a desenhar a caixa quando existe um.
+    grupo: {
+        flexDirection: "row", alignItems: "center", width: "100%", minWidth: 0,
+        borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
+        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+        gap: t.size.space1,
+    },
+    // Dentro do grupo o campo perde a caixa e vira só o texto — a borda passou a ser do grupo.
+    // ⚠ As DUAS últimas linhas continuam obrigatórias: são o conserto de Android de 09/09/2026
+    // (`paddingVertical: 0` desliga a injeção do tema, `textAlignVertical` tira o texto do topo).
+    // É o mesmo par que o `campoDeTexto` do `busca.tsx` carrega pela mesma razão.
+    campoNoGrupo: { flex: 1, minWidth: 0, paddingVertical: 0, textAlignVertical: "center" },
+    encaixe: { flexDirection: "row", alignItems: "center", flexShrink: 0, gap: t.size.space1 },
     marcaBase: {
         alignItems: "center", justifyContent: "center", marginTop: 1,
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
@@ -96,6 +112,11 @@ const CampoCtx = React.createContext(null);
 export function useCampo() {
     return React.useContext(CampoCtx);
 }
+const GrupoDeCampo = React.createContext(null);
+/** O grupo em volta do campo, quando existe um. `null` quando o campo está sozinho. */
+export function useGrupoDeCampo() {
+    return React.useContext(GrupoDeCampo);
+}
 /**
  * Rótulo, controle, dica e erro — na ordem, com o respiro do CSS.
  *
@@ -151,11 +172,13 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
-    const tam = size ?? campo?.size ?? "md";
-    const inativo = disabled ?? campo?.disabled;
+    const grupo = useGrupoDeCampo();
+    const tam = size ?? grupo?.size ?? campo?.size ?? "md";
+    const inativo = disabled ?? grupo?.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: () => {
+    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); grupo?.aoFocar(true); onFocus?.(); }, onBlur: () => {
             setFocado(false);
+            grupo?.aoFocar(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`).
@@ -169,30 +192,36 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
         // 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: [
-            s.caixa,
-            { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam),
-                fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400], color: t.color.foreground,
-                // ⚠ AS DUAS LINHAS ABAIXO NÃO SÃO ENFEITE — sem elas o texto sobe e é CORTADO no
-                // Android, e foi assim que este campo chegou ao vidro em 09/09/2026.
-                //
-                // `padding-block:0` é LITERAL na web (`aurea.css:685`) e não atravessou. No RN a falta
-                // dele não é "sem padding": o `AndroidTextInputComponentDescriptor.h:101-107` INJETA o
-                // padding do tema do Android no nó do Yoga sempre que as props não trazem `padding`,
-                // `paddingTop`/`paddingBottom` nem `paddingVertical` — e o `hasPaddingVertical` é
-                // exatamente o que desliga a injeção. Com `height` fixa, esse padding come a altura por
-                // dentro e a caixa de texto fica menor que a linha: daí o corte.
-                //
-                // O `textAlignVertical` é o outro lado da mesma conta. Na web, um campo com
-                // `block-size` centraliza a linha sozinho; no Android o `setTextAlignVertical` do
-                // `ReactTextInputManager.kt:571` traduz `null`/`auto` para `Gravity.NO_GRAVITY`, que
-                // deixa o `EditText` no topo. `center` é o que reproduz a web — e o `Textarea` o
-                // sobrescreve para `top`, que é o que uma caixa alta faz nos dois lados.
-                paddingVertical: 0, textAlignVertical: "center" },
-            campo?.invalido && s.invalido,
+            // DENTRO DE UM GRUPO o campo não desenha caixa nenhuma: borda, fundo, altura, respiro,
+            // inválido, foco e desabilitado passam a ser do grupo. Manter qualquer um dos dois
+            // desenhando daria borda dentro de borda — que é exatamente o defeito que o `.input-group
+            // > .input` da web zera à mão (`aurea.css:751`).
+            grupo ? s.campoNoGrupo : s.caixa,
+            grupo
+                ? { fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400], color: t.color.foreground }
+                : { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam),
+                    fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400], color: t.color.foreground,
+                    // ⚠ AS DUAS LINHAS ABAIXO NÃO SÃO ENFEITE — sem elas o texto sobe e é CORTADO no
+                    // Android, e foi assim que este campo chegou ao vidro em 09/09/2026.
+                    //
+                    // `padding-block:0` é LITERAL na web (`aurea.css:685`) e não atravessou. No RN a falta
+                    // dele não é "sem padding": o `AndroidTextInputComponentDescriptor.h:101-107` INJETA o
+                    // padding do tema do Android no nó do Yoga sempre que as props não trazem `padding`,
+                    // `paddingTop`/`paddingBottom` nem `paddingVertical` — e o `hasPaddingVertical` é
+                    // exatamente o que desliga a injeção. Com `height` fixa, esse padding come a altura por
+                    // dentro e a caixa de texto fica menor que a linha: daí o corte.
+                    //
+                    // O `textAlignVertical` é o outro lado da mesma conta. Na web, um campo com
+                    // `block-size` centraliza a linha sozinho; no Android o `setTextAlignVertical` do
+                    // `ReactTextInputManager.kt:571` traduz `null`/`auto` para `Gravity.NO_GRAVITY`, que
+                    // deixa o `EditText` no topo. `center` é o que reproduz a web — e o `Textarea` o
+                    // sobrescreve para `top`, que é o que uma caixa alta faz nos dois lados.
+                    paddingVertical: 0, textAlignVertical: "center" },
+            !grupo && campo?.invalido && s.invalido,
             // O foco é o único estado que sobra do trio da web (hover/focus/active), e ele importa
             // mais aqui: no telefone é a única pista de qual campo o teclado está alimentando.
-            focado && { borderColor: t.color.focusStrong },
-            inativo && s.desabilitado,
+            !grupo && focado && { borderColor: t.color.focusStrong },
+            !grupo && inativo && s.desabilitado,
             style,
         ] }));
 }
@@ -211,6 +240,55 @@ export function Textarea({ rows, size, style, ...rest }) {
             style,
         ], multiline: true }));
 }
+/**
+ * A caixa de campo que aceita coisas dentro — glifo na frente, botão atrás, os dois.
+ *
+ *     <InputGroup>
+ *       <InputGroupAddon><Icon name="email" size="sm" /></InputGroupAddon>
+ *       <Input value={email} onChangeText={setEmail} keyboardType="email-address" />
+ *     </InputGroup>
+ *
+ * ⚠ **O `Input` lá dentro para de desenhar a própria caixa** — quem desenha borda, fundo, altura,
+ * foco e inválido passa a ser o grupo. Isso é automático: o campo enxerga o grupo por contexto.
+ */
+export function InputGroup({ size, disabled, children, style, testID, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const campo = useCampo();
+    const tam = size ?? campo?.size ?? "md";
+    const inativo = disabled ?? campo?.disabled ?? false;
+    const [focado, setFocado] = React.useState(false);
+    // O contexto muda de identidade a cada render se for objeto literal, e isso re-renderiza todo
+    // campo de todo formulário a cada tecla. Mesma memoização do `Field`.
+    const ctx = React.useMemo(() => ({ size: tam, disabled: inativo, aoFocar: setFocado }), [tam, inativo]);
+    return (_jsx(View, { testID: testID, style: [
+            s.grupo,
+            { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
+            campo?.invalido && s.invalido,
+            // O foco vem do campo lá dentro, por contexto: no React Native não existe `:focus-within`,
+            // e sem isto a única pista de qual campo o teclado alimenta sumiria ao entrar num grupo.
+            focado && { borderColor: t.color.focusStrong },
+            inativo && s.desabilitado,
+            style,
+        ], ...rest, children: _jsx(GrupoDeCampo.Provider, { value: ctx, children: children }) }));
+}
+/**
+ * Um encaixe dentro do `InputGroup`. **A posição é a do JSX** — antes do campo fica na frente,
+ * depois fica atrás. Não há prop de lado, e o porquê está no bloco do grupo lá em cima.
+ */
+export function InputGroupAddon({ children, style, testID, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    return _jsx(View, { testID: testID, style: [s.encaixe, style], ...rest, children: children });
+}
+export function PasswordField({ defaultVisible = false, size, disabled, autoCapitalize = "none", testID, style, ...rest }) {
+    const strings = useAureaStrings();
+    const campo = useCampo();
+    const [visivel, setVisivel] = React.useState(defaultVisible);
+    const tam = size ?? campo?.size ?? "md";
+    const inativo = disabled ?? campo?.disabled;
+    return (_jsxs(InputGroup, { size: tam, disabled: inativo, testID: testID, children: [_jsx(Input, { ...rest, size: tam, disabled: inativo, autoCapitalize: autoCapitalize, secureTextEntry: !visivel, style: style, testID: testID ? `${testID}-campo` : undefined }), _jsx(InputGroupAddon, { children: _jsx(IconButton, { name: visivel ? "view--off" : "view", label: visivel ? strings.passwordHide : strings.passwordShow, appearance: "ghost", size: tam === "lg" ? "md" : "sm", disabled: inativo, onPress: () => setVisivel(v => !v), testID: testID ? `${testID}-olho` : undefined }) })] }));
+}
 function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);

package/dist/numero.d.ts

@@ -52,6 +52,14 @@ export interface NumberFieldProps {
     /** 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;
@@ -96,5 +104,5 @@ type IconNameLocal = string;
  * ⚠ **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 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

@@ -53,18 +53,32 @@ 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`.
+    // 🔴 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: {
-        flex: 1, minWidth: t.size.space16 ?? 64, textAlign: "center",
+        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 },
 }));
@@ -218,7 +232,7 @@ const paraEdicao = (n, locale) => {
  * ⚠ **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, }) {
+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();
@@ -279,13 +293,35 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
         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, 
+    // 🔴 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

@@ -32,6 +32,14 @@ export interface AureaStrings {
     openSettings: string;
     /** O rótulo do botão que tira uma foto anexada. */
     photoRemove: string;
+    /**
+     * O botão que revela a senha no `PasswordField`, e o que a esconde de volta. Mesmos nomes da
+     * web (`pure.tsx`), porque é a mesma peça com a mesma decisão: **o rótulo é que anuncia o
+     * estado**, e não um `accessibilityState` de pressionado — com os dois, o leitor de tela diz
+     * a mesma coisa duas vezes.
+     */
+    passwordShow: string;
+    passwordHide: string;
     /** O botão de fechar do `Dialog` e do `Drawer`. Mesmo nome da web. */
     close: string;
     /** A saída do `ConfirmDialog`. Mesmo nome da web. */

package/dist/strings.js

@@ -37,6 +37,8 @@ export const defaultStrings = {
     cameraDenied: "Camera access is off. Turn it on in Settings to attach a photo.",
     openSettings: "Open Settings",
     photoRemove: "Remove photo",
+    passwordShow: "Show password",
+    passwordHide: "Hide password",
     close: "Close",
     confirmCancel: "Cancel",
     confirmProceed: "Continue",
@@ -72,6 +74,8 @@ export const ptBR = {
     cameraDenied: "O acesso à câmera está desligado. Ligue nas configurações para anexar uma foto.",
     openSettings: "Abrir configurações",
     photoRemove: "Remover foto",
+    passwordShow: "Mostrar senha",
+    passwordHide: "Ocultar senha",
     close: "Fechar",
     confirmCancel: "Cancelar",
     confirmProceed: "Continuar",

package/dist/text.d.ts

@@ -6,7 +6,7 @@ export type AureaTextSize = "xs" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" |
 export type AureaTextWeight = 400 | 500 | 600 | 700;
 /** Papel de tipografia — os três `--font-*` da Aurea. */
 export type AureaTextFont = "ui" | "editorial" | "code";
-/** O que a cor SIGNIFICA. Mesmo vocabulário do `tone` do Button (ADR-0016). */
+/** O que a cor SIGNIFICA. Mesmo vocabulário do `tone` do Button (ADR-0044). */
 export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "danger" | "success" | "warning" | "info";
 export type AureaTextLeading = "none" | "tight" | "normal" | "relaxed";
 export interface TextProps extends TextPropsRN {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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.8.0"
+    "@aurea-uds/tokens": "^0.8.2"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",