@aurea-uds/native 0.8.0 → 0.8.1

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/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/package.json

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