@aurea-uds/native 0.13.0 → 0.14.1

package/dist/busca.d.ts

@@ -6,6 +6,12 @@ import { type AureaFieldSize } from "./inputs.js";
 export interface AureaComboboxItem {
     value: string;
     label: string;
+    /**
+     * Uma segunda linha embaixo do rótulo, apagada ("Pacote de 1 kg") — R-14, 01/10/2026. É o
+     * `Select.ItemDescription` do HeroUI Native 1.0.10 (`styles/components/select.css:117`): letra
+     * `text-sm` (14), cor apagada. A busca continua olhando só o `label`.
+     */
+    description?: string;
     disabled?: boolean;
 }
 export interface ComboboxProps {

package/dist/busca.js

@@ -322,13 +322,13 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                         color: t.color.foreground },
                                                 ] }), texto.length > 0 && (_jsx(IconButton, { name: "x", 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: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsx(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", ...estadoAcessivel({
+                                            : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsxs(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", ...estadoAcessivel({
                                                 selected: item.value === value?.value, disabled: !!item.disabled,
-                                            }), style: [
+                                            }), accessibilityHint: item.description, style: [
                                                 s.opcao,
                                                 item.value === value?.value && s.opcaoEscolhida,
                                                 item.disabled && s.desabilitado,
-                                            ], children: _jsx(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }) })) }), _jsx(RecuoDaFolha, { comTeclado: true })] })] }) }) })] }));
+                                            ], children: [_jsx(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }), item.description != null && (_jsx(Text, { size: "xs", tone: "muted", children: item.description }))] })) }), _jsx(RecuoDaFolha, { comTeclado: true })] })] }) }) })] }));
 }
 // ── A DOBRA DE ACENTO, e por que ela é sondada em vez de presumida ───────────────────────────
 // Buscar "acucar" tem de achar "açúcar" — num catálogo em português, exigir o acento certo é

package/dist/estilos.d.ts

@@ -33,6 +33,23 @@ export declare function criarFolha<T extends NamedStyles<T> | NamedStyles<Record
  * um ícone) não tinha como escrevê-lo sem número à mão. O `check 39` cobra o teste dele.
  */
 export declare const comOpacidade: (cor: string, pct: number) => string;
+/**
+ * 🔴 O FIO AMARELO DO ESCOLHIDO — o sinal único da casa para "este é o escolhido".
+ *
+ * O `aurea.css:1037-1039` põe este fio em TODOS os selecionados (`.is-selected`, botão alternado,
+ * `.segmented button.active`, item ativo da lateral), e o comentário de lá diz por quê: *"Um
+ * usuário aprende uma vez e reconhece em todo lugar (pedido do Victor, 24/07)."* Os três números
+ * saem daquela linha, não daqui: altura 2 (fração de pixel borra), recuo 15 de cada lado
+ * (`inset-inline:15px`), e o amarelo a 75% (cheio ele grita mais que o próprio rótulo).
+ *
+ * ⚠ **Morava dentro do `SegmentedControl` e mudou de casa em 01/10/2026**, quando a aba de
+ * `<Tabs variant="secondary">` (R-12) passou a precisar do mesmo fio. Copiar os números para o
+ * segundo arquivo é o defeito que o `CLAUDE.md` nomeia. Quem desenha o fio, desenha este.
+ *
+ * ⚠ Em peça estreita o recuo de 15 de cada lado zera a largura e o fio some — **e é o mesmo
+ * comportamento da web**, onde `inset-inline:15px` numa caixa estreita não desenha nada.
+ */
+export declare const fioDoEscolhido: (t: AureaTokens) => ViewStyle;
 /**
  * A reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com
  * `onPress`. Os números são os do core: `.btn:active { transform:scale(.97); opacity:.9 }` e

package/dist/estilos.js

@@ -49,6 +49,26 @@ export function criarFolha(descrever) {
 export const comOpacidade = (cor, pct) => /^#[0-9a-fA-F]{6}$/.test(cor)
     ? cor + Math.round(Math.max(0, Math.min(1, pct)) * 255).toString(16).padStart(2, "0")
     : cor;
+/**
+ * 🔴 O FIO AMARELO DO ESCOLHIDO — o sinal único da casa para "este é o escolhido".
+ *
+ * O `aurea.css:1037-1039` põe este fio em TODOS os selecionados (`.is-selected`, botão alternado,
+ * `.segmented button.active`, item ativo da lateral), e o comentário de lá diz por quê: *"Um
+ * usuário aprende uma vez e reconhece em todo lugar (pedido do Victor, 24/07)."* Os três números
+ * saem daquela linha, não daqui: altura 2 (fração de pixel borra), recuo 15 de cada lado
+ * (`inset-inline:15px`), e o amarelo a 75% (cheio ele grita mais que o próprio rótulo).
+ *
+ * ⚠ **Morava dentro do `SegmentedControl` e mudou de casa em 01/10/2026**, quando a aba de
+ * `<Tabs variant="secondary">` (R-12) passou a precisar do mesmo fio. Copiar os números para o
+ * segundo arquivo é o defeito que o `CLAUDE.md` nomeia. Quem desenha o fio, desenha este.
+ *
+ * ⚠ Em peça estreita o recuo de 15 de cada lado zera a largura e o fio some — **e é o mesmo
+ * comportamento da web**, onde `inset-inline:15px` numa caixa estreita não desenha nada.
+ */
+export const fioDoEscolhido = (t) => ({
+    position: "absolute", left: 15, right: 15, bottom: 0, height: 2,
+    borderRadius: t.size.radiusFull, backgroundColor: comOpacidade(t.color.primary, 0.75),
+});
 /**
  * A reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com
  * `onPress`. Os números são os do core: `.btn:active { transform:scale(.97); opacity:.9 }` e

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from
 export type { AureaStrings, AureaUniversalState } from "./strings.js";
 export { useReduceMotion } from "./movimento.js";
 export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
-export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, } from "./navigation.js";
+export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, AureaTabsVariant, } from "./navigation.js";
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, RadioGroup, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
 export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, RadioGroupProps, RadioGroupItemProps, AureaRadioIndicatorPlacement, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
 export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";
@@ -39,7 +39,7 @@ export type { ChartProps, ChartLegendProps, AureaSeries, AureaChartMark } from "
 export { Combobox, SearchField } from "./busca.js";
 export type { ComboboxProps, SearchFieldProps, AureaComboboxItem } from "./busca.js";
 export { NumberField, formatarNumero, lerNumero, separadoresDoLocale } from "./numero.js";
-export type { NumberFieldProps, AureaSeparadores } from "./numero.js";
+export type { NumberFieldProps, AureaSeparadores, AureaNumberFieldSize } from "./numero.js";
 export { Image, Gallery } from "./midia.js";
 export type { ImageProps, GalleryProps, AureaGalleryItem, AureaImageSource, } from "./midia.js";
 export type { AureaFilaJustify } from "./rolagem.js";

package/dist/inputs.d.ts

@@ -282,10 +282,18 @@ export interface RadioGroupItemProps extends Omit<PressableProps, "children" | "
     invalid?: boolean;
     /** O lado da marca só neste item; sem ele, vale o do grupo. */
     indicatorPlacement?: AureaRadioIndicatorPlacement;
+    /**
+     * Um ícone antes do texto (R-19, 01/10/2026). O HeroUI não tem esta prop: no `RadioGroup.Item`
+     * dele o ícone entra como mais um filho, e a Aurea traduz filho livre em nome de ícone, como em
+     * todo o resto. Tamanho `iconLg` (24, o mesmo da marca; o HeroUI usa 22 nos ícones de lista, que
+     * não existe aqui — escolha do Victor), vão de 12 até o texto. Na opção escolhida sai a forma
+     * cheia (ADR-0053), se o registro a tiver.
+     */
+    icon?: IconName;
     style?: StyleProp<ViewStyle>;
 }
 declare function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation, indicatorPlacement, style, children, ...rest }: RadioGroupProps): React.JSX.Element;
-declare function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, style, accessibilityLabel, ...rest }: RadioGroupItemProps): React.JSX.Element;
+declare function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, icon, style, accessibilityLabel, ...rest }: RadioGroupItemProps): React.JSX.Element;
 /**
  * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.
  *

package/dist/inputs.js

@@ -39,7 +39,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   .segmented     :922            linha, gap 3, padding 3, minH controlHMd, fundo muted
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
-import { comOpacidade, criarFolha, estadoAcessivel } from "./estilos.js";
+import { criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
@@ -99,20 +99,9 @@ const folha = criarFolha((t) => ({
     segmento: { flex: 1, alignItems: "center", justifyContent: "center",
         paddingHorizontal: 14, borderRadius: t.size.radiusControl },
     segmentoAtivo: { backgroundColor: t.color.secondary },
-    // 🔴 O FIO AMARELO DO ESCOLHIDO — ele faltava, e a falta era metade do defeito C4.
-    // O `aurea.css:958-960` põe este fio em TODOS os selecionados da casa (`.is-selected`, aba
-    // ativa, botão alternado e `.segmented button.active`), e o bloco de comentário acima dele
-    // diz por quê, com data: *"Item de nav ativo, aba ativa, item de lista lateral e botão
-    // alternado ligado mostram o MESMO sinal (…) Um usuário aprende uma vez e reconhece em todo
-    // lugar (pedido do Victor, 24/07)."*
-    // Os três números saem daquela linha, não de mim: altura 2 (fração de pixel borra), recuo 15,
-    // e o amarelo a 75% (cheio ele grita mais que o próprio rótulo).
-    // ⚠ Em segmento estreito o recuo de 15 de cada lado zera a largura e o fio some — **e é o
-    // mesmo comportamento da web**, onde `inset-inline:15px` num box estreito não desenha nada.
-    fioDoSegmento: {
-        position: "absolute", left: 15, right: 15, bottom: 0, height: 2,
-        borderRadius: t.size.radiusFull, backgroundColor: comOpacidade(t.color.primary, 0.75),
-    },
+    // 🔴 O FIO AMARELO DO ESCOLHIDO — ele faltava, e a falta era metade do defeito C4. Os números
+    // e a razão moram no `fioDoEscolhido` (`estilos.ts`), que a aba do `Tabs` secundário também usa.
+    fioDoSegmento: fioDoEscolhido(t),
     formulario: { gap: t.size.space5 },
     // A folha do `Select`: no RN não existe `<select>`, então a lista é um `Modal` — que é
     // exatamente o "motor novo sobre `Modal`" que a §5.2.4 previu.
@@ -388,7 +377,7 @@ function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, or
     const contexto = React.useMemo(() => ({ value, onValueChange, disabled, invalid, indicatorPlacement }), [value, onValueChange, disabled, invalid, indicatorPlacement]);
     return (_jsx(GrupoDeRadio.Provider, { value: contexto, children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label, ...estadoAcessivel({ disabled: !!disabled }), style: [{ gap: t.size.space3, flexDirection: orientation === "horizontal" ? "row" : "column" }, style], ...rest, children: children }) }));
 }
-function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, style, accessibilityLabel, ...rest }) {
+function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, icon, style, accessibilityLabel, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const grupo = React.useContext(GrupoDeRadio);
@@ -403,7 +392,7 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
     const noInicio = (indicatorPlacement ?? grupo?.indicatorPlacement ?? "end") === "start";
     const texto = (label != null || description != null) && (_jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [typeof label === "string"
                 ? _jsx(Text, { size: "base", weight: 500, tone: erro ? "danger" : "default", children: label }) : label, description != null && (typeof description === "string"
-                ? _jsx(Text, { size: "sm", tone: "muted", children: description }) : description)] }, "texto"));
+                ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] }, "texto"));
     const marcaDesenhada = (_jsx(View, { style: [
             s.marcaBase,
             { width: marca, height: marca, borderRadius: t.size.radiusFull },
@@ -412,11 +401,14 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
                 borderColor: erro ? perigo : t.color.controlSelected },
         ], children: escolhido && _jsx(View, { style: { width: ponto, height: ponto, borderRadius: t.size.radiusFull,
                 backgroundColor: t.color.controlSelectedForeground } }) }, "marca"));
+    // O ícone é decorativo: o rótulo já diz o que a opção é, e o `Icon` sem `label` sai da árvore
+    // de acessibilidade. A cor acompanha a do rótulo, inclusive no erro.
+    const glifo = icon != null && (_jsx(Icon, { name: icon, size: "lg", weight: escolhido ? "fill" : "regular", color: erro ? perigo : t.color.foreground }, "icone"));
     return (_jsx(Pressable, { onPress: inativo || escolhido ? undefined : () => grupo?.onValueChange?.(value), disabled: inativo, accessibilityRole: "radio", ...estadoAcessivel({ checked: escolhido, disabled: !!inativo }), accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : undefined), accessibilityHint: typeof description === "string" ? description : undefined, style: [
             { flexDirection: "row", alignItems: "center", justifyContent: "space-between",
                 gap: t.size.space3, minHeight: t.size.targetMin },
             inativo && s.desabilitado, style,
-        ], ...rest, children: noInicio ? [marcaDesenhada, texto] : [texto, marcaDesenhada] }));
+        ], ...rest, children: noInicio ? [marcaDesenhada, glifo, texto] : [glifo, texto, marcaDesenhada] }));
 }
 /**
  * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.

package/dist/navigation.d.ts

@@ -200,7 +200,16 @@ export interface TabsProps extends ViewProps {
     label?: string;
     /** Onde a fila de abas fica quando cabe: `start` (padrão), `center` ou `end` (E3). */
     justify?: AureaFilaJustify;
+    /**
+     * O jeito da fila, com os nomes do HeroUI (R-12, 01/10/2026):
+     * - `primary` (padrão): a cápsula, com a aba aberta num fundo `secondary`.
+     * - `secondary`: sem cápsula — um fio fino embaixo da fila inteira e o **fio amarelo** da casa
+     *   embaixo da aba aberta, o mesmo do `SegmentedControl`.
+     */
+    variant?: AureaTabsVariant;
 }
+/** Os dois jeitos da fila de abas, com os nomes do `Tabs` do HeroUI Native. */
+export type AureaTabsVariant = "primary" | "secondary";
 /**
  * As abas DENTRO da tela — trocar o painel, não trocar de página.
  *
@@ -234,4 +243,4 @@ export interface TabsProps extends ViewProps {
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export declare function Tabs({ tabs, value, onChange, label, justify, style, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, onChange, label, justify, variant, style, ...rest }: TabsProps): React.JSX.Element;

package/dist/navigation.js

@@ -3,7 +3,7 @@ import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAnotarBottomNav } from "./barranav.js";
 import { Badge } from "./display.js";
-import { comOpacidade, criarFolha, estadoAcessivel } from "./estilos.js";
+import { comOpacidade, criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Card } from "./layout.js";
 import { FilaRolante } from "./rolagem.js";
@@ -133,6 +133,24 @@ const folha = criarFolha((t) => ({
         paddingHorizontal: 14, borderRadius: t.size.radiusControl,
     },
     abaDeTabAtiva: { backgroundColor: t.color.secondary },
+    // `variant="secondary"` (R-12, 01/10/2026): o `secondary` do HeroUI Native 1.0.10
+    // (`styles/components/tabs.css`), com o fio da casa no lugar do indicador azul deles.
+    //   .tabs__list--variant-secondary  padding 0 · border-bottom 1px, cor da borda
+    //   .tabs__list                     gap `* 1` → space1
+    //   .tabs__trigger                  padding-inline `* 3` → space3 · padding-block `* 1.5`
+    //                                   → space1 + space05. Rótulo `text-base` + entrelinha 1.5 dá
+    //                                   36, que é o `controlHMd`: a altura da fila da cápsula, então
+    //                                   trocar de variante não muda a altura da fila.
+    //   .tabs__indicator--variant-secondary  border-bottom 2px na cor de destaque → `fioDoEscolhido`
+    abasSecundarias: {
+        flexDirection: "row", gap: t.size.space1,
+        borderBottomWidth: t.size.borderWidth, borderColor: t.color.border,
+    },
+    abaSecundaria: {
+        alignItems: "center", justifyContent: "center", minHeight: t.size.controlHMd,
+        paddingHorizontal: t.size.space3, paddingVertical: t.size.space1 + t.size.space05,
+    },
+    fioDaAba: fioDoEscolhido(t),
     painel: { marginTop: t.size.space3 },
     // ── Stepper ────────────────────────────────────────────────────────────────────────────────
     trilha: { flexDirection: "row" },
@@ -418,16 +436,21 @@ export function Stepper({ items, label, doneIcon = "check", errorIcon = "x-circl
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export function Tabs({ tabs, value, onChange, label, justify, style, ...rest }) {
+export function Tabs({ tabs, value, onChange, label, justify, variant = "primary", style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
     const aberta = tabs.find((it) => it.id === value);
-    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+    const secundaria = variant === "secondary";
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: secundaria ? s.abasSecundarias : s.abas, children: tabs.map((it) => {
                         const ativa = it.id === value;
-                        return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", ...estadoAcessivel({ selected: ativa, disabled: !!it.disabled }), accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: t.size.opacityDisabled }], children: typeof it.label === "string"
-                                ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
-                                : it.label }, it.id));
+                        return (_jsxs(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", ...estadoAcessivel({ selected: ativa, disabled: !!it.disabled }), accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [
+                                secundaria ? s.abaSecundaria : s.abaDeTab,
+                                ativa && !secundaria && s.abaDeTabAtiva,
+                                it.disabled && { opacity: t.size.opacityDisabled },
+                            ], children: [typeof it.label === "string"
+                                    ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
+                                    : it.label, ativa && secundaria && _jsx(View, { style: s.fioDaAba })] }, it.id));
                     }) }) }), aberta
                 ? (_jsx(Card, { variant: "inset", accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content }))
                 : null] }));

package/dist/numero.d.ts

@@ -2,6 +2,18 @@ import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 import type { IconName } from "./icon-names.js";
 import { type AureaFieldSize } from "./inputs.js";
+/**
+ * Os tamanhos do `NumberField`: os três do campo e mais o `display` (R-16, 01/10/2026), o número
+ * grande de destaque. Nenhuma referência da fila tem esse tamanho (o `NumberField` do HeroUI web
+ * só tem `variant`; o telefone dele nem tem a peça; o ReUI também não), então ele é peça nossa —
+ * e as medidas saem de escalas que JÁ existem, nenhuma nova:
+ *   letra    `text3xl` (30) em seminegrito — o título 2 (`h2` do B-02). Escolha do Victor.
+ *   altura   `controlHXl` — o degrau seguinte da escala de altura dos controles, que muda com a
+ *            densidade como as outras três.
+ *   largura  `space24` (96): o `space16` (64) do campo comum não cabe "1.234" em 30.
+ *   botões   os do `lg`, o maior do `IconButton`.
+ */
+export type AureaNumberFieldSize = AureaFieldSize | "display";
 /** Os separadores de um locale, derivados de um número-sonda. */
 export type AureaSeparadores = {
     decimal: string;
@@ -52,7 +64,11 @@ export interface NumberFieldProps {
     disabled?: boolean;
     /** Mostra o valor e não deixa editar — os botões também somem. */
     readOnly?: boolean;
-    size?: AureaFieldSize;
+    /**
+     * `sm` · `md` · `lg`, como os outros campos, e `display`: o número grande de destaque, com a
+     * letra do título 2 (30). Ver `AureaNumberFieldSize`. Moeda em `display` pede `fullWidth`.
+     */
+    size?: AureaNumberFieldSize;
     /**
      * Ocupa a largura disponível em vez de abraçar o conteúdo. Padrão **false**.
      *

package/dist/numero.js

@@ -50,8 +50,10 @@ import { IconButton } from "./actions.js";
 import { criarFolha, estadoAcessivel } from "./estilos.js";
 import { useCampo } from "./inputs.js";
 import { useAureaStrings, useAureaTokens, usePeleSobreAMarca } 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.textSm : s === "lg" ? t.size.textLg : t.size.textBase; // ADR-0050: um degrau acima da web
+const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg
+    : s === "display" ? t.size.controlHXl : t.size.controlHMd;
+const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textSm : s === "lg" ? t.size.textLg
+    : s === "display" ? t.size.text3xl : t.size.textBase; // ADR-0050: um degrau acima da web
 const folha = criarFolha((t) => ({
     // 🔴 ELE ESTICAVA, E NÃO DEVIA — achado em 12/09/2026, olhando a primeira imagem da vitrine.
     //
@@ -79,6 +81,7 @@ const folha = criarFolha((t) => ({
         paddingVertical: 0, textAlignVertical: "center",
     },
     campoLargo: { width: undefined, flex: 1, minWidth: t.size.space16 },
+    campoDisplay: { width: t.size.space24 },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
     desabilitado: { opacity: t.size.opacityDisabled },
 }));
@@ -250,6 +253,7 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
     const strings = useAureaStrings();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
+    const tamDoBotao = tam === "display" ? "lg" : tam;
     const inativo = disabled ?? campo?.disabled;
     const [interno, setInterno] = React.useState(defaultValue ?? null);
     const numero = value !== undefined ? value : interno;
@@ -355,14 +359,15 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
     // (`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: digitar, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
+    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: tamDoBotao, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: digitar, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? 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, ...estadoAcessivel({ disabled: !!inativo }), "aria-invalid": campo?.invalido, style: [
                     s.campo,
+                    tam === "display" && s.campoDisplay,
                     fullWidth && s.campoLargo,
                     { height: alturaDoTamanho(t, tam), fontSize: fonteDoTamanho(t, tam),
-                        fontFamily: t.font.ui[400], color: t.color.foreground },
+                        fontFamily: t.font.ui[tam === "display" ? 600 : 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 —
@@ -373,5 +378,5 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
                     // O foco continua existindo, por espessura.
                     peleDaMarca,
                     peleDaMarca && focado && { borderWidth: t.size.borderWidth * 2 },
-                ] }), 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 }))] }));
+                ] }), mostrarBotoes && (_jsx(IconButton, { name: icons.increment, label: strings.increment, appearance: "ghost", size: tamDoBotao, disabled: inativo || noLimite(1), onPress: () => empurrar(1), testID: testID ? `${testID}-mais` : undefined }))] }));
 }

package/dist/text.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 //
 // É o **bloqueio 3** da §5.2 do NATIVE.md, e a razão dele é estrutural, não de escopo:
 //
-//   web:    body { font-family:var(--font-ui); font-size:var(--text-md);
+//   web:    body { font-family:var(--font-ui); font-size:var(--text-sm);
 //                  line-height:var(--leading-normal) }        ← e TODO <p>/<span>/<h1> herda
 //   nativo: não há cascata de estilo de texto através de `View`, e não há `<p>`.
 //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Phosphor sobre react-native-svg.",
   "keywords": [
     "aurea",
@@ -51,7 +51,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.13.0"
+    "@aurea-uds/tokens": "^0.14.1"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",