@aurea-uds/native 0.27.0 → 0.28.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/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

@@ -13,7 +13,7 @@ export type { ScreenProps, AureaScreenBackground, AureaScreenEdge } from "./scre
 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 { 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/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/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. */

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 * as React from "react";
 import { useColorScheme } from "react-native";
 import { IconRegistryProvider } from "./icon.js";
@@ -106,6 +78,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;
 }

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.28.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.28.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",