@aurea-uds/native 0.27.0 → 0.29.0

package/dist/actions.d.ts

@@ -40,6 +40,19 @@ export interface ButtonProps extends Omit<PressableProps, "children" | "style">
     fullWidth?: boolean;
     /** Estado de alternância, anunciado ao leitor de tela como `checked`. */
     pressed?: boolean;
+    /**
+     * GAR-14 (0.28.0): o botão COMPARTILHA — os mesmos nomes da web. No aparelho, abre o compartilhar do
+     * sistema (`Share` do React Native); o link vai DENTRO da mensagem no Android, que descarta o `url`.
+     * No navegador (`react-native-web`), a regra da web: detectar o recurso; sem ele, copiar e avisar
+     * "Link copiado" pelo `ToastHost`, e dizer ao leitor de tela.
+     */
+    share?: AureaShareData;
+}
+/** O que o `Button share` compartilha (GAR-14). Os nomes são os da web. */
+export interface AureaShareData {
+    url?: string;
+    title?: string;
+    text?: string;
 }
 /**
  * Botão. `Pressable` do RN, alvo ≥ `--target-min`, pele de token.
@@ -79,6 +92,6 @@ export declare function IconButton(props: IconButtonProps): React.JSX.Element;
  */
 export declare function folgaDoToque(t: AureaTokens, size?: AureaButtonSize): number;
 /** Fechado: sem `appearance` e sem `tone`, porque a cor é a do glifo. */
-export interface ThemeToggleProps extends Omit<IconButtonProps, "name" | "label" | "onPress" | "appearance" | "tone"> {
+export interface ThemeToggleProps extends Omit<IconButtonProps, "name" | "label" | "onPress" | "appearance" | "tone" | "share"> {
 }
 export declare function ThemeToggle(props: ThemeToggleProps): React.JSX.Element;

package/dist/actions.js

@@ -21,11 +21,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   `appearance:"nav"` — é a pele do item de navegação, e quem a consome é o `BottomNav`/`NavList`
 //                 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 { AccessibilityInfo, Platform, Pressable, Share, View } from "react-native";
 import { canto, criarFolha, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTheme, useAureaTokens, useSobreAMarca } from "./theme.js";
+import { AvisosContext, useAureaStrings, useAureaTheme, useAureaTokens, useSobreAMarca } from "./theme.js";
 const ALTURA = {
     xs: "controlHXs", sm: "controlHSm", md: "controlHMd", lg: "controlHLg", xl: "controlHXl",
 };
@@ -137,6 +137,58 @@ const folha = criarFolha((t) => ({
     // `Card` com `onPress` passou a reagir igual (R-04, 24/09/2026).
     ...REACAO_AO_TOQUE,
 }));
+// GAR-14 · o compartilhar do nativo. Ver a prop `share`.
+async function compartilhar(dados, avisos, strings) {
+    if (Platform.OS !== "web") {
+        // O iOS manda o `url` como link de verdade e o `message` como texto; o Android só lê o `message`.
+        const mensagem = [dados.text, dados.url].filter(Boolean).join(" ");
+        try {
+            await Share.share(Platform.OS === "ios" && dados.url
+                ? { url: dados.url, message: dados.text, title: dados.title }
+                : { message: mensagem, title: dados.title });
+        }
+        catch { /* a pessoa fechou, ou o sistema recusou: não há o que dizer */ }
+        return;
+    }
+    // O alvo nativo não tem os tipos do navegador: só o pedaço que se usa aqui (como no E16).
+    const g = globalThis;
+    const nav = g.navigator;
+    const url = dados.url ?? g.location?.href ?? "";
+    const pacote = { url, ...(dados.title ? { title: dados.title } : null), ...(dados.text ? { text: dados.text } : null) };
+    if (typeof nav?.share === "function" && (typeof nav.canShare !== "function" || nav.canShare(pacote))) {
+        try {
+            await nav.share(pacote);
+            return;
+        }
+        catch (e) {
+            if (e?.name === "AbortError")
+                return;
+        }
+    }
+    const avisar = (falhou) => {
+        const texto = falhou ? strings.linkCopyFailed : strings.linkCopied;
+        avisos?.add(falhou ? { title: texto, description: url, type: "danger", duration: 0 } : { title: texto, type: "success", duration: 1500 });
+        AccessibilityInfo.announceForAccessibility(texto);
+    };
+    try {
+        if (typeof nav?.clipboard?.writeText !== "function")
+            throw new Error("sem área de transferência");
+        await nav.clipboard.writeText(url);
+        avisar(false);
+    }
+    catch {
+        avisar(true);
+    }
+}
+/** O toque do botão com o `share`: o `onPress` do app primeiro, depois o compartilhar. O `Button` e
+ *  o `IconButton` usam o mesmo — com um só, os dois não divergem. */
+function useToqueComShare(share, onPress) {
+    const avisos = React.useContext(AvisosContext);
+    const strings = useAureaStrings();
+    if (!share)
+        return onPress;
+    return (e) => { onPress?.(e); void compartilhar(share, avisos, strings); };
+}
 /**
  * Botão. `Pressable` do RN, alvo ≥ `--target-min`, pele de token.
  *
@@ -150,8 +202,9 @@ export function Button(props) {
     return _jsx(CorpoDoBotao, { ...props });
 }
 /** O corpo do `Button`. `semRecuo` é só do `LinkButton`: sem recuo, sem borda e sem altura. */
-function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size = "md", leadingIcon, trailingIcon, leading, trailing, icons, fullWidth = false, pressed, disabled, accessibilityLabel, semRecuo = false, ...rest }) {
+function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size = "md", leadingIcon, trailingIcon, leading, trailing, icons, fullWidth = false, pressed, disabled, accessibilityLabel, semRecuo = false, share, onPress, ...rest }) {
     const t = useAureaTokens();
+    const aoTocar = useToqueComShare(share, onPress);
     const s = folha(t);
     const marca = useSobreAMarca();
     const cor = pintarSobreAMarca(pintar(t, tone), marca, tone, appearance);
@@ -168,7 +221,7 @@ function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size =
         ...(semRecuo ? { height: undefined, paddingHorizontal: 0, borderWidth: 0 } : null),
     }), [t, size, appearance, cor.solido, cor.contorno, corDaBorda, fullWidth, semRecuo]);
     const corDoTexto = appearance === "solid" ? cor.texto : cor.sobre;
-    return (_jsx(Pressable, { disabled: disabled, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
+    return (_jsx(Pressable, { disabled: disabled, onPress: aoTocar, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
             s.alvo, fullWidth && s.alvoLargura,
             tocando && s.pressionado, disabled && s.inerte,
         ], ...rest, children: _jsxs(View, { style: [s.caixa, caixa], children: [leading ?? null, leadingIcon ? _jsx(Icon, { name: leadingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, typeof children === "string"
@@ -212,8 +265,9 @@ export function folgaDoToque(t, size = "md") {
 }
 /** O corpo do `IconButton`. A cor própria do ícone (`corDoIcone`) é só do `ThemeToggle`: o
  *  `IconButton` público não tem cor solta, e dentro do cartão da marca ela não vale (a tinta vence). */
-function BotaoDeIcone({ name, label, appearance = "ghost", tone = "neutral", size = "md", icons, pressed, disabled, corDoIcone, pesoDoIcone, ...rest }) {
+function BotaoDeIcone({ name, label, appearance = "ghost", tone = "neutral", size = "md", icons, pressed, disabled, corDoIcone, pesoDoIcone, share, onPress, ...rest }) {
     const t = useAureaTokens();
+    const aoTocar = useToqueComShare(share, onPress);
     const s = folha(t);
     const marca = useSobreAMarca();
     const cor = pintarSobreAMarca(pintar(t, tone), marca, tone, appearance);
@@ -225,7 +279,7 @@ function BotaoDeIcone({ name, label, appearance = "ghost", tone = "neutral", siz
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
         borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
     }), [t, lado, size, appearance, cor.solido, cor.contorno, corDaBorda]);
-    return (_jsx(Pressable, { disabled: disabled, accessibilityRole: "button", accessibilityLabel: label, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
+    return (_jsx(Pressable, { disabled: disabled, onPress: aoTocar, accessibilityRole: "button", accessibilityLabel: label, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
             // Largura FIXA, como o só-ícone da referência: ele nunca estica,
             // nem numa coluna sem alinhamento. O alvo é o maior entre o desenho e o `targetMin`.
             s.alvo, { width: Math.max(lado, t.size.targetMin), alignItems: "center" },

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/data.js

@@ -233,14 +233,14 @@ export function Table({ caption, columns, rows, keyExtractor, onRowPress, empty,
     const desenharLinha = React.useCallback((linha) => {
         const corpo = (_jsxs(_Fragment, { children: [principal ? (_jsx(View, { accessible: true, children: (() => {
                         const v = conteudo(principal, linha);
-                        return typeof v === "string" ? _jsx(Text, { size: "md", weight: 600, children: v }) : v;
+                        return typeof v === "string" ? _jsx(Text, { size: "md", weight: 600, numeric: true, children: v }) : v;
                     })() })) : null, secundarias.map((coluna) => {
                     const v = conteudo(coluna, linha);
                     const nome = typeof coluna.header === "string" && typeof v === "string"
                         ? `${coluna.header}: ${v}` : undefined;
                     return (_jsxs(View, { accessible: true, accessibilityLabel: nome, style: s.celula, children: [typeof coluna.header === "string"
                                 ? _jsx(Text, { size: "sm", tone: "muted", style: s.nomeDaColuna, children: coluna.header })
-                                : coluna.header, typeof v === "string" ? _jsx(Text, { size: "sm", style: s.valor, children: v }) : v] }, coluna.key));
+                                : coluna.header, typeof v === "string" ? _jsx(Text, { size: "sm", numeric: true, style: s.valor, children: v }) : v] }, coluna.key));
                 })] }));
         // Só vira alvo se houver o que tocar. Uma linha `Pressable` sem ação é um botão que não faz
         // nada — e o leitor de tela a anunciaria como botão.

package/dist/display.js

@@ -301,7 +301,7 @@ export function KPI({ label, value, trend, direction, tone, directionLabel, vari
     const nome = direction && partes.every((p) => p !== null) ? partes.filter(Boolean).join(", ") : undefined;
     const Caixa = variant === "plain" ? View : Card;
     return (_jsxs(Caixa, { style: [s.kpi, style], accessible: true, accessibilityLabel: nome, ...rest, children: [typeof label === "string" ? _jsx(Text, { size: "sm", tone: "muted", children: label }) : label, typeof value === "string" || typeof value === "number"
-                ? _jsx(Text, { size: "3xl", weight: 700, children: value }) : value, direction
+                ? _jsx(Text, { size: "3xl", weight: 700, numeric: true, children: value }) : value, direction
                 ? _jsxs(View, { style: s.tendencia, children: [_jsx(View, { style: s.seta, children: _jsx(Icon, { name: GLIFO_DA_DIRECAO[direction], size: "sm", color: cor }) }), temTendencia && textoDaTendencia] })
                 : temTendencia && textoDaTendencia] }));
 }

package/dist/estilos.d.ts

@@ -87,6 +87,7 @@ export type TomDeCor = "neutral" | "primary" | "info" | "success" | "warning" |
  * nomeia — e o dia em que um tom novo entra numa só.
  */
 export declare const acentoDoTom: (t: AureaTokens, tom: TomDeCor) => string;
+export declare const letraDoToken: (t: AureaTokens, token: string) => string | undefined;
 /**
  * O FUNDO CHEIO de um tom de estado e a letra em cima dele — o par do botão cheio (ADR-0061, 0.27.0):
  * o selo cheio é o botão cheio do mesmo tom. `primary` e `neutral` não têm o par: `undefined`, e

package/dist/estilos.js

@@ -95,6 +95,17 @@ export const acentoDoTom = (t, tom) => tom === "primary" ? t.color.primaryEmphas
             : tom === "warning" ? t.color.warning400 ?? t.color.warning
                 : tom === "danger" ? t.color.danger400 ?? t.color.destructive
                     : t.color.secondaryForeground;
+/**
+ * A cor de LETRA (e de desenho sobre a tela) de um token de cor — ADR-0061. Os quatro tokens de
+ * estado (`success`, `info`, `warning`, `destructive`) são o FUNDO cheio; quem escreve ou desenha
+ * sobre a tela usa o par `-400` de cada tema. Qualquer outro token passa como está — e é por isso
+ * que a lista é FECHADA: um `primary400` que nascesse amanhã não pode mudar o texto amarelo sem
+ * ninguém pedir. Achado na 0.28.0: o `Text` com tom e a barra do `Progress` tinham ficado de fora.
+ */
+const PAR_DE_LETRA = {
+    success: "success400", info: "info400", warning: "warning400", destructive: "danger400",
+};
+export const letraDoToken = (t, token) => (PAR_DE_LETRA[token] ? t.color[PAR_DE_LETRA[token]] : undefined) ?? t.color[token];
 /**
  * O FUNDO CHEIO de um tom de estado e a letra em cima dele — o par do botão cheio (ADR-0061, 0.27.0):
  * o selo cheio é o botão cheio do mesmo tom. `primary` e `neutral` não têm o par: `undefined`, e

package/dist/feedback.js

@@ -22,7 +22,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Animated, Easing, View } from "react-native";
 import { IconButton } from "./actions.js";
-import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel, letraDoToken } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { IconeEmMoldura } from "./moldura.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
@@ -183,7 +183,9 @@ export function Progress({ value, label, detail, tone = "brand", style, testID }
     const reduzir = useReduceMotion();
     const semTotal = value == null || Number.isNaN(value);
     const pct = semTotal ? undefined : Math.max(0, Math.min(100, value));
-    const cor = t.color[COR_DO_TOM[tone]];
+    // ADR-0061: a barra é desenho sobre a trilha, como a letra — usa o par `-400`, como a web
+    // (`.progress-tone-*`). Na 0.27.0 ela ficou com a cor de fundo cheio; achado na 0.28.0.
+    const cor = letraDoToken(t, COR_DO_TOM[tone]);
     const temApoio = detail != null && detail !== false && detail !== "";
     const emTexto = temApoio && (typeof detail === "string" || typeof detail === "number") ? String(detail) : undefined;
     // A largura do trilho, para o pedaço saber quanto andar. O `translateX` do RN não aceita

package/dist/index.d.ts

@@ -11,9 +11,9 @@ 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, } 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";
 export type { SpinnerProps, SkeletonProps, ProgressProps, AlertProps, EmptyStateProps, DataStateProps, AureaSpinnerSize, AureaAlertVariant, AureaDataStateValue, AureaProgressTone, } from "./feedback.js";
 export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.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/midia.d.ts

@@ -30,6 +30,14 @@ export interface ImageProps {
      */
     render?: React.ReactElement;
     onError?: () => void;
+    /**
+     * GAR-15 (0.28.0): a captura dentro de uma moldura de celular — GENÉRICA, sem ilha, entalhe nem
+     * botões, como na web. Com moldura, o `style` vai para a MOLDURA (tamanho e lugar); a proporção
+     * (`ratio`, padrão 9/19,5) vai para a captura.
+     */
+    frame?: "phone";
+    /** GAR-15 (0.28.0): a captura do tema escuro. No tema escuro aparece esta; no claro, a `source`. */
+    sourceDark?: AureaImageSource;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
@@ -48,7 +56,7 @@ export interface ImageProps {
  * Trocar o bitmap por uma caixa muda o que se vê, não o que a foto É — e o `role="image"` mapeia
  * nos dois sistemas (`ReactAccessibilityDelegate.kt:461`, `RCTConversions.h:96`).
  */
-export declare function Image({ source, alt, ratio, fit, fallback, fallbackIcon, render, onError, style, testID, }: ImageProps): React.JSX.Element;
+export declare function Image({ source: fonteClara, alt, ratio, fit, fallback, fallbackIcon, render, onError, frame, sourceDark, style, testID, }: ImageProps): React.JSX.Element;
 export interface AureaGalleryItem {
     id: string;
     source: AureaImageSource;

package/dist/midia.js

@@ -56,6 +56,16 @@ const folha = criarFolha((t) => ({
     },
     contain: { backgroundColor: "transparent" },
     quebrada: { alignItems: "center", justifyContent: "center" },
+    // GAR-15 (0.28.0): a moldura de celular — os mesmos tokens da web (`.image-frame-phone`): a
+    // superfície do cartão, a borda, a sombra média e o canto da folha de baixo; o de dentro acompanha.
+    moldura: {
+        padding: t.size.space2,
+        borderWidth: t.size.borderWidth, borderColor: t.color.border,
+        ...canto(t.size.radiusSheet),
+        backgroundColor: t.color.card,
+        ...(t.shadow.shadowMd ? { boxShadow: [t.shadow.shadowMd] } : null),
+    },
+    naMoldura: { ...canto(t.size.radiusSheet - t.size.space2), aspectRatio: 9 / 19.5 },
     ladrilho: { gap: t.size.space1, padding: t.size.space1, ...canto(t.size.radiusLg) },
     ladrilhoEscolhido: { backgroundColor: t.color.secondary },
 }));
@@ -93,10 +103,12 @@ const fonteDaImagem = (s) => typeof s === "string" ? { uri: s } : s;
  * Trocar o bitmap por uma caixa muda o que se vê, não o que a foto É — e o `role="image"` mapeia
  * nos dois sistemas (`ReactAccessibilityDelegate.kt:461`, `RCTConversions.h:96`).
  */
-export function Image({ source, alt, ratio, fit = "cover", fallback, fallbackIcon = "image", render, onError, style, testID, }) {
+export function Image({ source: fonteClara, alt, ratio, fit = "cover", fallback, fallbackIcon = "image", render, onError, frame, sourceDark, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const [quebrou, setQuebrou] = React.useState(false);
+    // O tema é do provider, então aqui basta escolher a fonte — não há duas imagens como na web.
+    const source = t.theme === "dark" && sourceDark ? sourceDark : fonteClara;
     // A `source` nova merece uma tentativa nova — é a mesma linha do `Avatar` (`display.tsx:283`),
     // e sem ela uma URL quebrada deixa um buraco permanente mesmo depois de o app trocar a foto.
     React.useEffect(() => { setQuebrou(false); }, [source]);
@@ -104,11 +116,14 @@ export function Image({ source, alt, ratio, fit = "cover", fallback, fallbackIco
     const caixa = [
         s.imagem,
         fit === "contain" && s.contain,
+        frame && s.naMoldura,
         proporcao != null && { aspectRatio: proporcao },
-        style,
+        !frame && style,
     ];
+    // Com moldura, a imagem vai dentro de uma caixa que leva o `style` e o `testID` do consumidor.
+    const moldar = (filho) => frame ? _jsx(View, { testID: testID, style: [s.moldura, style], children: filho }) : filho;
     if (quebrou) {
-        return (_jsx(View, { testID: testID, style: [caixa, s.quebrada], accessible: true, accessibilityRole: "image", accessibilityLabel: alt || undefined, children: fallback ?? (fallbackIcon
+        return moldar(_jsx(View, { testID: frame ? undefined : testID, style: [caixa, s.quebrada], accessible: true, accessibilityRole: "image", accessibilityLabel: alt || undefined, children: fallback ?? (fallbackIcon
                 ? _jsx(Icon, { name: fallbackIcon, size: "lg", color: t.color.mutedForeground })
                 : null) }));
     }
@@ -120,21 +135,21 @@ export function Image({ source, alt, ratio, fit = "cover", fallback, fallbackIco
         accessible: alt !== "",
         accessibilityRole: alt !== "" ? "image" : undefined,
         accessibilityLabel: alt !== "" ? alt : undefined,
-        testID,
+        testID: frame ? undefined : testID,
     };
     // `cloneElement` e não `useRender`: o idioma do Base UI não existe aqui, e o que o caso real
     // precisa é de um elemento pronto recebendo as nossas props. As props do consumidor vêm
     // primeiro no objeto do elemento e as nossas depois — `source` e `onError` são o contrato
     // deste componente, e deixá-las sobrescrevíveis seria prometer o substituto e não entregá-lo.
     if (render)
-        return React.cloneElement(render, comuns);
+        return moldar(React.cloneElement(render, comuns));
     // ⚠ O molde é `ImageStyle` e não `ViewStyle`, e a conversão é CONSCIENTE: os dois tipos só
     // divergem em duas coisas — o `overflow` do `ViewStyle` aceita `"scroll"`, que o `ImageStyle`
     // não tem, e o `ImageStyle` soma `resizeMode`/`tintColor`/`overlayColor`. **Nada aqui escreve
     // nenhuma das duas**: a folha põe largura, raio, fundo e proporção, e o `resizeMode` vai como
     // prop, ao lado. A API pública fica em `ViewStyle` de propósito — quem chama pensa em caixa, e
     // fazer o consumidor importar `ImageStyle` para passar um raio seria vazar o primitivo.
-    return _jsx(ImageRN, { ...comuns, style: caixa, resizeMode: fit });
+    return moldar(_jsx(ImageRN, { ...comuns, style: caixa, resizeMode: fit }));
 }
 /**
  * A grade de fotos, e a foto grande quando se toca.

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/strings.d.ts

@@ -60,6 +60,10 @@ export interface AureaStrings {
     confirmProceed: string;
     /** O botão que dispensa um aviso da pilha. Mesmo nome da web. */
     dismissNotification: string;
+    /** GAR-14 (0.28.0): o aviso do `Button share` quando o link foi copiado. Mesmo nome da web. */
+    linkCopied: string;
+    /** GAR-14 (0.28.0): o aviso quando nem compartilhar nem copiar deu certo. Mesmo nome da web. */
+    linkCopyFailed: string;
     /** O nome da `Table` sem `caption`. Mesmo nome — e mesmo recuo — da web. */
     tableLabel: string;
     /** O nome do `Chart` sem `label`. Mesmo nome da web. */

package/dist/strings.js

@@ -48,6 +48,8 @@ export const defaultStrings = {
     confirmCancel: "Cancel",
     confirmProceed: "Continue",
     dismissNotification: "Dismiss notification",
+    linkCopied: "Link copied",
+    linkCopyFailed: "Could not copy. Copy the link below.",
     tableLabel: "Table",
     chartLabel: "Chart",
     increment: "Increase",
@@ -96,6 +98,8 @@ export const ptBR = {
     confirmCancel: "Cancelar",
     confirmProceed: "Continuar",
     dismissNotification: "Dispensar notificação",
+    linkCopied: "Link copiado",
+    linkCopyFailed: "Não deu para copiar. Copie o link abaixo.",
     tableLabel: "Tabela",
     chartLabel: "Gráfico",
     increment: "Aumentar",

package/dist/text.d.ts

@@ -2,10 +2,10 @@ import * as React from "react";
 import { type TextProps as TextPropsRN } from "react-native";
 /** A escala dos tokens (`--text-xs` … `--text-5xl`). `md` é o corpo, como no `body` da web. */
 export type AureaTextSize = "xs" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
-/** Os quatro pesos que o pacote de fontes entrega. Ver ADR-0039: cada peso é uma FAMÍLIA. */
-export type AureaTextWeight = 400 | 500 | 600 | 700;
-/** Papel de tipografia — os três `--font-*` da Aurea. */
-export type AureaTextFont = "ui" | "editorial" | "code";
+/** Os pesos que o pacote de fontes entrega (o 800 desde a 0.28.0, GAR-16). Ver ADR-0039: cada peso é uma FAMÍLIA. */
+export type AureaTextWeight = 400 | 500 | 600 | 700 | 800;
+/** Papel de tipografia — os `--font-*` da Aurea (o `heading` desde a 0.28.0). */
+export type AureaTextFont = "ui" | "editorial" | "code" | "heading";
 /** O que a cor SIGNIFICA. Mesmo vocabulário do `tone` do Button (ADR-0044). */
 export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "link" | "danger" | "success" | "warning" | "info";
 export type AureaTextLeading = "none" | "tight" | "normal" | "relaxed";
@@ -31,6 +31,11 @@ export interface TextProps extends TextPropsRN {
     align?: "auto" | "left" | "right" | "center";
     /** Aplica o `tracking` do token. É RAZÃO de `em`: multiplicado pelo `fontSize` aqui dentro. */
     tracking?: "tight" | "normal" | "wide" | "wider" | "widest";
+    /**
+     * GAR-16 (0.28.0): algarismos da mesma largura (`fontVariant: ["tabular-nums"]`, iOS e Android) —
+     * para número que alinha em coluna ou muda na tela. Desligado por padrão, como na web.
+     */
+    numeric?: boolean;
 }
 /**
  * Texto da Aurea. Sem provider acima, `useAureaTokens` levanta — de propósito: um padrão
@@ -42,7 +47,7 @@ export interface TextProps extends TextPropsRN {
  * próprias. Pedir peso 600 por `fontWeight` devolveria o Regular sintetizado — **em silêncio**.
  * Quem escolhe a fonte aqui é o `fontFamily`, com o nome PostScript que o provider já resolveu.
  */
-export declare function Text({ type, size, weight: pesoPedido, font: fontePedida, tone, leading, italic, align, tracking: trackingPedido, style, ...rest }: TextProps): React.JSX.Element;
+export declare function Text({ type, size, weight: pesoPedido, font: fontePedida, tone, leading, italic, align, tracking: trackingPedido, numeric, style, ...rest }: TextProps): React.JSX.Element;
 export type AureaTypographyColor = "default" | "muted";
 export type AureaTypographyWeight = "normal" | "medium" | "semibold" | "bold";
 export type AureaTypographyAlign = "start" | "center" | "end" | "justify";

package/dist/text.js

@@ -21,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 //   que os tokens já publicam seria uma segunda verdade sobre tipografia.
 import * as React from "react";
 import { Text as TextRN } from "react-native";
-import { canto, criarFolha } from "./estilos.js";
+import { canto, criarFolha, letraDoToken } from "./estilos.js";
 import { useAureaTokens, useSobreAMarca } from "./theme.js";
 // 🔴 A ESCALA TEM CINCO DEGRAUS QUE SE ENXERGAM, E DEZ NOMES — ordem do Victor, 19/09/2026,
 // olhando o app no aparelho: *"o tamanho das fontes: existem variações demais, fica muito
@@ -66,7 +66,8 @@ const TAMANHO = {
 const ENTRELINHA = {
     none: "leadingNone", tight: "leadingTight", normal: "leadingNormal", relaxed: "leadingRelaxed",
 };
-const titulo = (tamanho) => ({ tamanho, peso: 600, entrelinha: "leadingTight", fonte: "ui", junto: true });
+// O título usa o papel `heading` (GAR-16, 0.28.0) — hoje a mesma fonte do texto, no mesmo peso 600.
+const titulo = (tamanho) => ({ tamanho, peso: 600, entrelinha: "leadingTight", fonte: "heading", junto: true });
 const PAPEL = {
     h1: titulo("text4xl"), h2: titulo("text3xl"), h3: titulo("text2xl"),
     h4: titulo("textXl"), h5: titulo("textLg"), h6: titulo("textBase"),
@@ -90,7 +91,10 @@ const COR = {
 const folha = criarFolha((t) => {
     const tons = {};
     for (const [tom, token] of Object.entries(COR)) {
-        tons[tom] = { color: t.color[token] ?? t.color.foreground };
+        // ADR-0061: `success`, `info`, `warning` e `destructive` são a cor de FUNDO cheio; a LETRA é o
+        // par `-400` de cada tema. Na 0.27.0 este mapa ficou de fora e o texto de tom saía com a cor de
+        // fundo — no escuro, ~2,5:1. Achado na 0.28.0; `paleta-adr0061.test.tsx` cobra.
+        tons[tom] = { color: letraDoToken(t, token) ?? t.color.foreground };
     }
     return tons;
 });
@@ -104,7 +108,7 @@ const folha = criarFolha((t) => {
  * próprias. Pedir peso 600 por `fontWeight` devolveria o Regular sintetizado — **em silêncio**.
  * Quem escolhe a fonte aqui é o `fontFamily`, com o nome PostScript que o provider já resolveu.
  */
-export function Text({ type, size, weight: pesoPedido, font: fontePedida, tone = "default", leading, italic = false, align, tracking: trackingPedido, style, ...rest }) {
+export function Text({ type, size, weight: pesoPedido, font: fontePedida, tone = "default", leading, italic = false, align, tracking: trackingPedido, numeric = false, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const sobreAMarca = useSobreAMarca();
@@ -134,13 +138,14 @@ export function Text({ type, size, weight: pesoPedido, font: fontePedida, tone =
             // É a impedância que a Etapa 2 mediu e resolveu emitindo razão em vez de dp.
             ...(tracking ? { letterSpacing: fontSize * t.tracking[`tracking${tracking[0].toUpperCase()}${tracking.slice(1)}`] } : null),
             ...(align ? { textAlign: align } : null),
+            ...(numeric ? { fontVariant: ["tabular-nums"] } : null),
             // O código leva a pele do `code` da web: fundo, canto e um recheio pequeno (a referência).
             ...(type === "code" ? {
                 alignSelf: "flex-start", backgroundColor: t.color.surface2, ...canto(t.size.radiusXs),
                 paddingHorizontal: t.size.space1, paddingVertical: t.size.space05,
             } : null),
         };
-    }, [t, type, papel, size, weight, font, leading, italic, align, tracking]);
+    }, [t, type, papel, size, weight, font, leading, italic, align, tracking, numeric]);
     // 🔴 SOBRE UMA SUPERFÍCIE DA MARCA A COR É FORÇADA, e ela vence até o tom explícito.
     // Medido contra o `primary` nos dois temas: texto comum dá **1,83 no escuro**, esmaecido
     // **1,35**, e `danger` menos ainda. **Nenhum tom alcança os 4,5 da norma sobre o amarelo** —

package/dist/theme.d.ts

@@ -1,3 +1,4 @@
+import type { AureaToastManager } from "./toast.js";
 import * as React from "react";
 import { type AureaIconRegistry } from "./icon.js";
 import { type AureaStrings } from "./strings.js";
@@ -73,6 +74,12 @@ export declare function useAureaTokens(): AureaTokens;
  * As frases visíveis. Mesmo nome do hook da web (`useAureaStrings`), tabela bem menor — ver
  * `strings.ts`.
  */
+/**
+ * O gerente de avisos do `ToastHost`, para quem não pode importar o `toast.tsx` — o `Button share`
+ * (GAR-14, 0.28.0): o `toast.tsx` importa o `IconButton`, e o botão importar o toast fecharia um
+ * ciclo. Interno: o público continua sendo o `useToast`. `null` sem `ToastHost` acima.
+ */
+export declare const AvisosContext: React.Context<AureaToastManager | null>;
 export declare function useAureaStrings(): AureaStrings;
 export interface SobreAMarcaValor {
     /** A única cor que se pode desenhar sobre a marca: letra, contorno e glifo. 4,54 nos dois temas. */
@@ -111,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,32 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Aurea nativo — o provider de tema × densidade, e os dois hooks que ele alimenta.
-//
-// ADR-0037: o motor é o `StyleSheet` puro e **esta camada é nossa**. Não há Unistyles para
-// registrar tema, então o lugar onde os dois eixos moram é um contexto do React — e a ADR foi
-// honesta sobre a única aposta que isso carrega: *"se o contexto do React, sem as otimizações do
-// Unistyles, re-renderiza a ponto de doer na troca de tema em tela real"*. Ainda não foi medido
-// em aparelho.
-//
-// UM CONTEXTO, E NÃO DOIS — e vale escrever por que, porque a primeira versão tinha dois.
-// A ideia era que quem só troca o tema assinasse um contexto "estável" e não re-renderizasse
-// junto com a tela. **Não funciona, e a razão é óbvia depois de vista:** o valor de controle
-// contém `theme` e `density`, então ele muda exatamente quando o de tokens muda. Dois contextos
-// que mudam juntos não poupam render nenhum — poupam só a impressão de estarem poupando.
-//
-// O que de fato reduz custo é o `useMemo`: entre renders que NÃO trocam eixo, os dois objetos são
-// os mesmos por identidade, e a subárvore não é notificada. É o que está feito.
-//
-// Se um dia doer em aparelho, a saída é a que a ADR-0037 já prevê — contexto fatiado de verdade,
-// com as AÇÕES separadas do ESTADO. Aí a separação compra algo, porque as ações não mudam. Não
-// está feito hoje porque seria mais superfície pública para um ganho não medido.
-//
-// PARIDADE COM A WEB, de propósito: `useAureaTheme()` devolve o mesmo `{theme, density, setTheme,
-// setDensity, toggleTheme}` do hook homônimo de `@aurea-uds/react`. Uma diferença real: lá o
-// valor pode ser `null` (no servidor o tema é desconhecido e fingir um produz erro de
-// hidratação); aqui não há SSR, então nunca é nulo.
-//
-// E `useAureaTokens()` NÃO tem par na web porque lá ele não faria sentido: o CSS resolve o token
-// no uso. Não é hook duplicado — é o hook que só o alvo sem cascata precisa ter.
+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";
@@ -73,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.
@@ -106,6 +80,12 @@ export function useAureaTokens() {
  * As frases visíveis. Mesmo nome do hook da web (`useAureaStrings`), tabela bem menor — ver
  * `strings.ts`.
  */
+/**
+ * O gerente de avisos do `ToastHost`, para quem não pode importar o `toast.tsx` — o `Button share`
+ * (GAR-14, 0.28.0): o `toast.tsx` importa o `IconButton`, e o botão importar o toast fecharia um
+ * ciclo. Interno: o público continua sendo o `useToast`. `null` sem `ToastHost` acima.
+ */
+export const AvisosContext = React.createContext(null);
 export function useAureaStrings() {
     return usar("useAureaStrings").strings;
 }
@@ -141,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/dist/toast.js

@@ -62,7 +62,7 @@ import { Icon } from "./icon.js";
 import { ICONE_DA_VARIANTE } from "./feedback.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { AvisosContext, useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
     hospedeiro: { flex: 1 },
     pilha: {
@@ -93,7 +93,9 @@ const folha = criarFolha((t) => ({
 const DURACAO_PADRAO = 5000;
 /** A entrada, nos mesmos `.28s` do `.toast` do CSS. */
 const ENTRADA = 280;
-const Ctx = React.createContext(null);
+// O contexto mora no `theme.tsx` desde a 0.28.0 (GAR-14): o `Button share` também o lê, e ele não
+// pode importar este arquivo sem fechar um ciclo (este importa o `IconButton`).
+const Ctx = AvisosContext;
 /**
  * O gerente de avisos. **Precisa de um `ToastHost` acima na árvore.**
  *

package/dist/tokens.d.ts

@@ -15,7 +15,7 @@ export type AureaShadow = {
  *
  * O que chega de fora **não** é total — ver `AureaFontInput` e `normalizarEscala`.
  */
-export type AureaFontScale = Record<400 | 500 | 600 | 700, string> & {
+export type AureaFontScale = Record<400 | 500 | 600 | 700 | 800, string> & {
     /** Só o papel `ui` tem itálico no pacote de fontes; nos outros é `undefined`. */
     italic?: string;
 };
@@ -23,14 +23,14 @@ export type AureaFontScale = Record<400 | 500 | 600 | 700, string> & {
  * O que o consumidor INJETA, e é parcial porque o pacote de fontes é parcial — medido em
  * 03/09/2026 no `@aurea-uds/fonts/native`:
  *
- *     ui         400  400i  500  600  700
+ *     ui         400  400i  500  600  700  800   ← o 800 entrou na 0.28.0 (GAR-16)
  *     editorial  400       500  600  700      ← apelido do `ui` desde a ADR-0053 (sai na 1.0)
  *     code       400       500  600           ← não há 700
  *
  * É a grade dos arquivos de fonte, não um esquecimento nosso. Até a 0.12.4 o `editorial` era a
  * IBM Plex Serif, sem 400; a ADR-0053 tirou a serifada e o deixou apontando para a Atkinson.
  */
-export type AureaFontInput = Partial<Record<"400" | "500" | "600" | "700" | "400i", string>>;
+export type AureaFontInput = Partial<Record<"400" | "500" | "600" | "700" | "800" | "400i", string>>;
 export type AureaTokens = {
     theme: AureaThemeName;
     density: AureaDensity;
@@ -43,6 +43,7 @@ export type AureaTokens = {
         ui: AureaFontScale;
         editorial: AureaFontScale;
         code: AureaFontScale;
+        heading: AureaFontScale;
     };
     /**
      * `boxShadow` do RN 0.76+ — **a primeira camada** de cada sombra. Para a sombra INTEIRA, use
@@ -66,6 +67,9 @@ export type AureaFontFamilies = {
     ui: AureaFontInput;
     editorial: AureaFontInput;
     code: AureaFontInput;
+    /** O papel do título (GAR-16, 0.28.0). Opcional: sem ele, o título usa o mapa do `ui` — que é a
+     *  mesma fonte hoje, e é o que acontece com quem ainda passa o mapa de antes da 0.28.0. */
+    heading?: AureaFontInput;
 };
 /**
  * Resolve os tokens para um par (tema, densidade). Puro e sem estado: o provider chama isto

package/dist/tokens.js

@@ -23,7 +23,7 @@ const ehSombra = (v) => typeof v === "object" && v !== null && "blurRadius" in v
 function mesclar(...grupos) {
     return Object.assign({}, ...grupos);
 }
-const PESOS = [400, 500, 600, 700];
+const PESOS = [400, 500, 600, 700, 800];
 /**
  * Fecha a grade parcial que o pacote de fontes emite numa escala TOTAL.
  *
@@ -95,6 +95,7 @@ export function resolverTokens(theme, density, fontFamilies) {
         ui: normalizarEscala(fontFamilies?.ui, texto.fontUi ?? "System"),
         editorial: normalizarEscala(fontFamilies?.editorial, texto.fontEditorial ?? "System"),
         code: normalizarEscala(fontFamilies?.code, texto.fontCode ?? "System"),
+        heading: normalizarEscala(fontFamilies?.heading ?? fontFamilies?.ui, texto.fontHeading ?? texto.fontUi ?? "System"),
     };
     return { theme, density, color, size, font, shadow, shadowLayers: { ...shadowLayers }, easing, tracking: { ...tracking }, remInDp: REM_EM_DP };
 }

package/package.json

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