@aurea-uds/native 0.28.0 → 0.29.0

package/dist/busca.js

@@ -76,7 +76,7 @@ import { KeyboardAvoiding, useCampo } from "./inputs.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens, ForaDaMarca, usePeleSobreAMarca } from "./theme.js";
+import { useAureaStrings, useAureaTokens, useTokensDoApp, ForaDaMarca, usePeleSobreAMarca } from "./theme.js";
 // As mesmas contas do `inputs.tsx`, e elas são repetidas AQUI de propósito: exportá-las de lá
 // tornaria pública uma conta interna do outro módulo, e um `import` de função privada entre
 // módulos irmãos é o começo de um acoplamento que ninguém declara. São três linhas.
@@ -215,6 +215,9 @@ const folha = criarFolha((t) => ({
 export function Combobox({ items, value, onValueChange, onSearchChange, searchDelay = ESPERA_PADRAO, loading, onEndReached, placeholder, searchPlaceholder, empty, clearable = true, draggable = true, disabled, size, chevron = "caret-down", searchIcon = "magnifying-glass", searchKeyboardType, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    // A folha sai do fluxo: pinta com os tokens do APP (ADR-0063 — ver `useTokensDoApp`).
+    const tf = useTokensDoApp();
+    const sf = folha(tf);
     const peleDaMarca = usePeleSobreAMarca();
     const strings = useAureaStrings();
     const campo = useCampo();
@@ -307,7 +310,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                     peleDaMarca,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value?.label }, ...estadoAcessivel({ disabled: !!inativo, expanded: aberto }), style: s.gatilho, children: _jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }) }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "x", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && (_jsx(Pressable, { accessible: false, disabled: inativo, style: s.setaToque, onPress: inativo ? undefined : () => setAberto(true), testID: testID ? `${testID}-seta` : undefined, children: _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground }) }))] })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [s.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, children: [_jsx(View, { style: s.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) }), _jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
+                ], children: [_jsx(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value?.label }, ...estadoAcessivel({ disabled: !!inativo, expanded: aberto }), style: s.gatilho, children: _jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }) }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "x", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && (_jsx(Pressable, { accessible: false, disabled: inativo, style: s.setaToque, onPress: inativo ? undefined : () => setAberto(true), testID: testID ? `${testID}-seta` : undefined, children: _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground }) }))] })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: sf.fundoDaLista, children: [_jsx(Pressable, { style: sf.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [sf.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, children: [_jsx(View, { style: sf.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: sf.puxador }) }), _jsxs(View, { style: [sf.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: tf.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: tf.color.subtleForeground, 
                                                 // ⚠ `autoFocus` é o que faz a folha valer a pena: abrir um campo de busca e
                                                 // exigir um segundo toque para o teclado subir é um toque a mais em cada
                                                 // cadastro. O foco entra com a folha; o teclado vem junto.
@@ -318,17 +321,17 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                 // plataforma, não decoração: diz à pessoa que aquele campo é de busca antes de
                                                 // ela digitar a primeira letra.
                                                 returnKeyType: "search", keyboardType: searchKeyboardType, style: [
-                                                    s.campoDeTexto,
-                                                    { fontSize: fonteDoTamanho(t, tam), fontFamily: t.font.ui[400],
-                                                        color: t.color.foreground },
-                                                ] }), texto.length > 0 && (_jsx(IconButton, { name: "x", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: s.carregando, children: _jsx(Spinner, { label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: s.vazio, children: typeof empty === "string" || empty == null
+                                                    sf.campoDeTexto,
+                                                    { fontSize: fonteDoTamanho(t, tam), fontFamily: tf.font.ui[400],
+                                                        color: tf.color.foreground },
+                                                ] }), texto.length > 0 && (_jsx(IconButton, { name: "x", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: sf.carregando, children: _jsx(Spinner, { label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: sf.vazio, children: typeof empty === "string" || empty == null
                                             ? _jsx(Text, { size: "sm", tone: "muted", children: empty ?? strings.comboboxEmpty })
                                             : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsxs(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", ...estadoAcessivel({
                                                 selected: item.value === value?.value, disabled: !!item.disabled,
                                             }), accessibilityHint: item.description, style: [
-                                                s.opcao,
-                                                item.value === value?.value && s.opcaoEscolhida,
-                                                item.disabled && s.desabilitado,
+                                                sf.opcao,
+                                                item.value === value?.value && sf.opcaoEscolhida,
+                                                item.disabled && sf.desabilitado,
                                             ], children: [_jsx(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }), item.description != null && (_jsx(Text, { size: "xs", tone: "muted", children: item.description }))] })) }), _jsx(RecuoDaFolha, { comTeclado: true })] })] }) }) })] }));
 }
 // ── A DOBRA DE ACENTO, e por que ela é sondada em vez de presumida ───────────────────────────

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export type { IconProps, IconName, PhosphorIconName, AureaIconNames, IconWeight,
 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, ClusterProps, AureaStackAlign, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, AureaGridMin, } from "./layout.js";
+export type { StackProps, ClusterProps, AureaStackAlign, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, AureaCardAccent, AureaGridMin, } from "./layout.js";
 export { Button, IconButton, LinkButton, ThemeToggle } from "./actions.js";
 export type { ButtonProps, IconButtonProps, LinkButtonProps, ThemeToggleProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, AureaShareData, } from "./actions.js";
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";

package/dist/inputs.js

@@ -46,7 +46,7 @@ import { Icon } from "./icon.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens, usePeleSobreAMarca, ForaDaMarca } from "./theme.js";
+import { useAureaStrings, useAureaTokens, useTokensDoApp, usePeleSobreAMarca, ForaDaMarca } from "./theme.js";
 // `alturaDoTamanho` e `respiroDoTamanho` saem do arquivo (não do pacote) desde 02/10/2026: o
 // `FileInput` (R-21) desenha um gatilho com a medida do campo, e copiar os números para lá é o
 // defeito que o `CLAUDE.md` nomeia.
@@ -588,6 +588,9 @@ export function SegmentedControl({ items, value, onChange, label, disabled, just
 export function Select({ items, value, onChange, placeholder, disabled, size, chevron = "caret-down", style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    // A folha sai do fluxo: pinta com os tokens do APP (ADR-0063 — ver `useTokensDoApp`).
+    const tf = useTokensDoApp();
+    const sf = folha(tf);
     const peleDaMarca = usePeleSobreAMarca();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
@@ -603,7 +606,7 @@ export function Select({ items, value, onChange, placeholder, disabled, size, ch
                     peleDaMarca,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: escolhido ? "default" : "subtle", numberOfLines: 1, children: escolhido?.label ?? placeholder ?? "" }), chevron && _jsx(Icon, { name: chevron, size: "sm", color: peleDaMarca?.color ?? t.color.subtleForeground })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setAberto(false), children: _jsxs(View, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsxs(View, { style: s.lista, children: [_jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", ...estadoAcessivel({ selected: it.value === value, disabled: !!it.disabled }), style: [s.opcao, it.disabled && s.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }), _jsx(RecuoDaFolha, {})] })] }) }) })] }));
+                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: escolhido ? "default" : "subtle", numberOfLines: 1, children: escolhido?.label ?? placeholder ?? "" }), chevron && _jsx(Icon, { name: chevron, size: "sm", color: peleDaMarca?.color ?? t.color.subtleForeground })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setAberto(false), children: _jsxs(View, { style: sf.fundoDaLista, children: [_jsx(Pressable, { style: sf.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsxs(View, { style: sf.lista, children: [_jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", ...estadoAcessivel({ selected: it.value === value, disabled: !!it.disabled }), style: [sf.opcao, it.disabled && sf.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }), _jsx(RecuoDaFolha, {})] })] }) }) })] }));
 }
 /**
  * A pilha de campos, com o respiro do `--space-5`.

package/dist/layout.d.ts

@@ -92,9 +92,18 @@ export interface SeparatorProps extends ViewProps {
  * comportamento certo.
  */
 export declare function Separator({ orientation, label, style, ...rest }: SeparatorProps): React.JSX.Element;
-export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger" | "brand";
+export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger" | "brand" | "contrast";
+/** O tom do traço no topo (`accent`, MT-02, ADR-0063) — os MESMOS cinco da web. */
+export type AureaCardAccent = "brand" | "success" | "info" | "warning" | "danger";
 interface CardBase extends ViewProps {
     children?: React.ReactNode;
+    /**
+     * O traço de cor no topo (MT-02, ADR-0063, 10/10/2026): `--accent-width` (4), na cor CHEIA do
+     * tom, igual nos dois temas. É enfeite — o nome da caixa diz o assunto —, e por isso a ADR-0063
+     * abriu a exceção na ADR-0061 (borda com a cor de fundo). Funciona com `onPress`, com
+     * `accessible` e dentro da `Grid`.
+     */
+    accent?: AureaCardAccent;
 }
 /**
  * 🔴 **O `brand` EXIGE `action`, e isso é de propósito — a regra é do TIPO, não de documento.**
@@ -162,5 +171,5 @@ export type CardProps = CardDaMarca | CardComum | CardTocavel;
  * volta de um `Card` com `Button` dentro) — é 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 declare function Card(props: CardProps): React.JSX.Element;
 export {};

package/dist/layout.js

@@ -17,9 +17,9 @@ import { Pressable, StyleSheet, View } from "react-native";
 // `@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, peleDoCartao, peleDoCartaoEscolhido, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, peleDoCartao, peleDoCartaoEscolhido, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
 import { Text } from "./text.js";
-import { useAureaTokens, SobreAMarca } from "./theme.js";
+import { useAureaTheme, useAureaTokens, SobreAMarca, TemaDentro } from "./theme.js";
 const folha = criarFolha((t) => ({
     // A LINHA DO SISTEMA, e os números são os mesmos do `.separator` da web (`aurea.css`): cor de
     // `border` e espessura de UM pixel. ⚠ Um pixel não sai de `--space-*` de propósito — a linha
@@ -51,6 +51,24 @@ const folha = criarFolha((t) => ({
     // O amarelo é o DE PREENCHER — `primary`, o mesmo do botão sólido. A borda some: uma superfície
     // cheia não precisa de contorno, e um contorno sobre o amarelo mede 2,43 no claro (invisível).
     card_brand: { backgroundColor: t.color.primary, borderColor: "transparent" },
+    // MT-01 (ADR-0063): o `contrast` é pintado DENTRO do tema escuro (`TemaDentro`), então o fundo do
+    // `cardBase` já é o cartão do escuro. No claro, sem linha em volta (13,3:1 contra a tela); no
+    // escuro, o amarelo, com a borda de sempre.
+    card_contrast: { borderColor: "transparent" },
+    contrasteNoEscuro: { borderColor: t.color.primary },
+    // MT-02 (ADR-0063): o traço no topo. Uma borda mais grossa só em cima, com o canto 22, desenha
+    // errado no Android (react-native#51926, fechada sem conserto em 24/03/2026: a borda sai do
+    // contorno e deixa vão). Então o traço é uma faixa de `accentWidth` numa camada que se recorta no
+    // canto do cartão, por cima da borda de 1 — o mesmo desenho do `border-top` da web, que afina na
+    // curva. A camada cobre a CAIXA DA BORDA (deslocada de `borderWidth` para fora), e o recheio de
+    // cima cresce o que o traço come, para o conteúdo ficar onde fica na web.
+    comTraco: { paddingTop: t.size.cardPad + t.size.accentWidth - t.size.borderWidth },
+    tracoCamada: {
+        position: "absolute", top: -t.size.borderWidth, left: -t.size.borderWidth,
+        right: -t.size.borderWidth, bottom: -t.size.borderWidth,
+        ...canto(t.size.radiusCard), overflow: "hidden",
+    },
+    traco: { height: t.size.accentWidth },
     // A ação fica embaixo, separada pelo mesmo respiro que o resto da casa usa entre blocos.
     acaoDaMarca: { marginTop: t.size.space3 },
 }));
@@ -194,20 +212,37 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
  * volta de um `Card` com `Button` dentro) — é 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, style, ...rest }) {
+export function Card(props) {
+    // MT-01 (ADR-0063, 10/10/2026): o `contrast` é o tema escuro DENTRO do cartão, então TODO filho
+    // se ajusta — texto, selo, botão, campo —, e não só a lista declarada do `brand`. A marca não
+    // atravessa: dentro de um cartão amarelo, o `contrast` não é amarelo, e a tinta dele não vale.
+    if (props.variant === "contrast") {
+        return (_jsx(TemaDentro, { tema: "dark", children: _jsx(SobreAMarca.Provider, { value: null, children: _jsx(CorpoDoCartao, { ...props }) }) }));
+    }
+    return _jsx(CorpoDoCartao, { ...props });
+}
+/** A cor CHEIA de cada tom do traço — a mesma nos dois temas (ADR-0063, exceção à ADR-0061). */
+const COR_DO_TRACO = {
+    brand: "primary", success: "success", info: "info", warning: "warning", danger: "destructive",
+};
+function CorpoDoCartao({ variant, accent, style, ...rest }) {
     const t = useAureaTokens();
+    const { theme: temaDoApp } = useAureaTheme();
     const s = folha(t);
     const { action, children, onPress, disabled, ...resto } = rest;
+    // O contorno do `contrast` olha o tema do APP: dentro do cartão os tokens já são os do escuro.
+    const contorno = variant === "contrast" && temaDoApp === "dark" ? s.contrasteNoEscuro : null;
+    const traco = accent == null ? null : (_jsx(View, { pointerEvents: "none", collapsable: false, style: s.tracoCamada, children: _jsx(View, { style: [s.traco, { backgroundColor: t.color[COR_DO_TRACO[accent]] }] }) }));
     if (onPress != null) {
         const pele = variant ?? "interactive";
-        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", ...estadoAcessivel({ disabled: !!disabled }), style: ({ pressed: tocando }) => [
-                s.cardBase, s[`card_${pele}`],
+        return (_jsxs(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", ...estadoAcessivel({ disabled: !!disabled }), style: ({ pressed: tocando }) => [
+                s.cardBase, s[`card_${pele}`], contorno, traco != null && s.comTraco,
                 tocando && REACAO_AO_TOQUE.pressionado, disabled && REACAO_AO_TOQUE.inerte,
                 style,
-            ], ...resto, children: children }));
+            ], ...resto, children: [traco, 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 ?? "base"}`], style], ...resto, children: corpo });
+    const corpo = (_jsxs(_Fragment, { children: [traco, children, action != null && _jsx(View, { style: s.acaoDaMarca, children: action })] }));
+    const pele = (_jsx(View, { style: [s.cardBase, s[`card_${variant ?? "base"}`], contorno, traco != null && s.comTraco, 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/overlays.js

@@ -62,7 +62,7 @@ import { canto, cantosDeCima, criarFolha } from "./estilos.js";
 import { IconButton } from "./actions.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens, ForaDaMarca } from "./theme.js";
+import { useAureaStrings, useTokensDoApp, ForaDaMarca } from "./theme.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
 const folha = criarFolha((t) => ({
     fundo: { flex: 1, backgroundColor: t.color.overlay },
@@ -163,7 +163,7 @@ const naoAtravessa = { onStartShouldSetResponder: () => true };
  * fica presa — o equivalente exato de um diálogo web que ignora `Escape`.
  */
 export function Dialog({ open, title, children, footer, onClose, scroll = true, style, testID, }) {
-    const t = useAureaTokens();
+    const t = useTokensDoApp();
     const s = folha(t);
     const strings = useAureaStrings();
     const Corpo = scroll ? ScrollView : View;
@@ -192,7 +192,7 @@ export function Dialog({ open, title, children, footer, onClose, scroll = true,
  * separa esta caixa de um `Dialog` para quem não vê é o texto, não um atributo.
  */
 export function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, testID, }) {
-    const t = useAureaTokens();
+    const t = useTokensDoApp();
     const s = folha(t);
     const strings = useAureaStrings();
     return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onCancel, testID: testID, children: _jsx(View, { style: [s.fundo, s.centro], children: _jsxs(View, { ...naoAtravessa, style: [s.superficie, s.confirmar], children: [_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) }), _jsx(View, { style: s.corpo, children: typeof description === "string"
@@ -211,7 +211,7 @@ export function ConfirmDialog({ open, title, description, confirmLabel, cancelLa
  * cascata de `prefers-reduced-motion` que a web ganha de graça.
  */
 export function Drawer({ open, title, children, onClose, side = "right", scroll = true, style, testID, }) {
-    const t = useAureaTokens();
+    const t = useTokensDoApp();
     const s = folha(t);
     const strings = useAureaStrings();
     const reduzir = useReduceMotion();
@@ -267,7 +267,7 @@ export function Drawer({ open, title, children, onClose, side = "right", scroll
  * terço da altura da folha. Fechar cedo demais é como um gesto de fechar vira perda de dado.
  */
 export function BottomSheet({ open, title, children, onClose, grabber = true, draggable = true, scroll = true, style, testID, }) {
-    const t = useAureaTokens();
+    const t = useTokensDoApp();
     const s = folha(t);
     const reduzir = useReduceMotion();
     const arrasto = React.useRef(new Animated.Value(0)).current;

package/dist/theme.d.ts

@@ -118,6 +118,29 @@ export declare function useSobreAMarca(): SobreAMarcaValor | null;
 export declare function ForaDaMarca({ children }: {
     children?: React.ReactNode;
 }): React.JSX.Element;
+/**
+ * O tema num pedaço da tela — o `Card variant="contrast"` (MT-01, ADR-0063, 10/10/2026). Os filhos
+ * leem os tokens do `tema` pedido; o resto do app não muda. É o jeito da referência principal de
+ * fazer um pedaço escuro (o tema aplicado num elemento), e o da web (`data-theme` no cartão).
+ *
+ * ⚠ **O `useAureaTheme()` continua o do app**: dentro do pedaço, `theme` diz o tema do APP, e o
+ * `setTheme` troca o do app. Só os tokens mudam — é o que pinta.
+ *
+ * Interno: o público é o `Card variant="contrast"`. O que sai do fluxo (folha, sobreposto) passa
+ * pelo `ForaDaMarca` e volta ao app.
+ */
+/**
+ * Os tokens do APP, mesmo dentro de um pedaço com tema próprio. Quem desenha uma janela que sai do
+ * fluxo (a folha, o diálogo) pinta o FUNDO dela com isto: o `ForaDaMarca` devolve o contexto do app
+ * só para quem lê o contexto DENTRO da janela (o texto, o botão), e o fundo é calculado antes, por
+ * quem abre. Medido na bancada do Lote N (10/10/2026): sem isto, a lista do `Select` aberta de
+ * dentro do `contrast` saía com o fundo do escuro e a letra do claro. Interno.
+ */
+export declare function useTokensDoApp(): AureaTokens;
+export declare function TemaDentro({ tema, children }: {
+    tema: AureaThemeName;
+    children?: React.ReactNode;
+}): React.JSX.Element;
 /**
  * A pele que um CAMPO tem de vestir quando está dentro de um `Card variant="brand"`, ou `null`
  * quando não está.

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useColorScheme } from "react-native";
 import { IconRegistryProvider } from "./icon.js";
@@ -45,6 +45,8 @@ export function AureaProvider({ children, theme, density, defaultTheme, defaultD
         // um contexto a mais só se paga quando ele muda em outra hora, e este muda junto — é a mesma
         // conta que o cabeçalho deste arquivo já fez para os dois contextos que viraram um.
         strings: strings ?? defaultStrings,
+        fontes: fontFamilies,
+        raiz: null,
     }), [temaEfetivo, densidadeEfetiva, setTheme, setDensity, fontFamilies, strings]);
     // O registro de ícones fica num contexto PRÓPRIO: ele não muda quando o tema muda, e juntá-lo
     // ao valor do tema faria toda árvore que só desenha ícone re-renderizar na troca de tema.
@@ -119,7 +121,46 @@ export function useSobreAMarca() {
  * passa por aqui.
  */
 export function ForaDaMarca({ children }) {
-    return _jsx(SobreAMarcaCtx.Provider, { value: null, children: children });
+    // ✅ **E corta o tema do pedaço também (ADR-0063, 10/10/2026).** A mesma armadilha vale para o
+    // `Card variant="contrast"`: ele entrega os tokens do ESCURO aos filhos, e a folha de um `Select`
+    // aberto dali sairia escura sobre um app claro. Na web isso não acontece porque a folha vai para
+    // o fim da página (portal), fora do pedaço; aqui, quem sai do fluxo volta ao valor do app.
+    const v = React.useContext(Contexto);
+    const corpo = _jsx(SobreAMarcaCtx.Provider, { value: null, children: children });
+    return v?.raiz ? _jsx(Contexto.Provider, { value: v.raiz, children: corpo }) : corpo;
+}
+/**
+ * O tema num pedaço da tela — o `Card variant="contrast"` (MT-01, ADR-0063, 10/10/2026). Os filhos
+ * leem os tokens do `tema` pedido; o resto do app não muda. É o jeito da referência principal de
+ * fazer um pedaço escuro (o tema aplicado num elemento), e o da web (`data-theme` no cartão).
+ *
+ * ⚠ **O `useAureaTheme()` continua o do app**: dentro do pedaço, `theme` diz o tema do APP, e o
+ * `setTheme` troca o do app. Só os tokens mudam — é o que pinta.
+ *
+ * Interno: o público é o `Card variant="contrast"`. O que sai do fluxo (folha, sobreposto) passa
+ * pelo `ForaDaMarca` e volta ao app.
+ */
+/**
+ * Os tokens do APP, mesmo dentro de um pedaço com tema próprio. Quem desenha uma janela que sai do
+ * fluxo (a folha, o diálogo) pinta o FUNDO dela com isto: o `ForaDaMarca` devolve o contexto do app
+ * só para quem lê o contexto DENTRO da janela (o texto, o botão), e o fundo é calculado antes, por
+ * quem abre. Medido na bancada do Lote N (10/10/2026): sem isto, a lista do `Select` aberta de
+ * dentro do `contrast` saía com o fundo do escuro e a letra do claro. Interno.
+ */
+export function useTokensDoApp() {
+    const v = usar("useTokensDoApp");
+    return (v.raiz ?? v).tokens;
+}
+export function TemaDentro({ tema, children }) {
+    const v = usar("TemaDentro");
+    const valor = React.useMemo(() => ({
+        ...v,
+        tokens: resolverTokens(tema, v.controle.density, v.fontes),
+        raiz: v.raiz ?? v,
+    }), [v, tema]);
+    if (v.tokens.theme === tema)
+        return _jsx(_Fragment, { children: children });
+    return _jsx(Contexto.Provider, { value: valor, children: children });
 }
 /**
  * A pele que um CAMPO tem de vestir quando está dentro de um `Card variant="brand"`, ou `null`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Phosphor sobre react-native-svg.",
   "keywords": [
     "aurea",
@@ -55,7 +55,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.28.0"
+    "@aurea-uds/tokens": "^0.29.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",