@aurea-uds/native 0.25.0 → 0.27.0

package/dist/actions.js

@@ -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];
 }

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/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, 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,12 @@ 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;
+/**
+ * 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,16 @@ 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;
+/**
+ * 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

@@ -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 ─────────────────────────────────────────────────────────────────────────────
@@ -255,10 +255,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

@@ -17,7 +17,7 @@ export type { ButtonProps, IconButtonProps, LinkButtonProps, ThemeToggleProps, A
 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/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/toast.js

@@ -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,
@@ -193,10 +193,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/package.json

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