@aurea-uds/native 0.8.1 → 0.8.2

package/dist/actions.d.ts

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

package/dist/actions.js

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

package/dist/display.d.ts

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/inputs.d.ts

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

package/dist/inputs.js

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

package/dist/strings.d.ts

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

package/dist/strings.js

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

package/dist/text.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "React Native target for Aurea UDS: the theme x density provider, the first components and the Carbon icons, drawn on react-native-svg.",
   "keywords": [
     "aurea",
@@ -47,7 +47,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.8.1"
+    "@aurea-uds/tokens": "^0.8.2"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",