@aurea-uds/native 0.14.1 → 0.15.0

package/README.md

@@ -73,17 +73,19 @@ Para o texto sair na Atkinson Hyperlegible (a fonte da Aurea desde a ADR-0053),
 O último costuma **já estar instalado**: `react-navigation` e `expo-router` o arrastam. Declará-lo
 como peer não adiciona peso ao app — só diz o que já ia estar lá.
 
-E **dois peers OPCIONAIS**, marcados como tal em `peerDependenciesMeta` — quem não usa data nem
-câmera não instala nada e não vê aviso:
+E **três peers OPCIONAIS**, marcados como tal em `peerDependenciesMeta` — quem não usa data,
+câmera nem arquivo não instala nada e não vê aviso. Instale só o da peça que usar:
 
 ```sh
 pnpm add @react-native-community/datetimepicker expo-image-picker
+pnpm add expo-document-picker
 ```
 
 | | | |
 |---|---|---|
 | `@react-native-community/datetimepicker` | ≥8 | MIT · só para o `DatePicker` |
 | `expo-image-picker` | ≥16 | MIT · só para o `PhotoInput` |
+| `expo-document-picker` | ≥12 | MIT · só para o `FileInput`, que sai por `@aurea-uds/native/system/file` |
 
 ## Tema × densidade
 
@@ -408,8 +410,13 @@ nega. Cada pergunta ficou com um padrão, e **cada padrão tem uma saída**:
 | e se a pessoa **negar**? | pergunta de novo na próxima vez, enquanto o sistema deixar | `onPermissionDenied` |
 | e se negar **de vez** (`canAskAgain: false`)? | um `Alert` de aviso + botão para as configurações | `offerSettings={false}` |
 | câmera ou galeria? | **câmera** | `source="library"` |
-| como remover? | um `IconButton` no canto de cada miniatura | `removeIcon` |
+| como remover? | um X com fundo, **todo fora** da foto, no canto de cima à direita (R-22) | `removeIcon` |
 | quantas cabem? | **uma** | `max` |
+| como **olhar** a foto? | tocar na miniatura abre a foto grande, no mesmo zoom da `Gallery` (R-22) | — |
+
+**Desde a `0.15.0` (R-22)**, a miniatura é quadrada de 64 (o `Avatar` `lg` do HeroUI Native), do
+tamanho do botão de pôr foto. O leitor de tela ouve *"Foto 2 de 3"* e *"Abre a foto"*; o X,
+*"Remover foto 2"*. Com o campo inativo, a foto ainda abre e o X não remove.
 
 ⚠ **O gatilho some ao atingir o limite**, em vez de ficar aceso e não fazer nada — botão que
 existe e não responde é o defeito, não a proteção.
@@ -420,6 +427,39 @@ errada é um diálogo assustador que o app não precisava mostrar.
 As frases (`cameraDenied`, `openSettings`, `photoRemove`, `datePlaceholder`) saem da tabela de
 **Frases** — ver a seção abaixo.
 
+### `FileInput` — escolher arquivo (R-21, `0.15.0`)
+
+Ele mora num caminho **só dele**, e não no `/system`:
+
+```tsx
+import {FileInput} from "@aurea-uds/native/system/file";
+
+<Field label="Documento">
+  <FileInput value={arquivos} onChange={setArquivos} accept="application/pdf"
+             maxSize={10 * 1024 * 1024} />
+</Field>
+```
+
+⚠ **O caminho próprio é o que faz "opcional" ser verdade.** Se ele morasse no `/system`, todo app
+que usa o `DatePicker` teria de instalar o `expo-document-picker`, ou a montagem falharia. Só quem
+importa `/system/file` precisa dele.
+
+| a pergunta | o que ficou | como mudar |
+|---|---|---|
+| o que volta? | `{uri, name, size, mimeType}` — o endereço local, **não o conteúdo** | — |
+| a pessoa **cancelou**? | nada muda | — |
+| passou do **tamanho**? | recusado, com *"Arquivo maior que o limite: nome"* em vermelho embaixo | `maxSize` |
+| **tipo** errado? | o seletor filtra; a peça confere de novo e recusa | `accept` |
+| o tamanho **não veio**? | aceito: não há o que medir, e o servidor confere | — |
+| **quantos** cabem? | um; no limite o gatilho some, como no `PhotoInput` | `max` |
+| **nome comprido**? | corta no meio (`relat…2026.pdf`): a extensão continua à vista | — |
+
+Para o leitor de tela: o gatilho é um botão com o nome do `Field` e o texto *"Escolher arquivo"*;
+cada arquivo lê *"nome, tamanho"*; o X lê *"Remover nome"*; a recusa é anunciada.
+
+As frases `fileChoose`, `fileRemove`, `fileTooLarge` e `fileWrongType` saem da tabela de **Frases**;
+as três últimas são as mesmas da web.
+
 ## Gráfico
 
 ```tsx
@@ -555,6 +595,14 @@ botão e não faria nada.
 ```tsx
 <Timeline items={[{title: "Criado", description: "pelo app", time: "08/09 14:20"}]} />
 
+// R-18 (0.15.0): ícone em moldura, cor por tom, valor à direita e o que houve entre dois itens.
+<Timeline items={[
+  {title: "Pedido enviado", description: "28/09", icon: "truck", tone: "success",
+   trailing: "R$ 216,00", between: "6 dias depois"},
+  {title: "Pagamento", description: "22/09", icon: "storefront", tone: "primary",
+   trailing: "R$ 460,00"},
+]} />
+
 <DataList items={[{term: "Quilometragem", value: "12,4 km/l"}]} />
 ```
 
@@ -567,6 +615,10 @@ num painel de oito pares perde qual valor era de qual termo.
 que a regra evita: a 320px a coluna do valor resolvia em **0px** e jogava o texto para fora da
 página. `layout="inline"` / `"stacked"` força, contra a largura.
 
+⚠ **Basta um item com `icon` para a coluna inteira ter a largura da moldura** (40): os itens sem
+ícone ficam com o ponto, no centro dela, e a linha passa pelo centro das molduras. O `between` não
+aparece depois do último item, porque não há próximo.
+
 ⚠ **No `Timeline` a contagem e a posição NÃO são anunciadas**, e é escolha. Na web ele é um
 `<ol>`, e a ficha diz que o leitor anuncia "1 de 40" de graça; aqui esse "de graça" não existe e
 teria de ser escrito item a item. Pendurar isso em cada evento de um histórico é ruído a cada

package/dist/actions.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type PressableProps } from "react-native";
-import { type AureaIconRegistry, type IconName } from "./icon.js";
+import { type AureaIconRegistry, type AureaIcon } from "./icon.js";
 /** Quanto peso a caixa tem. */
 export type AureaButtonAppearance = "solid" | "outline" | "ghost";
 /** O que a cor significa. Mesmos nomes da web (ADR-0044). */
@@ -12,8 +12,8 @@ export interface ButtonProps extends Omit<PressableProps, "children" | "style">
     appearance?: AureaButtonAppearance;
     tone?: AureaButtonTone;
     size?: AureaButtonSize;
-    leadingIcon?: IconName;
-    trailingIcon?: IconName;
+    leadingIcon?: AureaIcon;
+    trailingIcon?: AureaIcon;
     /**
      * Um desenho QUALQUER na frente do texto, para quando a marca não pode ser um ícone nosso.
      *
@@ -55,7 +55,7 @@ export interface LinkButtonProps extends Omit<ButtonProps, "appearance" | "fullW
 /** Botão-texto sem recuo nem caixa, alinhado com o texto em volta. O `LinkButton` do HeroUI. */
 export declare function LinkButton(props: LinkButtonProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children" | "leadingIcon" | "trailingIcon" | "fullWidth"> {
-    name: IconName;
+    name: AureaIcon;
     /** **Obrigatório**: um botão que só tem glifo não tem texto para o leitor de tela anunciar. */
     label: string;
 }

package/dist/arquivo.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type AureaIcon } from "./icon.js";
+/** O arquivo escolhido: o que o `expo-document-picker` devolve, sem o conteúdo. */
+export type AureaFile = {
+    /** O endereço local do arquivo — é ele que o app envia. */
+    uri: string;
+    name: string;
+    /** Em bytes. Pode faltar: nem todo provedor de arquivos do Android informa. */
+    size?: number;
+    mimeType?: string;
+};
+export interface FileInputProps {
+    value?: AureaFile[];
+    onChange?: (arquivos: AureaFile[]) => void;
+    /**
+     * Os tipos aceitos, em MIME: `"application/pdf"`, `["image/*", "application/pdf"]`. É o filtro
+     * do seletor do sistema, e a peça confere de novo na volta. Padrão: qualquer arquivo.
+     */
+    accept?: string | string[];
+    /** Quantos arquivos cabem. Padrão: 1. Com o limite atingido, o gatilho some. */
+    max?: number;
+    /** O tamanho máximo, em bytes. O arquivo maior é recusado, com aviso embaixo do campo. */
+    maxSize?: number;
+    disabled?: boolean;
+    /** O glifo do gatilho. Padrão `paperclip`; `false` tira. */
+    addIcon?: AureaIcon | false;
+    /** O glifo de cada arquivo escolhido. Padrão `file-text`, o mesmo da web; `false` tira. */
+    fileIcon?: AureaIcon | false;
+    removeIcon?: AureaIcon;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** O tamanho para ler: a mesma conta do `formatSize` da web (`file-input.tsx`). */
+export declare function formatarTamanho(bytes: number): string;
+/** O arquivo bate com o `accept`? Sem `accept`, ou sem tipo informado, a resposta é sim. */
+export declare function aceitaTipo(mimeType: string | undefined, accept: string | string[] | undefined): boolean;
+/**
+ * Escolher arquivo do aparelho.
+ *
+ * | a pergunta | o que ficou |
+ * |---|---|
+ * | a pessoa **cancelou** o seletor? | nada muda: nem a lista, nem o aviso |
+ * | o arquivo passa do **`maxSize`**? | é recusado, e o aviso aparece embaixo, em vermelho |
+ * | o tipo não bate com o **`accept`**? | idem — o seletor do sistema filtra, a peça confere |
+ * | o tamanho **não veio**? | aceito: não há o que medir, e o servidor confere |
+ * | **quantos** cabem? | `max`, padrão 1; no limite o gatilho some, como no `PhotoInput` |
+ * | **nome comprido**? | corta no MEIO (`relat…2026.pdf`), para a extensão continuar à vista |
+ *
+ * Para o leitor de tela: o gatilho é um botão com o nome do `Field` e o texto dele; cada
+ * arquivo lê *"nome, tamanho"*; o X lê *"Remover nome"*; o aviso de recusa é anunciado.
+ */
+export declare function FileInput({ value, onChange, accept, max, maxSize, disabled, addIcon, fileIcon, removeIcon, style, testID, }: FileInputProps): React.JSX.Element;

package/dist/arquivo.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Aurea nativo — o `FileInput`: escolher um arquivo do aparelho. R-21, 02/10/2026.
+//
+// Pedido do app: mandar um documento (PDF) ao servidor dele. A trava de importação do app proíbe
+// o `expo-document-picker` nas telas, então a peça tem de ser da Aurea, no molde do `PhotoInput`.
+// Proposta aprovada pelo Victor em 02/10/2026 (*"3 sim"*).
+//
+// ── AS REFERÊNCIAS ───────────────────────────────────────────────────────────────────────────
+//   HeroUI   não tem: nem o `heroui-native` 1.0.10, nem o `@heroui/styles` 3.2.6 (medido nos pacotes).
+//   ReUI     tem (`reui.io/docs/components/base/file-upload`): `accept`, `maxSize`, `maxFiles`,
+//            `multiple`, `onFilesChange`. Daqui vêm `accept` e `maxSize`, que são também os nomes
+//            do `FileInput` da web. O limite é `max`, e não `maxFiles`: é o nome do `PhotoInput`,
+//            o irmão que mora ao lado.
+//   web      o `FileInput` do `@aurea-uds/react`: as frases (`fileTooLarge`, `fileWrongType`,
+//            `fileRemove`) e a conta do tamanho (`formatSize`) são as de lá.
+//
+// ── A DEPENDÊNCIA ────────────────────────────────────────────────────────────────────────────
+//   expo-document-picker   MIT · ~57.0.1 fixado pelo Expo SDK 57 · peer OPCIONAL, `>=12`
+// O formato de `getDocumentAsync` que este arquivo usa (`canceled`, `assets`, `multiple`, `type`
+// como texto ou lista) é o mesmo da 12.0.1 à 57.0.3 — medido nos `types.d.ts` das duas.
+//
+// ── ⚠ UM CAMINHO SÓ DELE: `@aurea-uds/native/system/file` ─────────────────────────────────────
+// Não no `/system` junto do `DatePicker` e do `PhotoInput`, e é a mesma razão da ADR-0038: o
+// Metro resolve todo `import` do arquivo que o app importa. Se o `FileInput` morasse no
+// `sistema.tsx`, **todo app que usa o `DatePicker` teria de instalar o `expo-document-picker`**,
+// ou a montagem falharia — o README do pacote já descreve esse defeito. Caminho próprio, e só
+// quem escolhe arquivo instala.
+//
+// ── O QUE A PEÇA NÃO FAZ ─────────────────────────────────────────────────────────────────────
+// Não lê o arquivo e não envia nada: devolve o endereço local (`uri`), o nome, o tamanho e o
+// tipo. Quem envia é o app, e quem confere o conteúdo é o servidor dele.
+import * as React from "react";
+import { Pressable, View } from "react-native";
+import * as DocumentPicker from "expo-document-picker";
+import { IconButton } from "./actions.js";
+import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { Icon } from "./icon.js";
+import { alturaDoTamanho, respiroDoTamanho, useCampo } from "./inputs.js";
+import { Text } from "./text.js";
+import { useAureaStrings, useAureaTokens } from "./theme.js";
+const folha = criarFolha((t) => ({
+    pilha: { gap: t.size.space2 },
+    // O gatilho e a linha do arquivo têm a pele do campo: mesma borda, mesmo fundo, cápsula.
+    caixa: {
+        flexDirection: "row", alignItems: "center", gap: t.size.space2,
+        width: "100%", minWidth: 0, borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
+        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+    },
+    invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
+    desabilitado: { opacity: t.size.opacityDisabled },
+    nomeETamanho: { flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: t.size.space2 },
+    nome: { flexShrink: 1 },
+}));
+/** O tamanho para ler: a mesma conta do `formatSize` da web (`file-input.tsx`). */
+export function formatarTamanho(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const unidades = ["KB", "MB", "GB"];
+    let n = bytes / 1024, i = 0;
+    while (n >= 1024 && i < unidades.length - 1) {
+        n /= 1024;
+        i++;
+    }
+    return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${unidades[i]}`;
+}
+/** O arquivo bate com o `accept`? Sem `accept`, ou sem tipo informado, a resposta é sim. */
+export function aceitaTipo(mimeType, accept) {
+    if (accept == null || !mimeType)
+        return true;
+    const tipo = mimeType.toLowerCase();
+    return (Array.isArray(accept) ? accept : [accept]).some((padrao) => {
+        const p = padrao.trim().toLowerCase();
+        if (p === "*/*" || p === tipo)
+            return true;
+        return p.endsWith("/*") && tipo.startsWith(p.slice(0, -1));
+    });
+}
+/**
+ * Escolher arquivo do aparelho.
+ *
+ * | a pergunta | o que ficou |
+ * |---|---|
+ * | a pessoa **cancelou** o seletor? | nada muda: nem a lista, nem o aviso |
+ * | o arquivo passa do **`maxSize`**? | é recusado, e o aviso aparece embaixo, em vermelho |
+ * | o tipo não bate com o **`accept`**? | idem — o seletor do sistema filtra, a peça confere |
+ * | o tamanho **não veio**? | aceito: não há o que medir, e o servidor confere |
+ * | **quantos** cabem? | `max`, padrão 1; no limite o gatilho some, como no `PhotoInput` |
+ * | **nome comprido**? | corta no MEIO (`relat…2026.pdf`), para a extensão continuar à vista |
+ *
+ * Para o leitor de tela: o gatilho é um botão com o nome do `Field` e o texto dele; cada
+ * arquivo lê *"nome, tamanho"*; o X lê *"Remover nome"*; o aviso de recusa é anunciado.
+ */
+export function FileInput({ value = [], onChange, accept, max = 1, maxSize, disabled, addIcon = "paperclip", fileIcon = "file-text", removeIcon = "x", style, testID, }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const strings = useAureaStrings();
+    const campo = useCampo();
+    const tam = campo?.size ?? "md";
+    const inativo = disabled ?? campo?.disabled;
+    const [recusados, setRecusados] = React.useState([]);
+    const cheio = value.length >= max;
+    const medida = { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) };
+    const escolher = React.useCallback(async () => {
+        const r = await DocumentPicker.getDocumentAsync({
+            ...(accept != null ? { type: accept } : {}),
+            multiple: max - value.length > 1,
+        });
+        // Cancelar não muda nada — nem apaga o aviso de uma recusa anterior.
+        if (r.canceled || !r.assets?.length)
+            return;
+        const aceitos = [];
+        const fora = [];
+        for (const a of r.assets) {
+            if (!aceitaTipo(a.mimeType, accept)) {
+                fora.push({ nome: a.name, motivo: "tipo" });
+                continue;
+            }
+            if (maxSize != null && a.size != null && a.size > maxSize) {
+                fora.push({ nome: a.name, motivo: "tamanho" });
+                continue;
+            }
+            aceitos.push({ uri: a.uri, name: a.name, size: a.size, mimeType: a.mimeType });
+        }
+        setRecusados(fora);
+        const cabem = aceitos.slice(0, max - value.length);
+        if (cabem.length)
+            onChange?.([...value, ...cabem]);
+    }, [accept, max, maxSize, value, onChange]);
+    return (_jsxs(View, { testID: testID, style: [s.pilha, style], children: [value.map((arquivo, n) => {
+                const tamanho = arquivo.size != null ? formatarTamanho(arquivo.size) : null;
+                return (_jsxs(View, { style: [s.caixa, medida, { paddingRight: 0 }], children: [_jsxs(View, { style: s.nomeETamanho, accessible: true, accessibilityLabel: tamanho ? `${arquivo.name}, ${tamanho}` : arquivo.name, children: [fileIcon && _jsx(Icon, { name: fileIcon, size: "sm", color: t.color.subtleForeground }), _jsx(Text, { size: "sm", numberOfLines: 1, ellipsizeMode: "middle", style: s.nome, children: arquivo.name }), tamanho && _jsx(Text, { size: "xs", tone: "muted", children: tamanho })] }), _jsx(IconButton, { appearance: "ghost", size: "sm", name: removeIcon, label: `${strings.fileRemove} ${arquivo.name}`, disabled: inativo, onPress: () => onChange?.(value.filter((_, i) => i !== n)) })] }, `${arquivo.uri}-${n}`));
+            }), !cheio && (_jsxs(Pressable, { onPress: inativo ? undefined : escolher, disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label ? `${campo.label}, ${strings.fileChoose}` : strings.fileChoose, accessibilityHint: campo?.hint, ...estadoAcessivel({ disabled: !!inativo }), style: [s.caixa, medida, (campo?.invalido || recusados.length > 0) && s.invalido,
+                    inativo && s.desabilitado], children: [addIcon && _jsx(Icon, { name: addIcon, size: "sm", color: t.color.mutedForeground }), _jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: "muted", numberOfLines: 1, children: strings.fileChoose })] })), recusados.length > 0 && (_jsx(View, { accessibilityLiveRegion: "polite", children: recusados.map((r, n) => (_jsx(Text, { size: "xs", tone: "danger", children: `${r.motivo === "tamanho" ? strings.fileTooLarge : strings.fileWrongType}: ${r.nome}` }, n))) }))] }));
+}

package/dist/busca.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type TextInputProps, 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";
 /** Uma linha do catálogo. **Mesma forma da web** (`ComboboxOption`), mais o `disabled` que o `Select` daqui já tinha. */
 export interface AureaComboboxItem {
@@ -62,9 +62,9 @@ export interface ComboboxProps {
     disabled?: boolean;
     size?: AureaFieldSize;
     /** O glifo da seta. Registre-o, ou passe `false`. */
-    chevron?: IconName | false;
+    chevron?: AureaIcon | false;
     /** O glifo da lupa no campo da folha. Registre-o, ou passe `false`. */
-    searchIcon?: IconName | false;
+    searchIcon?: AureaIcon | false;
     /**
      * O teclado do campo de busca da folha — E6, 25/09/2026. Para buscar um ANO ou um código, passe
      * `"number-pad"`: sem isto abre o teclado de letras. É o `keyboardType` do `TextInput`, com o
@@ -115,7 +115,7 @@ export interface SearchFieldProps {
     disabled?: boolean;
     size?: AureaFieldSize;
     /** O glifo da lupa. Padrão `search`; `false` tira. */
-    icon?: IconName | false;
+    icon?: AureaIcon | false;
     /** Mostra o botão de limpar quando há texto. Padrão **true**. */
     clearable?: boolean;
     onSubmit?: () => void;

package/dist/busca.js

@@ -73,7 +73,7 @@ import { criarFolha, estadoAcessivel } from "./estilos.js";
 import { Spinner } from "./feedback.js";
 import { Icon } from "./icon.js";
 import { KeyboardAvoiding, useCampo } from "./inputs.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, ForaDaMarca, usePeleSobreAMarca } from "./theme.js";
@@ -283,7 +283,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                 return;
             }
             Animated.timing(arrasto, {
-                toValue: 0, duration: t.size.durationSlow, useNativeDriver: true,
+                toValue: 0, duration: t.size.durationSlow, useNativeDriver: driverNativo(),
                 easing: Easing.bezier(...t.easing.easeEmphasized),
             }).start();
         },

package/dist/data.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
+import type { AureaBadgeTone } from "./display.js";
+import type { AureaIcon } from "./icon.js";
 type Virtualizavel = {
     /** Vira `FlatList`. ⚠ Então este componente é o rolador — não o ponha dentro de `<Screen scroll>`. */
     virtualized?: boolean;
@@ -9,6 +11,22 @@ export type AureaTimelineItem = {
     description?: React.ReactNode;
     /** Nó, não string: uma data absoluta e uma relativa são igualmente bem-vindas — como na web. */
     time?: React.ReactNode;
+    /**
+     * R-18, 02/10/2026: o glifo numa moldura redonda, no lugar do ponto. Moldura de 40 (o `Avatar`
+     * `sm` do HeroUI Native) e glifo de 20. Basta um item com `icon` para a coluna inteira ter a
+     * largura da moldura — os itens sem ícone ficam com o ponto, no centro dela.
+     */
+    icon?: AureaIcon;
+    /** A cor da moldura, com o vocabulário do `Badge`. Sem `icon`, não faz nada. Padrão: `neutral`. */
+    tone?: AureaBadgeTone;
+    /** O que vai à DIREITA do título — um valor, um selo. */
+    trailing?: React.ReactNode;
+    /**
+     * O que aconteceu ENTRE este item e o próximo, escrito ao lado da linha: *"6 dias depois"*,
+     * *"3 h depois"*. Proposta aprovada na prancha de 02/10/2026: a linha deixa de ser enfeite e
+     * passa a dizer alguma coisa. No último item não aparece, porque não há próximo.
+     */
+    between?: React.ReactNode;
 };
 export interface TimelineProps extends Virtualizavel {
     items: readonly AureaTimelineItem[];

package/dist/data.js

@@ -57,6 +57,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { FlatList, Pressable, View, useWindowDimensions, } from "react-native";
 import { criarFolha } from "./estilos.js";
+import { IconeEmMoldura } from "./moldura.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -79,6 +80,14 @@ const folha = criarFolha((t) => ({
         borderWidth: t.size.space05, borderColor: t.color.surface1,
     },
     colunaDoEvento: { flex: 1, minWidth: 0, gap: t.size.space05 },
+    // R-18: o ponto centrado na coluna da moldura, quando a lista tem molduras.
+    colunaDoPonto: { width: t.size.space10, alignItems: "center", flexGrow: 0, flexShrink: 0 },
+    linhaDoTitulo: {
+        flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between",
+        gap: t.size.space2,
+    },
+    tituloQueEncolhe: { flexShrink: 1 },
+    entre: { flexDirection: "row", alignItems: "center" },
     // ── DataList ──
     pares: { gap: t.size.space2 },
     parEmpilhado: { gap: t.size.space05 },
@@ -123,23 +132,39 @@ const EMPILHA_ABAIXO_DE = 640;
 export function Timeline({ items, virtualized = false, style, testID }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const desenhar = React.useCallback((item) => (_jsxs(View, { style: s.evento, children: [_jsx(View, { style: s.ponto }), _jsxs(View, { style: s.colunaDoEvento, children: [typeof item.title === "string"
-                        ? _jsx(Text, { size: "md", weight: 600, children: item.title }) : item.title, item.description != null
-                        ? (typeof item.description === "string"
-                            ? _jsx(Text, { size: "sm", tone: "muted", children: item.description }) : item.description)
-                        : null, item.time != null
-                        ? (typeof item.time === "string"
-                            ? _jsx(Text, { size: "xs", tone: "muted", children: item.time }) : item.time)
-                        : null] })] })), [s]);
+    // A coluna do marcador tem a largura da moldura quando ALGUM item tem ícone: senão os títulos
+    // ficariam em colunas diferentes conforme o item. O trilho vai ao centro dela.
+    const comMoldura = items.some((i) => i.icon != null);
+    const marcador = comMoldura ? t.size.space10 : t.size.space3;
+    const desenhar = React.useCallback((item, n) => {
+        const titulo = typeof item.title === "string"
+            ? _jsx(Text, { size: "md", weight: 600, style: s.tituloQueEncolhe, children: item.title }) : item.title;
+        const ponto = item.icon != null
+            ? _jsx(IconeEmMoldura, { icon: item.icon, tone: item.tone, moldura: t.size.space10, glifo: t.size.iconMd, sobre: t.color.surface1 })
+            : comMoldura ? _jsx(View, { style: s.colunaDoPonto, children: _jsx(View, { style: s.ponto }) })
+                : _jsx(View, { style: s.ponto });
+        const entre = item.between != null && n < items.length - 1 ? (_jsx(View, { style: [s.entre, { paddingLeft: marcador + t.size.space3 }], children: typeof item.between === "string"
+                ? _jsx(Text, { size: "xs", tone: "muted", children: item.between }) : item.between })) : null;
+        return (_jsxs(_Fragment, { children: [_jsxs(View, { style: s.evento, children: [ponto, _jsxs(View, { style: s.colunaDoEvento, children: [item.trailing != null ? (_jsxs(View, { style: s.linhaDoTitulo, children: [titulo, typeof item.trailing === "string"
+                                            ? _jsx(Text, { size: "md", weight: 600, children: item.trailing }) : item.trailing] })) : titulo, item.description != null
+                                    ? (typeof item.description === "string"
+                                        ? _jsx(Text, { size: "sm", tone: "muted", children: item.description }) : item.description)
+                                    : null, item.time != null
+                                    ? (typeof item.time === "string"
+                                        ? _jsx(Text, { size: "xs", tone: "muted", children: item.time }) : item.time)
+                                    : null] })] }), entre] }));
+    }, [s, t, comMoldura, marcador, items.length]);
     if (virtualized) {
-        return (_jsx(FlatList, { accessibilityRole: "list", data: items, keyExtractor: (_, n) => String(n), renderItem: ({ item }) => desenhar(item), ItemSeparatorComponent: () => _jsx(View, { style: { height: t.size.space5 } }), 
+        return (_jsx(FlatList, { accessibilityRole: "list", data: items, keyExtractor: (_, n) => String(n), 
+            // O `between` mora dentro da célula, então leva o mesmo vão que o separador dá entre elas.
+            renderItem: ({ item, index }) => _jsx(View, { style: s.trilha, children: desenhar(item, index) }), ItemSeparatorComponent: () => _jsx(View, { style: { height: t.size.space5 } }), 
             // ⚠ O trilho NÃO entra no modo virtualizado, e isso é honesto em vez de quebrado: ele é
             // uma linha absoluta do topo ao pé da lista INTEIRA, e no `FlatList` a lista inteira não
             // existe — só a janela. Desenhá-lo daria um trilho que começa e termina no lugar errado
             // conforme se rola. Os pontos continuam, e são eles que marcam os eventos.
             style: style, testID: testID }));
     }
-    return (_jsxs(View, { accessibilityRole: "list", style: [s.trilha, style], testID: testID, children: [items.length > 0 ? _jsx(View, { style: s.trilho }) : null, items.map((item, n) => _jsx(React.Fragment, { children: desenhar(item) }, n))] }));
+    return (_jsxs(View, { accessibilityRole: "list", style: [s.trilha, style], testID: testID, children: [items.length > 0 ? _jsx(View, { style: [s.trilho, comMoldura && { left: marcador / 2 }] }) : null, items.map((item, n) => _jsx(React.Fragment, { children: desenhar(item, n) }, n))] }));
 }
 /**
  * Os pares termo → valor.

package/dist/display.js

@@ -23,7 +23,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // perderia o cartão, que é metade do que ela é.
 import * as React from "react";
 import { Image, View } from "react-native";
-import { criarFolha } from "./estilos.js";
+import { acentoDoTom, criarFolha, fundoDoTom } from "./estilos.js";
 import { Card } from "./layout.js";
 import { gravidadeDoEstado } from "./strings.js";
 import { Text } from "./text.js";
@@ -103,24 +103,15 @@ const LETRA_DO_SELO = (t, size) => size === "lg" ? { fontSize: t.size.textBase,
 export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, count, max = 99, showZero, leading, trailing, fit = "auto", anchor, badgeContent, invisible, children, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const acento = tone === "primary" ? t.color.primaryEmphasis
-        : tone === "info" ? t.color.info400 ?? t.color.info
-            : tone === "success" ? t.color.success400 ?? t.color.success
-                : tone === "warning" ? t.color.warning400 ?? t.color.warning
-                    : tone === "danger" ? t.color.danger400 ?? t.color.destructive
-                        : t.color.secondaryForeground;
-    const fundoDoTom = tone === "info" ? t.color.infoBg
-        : tone === "success" ? t.color.successBg
-            : tone === "warning" ? t.color.warningBg
-                : tone === "danger" ? t.color.dangerBg
-                    : undefined;
+    const acento = acentoDoTom(t, tone);
+    const fundo = fundoDoTom(t, tone);
     const pele = emphasis === "solid"
         ? { backgroundColor: acento, borderColor: "transparent" }
         : emphasis === "outline"
             ? { backgroundColor: "transparent", borderColor: acento }
             : tone === "neutral"
                 ? {}
-                : { backgroundColor: fundoDoTom, borderColor: acento };
+                : { backgroundColor: fundo, borderColor: acento };
     const corDoTexto = emphasis === "solid" ? t.color.background
         : tone === "neutral" ? t.color.secondaryForeground : acento;
     const numero = count != null ? formatarContagem(count, max) : undefined;

package/dist/estilos.d.ts

@@ -33,6 +33,18 @@ export declare function criarFolha<T extends NamedStyles<T> | NamedStyles<Record
  * um ícone) não tinha como escrevê-lo sem número à mão. O `check 39` cobra o teste dele.
  */
 export declare const comOpacidade: (cor: string, pct: number) => string;
+/** O tom de cor com significado — o vocabulário do `Badge` (`AureaBadgeTone`). */
+export type TomDeCor = "neutral" | "primary" | "info" | "success" | "warning" | "danger";
+/**
+ * A cor FORTE de um tom: o texto do selo, o ícone da moldura.
+ *
+ * ⚠ **Morava dentro do `Badge` e mudou de casa em 02/10/2026**, quando a moldura do ícone (R-15 e
+ * R-18) passou a precisar da mesma cor por tom. Duas cópias do mapa é o defeito que o `CLAUDE.md`
+ * nomeia — e o dia em que um tom novo entra numa só.
+ */
+export declare const acentoDoTom: (t: AureaTokens, tom: TomDeCor) => string;
+/** O fundo SUAVE de um tom (`--<tom>-bg`). `primary` e `neutral` não têm token: `undefined`. */
+export declare const fundoDoTom: (t: AureaTokens, tom: TomDeCor) => string | undefined;
 /**
  * 🔴 O FIO AMARELO DO ESCOLHIDO — o sinal único da casa para "este é o escolhido".
  *

package/dist/estilos.js

@@ -49,6 +49,25 @@ export function criarFolha(descrever) {
 export const comOpacidade = (cor, pct) => /^#[0-9a-fA-F]{6}$/.test(cor)
     ? cor + Math.round(Math.max(0, Math.min(1, pct)) * 255).toString(16).padStart(2, "0")
     : cor;
+/**
+ * A cor FORTE de um tom: o texto do selo, o ícone da moldura.
+ *
+ * ⚠ **Morava dentro do `Badge` e mudou de casa em 02/10/2026**, quando a moldura do ícone (R-15 e
+ * R-18) passou a precisar da mesma cor por tom. Duas cópias do mapa é o defeito que o `CLAUDE.md`
+ * nomeia — e o dia em que um tom novo entra numa só.
+ */
+export const acentoDoTom = (t, tom) => tom === "primary" ? t.color.primaryEmphasis
+    : tom === "info" ? t.color.info400 ?? t.color.info
+        : tom === "success" ? t.color.success400 ?? t.color.success
+            : tom === "warning" ? t.color.warning400 ?? t.color.warning
+                : tom === "danger" ? t.color.danger400 ?? t.color.destructive
+                    : t.color.secondaryForeground;
+/** O fundo SUAVE de um tom (`--<tom>-bg`). `primary` e `neutral` não têm token: `undefined`. */
+export const fundoDoTom = (t, tom) => tom === "info" ? t.color.infoBg
+    : tom === "success" ? t.color.successBg
+        : tom === "warning" ? t.color.warningBg
+            : tom === "danger" ? t.color.dangerBg
+                : undefined;
 /**
  * 🔴 O FIO AMARELO DO ESCOLHIDO — o sinal único da casa para "este é o escolhido".
  *

package/dist/feedback.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { type IconName, type AureaIcon } from "./icon.js";
 import { type AureaUniversalState } from "./strings.js";
 export type AureaSpinnerSize = "sm" | "md" | "lg";
 export interface SpinnerProps {
@@ -65,7 +65,7 @@ export interface AlertProps extends ViewProps {
     /** Um dos sete estados universais. Ele **escolhe a variante** e escreve o texto padrão. */
     state?: AureaUniversalState;
     title?: React.ReactNode;
-    icon?: IconName;
+    icon?: AureaIcon;
     onDismiss?: () => void;
     children?: React.ReactNode;
 }
@@ -86,7 +86,12 @@ export interface AlertProps extends ViewProps {
  */
 export declare function Alert({ variant, state, title, icon, onDismiss, children, style, accessibilityLabel, accessibilityHint, ...rest }: AlertProps): React.JSX.Element;
 export interface EmptyStateProps {
-    icon?: IconName;
+    /**
+     * O glifo, dentro de uma moldura redonda — R-15, 02/10/2026, escolhida pelo Victor na prancha
+     * (*"1 c"*). Moldura de 64 (o `Avatar` `lg` do HeroUI) e glifo de 32, o de antes. O desenho
+     * do próprio app entra aqui também (`icon={Logo}`, R-11).
+     */
+    icon?: AureaIcon;
     title: React.ReactNode;
     description?: React.ReactNode;
     action?: React.ReactNode;
@@ -110,7 +115,7 @@ export interface DataStateProps extends Omit<ViewProps, "children"> {
     /** Substitui o esqueleto padrão de `loading`. */
     skeleton?: React.ReactNode;
     emptyTitle?: React.ReactNode;
-    emptyIcon?: IconName;
+    emptyIcon?: AureaIcon;
     action?: React.ReactNode;
     /** Função para o conteúdo caro não ser construído enquanto o estado o esconde. */
     children: React.ReactNode | (() => React.ReactNode);

package/dist/feedback.js

@@ -24,7 +24,8 @@ import { Animated, Easing, View } from "react-native";
 import { IconButton } from "./actions.js";
 import { criarFolha, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
-import { useReduceMotion } from "./movimento.js";
+import { IconeEmMoldura } from "./moldura.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
 import { gravidadeDoEstado } from "./strings.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
@@ -96,7 +97,7 @@ export function Spinner({ size = "sm", label, decorative, style, testID }) {
         if (reduzir !== false)
             return;
         const laco = Animated.loop(Animated.timing(giro, {
-            toValue: 1, duration: 700, easing: Easing.linear, useNativeDriver: true,
+            toValue: 1, duration: 700, easing: Easing.linear, useNativeDriver: driverNativo(),
         }));
         laco.start();
         // Sem o `stop` o laço sobrevive à desmontagem e continua acordando o JS — o vazamento
@@ -137,8 +138,8 @@ export function Skeleton({ width, height, radius, style, testID }) {
         // 1,35 s no total, com o vale em .55 na METADE — é o `@keyframes skeleton-pulse` do
         // `aurea.css:1112` lido literalmente: 675 ms para descer e 675 para voltar.
         const laco = Animated.loop(Animated.sequence([
-            Animated.timing(opacidade, { toValue: 0.55, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
-            Animated.timing(opacidade, { toValue: 1, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+            Animated.timing(opacidade, { toValue: 0.55, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: driverNativo() }),
+            Animated.timing(opacidade, { toValue: 1, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: driverNativo() }),
         ]));
         laco.start();
         return () => laco.stop();
@@ -220,7 +221,7 @@ export function EmptyState({ icon = "file", title, description, action, state, s
     const s = folha(t);
     const strings = useAureaStrings();
     const desc = description ?? (state ? strings.universalState[state] : null);
-    return (_jsxs(View, { testID: testID, style: [s.vazio, style], children: [_jsx(Icon, { name: icon, size: "xl", color: t.color.subtleForeground }), typeof title === "string"
+    return (_jsxs(View, { testID: testID, style: [s.vazio, style], children: [_jsx(IconeEmMoldura, { icon: icon, moldura: t.size.space16, glifo: t.size.iconXl }), typeof title === "string"
                 ? _jsx(Text, { size: "base", weight: 600, leading: "tight", align: "center", children: title })
                 : title, desc != null && (typeof desc === "string"
                 ? _jsx(Text, { size: "sm", tone: "muted", align: "center", children: desc })