@aurea-uds/native 0.8.1 → 0.8.3

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:
@@ -42,8 +42,25 @@ const ICONE = {
 function pintar(t, tone) {
     const m = {
         neutral: { solido: t.color.secondary, texto: t.color.secondaryForeground, sobre: t.color.foreground },
-        brand: { solido: t.color.primary, texto: t.color.primaryForeground, sobre: t.color.primary },
-        danger: { solido: t.color.destructive, texto: t.color.destructiveForeground, sobre: t.color.destructive },
+        // ⚠ O TOM DA MARCA TEM DUAS CORES, e confundi-las foi defeito publicado na `0.8.2`.
+        //
+        // `solido` é o amarelo da marca, que é FUNDO: o texto por cima é escuro e lê bem.
+        // `sobre` é o mesmo amarelo virando TEXTO — e aí ele some. Medido sobre o fundo do tema
+        // claro: **1,73:1**, contra os 4,5:1 que a WCAG exige para texto normal. No escuro dá 10,34.
+        //
+        // O token certo existe desde sempre e é o `link`: mesmo matiz (86.047), mais escuro,
+        // **5,02:1** no claro — e no escuro ele É o amarelo da marca, então nada muda lá. A
+        // identidade não foi tocada: o amarelo de preencher continua invariável, como manda o
+        // `CLAUDE.md`. O que mudou é qual dos dois se usa para ESCREVER.
+        //
+        // ⚠ Achado pelo app na tela de entrar, não por teste nosso — os 1430 passavam por cima.
+        brand: { solido: t.color.primary, texto: t.color.primaryForeground, sobre: t.color.link },
+        // ⚠ MESMO DEFEITO DO TOM DA MARCA, achado por medir os outros tons em vez de parar no
+        // primeiro: `destructive` escrito sobre o tema claro dá **4,30:1** — reprova por pouco, mas
+        // reprova. O `danger400` passa nos DOIS temas (6,86 no claro, 7,47 no escuro), e não é
+        // invenção: o `Input` já usa esse token para a borda de inválido.
+        // O `solido` continua no `destructive`, porque ali ele é FUNDO e o texto por cima é claro.
+        danger: { solido: t.color.destructive, texto: t.color.destructiveForeground, sobre: t.color.danger400 ?? t.color.destructive },
         success: { solido: t.color.success, texto: t.color.successForeground, sobre: t.color.success },
         warning: { solido: t.color.warning, texto: t.color.warningForeground, sobre: t.color.warning },
         info: { solido: t.color.info, texto: t.color.infoForeground, sobre: t.color.info },
@@ -88,7 +105,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 +121,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/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

@@ -9,8 +9,8 @@ export { Icon, IconRegistryProvider, criarRegistroDeIcones } from "./icon.js";
 export type { IconProps, IconName, AureaIconComponent, AureaIconRegistry, AureaIconSize, } from "./icon.js";
 export { Screen } from "./screen.js";
 export type { ScreenProps, AureaScreenBackground, AureaScreenEdge } from "./screen.js";
-export { Stack, Cluster, Grid, Card } from "./layout.js";
-export type { StackProps, GridProps, CardProps, AureaCardVariant } from "./layout.js";
+export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
+export type { StackProps, GridProps, CardProps, SeparatorProps, AureaCardVariant } from "./layout.js";
 export { Button, IconButton } from "./actions.js";
 export type { ButtonProps, IconButtonProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, } from "./actions.js";
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";
@@ -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

@@ -33,7 +33,7 @@ export { Icon, IconRegistryProvider, criarRegistroDeIcones } from "./icon.js";
 // A ÚNICA peça do Lote 1 com dependência de terceiro — `react-native-safe-area-context`,
 // autorizada pelo Victor em 03/09/2026 depois de o lote parar por ela (`BUILDING.md` §3).
 export { Screen } from "./screen.js";
-export { Stack, Cluster, Grid, Card } from "./layout.js";
+export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
 export { Button, IconButton } from "./actions.js";
 // ── Lote 2 — o painel, que é só leitura ────────────────────────────────────────────────────
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type KeyboardTypeOptions, type StyleProp, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { TextInput, type KeyboardTypeOptions, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
+import { type AureaIconRegistry, type IconName } from "./icon.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
 type ContextoDeCampo = {
     label?: string;
@@ -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;
@@ -51,7 +59,30 @@ export interface LabelProps extends ViewProps {
  * entrega. Um `Label` solto é decoração; use-o dentro de um `Field`.
  */
 export declare function Label({ children, trailing, style, ...rest }: LabelProps): React.JSX.Element;
-export interface InputProps {
+/**
+ * ⚠ **O `Input` HERDA do `TextInput`, e isso é conserto de defeito publicado na `0.8.2`.**
+ *
+ * Até ali a interface listava catorze props e o componente desestruturava as catorze **sem
+ * `...rest`**: tudo o que não estivesse na lista era **descartado em silêncio**. O app achou na
+ * tela de entrar, e o efeito não aparece na tela — aparece no uso: sem `autoComplete` e
+ * `textContentType` o gerenciador de senhas não reconhece os campos; sem `autoCorrect` o teclado
+ * "corrige" o e-mail; sem `returnKeyType`/`onSubmitEditing` o botão "próximo" não pula para a
+ * senha; e sem `ref` não há como focar o campo por código.
+ *
+ * ⚠ **Era pior do que parece:** o `PasswordField` repassa `...rest` ao `Input` — e o `Input`
+ * jogava fora. Duas camadas concordando em perder a prop.
+ *
+ * O que continua sendo da Aurea está no `Omit` abaixo, e a razão de cada um está ao lado.
+ */
+export interface InputProps extends Omit<TextInputProps, "style" | "editable" | "placeholderTextColor" | "onBlur" | "onFocus" | "accessibilityLabel" | "accessibilityHint" | "accessibilityState"> {
+    /**
+     * O nó do `TextInput` lá dentro — para focar por código (`ref.current?.focus()`), que é como
+     * o "próximo" do teclado pula de um campo para o outro.
+     *
+     * Chega por PROPS e atravessa no `...rest`: é o padrão do React 19, sem `forwardRef`, o mesmo
+     * que o `layout.tsx` já documenta. **Faltava na `0.8.2`** — não havia como focar campo nenhum.
+     */
+    ref?: React.Ref<React.ComponentRef<typeof TextInput>>;
     value?: string;
     defaultValue?: string;
     onChangeText?: (v: string) => void;
@@ -103,7 +134,7 @@ export interface InputProps {
  * (`aurea.css:686`); **não há ponteiro no telefone**. O foco continua existindo e é o que marca o
  * campo ativo.
  */
-export declare function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, }: InputProps): React.JSX.Element;
+export declare function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, ...rest }: InputProps): React.JSX.Element;
 export interface TextareaProps extends InputProps {
     /** Linhas visíveis. Vira altura mínima, porque no RN não há `rows`. */
     rows?: number;
@@ -120,6 +151,78 @@ 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;
+    /**
+     * Um desenho na FRENTE do campo — o cadeado, quase sempre.
+     *
+     * ⚠ **Faltava na `0.8.2`, e a falta era de desenho meu:** o `PasswordField` monta o grupo por
+     * dentro, então não havia onde encaixar nada antes do campo. Quem quisesse um cadeado teria de
+     * desmontar a peça e remontar à mão, perdendo o olho, o rótulo que anuncia o estado e o
+     * `autoCapitalize` que nasce em `none`.
+     *
+     *     <PasswordField leading={<Icon name="locked" size="sm" />} … />
+     */
+    leading?: React.ReactNode;
+    /**
+     * O registro de glifos, quando o do `AureaProvider` não tem os dois que este componente usa.
+     *
+     * 🔴 **ELE PRECISA DE DOIS ÍCONES, e isto não estava escrito em lugar nenhum — defeito da
+     * `0.8.2`:** o olho é `view` e `view--off`. Se faltarem no registro, **o botão fica invisível**
+     * e o aviso sai só em desenvolvimento: em produção a pessoa simplesmente não consegue ver a
+     * senha que digitou, sem nada na tela explicando.
+     *
+     *     import Olho from "@aurea-uds/native/icons/view";
+     *     import OlhoOff from "@aurea-uds/native/icons/view--off";
+     *     const ICONES = criarRegistroDeIcones({view: Olho, "view--off": OlhoOff});
+     *     // no provider, junto dos outros — ou aqui: <PasswordField icons={ICONES} />
+     */
+    icons?: AureaIconRegistry;
+}
+export declare function PasswordField({ defaultVisible, size, disabled, autoCapitalize, leading, icons, 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.
  *
@@ -147,15 +168,25 @@ export function Label({ children, trailing, style, ...rest }) {
  * (`aurea.css:686`); **não há ponteiro no telefone**. O foco continua existindo e é o que marca o
  * campo ativo.
  */
-export function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, }) {
+export function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, 
+// ⚠ O `...rest` NÃO é enfeite: sem ele, toda prop do `TextInput` que a lista acima não nomeia
+// era descartada em silêncio — `autoComplete`, `textContentType`, `autoCorrect`,
+// `returnKeyType`, `onSubmitEditing`, `maxLength`. Defeito publicado na `0.8.2`.
+...rest }) {
     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
+    // O resto vem PRIMEIRO de propósito: o que a Aurea calcula (respiro, cor, nome do `Field`,
+    // `editable`) tem de vencer, e as props que ela redefine estão no `Omit` da interface —
+    // então não chegam por aqui e não há o que sobrescrever por acidente.
+    , { ...rest, 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 +200,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 +248,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", leading, icons, 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: [leading ? _jsx(InputGroupAddon, { children: leading }) : null, _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, icons: icons, 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/layout.d.ts

@@ -33,6 +33,28 @@ export interface GridProps extends ViewProps {
  */
 export declare function Grid({ minColumnWidth, style, children, ...rest }: GridProps): React.JSX.Element;
 /** Qual superfície o cartão é. Mesmos seis nomes da ficha da web. */
+export interface SeparatorProps extends ViewProps {
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Um texto NO MEIO da linha — "ou entre com", numa tela de entrar.
+     *
+     * ⚠ **Isto NÃO existe na web, e a divergência fica declarada em vez de escondida.** Lá o
+     * `.separator` é só a linha, e um rótulo no meio nunca foi pedido. Aqui foi: o app mediu essa
+     * lacuna na tela de entrar, e a demanda manda no nativo desde o Lote 7. **Com `label`, a
+     * orientação é sempre horizontal** — texto no meio de uma linha vertical não é a mesma peça.
+     */
+    label?: React.ReactNode;
+}
+/**
+ * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.
+ *
+ * ⚠ **Ela NÃO recebe papel de acessibilidade, e isso é escolha medida, não esquecimento.** O
+ * `<hr>` da web traz o papel `separator` de graça; no React Native esse papel **não existe na
+ * lista** — inventar o mais parecido diria uma coisa errada ao leitor de tela, que é exatamente
+ * a armadilha que o Lote 5 e a `Table` do Lote 6 já pagaram. Uma linha decorativa calada é o
+ * comportamento certo.
+ */
+export declare function Separator({ orientation, label, style, ...rest }: SeparatorProps): React.JSX.Element;
 export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger";
 export interface CardProps extends ViewProps {
     variant?: AureaCardVariant;

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Aurea nativo — os primitivos de layout: `Stack`, `Cluster`, `Grid`, `Card`.
 //
 // Medidos no core da web antes de escrever (passo 1 do BUILDING.md), e o que eles são lá:
@@ -18,8 +18,18 @@ import { View } from "react-native";
 // envelope). O `ViewProps`/`TextProps` do RN 0.87 ja' declaram `ref`, entao ele viaja no
 // `...rest` sem nada a mais.
 import { criarFolha } from "./estilos.js";
+import { Text } from "./text.js";
 import { useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
+    // A LINHA DO SISTEMA, e os números são os mesmos do `.separator` da web (`aurea.css`): cor de
+    // `border` e espessura de UM pixel. ⚠ Um pixel não sai de `--space-*` de propósito — a linha
+    // do sistema é de um pixel, e um pixel não é espaçamento. A mesma frase está no CSS.
+    separador: { backgroundColor: t.color.border },
+    separadorH: { height: t.size.borderWidth, width: "100%" },
+    separadorV: { width: t.size.borderWidth, alignSelf: "stretch", minHeight: t.size.space5 },
+    // A linha COM texto no meio: duas linhas que esticam e o rótulo entre elas, sem encolher.
+    separadorRotulado: { flexDirection: "row", alignItems: "center", gap: t.size.space3, width: "100%" },
+    separadorPedaco: { flex: 1, height: t.size.borderWidth, backgroundColor: t.color.border },
     // `gap` no RN existe desde a 0.71 e é o mesmo conceito do flex gap do CSS — medido no contrato
     // do `react-native` 0.86/0.87 que o pacote declara como peer (>=0.76).
     stack: { flexDirection: "column", gap: t.size.space4 },
@@ -74,6 +84,25 @@ export function Grid({ minColumnWidth = 240, style, children, ...rest }) {
     const celula = React.useMemo(() => ({ flexGrow: 0, flexShrink: 1, flexBasis: minColumnWidth, minWidth: minColumnWidth, maxWidth: "100%" }), [minColumnWidth]);
     return (_jsx(View, { style: [s.grid, style], ...rest, children: React.Children.map(children, (filho) => React.isValidElement(filho) ? _jsx(View, { style: celula, children: filho }) : filho) }));
 }
+/**
+ * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.
+ *
+ * ⚠ **Ela NÃO recebe papel de acessibilidade, e isso é escolha medida, não esquecimento.** O
+ * `<hr>` da web traz o papel `separator` de graça; no React Native esse papel **não existe na
+ * lista** — inventar o mais parecido diria uma coisa errada ao leitor de tela, que é exatamente
+ * a armadilha que o Lote 5 e a `Table` do Lote 6 já pagaram. Uma linha decorativa calada é o
+ * comportamento certo.
+ */
+export function Separator({ orientation = "horizontal", label, style, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    if (label != null) {
+        return (_jsxs(View, { style: [s.separadorRotulado, style], ...rest, children: [_jsx(View, { style: s.separadorPedaco }), typeof label === "string"
+                    ? _jsx(Text, { size: "sm", tone: "muted", children: label })
+                    : label, _jsx(View, { style: s.separadorPedaco })] }));
+    }
+    return (_jsx(View, { style: [s.separador, orientation === "vertical" ? s.separadorV : s.separadorH, style], ...rest }));
+}
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *

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,8 +6,8 @@ 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). */
-export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "danger" | "success" | "warning" | "info";
+/** O que a cor SIGNIFICA. Mesmo vocabulário do `tone` do Button (ADR-0044). */
+export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "link" | "danger" | "success" | "warning" | "info";
 export type AureaTextLeading = "none" | "tight" | "normal" | "relaxed";
 export interface TextProps extends TextPropsRN {
     size?: AureaTextSize;

package/dist/text.js

@@ -32,7 +32,11 @@ const ENTRELINHA = {
 };
 const COR = {
     default: "foreground", muted: "mutedForeground", subtle: "subtleForeground",
-    primary: "primary", danger: "destructive", success: "success",
+    // ⚠ `primary` e `link` são o MESMO amarelo em matiz, e NÃO são intercambiáveis.
+    // `primary` é o amarelo de PREENCHER, e escrito sobre o tema claro ele mede 1,73:1 — some.
+    // `link` é o de ESCREVER: mesmo matiz, mais escuro, 5,02:1 no claro, e no escuro é o próprio
+    // amarelo da marca. Quem quer texto amarelo legível nos dois temas usa `link`.
+    primary: "primary", link: "link", danger: "destructive", success: "success",
     warning: "warning", info: "info",
 };
 // A folha cobre só o que NÃO depende das props — a cor por tom. O resto (tamanho, peso, família)

package/package.json

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