@aurea-uds/native 0.8.12 → 0.8.14

package/dist/actions.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //                 do Lote 3. Aparência sem consumidor é a ADR-0034 ("ter a variante não é usar").
 import * as React from "react";
 import { Pressable, View } from "react-native";
-import { criarFolha } from "./estilos.js";
+import { criarFolha, REACAO_AO_TOQUE } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Text } from "./text.js";
 import { useAureaTokens, useSobreAMarca } from "./theme.js";
@@ -114,10 +114,9 @@ const folha = criarFolha((t) => ({
         borderRadius: t.size.radiusControl, // 999 — pill, identidade INTOCÁVEL
         borderWidth: t.size.borderWidth,
     },
-    // `.btn:active { transform:scale(.97); opacity:.9 }` no core — a mesma reação, medida lá.
-    pressionado: { opacity: 0.9, transform: [{ scale: 0.97 }] },
-    // `.btn:disabled { opacity:.45 }`
-    inerte: { opacity: 0.45 },
+    // `.btn:active` e `.btn:disabled` do core — os números moram no `estilos.ts` desde que o
+    // `Card` com `onPress` passou a reagir igual (R-04, 24/09/2026).
+    ...REACAO_AO_TOQUE,
 }));
 /**
  * Botão. `Pressable` do RN, alvo ≥ `--target-min`, pele de token.

package/dist/busca.js

@@ -108,7 +108,7 @@ const folha = criarFolha((t) => ({
         flexDirection: "row", alignItems: "center",
     },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
-    desabilitado: { opacity: 0.5 },
+    desabilitado: { opacity: t.size.opacityDisabled },
     // As ações do gatilho — limpar e a seta. O `.combobox-actions` da web (`aurea.css:1673`) é
     // absoluto sobre o campo; aqui é um irmão na linha, porque não há campo por baixo.
     // `space05` mede 2 — o mesmo valor, agora com nome. O `.combobox-actions` da web

package/dist/display.d.ts

@@ -5,6 +5,8 @@ export type AureaBadgeTone = "neutral" | "primary" | "info" | "success" | "warni
 export type AureaBadgeEmphasis = "soft" | "outline" | "solid";
 export type AureaBadgeSize = "xs" | "sm" | "md" | "lg";
 export type AureaBadgeAnchor = "top-end" | "top-start" | "bottom-end" | "bottom-start";
+/** `auto` segue o recipiente (numa coluna, estica); `content` fica do tamanho do texto. */
+export type AureaBadgeFit = "auto" | "content";
 /** `count > max ? `${max}+` : String(count)` — a mesma linha do `markup.tsx:140`. */
 export declare const formatarContagem: (count: number, max?: number) => string;
 export interface BadgeProps extends ViewProps {
@@ -35,6 +37,19 @@ export interface BadgeProps extends ViewProps {
     max?: number;
     /** Por padrão `count === 0` some — caixa zerada não merece um "0" no canto. */
     showZero?: boolean;
+    /**
+     * `content` põe o selo do tamanho do texto mesmo numa coluna — R-01, 24/09/2026.
+     *
+     * ⚠ **Não é o padrão, e a razão foi MEDIDA:** numa coluna o selo estica, e na web também —
+     * `.stack` não declara `align-items`, então o `.badge` vira item de flex e estica (300 px numa
+     * coluna de 300, contra 55 px solto num bloco). Os dois alvos já concordavam; o que faltava era
+     * como pedir o contrário.
+     *
+     * ⚠ **Serve para COLUNA.** Aqui ele vira `alignSelf: "flex-start"`, e numa fila o eixo cruzado
+     * é o vertical: o selo subiria para o topo em vez de ficar no meio. Numa fila o selo já tem o
+     * tamanho do texto, então não passe `fit` ali.
+     */
+    fit?: AureaBadgeFit;
     /** Ancora o selo no canto de `children`, em vez de desenhá-lo em linha. */
     anchor?: AureaBadgeAnchor;
     /** O que o selo mostra quando `anchor` está em uso (aí `children` é o que ele decora). */
@@ -58,7 +73,7 @@ export interface BadgeProps extends ViewProps {
  * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
  * quando houver tela que peça.
  */
-export declare function Badge({ tone, emphasis, size, dot, count, max, showZero, leading, trailing, anchor, badgeContent, invisible, children, style, ...rest }: BadgeProps): React.JSX.Element;
+export declare function Badge({ tone, emphasis, size, dot, count, max, showZero, leading, trailing, fit, anchor, badgeContent, invisible, children, style, ...rest }: BadgeProps): React.JSX.Element;
 export type AureaStatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "success" | "warning" | "danger" | "info";
 export interface StatusProps extends ViewProps {
     variant?: AureaStatusVariant;

package/dist/display.js

@@ -43,6 +43,8 @@ const folha = criarFolha((t) => ({
     selo_md: {},
     selo_lg: { minHeight: t.size.space7, paddingVertical: 0, paddingHorizontal: t.size.space3 },
     ponto: { width: t.size.space2, height: t.size.space2, borderRadius: t.size.radiusFull },
+    // `fit="content"` (R-01): o mesmo `alignSelf` que a âncora abaixo já usa para não esticar.
+    justo: { alignSelf: "flex-start" },
     // A âncora é `position:relative` na web; aqui o filho absoluto já se posiciona por ela.
     ancora: { position: "relative", alignSelf: "flex-start" },
     sobreposto: { position: "absolute", zIndex: 1, minHeight: t.size.space4, paddingHorizontal: t.size.space1 },
@@ -83,7 +85,7 @@ export const formatarContagem = (count, max = 99) => count > max ? `${max}+` : S
  * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
  * quando houver tela que peça.
  */
-export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, count, max = 99, showZero, leading, trailing, anchor, badgeContent, invisible, children, style, ...rest }) {
+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
@@ -112,6 +114,7 @@ export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, c
     const soPonto = !!dot && miolo == null;
     const selo = (_jsxs(View, { style: [
             s.selo, s[`selo_${size}`], pele,
+            fit === "content" && !anchor && s.justo,
             anchor && s.sobreposto, anchor && s.anel,
             anchor && posicaoDaAncora(anchor),
             soPonto && { width: t.size.space2, minWidth: t.size.space2, height: t.size.space2,

package/dist/estilos.d.ts

@@ -26,8 +26,36 @@ export declare function criarFolha<T extends NamedStyles<T> | NamedStyles<Record
  * ⚠ **Ele morava dentro do `navigation.tsx` e mudou de casa em 17/09/2026**, quando o
  * `SegmentedControl` passou a precisar do mesmo cálculo para o fio do escolhido. Copiar a função
  * para o segundo arquivo é exatamente o defeito que o `CLAUDE.md` nomeia — *correção local é
- * proibida sem responder "quem mais tem esse problema?"*. **Não é exportado pela porta da frente
- * do pacote**: é ferramenta de dentro, e o `check 39` cobraria teste de tudo que sai por lá.
+ * proibida sem responder "quem mais tem esse problema?"*.
+ *
+ * ✅ **Sai pela porta da frente do pacote desde 24/09/2026 (R-07).** Até ali era ferramenta de
+ * dentro, e o app que precisava de um fundo translúcido sobre a cor do tema (o círculo atrás de
+ * 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;
+/**
+ * A reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com
+ * `onPress`. Os números são os do core: `.btn:active { transform:scale(.97); opacity:.9 }` e
+ * `.btn:disabled { opacity:.45 }`.
+ *
+ * ⚠ **Mora aqui desde 24/09/2026 (R-04)**, quando o `Card` passou a responder ao toque e a
+ * decisão foi *"a mesma reação do `Button`"*. Copiar os três números para o `layout.tsx` faria
+ * duas peças dizerem a mesma coisa em dois lugares — e a primeira que mudasse deixaria a outra
+ * para trás. Mesma razão do `comOpacidade` acima, e pelo mesmo motivo **não sai pela porta da
+ * frente do pacote**.
+ *
+ * ⚠ **Não é animação:** não há transição, o alvo SALTA para 0,97 enquanto o dedo está em cima.
+ * Por isso ele não consulta `useReduceMotion` — não há movimento para parar.
+ */
+export declare const REACAO_AO_TOQUE: {
+    readonly pressionado: {
+        readonly opacity: 0.9;
+        readonly transform: readonly [{
+            readonly scale: 0.97;
+        }];
+    };
+    readonly inerte: {
+        readonly opacity: 0.45;
+    };
+};
 export {};

package/dist/estilos.js

@@ -40,9 +40,30 @@ export function criarFolha(descrever) {
  * ⚠ **Ele morava dentro do `navigation.tsx` e mudou de casa em 17/09/2026**, quando o
  * `SegmentedControl` passou a precisar do mesmo cálculo para o fio do escolhido. Copiar a função
  * para o segundo arquivo é exatamente o defeito que o `CLAUDE.md` nomeia — *correção local é
- * proibida sem responder "quem mais tem esse problema?"*. **Não é exportado pela porta da frente
- * do pacote**: é ferramenta de dentro, e o `check 39` cobraria teste de tudo que sai por lá.
+ * proibida sem responder "quem mais tem esse problema?"*.
+ *
+ * ✅ **Sai pela porta da frente do pacote desde 24/09/2026 (R-07).** Até ali era ferramenta de
+ * dentro, e o app que precisava de um fundo translúcido sobre a cor do tema (o círculo atrás de
+ * um ícone) não tinha como escrevê-lo sem número à mão. O `check 39` cobra o teste dele.
  */
 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 reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com
+ * `onPress`. Os números são os do core: `.btn:active { transform:scale(.97); opacity:.9 }` e
+ * `.btn:disabled { opacity:.45 }`.
+ *
+ * ⚠ **Mora aqui desde 24/09/2026 (R-04)**, quando o `Card` passou a responder ao toque e a
+ * decisão foi *"a mesma reação do `Button`"*. Copiar os três números para o `layout.tsx` faria
+ * duas peças dizerem a mesma coisa em dois lugares — e a primeira que mudasse deixaria a outra
+ * para trás. Mesma razão do `comOpacidade` acima, e pelo mesmo motivo **não sai pela porta da
+ * frente do pacote**.
+ *
+ * ⚠ **Não é animação:** não há transição, o alvo SALTA para 0,97 enquanto o dedo está em cima.
+ * Por isso ele não consulta `useReduceMotion` — não há movimento para parar.
+ */
+export const REACAO_AO_TOQUE = {
+    pressionado: { opacity: 0.9, transform: [{ scale: 0.97 }] },
+    inerte: { opacity: 0.45 },
+};

package/dist/icon.d.ts

@@ -13,6 +13,57 @@ export type AureaIconRegistry = Readonly<Record<IconName, AureaIconComponent>>;
  * render invalidaria o `useMemo` de todo componente que o recebe.
  */
 export declare const criarRegistroDeIcones: <T extends AureaIconRegistry>(r: T) => T;
+/** Uma forma do glifo. Sem `fill`, ela pinta com a cor que o `Icon` passar (a do tema, por padrão). */
+interface Pintura {
+    /** Cor fixa desta forma, ou `"none"` para não pintar. Sem isto, a forma segue o `color`. */
+    fill?: string;
+}
+export interface AureaGlifoCaminho extends Pintura {
+    d: string;
+    fillRule?: "nonzero" | "evenodd";
+}
+export interface AureaGlifoCirculo extends Pintura {
+    cx: number;
+    cy: number;
+    r: number;
+}
+export interface AureaGlifoRetangulo extends Pintura {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number;
+}
+export interface AureaGlifoDesenho {
+    /** Padrão `"0 0 32 32"`, a caixa dos glifos do Carbon. */
+    viewBox?: string;
+    rects?: readonly AureaGlifoRetangulo[];
+    circles?: readonly AureaGlifoCirculo[];
+    /** Um caminho SVG por item — a string solta vale por `{d}`. */
+    paths?: readonly (string | AureaGlifoCaminho)[];
+}
+/**
+ * Um glifo PRÓPRIO do app — um logotipo, por exemplo — desenhado pela Aurea a partir dos dados
+ * do desenho. R-05, 24/09/2026.
+ *
+ * ```tsx
+ * const Marca = criarGlifo({viewBox: "0 0 64 64", circles: [{cx: 32, cy: 32, r: 30}], paths: ["M…"]});
+ * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
+ * <Icon name="marca" size="xl" />
+ * ```
+ *
+ * **Por que existe:** o registro já aceitava qualquer componente, mas para ESCREVER esse
+ * componente o app precisava importar o `react-native-svg` — o motor que a Aurea usa por dentro,
+ * e que a regra "só Aurea" do app barra. Agora o app passa só números e caminhos.
+ *
+ * ⚠ **A ordem de pintura é fixa:** retângulos, depois círculos, depois caminhos — o de baixo
+ * primeiro. Um desenho que precise de outra ordem passa tudo como `paths`, que respeitam a ordem
+ * da lista.
+ *
+ * ⚠ **Não traz peso novo:** o `react-native-svg` já é dependência obrigatória, e o `Chart` o usa
+ * pela mesma porta.
+ */
+export declare function criarGlifo(desenho: AureaGlifoDesenho): AureaIconComponent;
 /** Põe o registro em contexto. O `AureaProvider` já faz isto quando recebe `icons`. */
 export declare function IconRegistryProvider({ registry, children }: {
     registry: AureaIconRegistry;
@@ -45,3 +96,4 @@ export interface IconProps {
  * um aviso nomeando o ícone e o caminho do import que resolve.
  */
 export declare function Icon({ name, size, color, icons, label }: IconProps): React.JSX.Element | null;
+export {};

package/dist/icon.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Aurea nativo — `Icon`, e a razão de ele existir apesar de `icons/<nome>` já desenhar.
 //
 // A **cláusula 4 da ADR-0038** manda: *"`<Icon name>` continua existindo, para a paridade de API
@@ -20,6 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // um componente — o que empurra a decisão para a tela, uma prop de cada vez.
 import * as React from "react";
 import { View } from "react-native";
+import Svg, { Circle, Path, Rect } from "react-native-svg";
 import { useAureaTokens } from "./theme.js";
 /**
  * Declara o registro. É uma função de identidade tipada, e ela existe por um motivo prático:
@@ -27,6 +28,35 @@ import { useAureaTokens } from "./theme.js";
  * render invalidaria o `useMemo` de todo componente que o recebe.
  */
 export const criarRegistroDeIcones = (r) => r;
+/**
+ * Um glifo PRÓPRIO do app — um logotipo, por exemplo — desenhado pela Aurea a partir dos dados
+ * do desenho. R-05, 24/09/2026.
+ *
+ * ```tsx
+ * const Marca = criarGlifo({viewBox: "0 0 64 64", circles: [{cx: 32, cy: 32, r: 30}], paths: ["M…"]});
+ * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
+ * <Icon name="marca" size="xl" />
+ * ```
+ *
+ * **Por que existe:** o registro já aceitava qualquer componente, mas para ESCREVER esse
+ * componente o app precisava importar o `react-native-svg` — o motor que a Aurea usa por dentro,
+ * e que a regra "só Aurea" do app barra. Agora o app passa só números e caminhos.
+ *
+ * ⚠ **A ordem de pintura é fixa:** retângulos, depois círculos, depois caminhos — o de baixo
+ * primeiro. Um desenho que precise de outra ordem passa tudo como `paths`, que respeitam a ordem
+ * da lista.
+ *
+ * ⚠ **Não traz peso novo:** o `react-native-svg` já é dependência obrigatória, e o `Chart` o usa
+ * pela mesma porta.
+ */
+export function criarGlifo(desenho) {
+    const { viewBox = "0 0 32 32", rects = [], circles = [], paths = [] } = desenho;
+    const Glifo = ({ size = 32, color = "#000000" }) => (_jsxs(Svg, { width: size, height: size, viewBox: viewBox, children: [rects.map((r, i) => _jsx(Rect, { ...r, fill: r.fill ?? color }, `r${i}`)), circles.map((c, i) => _jsx(Circle, { ...c, fill: c.fill ?? color }, `c${i}`)), paths.map((p, i) => {
+                const c = typeof p === "string" ? { d: p } : p;
+                return _jsx(Path, { ...c, fill: c.fill ?? color }, `p${i}`);
+            })] }));
+    return Glifo;
+}
 const Contexto = React.createContext(null);
 /** Põe o registro em contexto. O `AureaProvider` já faz isto quando recebe `icons`. */
 export function IconRegistryProvider({ registry, children }) {

package/dist/index.d.ts

@@ -3,27 +3,27 @@ export type { AureaProviderProps, AureaThemeControl } from "./theme.js";
 export { BottomNavProvider, useBottomNavSpace } from "./barranav.js";
 export { resolverTokens } from "./tokens.js";
 export type { AureaDensity, AureaFontFamilies, AureaFontInput, AureaFontScale, AureaShadow, AureaThemeName, AureaTokens, } from "./tokens.js";
-export { criarFolha } from "./estilos.js";
+export { criarFolha, comOpacidade } from "./estilos.js";
 export { Text } from "./text.js";
 export type { TextProps, AureaTextFont, AureaTextLeading, AureaTextSize, AureaTextTone, AureaTextWeight, } from "./text.js";
-export { Icon, IconRegistryProvider, criarRegistroDeIcones } from "./icon.js";
-export type { IconProps, IconName, AureaIconComponent, AureaIconRegistry, AureaIconSize, } from "./icon.js";
+export { Icon, IconRegistryProvider, criarRegistroDeIcones, criarGlifo } from "./icon.js";
+export type { IconProps, IconName, AureaIconComponent, AureaIconRegistry, 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";
-export type { StackProps, GridProps, CardProps, SeparatorProps, AureaCardVariant } from "./layout.js";
+export type { StackProps, ClusterProps, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, } from "./layout.js";
 export { Button, IconButton } from "./actions.js";
 export type { ButtonProps, IconButtonProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, } from "./actions.js";
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";
 export type { SpinnerProps, SkeletonProps, ProgressProps, AlertProps, EmptyStateProps, DataStateProps, AureaSpinnerSize, AureaAlertVariant, AureaDataStateValue, } from "./feedback.js";
 export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.js";
-export type { BadgeProps, StatusProps, AvatarProps, KPIProps, AureaBadgeAnchor, AureaBadgeEmphasis, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
+export type { BadgeProps, StatusProps, AvatarProps, KPIProps, AureaBadgeAnchor, AureaBadgeEmphasis, AureaBadgeFit, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
 export { useAureaStrings } from "./theme.js";
 export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from "./strings.js";
 export type { AureaStrings, AureaUniversalState } from "./strings.js";
 export { useReduceMotion } from "./movimento.js";
 export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
-export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaTopbarVariant, TabsProps, AureaTabItem, } from "./navigation.js";
+export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, } 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";

package/dist/index.js

@@ -30,9 +30,9 @@ export { BottomNavProvider, useBottomNavSpace } from "./barranav.js";
 export { resolverTokens } from "./tokens.js";
 // A fábrica de folhas memoizada por (tema, densidade). Pública porque o consumidor tem o mesmo
 // problema que os componentes daqui — e a medição em aparelho mostrou que ele é real.
-export { criarFolha } from "./estilos.js";
+export { criarFolha, comOpacidade } from "./estilos.js";
 export { Text } from "./text.js";
-export { Icon, IconRegistryProvider, criarRegistroDeIcones } from "./icon.js";
+export { Icon, IconRegistryProvider, criarRegistroDeIcones, criarGlifo } from "./icon.js";
 // A ÚNICA peça do Lote 1 com dependência de terceiro — `react-native-safe-area-context`,
 // autorizada pelo Victor em 03/09/2026 depois de o lote parar por ela (`BUILDING.md` §3).
 export { Screen } from "./screen.js";

package/dist/inputs.js

@@ -62,7 +62,7 @@ const folha = criarFolha((t) => ({
     // pílula viraria uma cápsula, e o CSS já decidiu isso (`aurea.css:694`).
     areaDeTexto: { minHeight: 104, paddingVertical: t.size.space3, borderRadius: t.size.radiusLg },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
-    desabilitado: { opacity: 0.5 },
+    desabilitado: { opacity: t.size.opacityDisabled },
     // 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.

package/dist/layout.d.ts

@@ -5,8 +5,26 @@ export interface StackProps extends ViewProps {
 }
 /** Coluna com `--space-4` entre os filhos. **Sem prop de espaçamento, de propósito.** */
 export declare function Stack({ style, ...rest }: StackProps): React.JSX.Element;
-/** Linha que QUEBRA, alinhada no eixo cruzado, com `--space-3`. É a fila de chips e botões. */
-export declare function Cluster({ style, ...rest }: StackProps): React.JSX.Element;
+export type AureaClusterAlign = "start" | "center" | "end" | "baseline";
+export type AureaClusterJustify = "start" | "center" | "end" | "between";
+export interface ClusterProps extends StackProps {
+    /** Eixo cruzado (o vertical). Padrão `center`, o `align-items:center` do `.cluster`. */
+    align?: AureaClusterAlign;
+    /** Eixo principal (o horizontal). Padrão `start`. `between` espalha o que sobrar entre os itens. */
+    justify?: AureaClusterJustify;
+    /** Padrão `true`: a fila quebra linha, como o `.cluster`. `false` mantém tudo numa linha só. */
+    wrap?: boolean;
+}
+/**
+ * Linha que QUEBRA, alinhada no eixo cruzado, com `--space-3`. É a fila de chips e botões.
+ *
+ * ✅ **`align`, `justify` e `wrap` — R-09, 24/09/2026.** O app centralizava três filas passando
+ * `style`, e a regra "só Aurea" dele barra isso. Os nomes são os que o documento dos consumidores
+ * propõe para a web na B-01, de propósito: quando a web ganhar os mesmos, os dois alvos dizem a
+ * mesma coisa com a mesma palavra. **O espaço entre os itens continua sem prop**, como na `Stack`.
+ * Sem nenhuma das três, nada muda.
+ */
+export declare function Cluster({ align, justify, wrap, style, ...rest }: ClusterProps): React.JSX.Element;
 export interface GridProps extends ViewProps {
     /**
      * Largura mínima de cada coluna, em dp. O equivalente do `--grid-min` da web, cujo padrão é
@@ -81,15 +99,49 @@ interface CardDaMarca extends CardBase {
 interface CardComum extends CardBase {
     variant?: Exclude<AureaCardVariant, "brand">;
     action?: never;
+    onPress?: undefined;
 }
-export type CardProps = CardDaMarca | CardComum;
+/**
+ * 🔴 **O cartão que É um alvo — R-04, 24/09/2026.** Até aqui a documentação mandava a tela
+ * embrulhar o cartão num `Pressable`, e o consumidor que segue a regra "só Aurea" ficava sem
+ * caminho. Agora o toque é do `Card`, e **as duas obrigações que a nota antiga deixava com a tela
+ * passam a ser do TIPO:** com `onPress` o nome para o leitor de tela é obrigatório, e o papel de
+ * botão vem de dentro. Mesma escolha do `action` do `brand` e do `label` do `IconButton`.
+ *
+ * ⚠ **E o `brand` NÃO aceita `onPress`, de propósito.** Ele exige `action`, e `action` é um botão
+ * DENTRO do cartão — botão dentro de botão, o defeito que o `check 43` barra. No iPhone o de
+ * dentro some para o VoiceOver.
+ */
+interface CardTocavel extends CardBase {
+    variant?: Exclude<AureaCardVariant, "brand">;
+    action?: never;
+    /** O que acontece ao tocar no cartão. Com isto o cartão inteiro vira UM botão. */
+    onPress: () => void;
+    /** O nome do cartão para o leitor de tela. Obrigatório com `onPress`: é o que ele anuncia. */
+    accessibilityLabel: string;
+    disabled?: boolean;
+}
+export type CardProps = CardDaMarca | CardComum | CardTocavel;
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *
- * ⚠ **`interactive` aqui NÃO responde ao toque sozinho.** Na web ele é a variante que responde ao
- * ponteiro; no nativo não há hover, e um cartão que vira alvo precisa de `Pressable` em volta,
- * com rótulo e papel de acessibilidade próprios. A variante existe para a **pele** de um cartão
- * que É um alvo — quem o torna tocável é a tela.
+ * ✅ **O cartão responde ao toque com `onPress`** (R-04, 24/09/2026):
+ *
+ * ```tsx
+ * <Card onPress={abrir} accessibilityLabel="Relatório de março">…</Card>
+ * ```
+ *
+ * Com `onPress` a variante padrão passa a ser `interactive` — a pele de um cartão que é alvo — e
+ * o toque dá a MESMA reação do `Button` (`REACAO_AO_TOQUE`). Sem `onPress`, nada muda: `interactive`
+ * continua sendo só a pele.
+ *
+ * 🔴 **Um cartão com `onPress` NÃO PODE ter coisa tocável dentro** — nem `Button`, nem `Switch`,
+ * nem link. O cartão vira UM elemento para o leitor de tela, e no iPhone quem é elemento **não
+ * expõe os filhos**: o botão de dentro existiria na tela e não existiria para o VoiceOver. É o
+ * defeito que o `check 43` guarda no nosso código, e aqui ele não alcança, porque o conteúdo é
+ * do app. ⚠ **O exemplo do HeroUI faz exatamente isso** (`PressableFeedback` em volta de um
+ * `Card` com `Button` dentro, `heroui-native@1.0.10`) — é o ponto em que a referência não serve.
+ * Cartão com duas ações não tem `onPress`: cada ação é um botão dentro de um cartão comum.
  */
 export declare function Card({ variant, style, ...rest }: CardProps): React.JSX.Element;
 export {};

package/dist/layout.js

@@ -12,12 +12,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // do `Stack` na web escreve o porquê — *"um primitivo de layout que aceita qualquer espaçamento é
 // como um sistema deixa de ter espaçamento"*. Reabrir isso no nativo criaria dois sistemas.
 import * as React from "react";
-import { View } from "react-native";
+import { Pressable, View } from "react-native";
 // `ref` chega por PROPS, sem `forwardRef` — e' o padrao do React 19, e e' o que o
 // `@aurea-uds/react` ja' faz (o `Stack` da web e' `HTMLAttributes & RefAttributes`, sem
 // envelope). O `ViewProps`/`TextProps` do RN 0.87 ja' declaram `ref`, entao ele viaja no
 // `...rest` sem nada a mais.
-import { criarFolha } from "./estilos.js";
+import { criarFolha, REACAO_AO_TOQUE } from "./estilos.js";
 import { Text } from "./text.js";
 import { useAureaTokens, SobreAMarca } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -34,6 +34,7 @@ const folha = criarFolha((t) => ({
     // do `react-native` 0.86/0.87 que o pacote declara como peer (>=0.76).
     stack: { flexDirection: "column", gap: t.size.space4 },
     cluster: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: t.size.space3 },
+    clusterSemQuebra: { flexWrap: "nowrap" },
     grid: { flexDirection: "row", flexWrap: "wrap", gap: t.size.space4 },
     // O raio 22 e a sombra vêm de token, e os dois são identidade declarada INTOCÁVEL no CLAUDE.md.
     // `boxShadow` é do RN 0.76+, e a Etapa 2 mediu que ele é 1:1 com o CSS — inclusive `spread`,
@@ -63,10 +64,26 @@ export function Stack({ style, ...rest }) {
     const s = folha(useAureaTokens());
     return _jsx(View, { style: [s.stack, style], ...rest });
 }
-/** Linha que QUEBRA, alinhada no eixo cruzado, com `--space-3`. É a fila de chips e botões. */
-export function Cluster({ style, ...rest }) {
+const ALINHAR = { start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
+const JUSTIFICAR = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
+/**
+ * Linha que QUEBRA, alinhada no eixo cruzado, com `--space-3`. É a fila de chips e botões.
+ *
+ * ✅ **`align`, `justify` e `wrap` — R-09, 24/09/2026.** O app centralizava três filas passando
+ * `style`, e a regra "só Aurea" dele barra isso. Os nomes são os que o documento dos consumidores
+ * propõe para a web na B-01, de propósito: quando a web ganhar os mesmos, os dois alvos dizem a
+ * mesma coisa com a mesma palavra. **O espaço entre os itens continua sem prop**, como na `Stack`.
+ * Sem nenhuma das três, nada muda.
+ */
+export function Cluster({ align, justify, wrap, style, ...rest }) {
     const s = folha(useAureaTokens());
-    return _jsx(View, { style: [s.cluster, style], ...rest });
+    return (_jsx(View, { style: [
+            s.cluster,
+            align != null && { alignItems: ALINHAR[align] },
+            justify != null && { justifyContent: JUSTIFICAR[justify] },
+            wrap === false && s.clusterSemQuebra,
+            style,
+        ], ...rest }));
 }
 /**
  * Colunas que se acomodam sem breakpoint.
@@ -133,17 +150,38 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *
- * ⚠ **`interactive` aqui NÃO responde ao toque sozinho.** Na web ele é a variante que responde ao
- * ponteiro; no nativo não há hover, e um cartão que vira alvo precisa de `Pressable` em volta,
- * com rótulo e papel de acessibilidade próprios. A variante existe para a **pele** de um cartão
- * que É um alvo — quem o torna tocável é a tela.
+ * ✅ **O cartão responde ao toque com `onPress`** (R-04, 24/09/2026):
+ *
+ * ```tsx
+ * <Card onPress={abrir} accessibilityLabel="Relatório de março">…</Card>
+ * ```
+ *
+ * Com `onPress` a variante padrão passa a ser `interactive` — a pele de um cartão que é alvo — e
+ * o toque dá a MESMA reação do `Button` (`REACAO_AO_TOQUE`). Sem `onPress`, nada muda: `interactive`
+ * continua sendo só a pele.
+ *
+ * 🔴 **Um cartão com `onPress` NÃO PODE ter coisa tocável dentro** — nem `Button`, nem `Switch`,
+ * nem link. O cartão vira UM elemento para o leitor de tela, e no iPhone quem é elemento **não
+ * expõe os filhos**: o botão de dentro existiria na tela e não existiria para o VoiceOver. É o
+ * defeito que o `check 43` guarda no nosso código, e aqui ele não alcança, porque o conteúdo é
+ * do app. ⚠ **O exemplo do HeroUI faz exatamente isso** (`PressableFeedback` em volta de um
+ * `Card` com `Button` dentro, `heroui-native@1.0.10`) — é o ponto em que a referência não serve.
+ * Cartão com duas ações não tem `onPress`: cada ação é um botão dentro de um cartão comum.
  */
-export function Card({ variant = "base", style, ...rest }) {
+export function Card({ variant, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const { action, children, ...resto } = rest;
+    const { action, children, onPress, disabled, ...resto } = rest;
+    if (onPress != null) {
+        const pele = variant ?? "interactive";
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, style: ({ pressed: tocando }) => [
+                s.cardBase, s[`card_${pele}`],
+                tocando && REACAO_AO_TOQUE.pressionado, disabled && REACAO_AO_TOQUE.inerte,
+                style,
+            ], ...resto, children: children }));
+    }
     const corpo = (_jsxs(_Fragment, { children: [children, action != null && _jsx(View, { style: s.acaoDaMarca, children: action })] }));
-    const pele = _jsx(View, { style: [s.cardBase, s[`card_${variant}`], style], ...resto, children: corpo });
+    const pele = _jsx(View, { style: [s.cardBase, s[`card_${variant ?? "base"}`], style], ...resto, children: corpo });
     // 🔴 SOBRE O AMARELO A COR DO TEXTO NÃO É ESCOLHA, É OBRIGAÇÃO — e os números decidiram isto.
     // Medido nos dois temas, texto contra o `primary`:
     //     texto comum ........ 10,34 no claro  ·  **1,83 no escuro**  🔴 ilegível

package/dist/navigation.d.ts

@@ -11,6 +11,8 @@ export interface AureaNavItem {
     disabled?: boolean;
 }
 export type AureaBottomNavVariant = "floating" | "edge";
+/** Quanto a pílula ocupa: a tela menos a margem (`full`, o de sempre) ou só as abas (`content`). */
+export type AureaBottomNavWidth = "full" | "content";
 export type AureaBottomNavIndicator = "none" | "subtle" | "pill" | "circle" | "circle-raised" | "circle-outline" | "circle-bold";
 export interface BottomNavProps extends ViewProps {
     items: AureaNavItem[];
@@ -18,6 +20,11 @@ export interface BottomNavProps extends ViewProps {
     current?: string;
     variant?: AureaBottomNavVariant;
     indicator?: AureaBottomNavIndicator;
+    /**
+     * `content` põe a pílula do tamanho das abas, no centro, em vez de ir de uma borda à outra.
+     * Vale só no `floating`: a `edge` encosta na borda e continua da largura da tela.
+     */
+    width?: AureaBottomNavWidth;
     /** Nome da barra para o leitor de tela. Sem ele, a frase do provider. */
     label?: string;
 }
@@ -94,10 +101,19 @@ export interface BottomNavProps extends ViewProps {
  * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
  * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
-export declare function BottomNav({ items, current, variant, indicator, label, style, ...rest }: BottomNavProps): React.JSX.Element;
+export declare function BottomNav({ items, current, variant, indicator, width, label, style, ...rest }: BottomNavProps): React.JSX.Element;
 export type AureaTopbarVariant = "floating" | "flush" | "pill";
+/** O recuo dos lados da `flush`: `bar` (20, o de sempre), `page` (16, o da `Screen`) ou `none`. */
+export type AureaTopbarInset = "bar" | "page" | "none";
 export interface TopbarProps extends ViewProps {
     variant?: AureaTopbarVariant;
+    /**
+     * Só na `flush` — R-02, 24/09/2026. Por padrão a barra recua 20 dos lados e a `Screen` recua 16,
+     * então o título fica 4 para dentro do conteúdo. `page` alinha os dois; `none` serve para a
+     * barra que já vai dentro de um conteúdo com recuo. As outras duas variantes são caixas com
+     * margem própria e ignoram esta prop.
+     */
+    inset?: AureaTopbarInset;
     brand?: React.ReactNode;
     children?: React.ReactNode;
 }
@@ -118,7 +134,7 @@ export interface TopbarProps extends ViewProps {
  * e **não há landmarks no RN**. Um papel inventado diria uma coisa errada; a barra fica sem papel,
  * e quem nomeia a tela é o conteúdo dela.
  */
-export declare function Topbar({ variant, brand, children, style, ...rest }: TopbarProps): React.JSX.Element;
+export declare function Topbar({ variant, inset, brand, children, style, ...rest }: TopbarProps): React.JSX.Element;
 export interface AureaNavListItem {
     id: string;
     label: React.ReactNode;

package/dist/navigation.js

@@ -26,6 +26,11 @@ const folha = criarFolha((t) => ({
     },
     topo_flush: { paddingVertical: t.size.space2, paddingHorizontal: t.size.space5,
         backgroundColor: t.color.background },
+    // `inset` (R-02, 24/09/2026): o recuo dos lados da `flush`. `page` é o mesmo `space4` do
+    // `respiro` da `Screen` (`screen.tsx`), para o título alinhar com o conteúdo embaixo; `none` é
+    // para a barra que já vai dentro de um conteúdo com recuo próprio.
+    topo_recuo_page: { paddingHorizontal: t.size.space4 },
+    topo_recuo_none: { paddingHorizontal: 0 },
     topo_pill: {
         alignSelf: "center", marginTop: t.size.space4, justifyContent: "flex-start",
         gap: t.size.space2, padding: t.size.space2,
@@ -45,7 +50,7 @@ const folha = criarFolha((t) => ({
     //
     // `zSticky` é token (20), o mesmo `--z-sticky` que a web usa na mesma peça.
     barra: {
-        position: "absolute", left: 0, right: 0, bottom: 0, zIndex: t.size.zSticky,
+        position: "absolute", bottom: 0, zIndex: t.size.zSticky,
         flexDirection: "row", gap: t.size.space1, margin: t.size.space4, padding: t.size.space1,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
         borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
@@ -58,11 +63,33 @@ const folha = criarFolha((t) => ({
         margin: 0, paddingHorizontal: 0, borderRadius: 0, backgroundColor: t.color.background,
         borderWidth: 0, borderTopWidth: t.size.borderWidth, boxShadow: undefined,
     },
+    // A pílula CHEIA, de uma borda à outra menos a margem — o de sempre. Mora fora da `barra` para
+    // o `content` nunca precisar DESFAZER estes dois (ver abaixo).
+    barra_cheia: { left: 0, right: 0 },
+    // 🔴 `width="content"` — R-08, 24/09/2026: *"ficou super largo"*. A pílula deixa de ir de uma
+    // borda à outra e fica do tamanho das abas, no centro. Nenhuma conta nossa: medido no Yoga do
+    // `react-native@0.87.1`, uma peça `absolute` SEM `left`/`right` se mede pelo conteúdo, limitada
+    // à largura do pai (`AbsoluteLayout.cpp`, o ramo `FitContent` de `layoutAbsoluteChild`), e é
+    // posicionada pelo `alignSelf` (`alignAbsoluteChild`, o caso `Align::Center`).
+    // ⚠ **Por isso `left/right` NÃO podem existir aqui**, e a forma importa: escrever
+    // `left: undefined` por cima de um `left: 0` apaga na montagem, mas NÃO numa atualização — o
+    // `restoreDeletedValuesInNestedArray` do `ReactNativeAttributePayload.js` pula `undefined` e
+    // devolve o valor do item anterior. Trocar `width` com a tela aberta deixaria a pílula cheia.
+    barra_content: { alignSelf: "center" },
     aba: {
         flex: 1, minWidth: 0, alignItems: "center", justifyContent: "center",
         gap: t.size.space1, minHeight: t.size.controlHLg, padding: t.size.space1,
         borderRadius: t.size.radiusControl,
     },
+    // Com a pílula do tamanho do conteúdo, `flex: 1` MATA as abas: no RN ele é base ZERO, e a soma
+    // de zeros é uma pílula de largura zero. Aqui cada aba mede o próprio conteúdo (base `auto`) e
+    // só encolhe se não couber. O mínimo é o alvo de toque da própria aba, `controlHLg`, para uma
+    // aba de rótulo curto não virar um alvo mais estreito que alto; e o respiro dos lados é o
+    // `space3` que o `.bottom-nav-content` da web usa na mesma peça.
+    aba_content: {
+        flexGrow: 0, flexShrink: 1, flexBasis: "auto",
+        minWidth: t.size.controlHLg, paddingHorizontal: t.size.space3,
+    },
     // A CAIXA QUE ANCORA O CONTADOR, e ela existe por um defeito visto em tela: pendurado no ITEM,
     // o número cai no meio do RÓTULO. O `navigation-client.tsx:336` conta a história inteira — o
     // Victor viu o contador cobrir o nome em 17/08/2026, e a pesquisa (Material 3 e os guias de
@@ -188,7 +215,7 @@ const folha = criarFolha((t) => ({
  * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
  * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
-export function BottomNav({ items, current, variant = "floating", indicator = "none", label, style, ...rest }) {
+export function BottomNav({ items, current, variant = "floating", indicator = "none", width = "full", label, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
@@ -196,12 +223,13 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
     const redondo = indicator.startsWith("circle");
     const anotar = useAnotarBottomNav();
     const flutua = variant !== "edge";
+    const justa = flutua && width === "content";
     return (_jsx(View, { accessibilityLabel: label ?? strings.bottomNavLabel, 
         // 🔴 A BARRA CONTA A PRÓPRIA ALTURA — é o que permite o `Screen` reservar o fim da rolagem
         // sem o app calcular nada. A conta é a pílula (o que o layout mede) mais as DUAS margens
         // mais a folga do sistema; `edge` conta zero, porque ela fica no fluxo e já encurta a tela.
         onLayout: anotar == null ? undefined : (e) => anotar(flutua ? e.nativeEvent.layout.height + t.size.space4 * 2 + inset.bottom : 0), style: [
-            s.barra, variant === "edge" && s.barra_edge,
+            s.barra, justa ? s.barra_content : s.barra_cheia, variant === "edge" && s.barra_edge,
             // 🔴 NO `floating` A FOLGA DO SISTEMA VAI POR FORA — conserto de 19/09/2026, visto em
             // aparelho Samsung com os três botões (|||, ○, <).
             //
@@ -229,7 +257,7 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
             return (_jsxs(Pressable, { onPress: it.onPress, disabled: it.disabled, 
                 // `link` e não `tab`: uma aba troca um painel DESTA tela; isto troca de tela.
                 accessibilityRole: "link", accessibilityState: { selected: ativo, disabled: !!it.disabled }, style: [
-                    s.aba,
+                    s.aba, justa && s.aba_content,
                     indicator === "subtle" && { borderRadius: t.size.radiusCard - t.size.space1 },
                     ativo && (indicator === "subtle" || indicator === "pill")
                         && { backgroundColor: comOpacidade(t.color.primary, 0.12) },
@@ -270,9 +298,13 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
  * e **não há landmarks no RN**. Um papel inventado diria uma coisa errada; a barra fica sem papel,
  * e quem nomeia a tela é o conteúdo dela.
  */
-export function Topbar({ variant = "floating", brand, children, style, ...rest }) {
+export function Topbar({ variant = "floating", inset = "bar", brand, children, style, ...rest }) {
     const s = folha(useAureaTokens());
-    return (_jsxs(View, { style: [s.topo, s[`topo_${variant}`], style], ...rest, children: [brand != null && _jsx(View, { children: brand }), children] }));
+    return (_jsxs(View, { style: [
+            s.topo, s[`topo_${variant}`],
+            variant === "flush" && inset !== "bar" && s[`topo_recuo_${inset}`],
+            style,
+        ], ...rest, children: [brand != null && _jsx(View, { children: brand }), children] }));
 }
 /**
  * A lista de destinos DENTRO da página — a tela de ajustes, não a moldura do app.
@@ -313,7 +345,7 @@ export function NavList({ items, chevron = "chevron--right", style, ...rest }) {
                                 ? _jsx(Text, { size: "xs", tone: "muted", numberOfLines: 1, children: it.description })
                                 : it.description)] }), valorEhTexto && _jsx(Text, { size: "sm", tone: "muted", children: it.value }), temAcao && chevron
                         && _jsx(Icon, { name: chevron, size: "sm", color: t.color.mutedForeground })] }));
-            return (_jsxs(View, { style: [s.linha, it.disabled && { opacity: 0.5 }], children: [temAcao ? (_jsx(Pressable, { onPress: it.onPress, disabled: it.disabled, accessibilityRole: "link", accessibilityState: { disabled: !!it.disabled }, style: s.linhaMiolo, children: miolo })) : (_jsx(View, { accessible: true, accessibilityState: { disabled: !!it.disabled }, style: s.linhaMiolo, children: miolo })), !valorEhTexto && it.value != null ? it.value : null] }, it.id));
+            return (_jsxs(View, { style: [s.linha, it.disabled && { opacity: t.size.opacityDisabled }], children: [temAcao ? (_jsx(Pressable, { onPress: it.onPress, disabled: it.disabled, accessibilityRole: "link", accessibilityState: { disabled: !!it.disabled }, style: s.linhaMiolo, children: miolo })) : (_jsx(View, { accessible: true, accessibilityState: { disabled: !!it.disabled }, style: s.linhaMiolo, children: miolo })), !valorEhTexto && it.value != null ? it.value : null] }, it.id));
         }) }));
 }
 /**
@@ -388,7 +420,7 @@ export function Tabs({ tabs, value, onChange, label, style, ...rest }) {
     const aberta = tabs.find((it) => it.id === value);
     return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
                         const ativa = it.id === value;
-                        return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", accessibilityState: { selected: ativa, disabled: !!it.disabled }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: 0.5 }], children: typeof it.label === "string"
+                        return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", accessibilityState: { selected: ativa, disabled: !!it.disabled }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: t.size.opacityDisabled }], children: typeof it.label === "string"
                                 ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
                                 : it.label }, it.id));
                     }) }) }), aberta

package/dist/numero.js

@@ -80,7 +80,7 @@ const folha = criarFolha((t) => ({
     },
     campoLargo: { width: undefined, flex: 1, minWidth: t.size.space16 },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
-    desabilitado: { opacity: 0.5 },
+    desabilitado: { opacity: t.size.opacityDisabled },
 }));
 // ─────────────────────────────────────────────────────────────────────────────────────────────
 // O formatador, e a volta que a web não precisou escrever

package/dist/screen.d.ts

@@ -29,6 +29,22 @@ export interface ScreenProps extends ViewProps {
      */
     onRefresh?: () => void;
     refreshing?: boolean;
+    /**
+     * **O rodapé fixo** — R-06, 24/09/2026. Fica FORA da rolagem, colado embaixo, e respeita a
+     * área do sistema sozinho:
+     *
+     * ```tsx
+     * <Screen scroll footer={<Button fullWidth>Assinar</Button>}>…</Screen>
+     * ```
+     *
+     * A borda de baixo dele fica `space4` acima do topo da área do sistema, a mesma conta do
+     * `BottomNav` flutuante. Dentro de um `BottomNavProvider`, ele sobe acima da barra de abas.
+     *
+     * ⚠ **Sem gancho de inset, de propósito.** A `Screen` não exige `SafeAreaProvider` acima, e
+     * `useSafeAreaInsets` exige. Quando a tela não pega a borda de baixo (`edges` sem `"bottom"`), o
+     * rodapé ganha a própria `SafeAreaView` só nessa borda — a mesma peça nativa que a raiz já usa.
+     */
+    footer?: React.ReactNode;
     children?: React.ReactNode;
 }
 /**
@@ -49,4 +65,4 @@ export interface ScreenProps extends ViewProps {
  * nativa e lê o inset do sistema sozinha (medido no fonte da 5.9.1: ela não consome contexto
  * nenhum). Quem exige o provider são os HOOKS — e quem usa `react-navigation` já o tem.
  */
-export declare function Screen({ edges, padded, scroll, background, onRefresh, refreshing, style, children, ...rest }: ScreenProps): React.JSX.Element;
+export declare function Screen({ edges, padded, scroll, background, onRefresh, refreshing, footer, style, children, ...rest }: ScreenProps): React.JSX.Element;

package/dist/screen.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RefreshControl, ScrollView } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RefreshControl, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useBottomNavSpace } from "./barranav.js";
 import { criarFolha } from "./estilos.js";
@@ -16,6 +16,11 @@ const folha = criarFolha((t) => ({
     respiro: { padding: t.size.space4 },
     // Sem isto, conteúdo curto não ocupa a altura e nada consegue se centralizar na tela.
     conteudo: { flexGrow: 1 },
+    // O rodapé fixo (R-06): o mesmo `respiro`, e só o de cima quando a raiz já recua. O
+    // `marginTop: "auto"` é o que o cola no pé quando a tela não rola e o conteúdo é curto; com
+    // `scroll` ele não muda nada, porque o rolador já ocupa o resto.
+    rodape: { marginTop: "auto", padding: t.size.space4 },
+    rodapeNoRespiro: { marginTop: "auto", paddingTop: t.size.space4 },
 }));
 /**
  * As quatro. **Não é excesso de zelo:** em paisagem o entalhe fica à ESQUERDA ou à DIREITA, e a
@@ -40,28 +45,53 @@ const TODAS_AS_BORDAS = ["top", "right", "bottom", "left"];
  * nativa e lê o inset do sistema sozinha (medido no fonte da 5.9.1: ela não consome contexto
  * nenhum). Quem exige o provider são os HOOKS — e quem usa `react-navigation` já o tem.
  */
-export function Screen({ edges = TODAS_AS_BORDAS, padded = true, scroll = false, background = "background", onRefresh, refreshing, style, children, ...rest }) {
+export function Screen({ edges = TODAS_AS_BORDAS, padded = true, scroll = false, background = "background", onRefresh, refreshing, footer, style, children, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const fundo = s[`fundo_${background}`];
     // 🔴 O ESPAÇO DA BARRA DE ABAS, quando ela flutua por cima desta tela — ver `barranav.tsx`.
     // **Zero** fora de um `BottomNavProvider`, que é o caso de toda tela cheia: sem abas, nada muda.
     const respiroDaBarra = useBottomNavSpace();
-    return (_jsx(SafeAreaView, { style: [s.raiz, fundo, !scroll && padded && s.respiro, style], edges: edges, ...rest, children: scroll ? (_jsx(ScrollView, { style: s.raiz, 
-            // ⚠ O respiro da barra SOMA ao do tema em vez de substituí-lo: escrever
-            // `paddingBottom` depois de `s.respiro` apagaria os 16 do tema e colaria o último
-            // item na pílula. A conta é explícita porque a folha não soma sozinha.
-            contentContainerStyle: [
-                s.conteudo, padded && s.respiro,
-                respiroDaBarra > 0
-                    && { paddingBottom: (padded ? t.size.space4 : 0) + respiroDaBarra },
-            ], 
-            // A rosca do sistema é a única aparência da plataforma que a Aurea aceita aqui, e a
-            // razão é que ela NÃO É desenho nosso: é o gesto do sistema operacional, com a física
-            // que a pessoa já conhece. O que dá para pintar, pintamos — a cor é do tema.
-            refreshControl: onRefresh ? (_jsx(RefreshControl, { refreshing: !!refreshing, onRefresh: onRefresh, tintColor: t.color.primary, colors: [t.color.primary], progressBackgroundColor: t.color.card })) : undefined, 
-            // Sem isto, tocar um botão com o teclado aberto exige DOIS toques: o primeiro só
-            // fecha o teclado. É um defeito conhecido do RN, e a tela é o lugar certo de absorvê-lo
-            // — o Lote 4 é todo formulário.
-            keyboardShouldPersistTaps: "handled", children: children })) : (children) }));
+    return (_jsxs(SafeAreaView, { style: [s.raiz, fundo, !scroll && padded && s.respiro, style], edges: edges, ...rest, children: [scroll ? (_jsx(ScrollView, { style: s.raiz, 
+                // ⚠ O respiro da barra SOMA ao do tema em vez de substituí-lo: escrever
+                // `paddingBottom` depois de `s.respiro` apagaria os 16 do tema e colaria o último
+                // item na pílula. A conta é explícita porque a folha não soma sozinha.
+                contentContainerStyle: [
+                    s.conteudo, padded && s.respiro,
+                    // Com rodapé, quem sobe acima da barra de abas é ELE; a rolagem termina em cima dele.
+                    respiroDaBarra > 0 && footer == null
+                        && { paddingBottom: (padded ? t.size.space4 : 0) + respiroDaBarra },
+                ], 
+                // A rosca do sistema é a única aparência da plataforma que a Aurea aceita aqui, e a
+                // razão é que ela NÃO É desenho nosso: é o gesto do sistema operacional, com a física
+                // que a pessoa já conhece. O que dá para pintar, pintamos — a cor é do tema.
+                refreshControl: onRefresh ? (_jsx(RefreshControl, { refreshing: !!refreshing, onRefresh: onRefresh, tintColor: t.color.primary, colors: [t.color.primary], progressBackgroundColor: t.color.card })) : undefined, 
+                // Sem isto, tocar um botão com o teclado aberto exige DOIS toques: o primeiro só
+                // fecha o teclado. É um defeito conhecido do RN, e a tela é o lugar certo de absorvê-lo
+                // — o Lote 4 é todo formulário.
+                keyboardShouldPersistTaps: "handled", children: children })) : (children), footer != null && (_jsx(Rodape, { dentroDoRespiro: !scroll && padded, pegaABorda: edges.includes("bottom"), respiroDaBarra: respiroDaBarra, children: footer }))] }));
+}
+/**
+ * O rodapé da `Screen`. Três contas, cada uma com a sua razão:
+ *
+ * - **o recuo:** `space4`, o `respiro` da própria tela. Sem `scroll` e com `padded`, a raiz já
+ *   recua 16 dos quatro lados, então o rodapé só afasta do conteúdo de cima;
+ * - **a barra de abas:** dentro de um `BottomNavProvider` ela flutua por cima; o rodapé sobe o
+ *   número que ela informa, que já inclui a área do sistema;
+ * - **a área do sistema:** se a raiz pega a borda de baixo, ela já soma o inset; se não pega, o
+ *   rodapé pega sozinho, com a mesma `SafeAreaView`.
+ */
+function Rodape({ dentroDoRespiro, pegaABorda, respiroDaBarra, children }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const recuo = [
+        dentroDoRespiro ? s.rodapeNoRespiro : s.rodape,
+        respiroDaBarra > 0
+            && { paddingBottom: (dentroDoRespiro ? 0 : t.size.space4) + respiroDaBarra },
+    ];
+    // Com a barra de abas, o número dela já traz a área do sistema: pegar a borda de novo somaria
+    // o inset duas vezes.
+    if (pegaABorda || respiroDaBarra > 0)
+        return _jsx(View, { style: recuo, children: children });
+    return _jsx(SafeAreaView, { edges: ["bottom"], style: recuo, children: children });
 }

package/dist/sistema.js

@@ -49,7 +49,7 @@ const folha = criarFolha((t) => ({
         borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
     },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
-    desabilitado: { opacity: 0.5 },
+    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 },

package/package.json

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