@aurea-uds/native 0.14.1 → 0.16.0

package/dist/icon.d.ts

@@ -4,6 +4,17 @@ export type AureaIconComponent = (props: {
     size?: number;
     color?: string;
 }) => React.ReactElement;
+/**
+ * Um ícone: o NOME de um glifo do registro (`"truck"`) ou o próprio DESENHO (`Logo`) — R-11,
+ * 02/10/2026. É o jeito do HeroUI: lá nenhuma peça recebe nome de ícone, o app põe o componente
+ * dele dentro. Aqui os dois valem em toda prop de ícone, e o desenho dispensa registro e
+ * `declare module`: o logotipo do app entra como `icon={Logo}`, com o `Logo` de `criarGlifo` ou o
+ * `default` de um `icons/*`. Ele recebe o `size` e a `color` que a peça pedir.
+ *
+ * ⚠ O desenho passado direto não tem forma cheia: no item escolhido ele sai igual (a forma cheia
+ * mora no registro, como `<nome>-fill`).
+ */
+export type AureaIcon = IconName | AureaIconComponent;
 export type { IconName, PhosphorIconName, AureaIconNames, IconWeight } from "./icon-names.js";
 import type { IconName, IconWeight, PhosphorIconName } from "./icon-names.js";
 /**
@@ -75,6 +86,10 @@ export interface AureaGlifoDesenho extends Pintura {
  * // a traço: a tinta no desenho inteiro, como no `<svg>` raiz
  * const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
  *                          strokeLinecap: "round", paths: ["M…"]});
+ * // o caminho curto (R-11, 02/10/2026): o desenho entra direto em qualquer prop de ícone
+ * <Icon name={Marca} size="xl" />
+ * <BottomNav items={[{id: "inicio", label: "Início", icon: Marca}]} />
+ * // o caminho do registro, para usar por NOME (pede `AureaIconNames`)
  * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
  * <Icon name="marca" size="xl" />
  * ```
@@ -99,7 +114,8 @@ export declare function IconRegistryProvider({ registry, children }: {
 /** A escala de glifo dos tokens. Começa em `sm`: **não existe `--icon-xs`** — como na web. */
 export type AureaIconSize = "sm" | "md" | "lg" | "xl";
 export interface IconProps {
-    name: IconName;
+    /** O nome de um glifo do registro, ou o próprio desenho (`AureaIcon`, R-11). */
+    name: AureaIcon;
     size?: AureaIconSize | number;
     /** Padrão: a cor de texto do tema. Ver a nota sobre herança abaixo. */
     color?: string;

package/dist/icon.js

@@ -52,6 +52,10 @@ function pintar(forma, desenho, color) {
  * // a traço: a tinta no desenho inteiro, como no `<svg>` raiz
  * const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
  *                          strokeLinecap: "round", paths: ["M…"]});
+ * // o caminho curto (R-11, 02/10/2026): o desenho entra direto em qualquer prop de ícone
+ * <Icon name={Marca} size="xl" />
+ * <BottomNav items={[{id: "inicio", label: "Início", icon: Marca}]} />
+ * // o caminho do registro, para usar por NOME (pede `AureaIconNames`)
  * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
  * <Icon name="marca" size="xl" />
  * ```
@@ -99,7 +103,10 @@ export function Icon({ name, size = "md", color, icons, label, weight }) {
     const doContexto = React.useContext(Contexto);
     // Lido como mapa de texto: a chave `-fill` não é um `IconName`, e o tipo do registro já a aceita.
     const registro = (icons ?? doContexto);
-    const Glifo = (weight === "fill" ? registro?.[`${name}-fill`] : undefined) ?? registro?.[name];
+    // O desenho passado direto (R-11) não consulta o registro.
+    const Glifo = typeof name === "function"
+        ? name
+        : (weight === "fill" ? registro?.[`${name}-fill`] : undefined) ?? registro?.[name];
     if (!Glifo) {
         if (__DEV__) {
             console.warn(`Aurea Icon: "${name}" não está no registro. Importe-o pelo caminho profundo e ` +

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { criarFolha, comOpacidade } from "./estilos.js";
 export { Text, Heading, Paragraph, Code } from "./text.js";
 export type { TextProps, AureaTextFont, AureaTextLeading, AureaTextSize, AureaTextTone, AureaTextWeight, AureaTextType, HeadingProps, ParagraphProps, CodeProps, AureaTypographyColor, AureaTypographyWeight, AureaTypographyAlign, } from "./text.js";
 export { Icon, IconRegistryProvider, criarRegistroDeIcones, criarGlifo } from "./icon.js";
-export type { IconProps, IconName, PhosphorIconName, AureaIconNames, IconWeight, AureaIconComponent, AureaIconRegistry, AureaIconSize, AureaGlifoDesenho, AureaGlifoCaminho, AureaGlifoCirculo, AureaGlifoRetangulo, } from "./icon.js";
+export type { IconProps, IconName, PhosphorIconName, AureaIconNames, IconWeight, AureaIconComponent, AureaIconRegistry, AureaIcon, AureaIconSize, AureaGlifoDesenho, AureaGlifoCaminho, AureaGlifoCirculo, AureaGlifoRetangulo, } from "./icon.js";
 export { Screen } from "./screen.js";
 export type { ScreenProps, AureaScreenBackground, AureaScreenEdge } from "./screen.js";
 export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";

package/dist/inputs.d.ts

@@ -1,8 +1,11 @@
 import * as React from "react";
 import { TextInput, type KeyboardTypeOptions, type PressableProps, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
 import { type AureaFilaJustify } from "./rolagem.js";
-import { type AureaIconRegistry, type IconName } from "./icon.js";
+import { type AureaIconRegistry, type AureaIcon } from "./icon.js";
+import type { AureaTokens } from "./tokens.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
+export declare const alturaDoTamanho: (t: AureaTokens, s: AureaFieldSize) => number;
+export declare const respiroDoTamanho: (t: AureaTokens, s: AureaFieldSize) => number;
 type ContextoDeCampo = {
     label?: string;
     hint?: string;
@@ -289,7 +292,7 @@ export interface RadioGroupItemProps extends Omit<PressableProps, "children" | "
      * 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;
+    icon?: AureaIcon;
     style?: StyleProp<ViewStyle>;
 }
 declare function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation, indicatorPlacement, style, children, ...rest }: RadioGroupProps): React.JSX.Element;
@@ -367,7 +370,7 @@ export interface SelectProps {
     disabled?: boolean;
     size?: AureaFieldSize;
     /** O glifo da seta. Registre-o, ou passe `false`. */
-    chevron?: IconName | false;
+    chevron?: AureaIcon | false;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/dist/inputs.js

@@ -43,13 +43,16 @@ import { criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
-import { useReduceMotion } from "./movimento.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens, usePeleSobreAMarca, ForaDaMarca } from "./theme.js";
-const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
+// `alturaDoTamanho` e `respiroDoTamanho` saem do arquivo (não do pacote) desde 02/10/2026: o
+// `FileInput` (R-21) desenha um gatilho com a medida do campo, e copiar os números para lá é o
+// defeito que o `CLAUDE.md` nomeia.
+export 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 respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
+export const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
 const folha = criarFolha((t) => ({
     campo: { gap: 7 },
     rotulo: { flexDirection: "row", justifyContent: "space-between", gap: 12 },
@@ -457,7 +460,7 @@ export function Switch({ label, description, checked, onChange, disabled, size,
         }
         if (reduzir === null)
             return;
-        const a = Animated.timing(pos, { toValue: destino, duration: 160, useNativeDriver: true });
+        const a = Animated.timing(pos, { toValue: destino, duration: 160, useNativeDriver: driverNativo() });
         a.start();
         return () => a.stop();
     }, [checked, pos, reduzir]);

package/dist/midia.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type ImageSourcePropType, type StyleProp, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { type AureaIcon } from "./icon.js";
 /** URL ou `require()` de um asset local — as duas formas do `Image` do RN, como no `Avatar`. */
 export type AureaImageSource = ImageSourcePropType | string;
 export interface ImageProps {
@@ -17,7 +17,7 @@ export interface ImageProps {
     /** O que aparece no lugar quando o bitmap não vem. Sem ele, o glifo `image` sobre a caixa reservada. */
     fallback?: React.ReactNode;
     /** O glifo do substituto. Registre-o, ou passe `false`. */
-    fallbackIcon?: IconName | false;
+    fallbackIcon?: AureaIcon | false;
     /**
      * Desenha OUTRO componente de imagem com a nossa pele — é o caso do consumidor que já usa
      * `expo-image` por cache de disco.
@@ -96,3 +96,20 @@ export interface GalleryProps {
  * um alvo que engana quem navega por leitor de tela — mesma decisão da web, mesma razão.
  */
 export declare function Gallery({ items, label, selected, onSelect, zoom, ratio, minTileWidth, style, testID, }: GalleryProps): React.JSX.Element;
+/**
+ * A foto grande, no `Dialog` — a da `Gallery` e, desde a R-22 (02/10/2026), a do `PhotoInput`.
+ * Morava dentro da `Gallery`; duas cópias do zoom é o defeito que o `CLAUDE.md` nomeia, e o dia em
+ * que uma das duas muda e a outra não. Não sai pelo barril: é peça de dentro.
+ *
+ * ⚠ Aberta quando há `source`. O `Dialog` fica montado e fechado no resto do tempo — é o contrato
+ * dele, e o `Modal` do RN não desenha nada fechado.
+ */
+export declare function FotoAmpliada({ source, title, alt, ratio, onClose, testID }: {
+    source?: AureaImageSource;
+    /** O título da janela: uma caixa sem nome anuncia só "janela". */
+    title: string;
+    alt: string;
+    ratio?: number | string;
+    onClose: () => void;
+    testID?: string;
+}): React.JSX.Element;

package/dist/midia.js

@@ -177,5 +177,16 @@ export function Gallery({ items, label, selected, onSelect, zoom, ratio = 1, min
                         // `alt=""` acima). Sem legenda, o nome é o `alt`.
                         accessibilityLabel: temLegenda && typeof item.caption === "string"
                             ? item.caption : item.alt, ...estadoAcessivel({ selected: item.id === selected }), style: [s.ladrilho, item.id === selected && s.ladrilhoEscolhido], children: miolo }, item.id));
-                }) }), zoom && (_jsx(Dialog, { open: aberto != null, title: aberto ? (typeof aberto.caption === "string" ? aberto.caption : aberto.alt) : "", onClose: () => setAmpliado(null), testID: testID ? `${testID}-ampliada` : undefined, children: aberto && _jsx(Image, { source: aberto.source, alt: aberto.alt, fit: "contain", ratio: ratio }) }))] }));
+                }) }), zoom && (_jsx(FotoAmpliada, { source: aberto?.source, title: aberto ? (typeof aberto.caption === "string" ? aberto.caption : aberto.alt) : "", alt: aberto?.alt ?? "", ratio: ratio, onClose: () => setAmpliado(null), testID: testID ? `${testID}-ampliada` : undefined }))] }));
+}
+/**
+ * A foto grande, no `Dialog` — a da `Gallery` e, desde a R-22 (02/10/2026), a do `PhotoInput`.
+ * Morava dentro da `Gallery`; duas cópias do zoom é o defeito que o `CLAUDE.md` nomeia, e o dia em
+ * que uma das duas muda e a outra não. Não sai pelo barril: é peça de dentro.
+ *
+ * ⚠ Aberta quando há `source`. O `Dialog` fica montado e fechado no resto do tempo — é o contrato
+ * dele, e o `Modal` do RN não desenha nada fechado.
+ */
+export function FotoAmpliada({ source, title, alt, ratio, onClose, testID }) {
+    return (_jsx(Dialog, { open: source != null, title: title, onClose: onClose, testID: testID, children: source != null && _jsx(Image, { source: source, alt: alt, fit: "contain", ratio: ratio }) }));
 }

package/dist/moldura.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type TomDeCor } from "./estilos.js";
+import { type AureaIcon } from "./icon.js";
+export interface IconeEmMolduraProps {
+    icon: AureaIcon;
+    /** O lado da moldura, em dp — sempre de um token. */
+    moldura: number;
+    /** O lado do glifo, em dp — sempre de um token. */
+    glifo: number;
+    tone?: TomDeCor;
+    /**
+     * A cor de BAIXO, quando há algo atrás. No escuro os fundos suaves são translúcidos (o
+     * `successBg` é `oklch(0.42 0.11 150 / 0.36)`), e o trilho da `Timeline` aparecia através da
+     * moldura. É o mesmo truque do ponto da linha do tempo: a cor da superfície faz o buraco.
+     */
+    sobre?: string;
+}
+export declare function IconeEmMoldura({ icon, moldura, glifo, tone, sobre }: IconeEmMolduraProps): React.JSX.Element;

package/dist/moldura.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { acentoDoTom, comOpacidade, fundoDoTom } from "./estilos.js";
+import { Icon } from "./icon.js";
+import { useAureaTokens } from "./theme.js";
+export function IconeEmMoldura({ icon, moldura, glifo, tone = "neutral", sobre }) {
+    const t = useAureaTokens();
+    const fundo = tone === "neutral" ? t.color.muted
+        : tone === "primary" ? comOpacidade(t.color.primary, 0.1)
+            : fundoDoTom(t, tone);
+    const cor = tone === "neutral" ? t.color.mutedForeground : acentoDoTom(t, tone);
+    const redondo = { width: moldura, height: moldura, borderRadius: t.size.radiusFull, flexGrow: 0, flexShrink: 0 };
+    const circulo = (_jsx(View, { style: [redondo, { alignItems: "center", justifyContent: "center", backgroundColor: fundo }], children: _jsx(Icon, { name: icon, size: glifo, color: cor }) }));
+    return sobre == null ? circulo : (_jsx(View, { style: [redondo, { backgroundColor: sobre }], children: circulo }));
+}

package/dist/movimento.d.ts

@@ -15,3 +15,15 @@
  * Quem só quer um booleano escreve `useReduceMotion() === true`.
  */
 export declare function useReduceMotion(): boolean | null;
+/**
+ * O `useNativeDriver` de toda animação da Aurea — E13, 02/10/2026.
+ *
+ * No aparelho, `true`: a animação roda fora do JS. **No navegador não existe esse motor**: o
+ * React Native Web (0.21.3, `NativeAnimatedHelper.js:429`) avisa no console *"`useNativeDriver`
+ * is not supported"* toda vez que recebe `true`, e anima pelo JS do mesmo jeito. Então lá vai
+ * `false`, dito com todas as letras (sem a chave, ele avisa outra coisa: *"was not specified"*).
+ *
+ * Função, e não constante, para o teste conseguir trocar a plataforma entre um caso e outro.
+ * Quem pega o `useNativeDriver: true` escrito à mão é o `native-e13.test.tsx`.
+ */
+export declare function driverNativo(): boolean;

package/dist/movimento.js

@@ -14,7 +14,7 @@
 //
 // A pergunta é do sistema: iOS "Reduzir movimento", Android "Remover animações".
 import * as React from "react";
-import { AccessibilityInfo } from "react-native";
+import { AccessibilityInfo, Platform } from "react-native";
 /**
  * `true` quando a pessoa pediu menos movimento, `false` quando não, **`null` enquanto o sistema
  * não respondeu**.
@@ -43,3 +43,17 @@ export function useReduceMotion() {
     }, []);
     return reduzir;
 }
+/**
+ * O `useNativeDriver` de toda animação da Aurea — E13, 02/10/2026.
+ *
+ * No aparelho, `true`: a animação roda fora do JS. **No navegador não existe esse motor**: o
+ * React Native Web (0.21.3, `NativeAnimatedHelper.js:429`) avisa no console *"`useNativeDriver`
+ * is not supported"* toda vez que recebe `true`, e anima pelo JS do mesmo jeito. Então lá vai
+ * `false`, dito com todas as letras (sem a chave, ele avisa outra coisa: *"was not specified"*).
+ *
+ * Função, e não constante, para o teste conseguir trocar a plataforma entre um caso e outro.
+ * Quem pega o `useNativeDriver: true` escrito à mão é o `native-e13.test.tsx`.
+ */
+export function driverNativo() {
+    return Platform.OS !== "web";
+}

package/dist/navigation.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { type ViewProps } from "react-native";
-import { type IconName } from "./icon.js";
+import { type AureaIcon } from "./icon.js";
 import { type AureaFilaJustify } from "./rolagem.js";
 export interface AureaNavItem {
     id: string;
     label: React.ReactNode;
-    icon?: IconName;
+    icon?: AureaIcon;
     /** O contador de não lidos. Número vira selo; `true` vira ponto. */
     badge?: number | boolean;
     onPress?: () => void;
@@ -142,14 +142,14 @@ export interface AureaNavListItem {
     description?: React.ReactNode;
     /** O valor à direita — um número, um estado, uma data. */
     value?: React.ReactNode;
-    icon?: IconName;
+    icon?: AureaIcon;
     onPress?: () => void;
     disabled?: boolean;
 }
 export interface NavListProps extends ViewProps {
     items: AureaNavListItem[];
     /** O glifo de "isto abre", à direita. Registre-o, ou passe `false`. */
-    chevron?: IconName | false;
+    chevron?: AureaIcon | false;
 }
 /**
  * A lista de destinos DENTRO da página — a tela de ajustes, não a moldura do app.
@@ -174,8 +174,8 @@ export interface StepperProps extends ViewProps {
     items: AureaStepItem[];
     label?: string;
     /** Glifos de `done` e `error`. Registre-os, ou o passo mostra o número. */
-    doneIcon?: IconName | false;
-    errorIcon?: IconName | false;
+    doneIcon?: AureaIcon | false;
+    errorIcon?: AureaIcon | false;
 }
 /**
  * A trilha de passos — o onboarding de 3 passos que o consumidor já tem.

package/dist/numero.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-import type { IconName } from "./icon-names.js";
+import type { AureaIcon } from "./icon.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
@@ -88,8 +88,8 @@ export interface NumberFieldProps {
     keyboardType?: "numeric" | "decimal-pad" | "number-pad" | "numbers-and-punctuation";
     /** Os glifos dos botões. Registre-os, ou passe `false` para tirar os dois. */
     icons?: {
-        increment: IconName;
-        decrement: IconName;
+        increment: AureaIcon;
+        decrement: AureaIcon;
     } | false;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/dist/overlays.js

@@ -63,7 +63,7 @@ import { IconButton } from "./actions.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens, ForaDaMarca } from "./theme.js";
-import { useReduceMotion } from "./movimento.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
 const folha = criarFolha((t) => ({
     fundo: { flex: 1, backgroundColor: t.color.overlay },
     // 🔴 O FUNDO TOCÁVEL VIROU IRMÃO, NÃO ANCESTRAL — 10/09/2026, e a razão está no bloco
@@ -226,7 +226,7 @@ export function Drawer({ open, title, children, onClose, side = "right", scroll
             return;
         }
         const laco = Animated.timing(progresso, {
-            toValue: 1, duration: DURACAO, useNativeDriver: true,
+            toValue: 1, duration: DURACAO, useNativeDriver: driverNativo(),
             easing: Easing.bezier(...t.easing.easeEmphasized),
         });
         laco.start();
@@ -289,7 +289,7 @@ export function BottomSheet({ open, title, children, onClose, grabber = true, dr
                 return;
             }
             Animated.timing(arrasto, {
-                toValue: 0, duration: DURACAO, useNativeDriver: true,
+                toValue: 0, duration: DURACAO, useNativeDriver: driverNativo(),
                 easing: Easing.bezier(...t.easing.easeEmphasized),
             }).start();
         },

package/dist/sistema.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { type AureaIcon } from "./icon.js";
 import { type AureaFieldSize } from "./inputs.js";
 export interface DatePickerProps {
     value?: Date;
@@ -14,7 +14,7 @@ export interface DatePickerProps {
     /** Como a data vira texto no gatilho. Padrão: o formato do aparelho. */
     format?: (d: Date) => string;
     placeholder?: string;
-    icon?: IconName | false;
+    icon?: AureaIcon | false;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
@@ -56,8 +56,8 @@ export interface PhotoInputProps {
     offerSettings?: boolean;
     /** Avisado quando a permissão foi negada — o app pode querer contar uma história própria. */
     onPermissionDenied?: () => void;
-    addIcon?: IconName | false;
-    removeIcon?: IconName;
+    addIcon?: AureaIcon | false;
+    removeIcon?: AureaIcon;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
@@ -78,5 +78,17 @@ export interface PhotoInputProps {
  * | **quantas** cabem? | uma | `max` |
  *
  * ⚠ **O gatilho some quando o limite é atingido**, em vez de ficar aceso e não fazer nada.
+ *
+ * **R-22 (02/10/2026), achado do app: a pessoa não conseguia OLHAR a foto que escolheu.** A
+ * miniatura era um `Avatar` redondo de 42, sem toque, e o X (sem fundo, só 8 para fora) cobria
+ * metade dela. Agora, na "B" da prancha escolhida pelo Victor:
+ *
+ * | | |
+ * |---|---|
+ * | miniatura | quadrada de 64, a `Image` da `Gallery` (o `Avatar` `lg` do HeroUI) |
+ * | tocar nela | abre a foto grande, no MESMO zoom da `Gallery` (`FotoAmpliada`) |
+ * | o X | com fundo, TODO fora da foto, no canto de cima à direita |
+ * | leitor de tela | *"Foto 2 de 3"* (com uma só, *"Foto"*) e *"Abre a foto"*; o X, *"Remover foto 2"* |
+ * | inativo | a foto ainda abre (olhar não muda nada); o X não remove |
  */
 export declare function PhotoInput({ value, onChange, max, source, disabled, offerSettings, onPermissionDenied, addIcon, removeIcon, style, testID, }: PhotoInputProps): React.JSX.Element;

package/dist/sistema.js

@@ -35,11 +35,11 @@ import { Linking, Platform, Pressable, View } from "react-native";
 import RNDateTimePicker, { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
 import * as ImagePicker from "expo-image-picker";
 import { IconButton } from "./actions.js";
-import { Avatar } from "./display.js";
 import { criarFolha, estadoAcessivel } from "./estilos.js";
 import { Alert } from "./feedback.js";
 import { Icon } from "./icon.js";
 import { useCampo } from "./inputs.js";
+import { FotoAmpliada, Image } from "./midia.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -50,16 +50,28 @@ const folha = criarFolha((t) => ({
     },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
     desabilitado: { opacity: t.size.opacityDisabled },
-    galeria: { flexDirection: "row", flexWrap: "wrap", gap: t.size.space2 },
-    miniatura: { position: "relative" },
-    remover: { position: "absolute", top: -t.size.space2, right: -t.size.space2 },
+    // R-22 (02/10/2026), a "B" da prancha: miniatura QUADRADA de 64 — o `Avatar` `lg` do HeroUI
+    // Native, e a medida que o botão de pôr foto passou a ter também (era 72, número à mão) — e o X
+    // TODO FORA da foto. O X é o `IconButton` `sm` (30) com fundo; a área de toque dele é de 44
+    // (`targetMin`), com o desenho no centro, então o deslocamento que põe o canto do DESENHO no
+    // canto da foto é (30 + 44) / 2. A grade deixa esse espaço em cima, à direita e entre as linhas,
+    // porque no Android o toque fora da caixa do pai não chega.
+    galeria: {
+        flexDirection: "row", flexWrap: "wrap", columnGap: t.size.space4,
+        rowGap: foraDoX(t) + t.size.space2,
+    },
+    comX: { paddingTop: foraDoX(t), paddingRight: foraDoX(t) },
+    miniatura: { position: "relative", width: t.size.space16 },
+    remover: { position: "absolute", top: -foraDoX(t), right: -foraDoX(t) },
     adicionar: {
         alignItems: "center", justifyContent: "center", gap: t.size.space1,
-        width: 72, height: 72, borderRadius: t.size.radiusMd,
+        width: t.size.space16, height: t.size.space16, borderRadius: t.size.radiusLg,
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
         borderStyle: "dashed", backgroundColor: t.color.fieldBg,
     },
 }));
+/** Quanto o X do `PhotoInput` sai da foto: metade do desenho (30) mais metade do alvo (44). */
+const foraDoX = (t) => (t.size.controlHSm + Math.max(t.size.controlHSm, t.size.targetMin)) / 2;
 const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
 /**
  * O campo de data — **a nossa pele, o calendário DELES**.
@@ -133,6 +145,18 @@ export function DatePicker({ value, onChange, mode = "date", minimumDate, maximu
  * | **quantas** cabem? | uma | `max` |
  *
  * ⚠ **O gatilho some quando o limite é atingido**, em vez de ficar aceso e não fazer nada.
+ *
+ * **R-22 (02/10/2026), achado do app: a pessoa não conseguia OLHAR a foto que escolheu.** A
+ * miniatura era um `Avatar` redondo de 42, sem toque, e o X (sem fundo, só 8 para fora) cobria
+ * metade dela. Agora, na "B" da prancha escolhida pelo Victor:
+ *
+ * | | |
+ * |---|---|
+ * | miniatura | quadrada de 64, a `Image` da `Gallery` (o `Avatar` `lg` do HeroUI) |
+ * | tocar nela | abre a foto grande, no MESMO zoom da `Gallery` (`FotoAmpliada`) |
+ * | o X | com fundo, TODO fora da foto, no canto de cima à direita |
+ * | leitor de tela | *"Foto 2 de 3"* (com uma só, *"Foto"*) e *"Abre a foto"*; o X, *"Remover foto 2"* |
+ * | inativo | a foto ainda abre (olhar não muda nada); o X não remove |
  */
 export function PhotoInput({ value = [], onChange, max = 1, source = "camera", disabled, offerSettings = true, onPermissionDenied, addIcon = "camera", removeIcon = "x", style, testID, }) {
     const t = useAureaTokens();
@@ -141,7 +165,12 @@ export function PhotoInput({ value = [], onChange, max = 1, source = "camera", d
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
     const [negadoDeVez, setNegadoDeVez] = React.useState(false);
+    const [aberta, setAberta] = React.useState(null);
     const cheio = value.length >= max;
+    // "Foto 2 de 3": a posição entre as que EXISTEM, e não entre as que cabem (`max`).
+    const nomeDa = (n) => value.length > 1
+        ? `${strings.photo} ${n + 1} ${strings.positionOf} ${value.length}` : strings.photo;
+    const fotoAberta = aberta != null ? value[aberta] : undefined;
     const escolher = React.useCallback(async () => {
         if (source === "camera") {
             const atual = await ImagePicker.getCameraPermissionsAsync();
@@ -166,5 +195,7 @@ export function PhotoInput({ value = [], onChange, max = 1, source = "camera", d
             .map((a) => ({ uri: a.uri, width: a.width, height: a.height }));
         onChange?.([...value, ...novas]);
     }, [source, max, value, onChange, onPermissionDenied]);
-    return (_jsxs(View, { testID: testID, style: style, children: [negadoDeVez && (_jsx(Alert, { variant: "warning", children: _jsxs(View, { style: { gap: t.size.space2 }, children: [_jsx(Text, { size: "sm", tone: "muted", children: strings.cameraDenied }), offerSettings && (_jsx(Pressable, { onPress: () => Linking.openSettings(), accessibilityRole: "button", accessibilityLabel: strings.openSettings, children: _jsx(Text, { size: "sm", weight: 600, tone: "primary", children: strings.openSettings }) }))] }) })), _jsxs(View, { style: s.galeria, children: [value.map((foto, n) => (_jsxs(View, { style: s.miniatura, children: [_jsx(Avatar, { source: foto.uri, size: "lg", alt: "" }), _jsx(View, { style: s.remover, children: _jsx(IconButton, { appearance: "ghost", size: "sm", name: removeIcon, label: strings.photoRemove, onPress: () => onChange?.(value.filter((_, i) => i !== n)) }) })] }, foto.uri))), !cheio && (_jsx(Pressable, { onPress: inativo ? undefined : escolher, disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, ...estadoAcessivel({ disabled: !!inativo }), style: [s.adicionar, inativo && s.desabilitado], children: addIcon && _jsx(Icon, { name: addIcon, size: "lg", color: t.color.subtleForeground }) }))] })] }));
+    return (_jsxs(View, { testID: testID, style: style, children: [negadoDeVez && (_jsx(Alert, { variant: "warning", children: _jsxs(View, { style: { gap: t.size.space2 }, children: [_jsx(Text, { size: "sm", tone: "muted", children: strings.cameraDenied }), offerSettings && (_jsx(Pressable, { onPress: () => Linking.openSettings(), accessibilityRole: "button", accessibilityLabel: strings.openSettings, children: _jsx(Text, { size: "sm", weight: 600, tone: "primary", children: strings.openSettings }) }))] }) })), _jsxs(View, { style: [s.galeria, value.length > 0 && s.comX], children: [value.map((foto, n) => (_jsxs(View, { style: s.miniatura, children: [_jsx(Pressable, { onPress: () => setAberta(n), accessibilityRole: "imagebutton", accessibilityLabel: nomeDa(n), accessibilityHint: strings.photoOpen, children: _jsx(Image, { source: foto.uri, alt: "", ratio: 1 }) }), _jsx(View, { style: s.remover, children: _jsx(IconButton, { appearance: "solid", size: "sm", name: removeIcon, label: `${strings.photoRemove} ${n + 1}`, disabled: inativo, onPress: () => onChange?.(value.filter((_, i) => i !== n)) }) })] }, `${foto.uri}-${n}`))), !cheio && (_jsx(Pressable, { onPress: inativo ? undefined : escolher, disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label ?? strings.photoAdd, ...estadoAcessivel({ disabled: !!inativo }), style: [s.adicionar, inativo && s.desabilitado], children: addIcon && _jsx(Icon, { name: addIcon, size: "lg", color: t.color.subtleForeground }) }))] }), _jsx(FotoAmpliada, { source: fotoAberta?.uri, title: aberta != null ? nomeDa(aberta) : "", alt: aberta != null ? nomeDa(aberta) : "", 
+                // A proporção da foto, quando a câmera a deu: a grande aparece inteira, sem tarja à toa.
+                ratio: fotoAberta?.width && fotoAberta.height ? fotoAberta.width / fotoAberta.height : 1, onClose: () => setAberta(null) })] }));
 }

package/dist/strings.d.ts

@@ -32,8 +32,18 @@ export interface AureaStrings {
     cameraDenied: string;
     /** O botão que leva às configurações do app. */
     openSettings: string;
-    /** O rótulo do botão que tira uma foto anexada. */
+    /** O rótulo do botão que tira uma foto anexada. O número da foto vem depois (R-22). */
     photoRemove: string;
+    /**
+     * O nome de cada miniatura do `PhotoInput` (R-22): *"Foto 2 de 3"* — com uma foto só, só
+     * *"Foto"*. O `positionOf` é a mesma chave da web.
+     */
+    photo: string;
+    positionOf: string;
+    /** O que a miniatura faz, dito pelo leitor de tela depois do nome (R-22). */
+    photoOpen: string;
+    /** O nome do botão de pôr foto quando ele não está num `Field` (R-22): sem isto, ficava mudo. */
+    photoAdd: 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
@@ -83,6 +93,17 @@ export interface AureaStrings {
     searchClear: string;
     /** O nome da grade de fotos da `Gallery`. Mesmo nome da web. */
     galleryLabel: string;
+    /**
+     * O texto do gatilho do `FileInput` (R-21). **Não existe na web**: lá a área de soltar diz
+     * *"Arraste arquivos aqui ou clique para selecionar"*, e no telefone não há o que arrastar.
+     */
+    fileChoose: string;
+    /** O botão que tira um arquivo escolhido; o nome do arquivo vem depois. Mesmo nome da web. */
+    fileRemove: string;
+    /** O aviso do arquivo maior que o `maxSize`. Mesmo nome — e mesma frase — da web. */
+    fileTooLarge: string;
+    /** O aviso do arquivo de um tipo que o `accept` não aceita. Mesmo nome e frase da web. */
+    fileWrongType: string;
     /** A frase de cada estado universal. */
     universalState: Record<AureaUniversalState, string>;
 }

package/dist/strings.js

@@ -38,6 +38,10 @@ export const defaultStrings = {
     cameraDenied: "Camera access is off. Turn it on in Settings to attach a photo.",
     openSettings: "Open Settings",
     photoRemove: "Remove photo",
+    photo: "Photo",
+    positionOf: "of",
+    photoOpen: "Opens the photo",
+    photoAdd: "Add photo",
     passwordShow: "Show password",
     passwordHide: "Hide password",
     close: "Close",
@@ -56,6 +60,10 @@ export const defaultStrings = {
     comboboxSearch: "Search",
     searchClear: "Clear search",
     galleryLabel: "Gallery",
+    fileChoose: "Choose file",
+    fileRemove: "Remove",
+    fileTooLarge: "File exceeds the size limit",
+    fileWrongType: "File type not allowed",
     universalState: {
         waiting_user: "Waiting for someone to act.",
         waiting_approval: "Waiting for approval.",
@@ -78,6 +86,10 @@ 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",
+    photo: "Foto",
+    positionOf: "de",
+    photoOpen: "Abre a foto",
+    photoAdd: "Adicionar foto",
     passwordShow: "Mostrar senha",
     passwordHide: "Ocultar senha",
     close: "Fechar",
@@ -96,6 +108,10 @@ export const ptBR = {
     comboboxSearch: "Buscar",
     searchClear: "Limpar busca",
     galleryLabel: "Galeria",
+    fileChoose: "Escolher arquivo",
+    fileRemove: "Remover",
+    fileTooLarge: "Arquivo maior que o limite",
+    fileWrongType: "Tipo de arquivo não aceito",
     universalState: {
         waiting_user: "Esperando alguém agir.",
         waiting_approval: "Esperando aprovação.",

package/dist/toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { type AureaIcon } from "./icon.js";
 import { type AureaAlertVariant } from "./feedback.js";
 /** As mesmas quatro faces do `AureaToastType` da web (`system.tsx:65`). */
 export type AureaToastType = AureaAlertVariant;
@@ -17,7 +17,7 @@ export interface AureaToastInput {
     /** Uma ação curta — "Desfazer". Ver o aviso sobre `duration` acima. */
     action?: React.ReactNode;
     /** Deixe de fora para não desenhar ícone nenhum; sem isto vem o do tipo. */
-    icon?: IconName | false;
+    icon?: AureaIcon | false;
 }
 export interface AureaToast extends AureaToastInput {
     id: string;

package/dist/toast.js

@@ -60,7 +60,7 @@ import { IconButton } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { ICONE_DA_VARIANTE } from "./feedback.js";
-import { useReduceMotion } from "./movimento.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -185,7 +185,7 @@ export function Toast({ toast, onClose }) {
             return;
         }
         const laco = Animated.timing(entrada, {
-            toValue: 1, duration: ENTRADA, useNativeDriver: true,
+            toValue: 1, duration: ENTRADA, useNativeDriver: driverNativo(),
             easing: Easing.bezier(...t.easing.easeEmphasized),
         });
         laco.start();