@aurea-uds/native 0.8.13 → 0.9.0

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,11 @@ 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;
 /**

package/dist/estilos.js

@@ -40,8 +40,11 @@ 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")

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, AureaBottomNavWidth, 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 é
@@ -110,7 +128,7 @@ export type CardProps = CardDaMarca | CardComum | CardTocavel;
  * ✅ **O cartão responde ao toque com `onPress`** (R-04, 24/09/2026):
  *
  * ```tsx
- * <Card onPress={abrir} accessibilityLabel="Moto CG 160">…</Card>
+ * <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

package/dist/layout.js

@@ -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.
@@ -136,7 +153,7 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
  * ✅ **O cartão responde ao toque com `onPress`** (R-04, 24/09/2026):
  *
  * ```tsx
- * <Card onPress={abrir} accessibilityLabel="Moto CG 160">…</Card>
+ * <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

package/dist/navigation.d.ts

@@ -103,8 +103,17 @@ export interface BottomNavProps extends ViewProps {
  */
 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;
 }
@@ -125,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,
@@ -293,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.
@@ -336,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));
         }) }));
 }
 /**
@@ -411,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.13",
+  "version": "0.9.0",
   "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.13"
+    "@aurea-uds/tokens": "^0.9.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",