@aurea-uds/native 0.25.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",
 };
@@ -61,9 +61,11 @@ function pintar(t, tone) {
         // invenção: o `Input` já usa esse token para a borda de inválido.
         // O `solido` continua no `destructive`, porque ali ele é FUNDO e o texto por cima é claro.
         danger: { solido: t.color.destructive, texto: t.color.destructiveForeground, sobre: t.color.danger400 ?? t.color.destructive },
-        success: { solido: t.color.success, texto: t.color.successForeground, sobre: t.color.success },
-        warning: { solido: t.color.warning, texto: t.color.warningForeground, sobre: t.color.warning },
-        info: { solido: t.color.info, texto: t.color.infoForeground, sobre: t.color.info },
+        // `sobre` é a LETRA do tom em cima da superfície (contorno, fantasma): o par `-400`. Desde a
+        // 0.27.0 (ADR-0061) o `success`/`warning`/`info` é o fundo cheio, fundo demais para letra no escuro.
+        success: { solido: t.color.success, texto: t.color.successForeground, sobre: t.color.success400 ?? t.color.success },
+        warning: { solido: t.color.warning, texto: t.color.warningForeground, sobre: t.color.warning400 ?? t.color.warning },
+        info: { solido: t.color.info, texto: t.color.infoForeground, sobre: t.color.info400 ?? t.color.info },
     };
     return m[tone];
 }
@@ -135,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.
  *
@@ -148,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);
@@ -166,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"
@@ -210,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);
@@ -223,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.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-import type { AureaBadgeTone } from "./display.js";
+import type { AureaBadgeCategory, AureaBadgeTone } from "./display.js";
 import type { AureaIcon } from "./icon.js";
 type Virtualizavel = {
     /** Vira `FlatList`. ⚠ Então este componente é o rolador — não o ponha dentro de `<Screen scroll>`. */
@@ -18,7 +18,7 @@ export type AureaTimelineItem = {
      */
     icon?: AureaIcon;
     /** A cor da moldura, com o vocabulário do `Badge`. Sem `icon`, não faz nada. Padrão: `neutral`. */
-    tone?: AureaBadgeTone;
+    tone?: Exclude<AureaBadgeTone, AureaBadgeCategory>;
     /** O que vai à DIREITA do título — um valor, um selo. */
     trailing?: React.ReactNode;
     /**

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

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { type ImageSourcePropType, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { type TomDeCor } from "./estilos.js";
 import { type AureaUniversalState } from "./strings.js";
-export type AureaBadgeTone = "neutral" | "primary" | "info" | "success" | "warning" | "danger";
+/**
+ * GAR-07 (ADR-0060, 09/10/2026): as oito cores de CATEGORIA — marcam grupo, não estado ("Motos",
+ * "Carros"). As mesmas da web, com os mesmos nomes; o amarelo fica de fora porque é da marca.
+ */
+export type AureaBadgeCategory = "red" | "orange" | "green" | "teal" | "cyan" | "blue" | "violet" | "pink";
+export type AureaBadgeTone = TomDeCor | AureaBadgeCategory;
 export type AureaBadgeEmphasis = "soft" | "outline" | "solid";
 export type AureaBadgeSize = "xs" | "sm" | "md" | "lg";
 export type AureaBadgeAnchor = "top-end" | "top-start" | "bottom-end" | "bottom-start";
@@ -93,14 +99,29 @@ export interface AvatarProps {
  * `source` muda. Sem isso, uma URL quebrada deixa um buraco cinza permanente na lista.
  */
 export declare function Avatar({ source, alt, fallback, size, style, testID }: AvatarProps): React.JSX.Element;
+/** GAR-09 (ADR-0060, 09/10/2026): para onde a métrica foi. Os mesmos nomes da web. */
+export type AureaKPIDirection = "up" | "down" | "flat";
+export type AureaKPITone = "success" | "danger" | "neutral";
+export type AureaKPIVariant = "card" | "plain";
 export interface KPIProps extends ViewProps {
     label: React.ReactNode;
     value: React.ReactNode;
     trend?: React.ReactNode;
+    /**
+     * Para onde foi. Desenha a seta (`trend-up`, `trend-down`, `minus` — o app registra os três, como
+     * todo glifo do nativo), pinta a tendência e põe a palavra no nome que o leitor de tela ouve.
+     */
+    direction?: AureaKPIDirection;
+    /** A cor da tendência. Padrão: alta = `success`, baixa = `danger`, estável = `neutral`. */
+    tone?: AureaKPITone;
+    /** A palavra do leitor de tela. Padrão em inglês, como na web: "Up", "Down", "No change". */
+    directionLabel?: string;
+    /** `plain` tira o cartão: o número dentro de um cartão que já existe (MNT-04). */
+    variant?: AureaKPIVariant;
 }
 /**
  * Um número com nome. **É um `Card`** — medido em `markup.tsx:105`, e não no CSS, que só mostra
- * a coluna.
+ * a coluna. Com `variant="plain"`, é só a coluna.
  *
  * A ficha da web declara `role="group"`, e **o React Native não tem esse papel** — medido na lista
  * de `accessibilityRole`, que vai de `button` a `toolbar` e não inclui `group`. O que ele tem é
@@ -109,5 +130,11 @@ export interface KPIProps extends ViewProps {
  *
  * Inventar `accessibilityRole="summary"` porque o nome parece próximo seria pior que não ter papel:
  * `summary` tem significado próprio (o resumo de um bloco expansível) e diria uma coisa errada.
+ *
+ * Com `direction`, o nome do nó é escrito aqui (rótulo, número, palavra e tendência), porque a seta
+ * é desenho e não tem texto para o leitor juntar — a web resolve com o `.sr-only`, que o nativo não
+ * tem. Só quando as partes são texto; com nó próprio, o app dá o `accessibilityLabel`.
+ *
+ * O número em `3xl` e a tendência em `sm` desde a `0.26.0`: os mesmos da web (`0.24.1`).
  */
-export declare function KPI({ label, value, trend, style, ...rest }: KPIProps): React.JSX.Element;
+export declare function KPI({ label, value, trend, direction, tone, directionLabel, variant, style, ...rest }: KPIProps): React.JSX.Element;

package/dist/display.js

@@ -24,9 +24,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Image, View } from "react-native";
 import { IconButton, folgaDoToque } from "./actions.js";
-import { canto, acentoDoTom, criarFolha, fundoDoTom } from "./estilos.js";
+import { canto, acentoDoTom, criarFolha, fundoDoTom, preenchimentoDoTom } from "./estilos.js";
 import { Card } from "./layout.js";
 import { gravidadeDoEstado } from "./strings.js";
+import { Icon } from "./icon.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -79,7 +80,11 @@ const folha = criarFolha((t) => ({
     },
     imagem: { width: "100%", height: "100%" },
     // ── KPI ────────────────────────────────────────────────────────────────────────────────────
-    kpi: { gap: 5 },
+    kpi: { gap: t.size.space1 },
+    // A seta fica na PRIMEIRA linha (quando a tendência quebra, `center` a deixava entre as duas):
+    // a caixa dela tem a altura de uma linha do texto `sm` (que no telefone é o `textBase`, ADR-0050).
+    tendencia: { flexDirection: "row", alignItems: "flex-start", gap: t.size.space1 },
+    seta: { height: t.size.textBase * t.size.leadingNormal, justifyContent: "center" },
 }));
 /** `count > max ? `${max}+` : String(count)` — a mesma linha do `markup.tsx:140`. */
 export const formatarContagem = (count, max = 99) => count > max ? `${max}+` : String(count);
@@ -107,16 +112,20 @@ const LETRA_DO_SELO = (t, size) => size === "lg" ? { fontSize: t.size.textBase,
 export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, count, max = 99, showZero, leading, trailing, fit = "auto", anchor, badgeContent, invisible, children, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const acento = acentoDoTom(t, tone);
-    const fundo = fundoDoTom(t, tone);
+    const categoria = ehCategoria(tone) ? coresDaCategoria(t)[tone] : null;
+    const acento = categoria ? categoria[0] : acentoDoTom(t, tone);
+    const fundo = categoria ? categoria[1] : fundoDoTom(t, tone);
+    // O selo cheio de ESTADO é o botão cheio do mesmo tom (a cor funda e a letra dele); categoria,
+    // marca e neutro enchem com o acento, como antes.
+    const cheio = categoria ? undefined : preenchimentoDoTom(t, tone);
     const pele = emphasis === "solid"
-        ? { backgroundColor: acento, borderColor: "transparent" }
+        ? { backgroundColor: cheio ? cheio[0] : acento, borderColor: "transparent" }
         : emphasis === "outline"
             ? { backgroundColor: "transparent", borderColor: acento }
             : tone === "neutral"
                 ? {}
                 : { backgroundColor: fundo, borderColor: acento };
-    const corDoTexto = emphasis === "solid" ? t.color.background
+    const corDoTexto = emphasis === "solid" ? (cheio ? cheio[1] : t.color.background)
         : tone === "neutral" ? t.color.secondaryForeground : acento;
     const numero = count != null ? formatarContagem(count, max) : undefined;
     const miolo = anchor ? (numero ?? badgeContent) : (numero ?? children);
@@ -161,6 +170,24 @@ export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, c
     const escondido = invisible || (count === 0 && !showZero) || (miolo == null && !dot);
     return _jsxs(View, { style: s.ancora, ...rest, children: [children, !escondido && selo] });
 }
+const CATEGORIAS = new Set(["red", "orange", "green", "teal", "cyan", "blue", "violet", "pink"]);
+const ehCategoria = (tom) => CATEGORIAS.has(tom);
+/**
+ * O acento e o fundo suave de cada categoria — os tokens `--category-*` e `--category-*-bg`, os
+ * mesmos da web. Ficam AQUI, e não no `acentoDoTom`, de propósito: a moldura do ícone (R-15, R-18)
+ * usa aquele mapa, e as categorias são do selo; levá-las para lá abriria a `Timeline` a cores que
+ * a da web não tem.
+ */
+const coresDaCategoria = (t) => ({
+    red: [t.color.categoryRed, t.color.categoryRedBg],
+    orange: [t.color.categoryOrange, t.color.categoryOrangeBg],
+    green: [t.color.categoryGreen, t.color.categoryGreenBg],
+    teal: [t.color.categoryTeal, t.color.categoryTealBg],
+    cyan: [t.color.categoryCyan, t.color.categoryCyanBg],
+    blue: [t.color.categoryBlue, t.color.categoryBlueBg],
+    violet: [t.color.categoryViolet, t.color.categoryVioletBg],
+    pink: [t.color.categoryPink, t.color.categoryPinkBg],
+});
 /** O mínimo do selo preso, da referência principal: 16 no `xs` e no `sm`, 28 no `md`, 32 no `lg`. */
 const MINIMO_PRESO = (t, size) => size === "lg" ? t.size.space8 : size === "md" ? t.size.space7 : t.size.space4;
 /**
@@ -197,10 +224,10 @@ export function Status({ variant, state, children, style, ...rest }) {
     // Mesma linha do `feedback-client.tsx:34`: `offline` é ele mesmo; o resto vira a gravidade.
     const v = variant
         ?? (state ? (state === "offline" ? "offline" : gravidadeDoEstado(state)) : "neutral");
-    const cor = v === "online" || v === "success" ? t.color.success
-        : v === "away" || v === "warning" ? t.color.warning
+    const cor = v === "online" || v === "success" ? (t.color.success400 ?? t.color.success)
+        : v === "away" || v === "warning" ? (t.color.warning400 ?? t.color.warning)
             : v === "busy" || v === "danger" ? (t.color.danger400 ?? t.color.destructive)
-                : v === "info" ? t.color.info
+                : v === "info" ? (t.color.info400 ?? t.color.info)
                     : v === "offline" ? t.color.subtleForeground
                         : t.color.mutedForeground;
     const rotulo = children ?? (state ? strings.universalState[state] : null);
@@ -236,9 +263,13 @@ export function Avatar({ source, alt, fallback, size = "md", style, testID }) {
                 ? _jsx(Text, { size: size === "sm" ? "xs" : "md", weight: 700, children: fallback })
                 : fallback }));
 }
+const TOM_DA_DIRECAO = { up: "success", down: "danger", flat: "neutral" };
+const PALAVRA_DA_DIRECAO = { up: "Up", down: "Down", flat: "No change" };
+const GLIFO_DA_DIRECAO = { up: "trend-up", down: "trend-down", flat: "minus" };
+const comoTexto = (n) => typeof n === "string" || typeof n === "number" ? String(n) : null;
 /**
  * Um número com nome. **É um `Card`** — medido em `markup.tsx:105`, e não no CSS, que só mostra
- * a coluna.
+ * a coluna. Com `variant="plain"`, é só a coluna.
  *
  * A ficha da web declara `role="group"`, e **o React Native não tem esse papel** — medido na lista
  * de `accessibilityRole`, que vai de `button` a `toolbar` e não inclui `group`. O que ele tem é
@@ -247,10 +278,30 @@ export function Avatar({ source, alt, fallback, size = "md", style, testID }) {
  *
  * Inventar `accessibilityRole="summary"` porque o nome parece próximo seria pior que não ter papel:
  * `summary` tem significado próprio (o resumo de um bloco expansível) e diria uma coisa errada.
+ *
+ * Com `direction`, o nome do nó é escrito aqui (rótulo, número, palavra e tendência), porque a seta
+ * é desenho e não tem texto para o leitor juntar — a web resolve com o `.sr-only`, que o nativo não
+ * tem. Só quando as partes são texto; com nó próprio, o app dá o `accessibilityLabel`.
+ *
+ * O número em `3xl` e a tendência em `sm` desde a `0.26.0`: os mesmos da web (`0.24.1`).
  */
-export function KPI({ label, value, trend, style, ...rest }) {
-    const s = folha(useAureaTokens());
-    return (_jsxs(Card, { style: [s.kpi, style], accessible: true, ...rest, children: [typeof label === "string" ? _jsx(Text, { size: "sm", tone: "muted", children: label }) : label, typeof value === "string" || typeof value === "number"
-                ? _jsx(Text, { size: "2xl", weight: 700, children: value }) : value, trend != null && (typeof trend === "string"
-                ? _jsx(Text, { size: "xs", tone: "muted", children: trend }) : trend)] }));
+export function KPI({ label, value, trend, direction, tone, directionLabel, variant = "card", style, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const tom = direction ? (tone ?? TOM_DA_DIRECAO[direction]) : undefined;
+    const cor = tom === "success" ? (t.color.success400 ?? t.color.success)
+        : tom === "danger" ? (t.color.danger400 ?? t.color.destructive)
+            : t.color.mutedForeground;
+    const palavra = direction ? (directionLabel ?? PALAVRA_DA_DIRECAO[direction]) : undefined;
+    const temTendencia = trend != null && trend !== false && trend !== "";
+    const textoDaTendencia = typeof trend === "string" || typeof trend === "number"
+        ? _jsx(Text, { size: "sm", tone: direction ? undefined : "muted", style: direction ? { color: cor } : undefined, children: trend })
+        : trend;
+    const partes = [comoTexto(label), comoTexto(value), palavra ?? "", temTendencia ? comoTexto(trend) : ""];
+    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, 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,13 @@ 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
+ * quem chama enche com o acento, como antes.
+ */
+export declare const preenchimentoDoTom: (t: AureaTokens, tom: TomDeCor) => [string, string] | undefined;
 /** O fundo SUAVE de um tom (`--<tom>-bg`). `primary` e `neutral` não têm token: `undefined`. */
 export declare const fundoDoTom: (t: AureaTokens, tom: TomDeCor) => string | undefined;
 /**

package/dist/estilos.js

@@ -95,6 +95,27 @@ 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
+ * quem chama enche com o acento, como antes.
+ */
+export const preenchimentoDoTom = (t, tom) => tom === "success" ? [t.color.success, t.color.successForeground]
+    : tom === "warning" ? [t.color.warning, t.color.warningForeground]
+        : tom === "info" ? [t.color.info, t.color.infoForeground]
+            : tom === "danger" ? [t.color.destructive, t.color.destructiveForeground]
+                : undefined;
 /** O fundo SUAVE de um tom (`--<tom>-bg`). `primary` e `neutral` não têm token: `undefined`. */
 export const fundoDoTom = (t, tom) => tom === "info" ? t.color.infoBg
     : tom === "success" ? t.color.successBg

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";
@@ -72,9 +72,9 @@ const folha = criarFolha((t) => ({
         flex: 1, minWidth: 0,
         flexDirection: "row", alignItems: "flex-start", gap: t.size.space3,
     },
-    alerta_info: { backgroundColor: t.color.infoBg, borderColor: t.color.info },
-    alerta_success: { backgroundColor: t.color.successBg, borderColor: t.color.success },
-    alerta_warning: { backgroundColor: t.color.warningBg, borderColor: t.color.warning },
+    alerta_info: { backgroundColor: t.color.infoBg, borderColor: t.color.info400 ?? t.color.info },
+    alerta_success: { backgroundColor: t.color.successBg, borderColor: t.color.success400 ?? t.color.success },
+    alerta_warning: { backgroundColor: t.color.warningBg, borderColor: t.color.warning400 ?? t.color.warning },
     alerta_danger: { backgroundColor: t.color.dangerBg, borderColor: t.color.danger400 ?? t.color.destructive },
     corpoDoAlerta: { flex: 1, gap: 2 },
     // ── EmptyState ─────────────────────────────────────────────────────────────────────────────
@@ -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
@@ -255,10 +257,10 @@ accessibilityLabel, accessibilityHint, ...rest }) {
     const s = folha(t);
     const strings = useAureaStrings();
     const v = variant ?? (state ? gravidadeDoEstado(state) : "info");
-    const corDoIcone = v === "success" ? t.color.success
-        : v === "warning" ? t.color.warning
+    const corDoIcone = v === "success" ? (t.color.success400 ?? t.color.success)
+        : v === "warning" ? (t.color.warning400 ?? t.color.warning)
             : v === "danger" ? (t.color.danger400 ?? t.color.destructive)
-                : t.color.info;
+                : (t.color.info400 ?? t.color.info);
     return (_jsxs(View
     // Android: a região viva é o que faz o leitor falar sem foco, e ela cobre a moldura
     // inteira de propósito — o que muda é o conteúdo, e o "X" some junto quando o aviso fecha.

package/dist/index.d.ts

@@ -13,11 +13,11 @@ 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";
-export type { BadgeProps, StatusProps, AvatarProps, KPIProps, AureaBadgeAnchor, AureaBadgeEmphasis, AureaBadgeFit, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
+export type { BadgeProps, StatusProps, AvatarProps, KPIProps, AureaKPIDirection, AureaKPITone, AureaKPIVariant, AureaBadgeAnchor, AureaBadgeCategory, AureaBadgeEmphasis, AureaBadgeFit, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
 export { useAureaStrings } from "./theme.js";
 export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from "./strings.js";
 export type { AureaStrings, AureaUniversalState } from "./strings.js";

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

@@ -49,6 +49,9 @@ const folha = criarFolha((t) => ({
         ...canto(t.size.radiusControl), backgroundColor: t.color.fieldBg,
     },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
+    // No navegador o texto e o ícone vão numa caixa escondida do leitor de tela (E16): a mesma
+    // fileira do gatilho, ocupando a largura dele.
+    mioloWeb: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
     desabilitado: { opacity: t.size.opacityDisabled },
     // R-22 (02/10/2026), a "B" da prancha: miniatura QUADRADA de 64 — o `Avatar` `lg` da
     // referência, e a medida que o botão de pôr foto passou a ter também (era 72, número à mão) — e o X
@@ -73,6 +76,46 @@ const folha = criarFolha((t) => ({
 /** Quanto o X do `PhotoInput` sai da foto: metade do desenho (30) mais metade do alvo (44). */
 const foraDoX = (t) => (t.size.controlHSm + Math.max(t.size.controlHSm, t.size.targetMin)) / 2;
 const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
+// E16 (09/10/2026) · NO NAVEGADOR, o calendário "deles" é o do NAVEGADOR. A biblioteca de data não
+// tem versão web: o arquivo genérico dela devolve `null` e só avisa no console — tocar no campo não
+// abria nada (achado do app rodando no `react-native-web`). A saída é o `<input type="date">` do
+// próprio navegador, INVISÍVEL e POR CIMA do nosso gatilho: a pele continua a nossa, o toque cai no
+// campo do navegador, e é ele que o leitor de tela anuncia. Por cima, e não escondido e aberto por
+// código, porque o `showPicker()` não existe no Safari do iPhone (dados de compatibilidade do MDN,
+// 8.1.5): lá quem abre o seletor é o toque no próprio campo. No computador, o clique chama o
+// `showPicker()` (Chrome e Edge 99, Firefox 101, Safari 17.4).
+// E o ícone de calendário do próprio campo, esticado sobre ele inteiro: o clique vira um clique de
+// verdade no ícone, e o navegador abre o seletor SEM o `showPicker()`. É o que vale dentro de uma
+// página de outro endereço (moldura), onde o Chrome recusa o `showPicker()` — medido: "called from
+// cross-origin iframe". O pseudo-elemento só existe no Chrome, no Edge e no Safari; o Firefox já
+// abre o seletor no clique. O React 19 (o mínimo do pacote) põe a regra no topo da página UMA vez.
+const REGRA_DO_CAMPO_WEB = "input[data-aurea-campo-data]::-webkit-calendar-picker-indicator{"
+    + "position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}";
+const doisDigitos = (n) => String(n).padStart(2, "0");
+/** A data no formato do campo do navegador: `AAAA-MM-DD` (data) ou `HH:MM` (hora), no fuso local. */
+const paraCampoWeb = (d, mode) => mode === "time"
+    ? `${doisDigitos(d.getHours())}:${doisDigitos(d.getMinutes())}`
+    : `${d.getFullYear()}-${doisDigitos(d.getMonth() + 1)}-${doisDigitos(d.getDate())}`;
+/**
+ * O texto do campo de volta para `Date`, mexendo só no que o campo escolhe: a data mantém a hora de
+ * `base`, e a hora mantém a data — como o seletor do aparelho, que parte do `value` (ou de agora).
+ * Texto incompleto ou vazio (a pessoa apagou) não vira data: `undefined`, e `onChange` não é chamado.
+ */
+const doCampoWeb = (texto, mode, base) => {
+    const d = new Date(base.getTime());
+    if (mode === "time") {
+        const m = /^(\d{2}):(\d{2})/.exec(texto);
+        if (!m)
+            return undefined;
+        d.setHours(Number(m[1]), Number(m[2]), 0, 0);
+        return d;
+    }
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(texto);
+    if (!m)
+        return undefined;
+    d.setFullYear(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    return d;
+};
 /**
  * O campo de data — **a nossa pele, o calendário DELES**.
  *
@@ -119,14 +162,52 @@ export function DatePicker({ value, onChange, mode = "date", minimumDate, maximu
         setAbertoNoIOS(true);
     }, [value, mode, minimumDate, maximumDate, receber]);
     const mostrarSeletorIOS = abertoNoIOS && Platform.OS !== "android";
-    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : abrir, disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value ? texto : undefined }, ...estadoAcessivel({ disabled: !!inativo }), style: [
-                    s.gatilho,
-                    { height: alturaDoTamanho(t, tam),
-                        paddingHorizontal: tam === "sm" ? t.size.space3 : tam === "lg" ? t.size.space4 : 13 },
-                    campo?.invalido && s.invalido,
-                    inativo && s.desabilitado,
-                    style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, children: texto }), icon && _jsx(Icon, { name: icon, size: "sm", color: t.color.subtleForeground })] }), mostrarSeletorIOS && (_jsx(RNDateTimePicker, { value: value ?? new Date(), mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, onChange: receber }))] }));
+    const conteudo = (_jsxs(_Fragment, { children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, children: texto }), icon && _jsx(Icon, { name: icon, size: "sm", color: t.color.subtleForeground })] }));
+    const pele = [
+        s.gatilho,
+        { height: alturaDoTamanho(t, tam),
+            paddingHorizontal: tam === "sm" ? t.size.space3 : tam === "lg" ? t.size.space4 : 13 },
+        campo?.invalido && s.invalido,
+        inativo && s.desabilitado,
+        style,
+    ];
+    if (Platform.OS === "web") {
+        // O gatilho vira só desenho: sem toque, fora do Tab e escondido do leitor de tela. Quem recebe
+        // o toque, o foco e o nome é o campo do navegador, por cima dele.
+        const campoDoNavegador = React.createElement("input", {
+            type: mode === "time" ? "time" : "date",
+            value: value ? paraCampoWeb(value, mode) : "",
+            min: minimumDate && mode === "date" ? paraCampoWeb(minimumDate, mode) : undefined,
+            max: maximumDate && mode === "date" ? paraCampoWeb(maximumDate, mode) : undefined,
+            disabled: inativo,
+            "aria-label": campo?.label ?? (value ? texto : placeholder ?? strings.datePlaceholder),
+            "aria-invalid": campo?.invalido || undefined,
+            "aria-description": campo?.hint,
+            "data-testid": testID ? `${testID}-campo` : undefined,
+            "data-aurea-campo-data": "",
+            onChange: (e) => {
+                const data = doCampoWeb(e.currentTarget.value, mode, value ?? new Date());
+                if (data)
+                    onChange?.(data);
+            },
+            onClick: (e) => {
+                // Sem `showPicker` (Safari do iPhone) o próprio toque já abriu o seletor; e ele pode
+                // recusar (página dentro de outra), caso em que o campo continua lá, focado.
+                try {
+                    e.currentTarget.showPicker?.();
+                }
+                catch { /* o toque no campo basta */ }
+            },
+            style: {
+                position: "absolute", top: 0, left: 0, width: "100%", height: "100%", margin: 0,
+                padding: 0, border: 0, opacity: 0, cursor: inativo ? "default" : "pointer",
+                // O calendário do navegador segue o tema da Aurea, e não o do sistema operacional.
+                colorScheme: t.theme,
+            },
+        });
+        return (_jsxs(Pressable, { testID: testID, disabled: inativo, focusable: false, style: pele, children: [_jsx(View, { importantForAccessibility: "no-hide-descendants", style: s.mioloWeb, children: conteudo }), React.createElement("style", { href: "aurea-campo-data", precedence: "default" }, REGRA_DO_CAMPO_WEB), campoDoNavegador] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { testID: testID, onPress: inativo ? undefined : abrir, disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value ? texto : undefined }, ...estadoAcessivel({ disabled: !!inativo }), style: pele, children: conteudo }), mostrarSeletorIOS && (_jsx(RNDateTimePicker, { value: value ?? new Date(), mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, onChange: receber }))] }));
 }
 // R-23 (06/10/2026) · a data em que a foto foi tirada, e NADA MAIS do EXIF.
 //

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: {
@@ -81,9 +81,9 @@ const folha = criarFolha((t) => ({
         ...(t.shadow.shadowMd ? { boxShadow: [t.shadow.shadowMd] } : null),
     },
     texto: { flex: 1, minWidth: 0, gap: 2 },
-    aviso_info: { backgroundColor: t.color.infoBg, borderColor: t.color.info },
-    aviso_success: { backgroundColor: t.color.successBg, borderColor: t.color.success },
-    aviso_warning: { backgroundColor: t.color.warningBg, borderColor: t.color.warning },
+    aviso_info: { backgroundColor: t.color.infoBg, borderColor: t.color.info400 ?? t.color.info },
+    aviso_success: { backgroundColor: t.color.successBg, borderColor: t.color.success400 ?? t.color.success },
+    aviso_warning: { backgroundColor: t.color.warningBg, borderColor: t.color.warning400 ?? t.color.warning },
     aviso_danger: {
         backgroundColor: t.color.dangerBg,
         borderColor: t.color.danger400 ?? t.color.destructive,
@@ -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.**
  *
@@ -193,10 +195,10 @@ export function Toast({ toast, onClose }) {
         laco.start();
         return () => laco.stop();
     }, [reduzir, entrada, t.easing.easeEmphasized]);
-    const corDoIcone = tipo === "success" ? t.color.success
-        : tipo === "warning" ? t.color.warning
+    const corDoIcone = tipo === "success" ? (t.color.success400 ?? t.color.success)
+        : tipo === "warning" ? (t.color.warning400 ?? t.color.warning)
             : tipo === "danger" ? (t.color.danger400 ?? t.color.destructive)
-                : t.color.info;
+                : (t.color.info400 ?? t.color.info);
     const glifo = toast.icon === false ? null : (toast.icon ?? ICONE_DA_VARIANTE[tipo]);
     return (_jsxs(Animated.View, { accessible: true, ...(tipo === "danger" ? { accessibilityRole: "alert" } : null), accessibilityLiveRegion: tipo === "danger" ? "assertive" : "polite", style: [
             s.aviso, s[`aviso_${tipo}`],

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.25.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.25.0"
+    "@aurea-uds/tokens": "^0.28.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",