@aurea-uds/native 0.30.0 → 0.32.0

package/dist/exibicao.js

@@ -0,0 +1,457 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Aurea nativo — quatro peças que acompanham o conteúdo: `Accordion`, `ScrollShadow`,
+// `SkeletonGroup` e `PressableFeedback` (0.32.0, passo 9b).
+//
+// As quatro são as do pacote nativo da referência — anatomia, medidas, estados, comportamento e
+// acessibilidade lidos no pacote publicado dela —, com o que é da Aurea por cima: as cores do tema,
+// o canto 22 do cartão e a cápsula, a Atkinson, os ícones Phosphor, sem degradê, "menos movimento".
+//
+// Medido no pacote dela antes de escrito (a classe vira dp: `px-3` = 12, `py-4` = 16, `gap-4` = 16):
+//
+//   accordion   gatilho   linha, 16 em cima e embaixo, 12 dos lados (20 no `surface`), 16 entre as partes
+//               seta      16, gira de 0 a −180° numa mola (amortecimento 140, rigidez 1000, massa 4)
+//               resposta  12 dos lados (20 no `surface`), 16 embaixo; entra esmaecendo em 200 ms
+//               fio       entre os itens, nenhum depois do último; no `surface`, 12 de recuo dos lados
+//               surface   o cartão: fundo, canto 3xl (aqui o 22 da Aurea) e a sombra de superfície
+//   scroll-shadow         um degradê de 50 nas pontas — TROCADO por um fio (decisão do Victor, abaixo)
+//   skeleton-group        um provedor: `isLoading` e a animação para os esqueletos de dentro
+//   pressable-feedback    escala 0,985 numa peça de 300 de largura (proporcional), 300 ms
+//                         realce: camada cheia que vai a 10% em 200 ms
+//                         onda: círculo de 1,25 × a diagonal que nasce no dedo, de 750 a 2000 ms
+//
+// ⚠ O QUE NÃO VEIO, e por quê:
+//   • a mola de ALTURA do accordion (os vizinhos deslizando ao abrir). Altura não roda no motor
+//     nativo de animação, e toda animação da Aurea roda nele (`driverNativo()`, E13). A resposta
+//     entra esmaecendo, como a dela; os vizinhos descem de uma vez, e fechar é na hora.
+//   • o degradê do scroll-shadow e o da onda — a Aurea não tem degradê (CLAUDE.md §5).
+//   • `asChild` — o encaixe sem caixa própria dela não existe neste pacote.
+import * as React from "react";
+import { Animated, Easing, Pressable, View, } from "react-native";
+import { canto, comOpacidade, criarFolha, estadoAcessivel, REACAO_AO_TOQUE } from "./estilos.js";
+import { GrupoDeEsqueleto, Skeleton, usePulsoDoEsqueleto } from "./feedback.js";
+import { Icon } from "./icon.js";
+import { driverNativo, useReduceMotion } from "./movimento.js";
+import { Text } from "./text.js";
+import { useAureaTokens } from "./theme.js";
+const folha = criarFolha((t) => ({
+    // ── Accordion ──────────────────────────────────────────────────────────────────────────────
+    accordion: { flexDirection: "column" },
+    // O `surface` da referência: o cartão com a sombra de superfície (a `shadowSm` inteira, como o
+    // `Alert`). O canto é o 22 da Aurea, no lugar do 24 dela.
+    accordionSurface: { ...canto(t.size.radiusCard), backgroundColor: t.color.card, boxShadow: [...t.shadowLayers.shadowSm] },
+    // O gatilho tem o canto da cápsula sempre: é o desenho do realce de quando o dedo está em cima
+    // (decisão do Victor para a web, 11/10/2026: *"a seleção é quadrada deles quero nossa como capsula"*).
+    gatilho: {
+        flexDirection: "row", alignItems: "center", justifyContent: "space-between",
+        paddingVertical: t.size.space4, paddingHorizontal: t.size.space3, gap: t.size.space4,
+        ...canto(t.size.radiusControl),
+    },
+    gatilhoSurface: { paddingHorizontal: t.size.space5 },
+    titulo: { flex: 1, minWidth: 0 },
+    seta: { alignItems: "center", justifyContent: "center" },
+    resposta: { paddingHorizontal: t.size.space3, paddingBottom: t.size.space4 },
+    respostaSurface: { paddingHorizontal: t.size.space5 },
+    // O fio dela é o `hairlineWidth` (um pixel do aparelho: 0,33 num telefone de 3×). Aqui é a borda
+    // da Aurea, 1 — a mesma linha da web (`--border-width`), e uma que se enxerga.
+    fio: { height: t.size.borderWidth, backgroundColor: t.color.border },
+    fioSurface: { marginHorizontal: t.size.space3 },
+    inativo: { opacity: t.size.opacityDisabled },
+    // ── ScrollShadow ───────────────────────────────────────────────────────────────────────────
+    // A superfície (o padrão, 12/10/2026): a MESMA pele do `Accordion` no cartão — fundo do cartão, canto
+    // 22 e a sombra de superfície —, com o recheio dos lados dele (20) e 12 em cima e embaixo.
+    superficieDaLista: { ...canto(t.size.radiusCard), backgroundColor: t.color.card, boxShadow: [...t.shadowLayers.shadowSm],
+        paddingHorizontal: t.size.space5, paddingVertical: t.size.space3 },
+    // Dentro da superfície a janela da lista já está longe dos cantos: o fio vai de lado a lado dela.
+    fioDeCimaNaSuperficie: { left: 0, right: 0 },
+    fioDaEsquerdaNaSuperficie: { top: 0, bottom: 0 },
+    // Cresce com a caixa: quem dá altura ao `ScrollShadow` (um `flex: 1`) a dá também à lista de dentro.
+    miolo: { position: "relative", flexGrow: 1, flexShrink: 1 },
+    // No `plain` (sem caixa), o fio NÃO vai de ponta a ponta: recua o raio do cartão (22) dos dois lados e tem as pontas em
+    // cápsula (escolha do Victor, 12/10/2026, opção "A"). De ponta a ponta ele desenhava uma quina, que
+    // a Aurea não tem; recuado, ele para onde o canto de um cartão em volta começa a curvar.
+    fioDeCima: { position: "absolute", top: 0, left: t.size.radiusCard, right: t.size.radiusCard,
+        height: t.size.borderWidth, ...canto(t.size.radiusControl), backgroundColor: t.color.border },
+    fioDeBaixo: { position: "absolute", bottom: 0, left: t.size.radiusCard, right: t.size.radiusCard,
+        height: t.size.borderWidth, ...canto(t.size.radiusControl), backgroundColor: t.color.border },
+    fioDaEsquerda: { position: "absolute", left: 0, top: t.size.radiusCard, bottom: t.size.radiusCard,
+        width: t.size.borderWidth, ...canto(t.size.radiusControl), backgroundColor: t.color.border },
+    fioDaDireita: { position: "absolute", right: 0, top: t.size.radiusCard, bottom: t.size.radiusCard,
+        width: t.size.borderWidth, ...canto(t.size.radiusControl), backgroundColor: t.color.border },
+    // ── PressableFeedback ──────────────────────────────────────────────────────────────────────
+    // `overflow: hidden` é o da raiz dela: o realce e a onda ficam dentro do canto de quem usa.
+    raizDoToque: { overflow: "hidden" },
+    camada: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 },
+    onda: { position: "absolute", top: 0, left: 0 },
+}));
+/**
+ * Leva um valor animado ao `destino` quando o destino MUDA — com a animação de `criar`, ou de um
+ * salto quando não há movimento (a pessoa pediu menos, o sistema ainda não respondeu). No primeiro
+ * desenho não faz nada: o valor já nasce no lugar. E a resposta do sistema chegando depois não
+ * dispara animação nenhuma — só a troca de destino dispara.
+ */
+function useLevarA(valor, destino, semMovimento, criar) {
+    const ultimo = React.useRef(destino);
+    const corrente = React.useRef(null);
+    React.useEffect(() => () => corrente.current?.stop(), []);
+    React.useEffect(() => {
+        if (ultimo.current === destino)
+            return;
+        ultimo.current = destino;
+        corrente.current?.stop();
+        corrente.current = null;
+        if (semMovimento) {
+            valor.setValue(destino);
+            return;
+        }
+        const a = criar(destino);
+        a.start();
+        corrente.current = a;
+        // `criar` fica de fora de propósito: ele nasce a cada desenho, e o efeito só tem de rodar na troca.
+    }, [valor, destino, semMovimento]);
+}
+/** O `Easing.out(Easing.ease)` da referência, escrito como a curva que ele é: o `ease` do RN é
+ *  `bezier(0.42, 0, 1, 1)`, e o `out` o espelha. */
+const SAIDA_SUAVE = Easing.bezier(0, 0, 0.58, 1);
+// A mola da seta, a da referência. Passa do amortecimento crítico (2·√(1000·4) ≈ 126), então não
+// balança: assenta em cerca de 0,4 s.
+const MOLA_DA_SETA = { damping: 140, stiffness: 1000, mass: 4 };
+const ESMAECER_DA_RESPOSTA = 200;
+/**
+ * Seções que abrem e fecham — o accordion da referência, com a API da web (`items`, `variant`,
+ * `multiple`, `defaultValue`).
+ *
+ * Um de cada vez por padrão, e o aberto fecha no toque (o `isCollapsible` dela, ligado). O
+ * gatilho é um botão que diz se está aberto (`expanded`) dentro de um título (`header`), como o
+ * dela; a resposta fechada não está na árvore, e o leitor de tela não a lê.
+ */
+export function Accordion({ items, variant = "default", multiple = false, defaultValue, value, onValueChange, style, testID, }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const [interno, setInterno] = React.useState(defaultValue ?? []);
+    const abertos = value !== undefined ? value : interno;
+    const surface = variant === "surface";
+    const alternar = (id) => {
+        const aberto = abertos.includes(id);
+        const novo = multiple
+            ? (aberto ? abertos.filter((x) => x !== id) : [...abertos, id])
+            : (aberto ? [] : [id]);
+        if (value === undefined)
+            setInterno(novo);
+        onValueChange?.(novo);
+    };
+    return (_jsx(View, { testID: testID, style: [s.accordion, surface && s.accordionSurface, style], children: items.map((item, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx(View, { style: [s.fio, surface && s.fioSurface] }) : null, _jsx(ItemDoAccordion, { item: item, aberto: abertos.includes(item.id), surface: surface, onAlternar: alternar, testID: testID ? `${testID}-${item.id}` : undefined })] }, item.id))) }));
+}
+function ItemDoAccordion({ item, aberto, surface, onAlternar, testID }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const reduzir = useReduceMotion();
+    const inativo = !!item.disabled;
+    const giro = React.useRef(new Animated.Value(aberto ? 1 : 0)).current;
+    useLevarA(giro, aberto ? 1 : 0, reduzir !== false, (destino) => Animated.spring(giro, { toValue: destino, ...MOLA_DA_SETA, useNativeDriver: driverNativo() }));
+    // A resposta esmaece ao ABRIR. Um valor novo a cada troca, que já nasce em 0 quando vai esmaecer:
+    // zerar depois, num efeito, deixaria passar um quadro com a resposta cheia. No primeiro desenho
+    // ela nasce em 1 — o item que começa aberto não "abre".
+    const montado = React.useRef(false);
+    const entrada = React.useMemo(() => {
+        const esmaecer = montado.current && aberto && reduzir === false;
+        return { valor: new Animated.Value(esmaecer ? 0 : 1), esmaecer };
+    }, [aberto]); // só a troca: a resposta do "menos movimento" chegando depois não esmaece de novo
+    React.useEffect(() => { montado.current = true; }, []);
+    React.useEffect(() => {
+        if (!entrada.esmaecer)
+            return;
+        const a = Animated.timing(entrada.valor, {
+            toValue: 1, duration: ESMAECER_DA_RESPOSTA, easing: SAIDA_SUAVE, useNativeDriver: driverNativo(),
+        });
+        a.start();
+        return () => a.stop();
+    }, [entrada]);
+    // O realce do dedo é o da web: 3% da cor do texto, ou o cinza neutro no `surface`; e só no
+    // fechado, como lá (`:not([open])`).
+    const realce = surface ? t.color.secondary : comOpacidade(t.color.foreground, 0.03);
+    const emTexto = (n) => typeof n === "string" || typeof n === "number";
+    return (_jsxs(View, { children: [_jsx(View, { accessibilityRole: "header", children: _jsxs(Pressable, { testID: testID, disabled: inativo, 
+                    // A guarda repete o `disabled` de propósito, como o gatilho da referência: o toque que chega
+                    // por outro caminho (o leitor de tela, um teste) também não abre o item desligado.
+                    onPress: () => { if (!inativo)
+                        onAlternar(item.id); }, accessibilityRole: "button", ...estadoAcessivel({ expanded: aberto, disabled: inativo }), style: ({ pressed }) => [
+                        s.gatilho, surface && s.gatilhoSurface,
+                        pressed && !aberto && { backgroundColor: realce },
+                        inativo && s.inativo,
+                    ], children: [_jsx(View, { style: s.titulo, children: emTexto(item.title) ? _jsx(Text, { size: "sm", weight: 500, children: item.title }) : item.title }), _jsx(Animated.View, { style: [s.seta, { transform: [{ rotate: giro.interpolate({
+                                                inputRange: [0, 1], outputRange: ["0deg", "-180deg"],
+                                            }) }] }], children: _jsx(Icon, { name: "caret-down", size: "sm", color: t.color.foreground }) })] }) }), aberto ? (_jsx(Animated.View, { testID: testID ? `${testID}-content` : undefined, style: [s.resposta, surface && s.respostaSurface, { opacity: entrada.valor }], children: emTexto(item.content)
+                    ? _jsx(Text, { size: "sm", tone: "muted", leading: "relaxed", children: item.content })
+                    : item.content })) : null] }));
+}
+const ESMAECER_DO_FIO = 200;
+// O da referência: um aviso de rolagem por quadro.
+const AVISO_DE_ROLAGEM = 16;
+/**
+ * "Tem mais para lá" — o scroll-shadow da referência, com um FIO no lugar do degradê.
+ *
+ * 🔴 **Decisão do Victor:** a referência esmaece a ponta com um degradê de 50; a Aurea não tem
+ * degradê (CLAUDE.md §5). Aqui é uma linha de 1 (a borda da Aurea, na cor de borda do tema), com as
+ * pontas em cápsula, na ponta onde há mais conteúdo escondido, e SÓ lá: no topo da lista não há fio
+ * em cima; no fim, não há embaixo. Na horizontal, à esquerda e à direita.
+ *
+ * 🔴 **E a lista mora numa superfície da Aurea** (Victor, 12/10/2026: *"o ScrollShadow não é [arredondado]
+ * como todos da Aurea"*, apontando o `Accordion` no cartão): por padrão, fundo do cartão, canto 22 e a
+ * sombra de superfície — a referência não tem caixa nenhuma. `variant="plain"` tira a caixa, para dentro
+ * de um cartão; aí o fio recua 22 dos lados, para não fazer quina.
+ *
+ * Ele mede como o dela, pelos três avisos do rolador (`onLayout`, `onContentSizeChange` e
+ * `onScroll`), e entrega ao rolador os avisos que o app já tinha posto, depois dos dele. O
+ * `inverted` (a conversa, de baixo para cima) troca as pontas. O fio entra e sai esmaecendo em
+ * 200 ms; com "menos movimento", aparece e some de uma vez.
+ *
+ * ⚠ Um `onScroll` que não é função — o `Animated.event` com o motor nativo — não é repassado: o
+ * aviso dele vive no motor, e não há como chamá-lo daqui.
+ */
+export function ScrollShadow({ children, orientation, visibility = "auto", isEnabled = true, variant = "surface", style, testID, }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const reduzir = useReduceMotion();
+    const filho = React.isValidElement(children) ? children : null;
+    const p = filho?.props ?? {};
+    const horizontal = orientation ? orientation === "horizontal" : !!p.horizontal;
+    const invertido = !!p.inverted;
+    const medidas = React.useRef({ deslocamento: 0, visivel: 0, conteudo: 0 });
+    const [mais, setMais] = React.useState({ antes: false, depois: false });
+    const recalcular = () => {
+        const { deslocamento, visivel, conteudo } = medidas.current;
+        // A sobra menor que a espessura do próprio fio não conta: o arredondamento de pixel deixa o
+        // deslocamento em 0,33 com a lista parada no topo, e o fio acenderia sem nada escondido.
+        const folga = t.size.borderWidth;
+        const antes = deslocamento > folga;
+        const depois = visivel > 0 && conteudo - (deslocamento + visivel) > folga;
+        setMais((a) => (a.antes === antes && a.depois === depois ? a : { antes, depois }));
+    };
+    const comecoPode = visibility !== "none" && visibility !== "bottom" && visibility !== "right";
+    const fimPode = visibility !== "none" && visibility !== "top" && visibility !== "left";
+    const noComeco = isEnabled && comecoPode && (invertido ? mais.depois : mais.antes);
+    const noFim = isEnabled && fimPode && (invertido ? mais.antes : mais.depois);
+    const opComeco = React.useRef(new Animated.Value(0)).current;
+    const opFim = React.useRef(new Animated.Value(0)).current;
+    const esmaecer = (v) => (destino) => Animated.timing(v, { toValue: destino, duration: ESMAECER_DO_FIO, useNativeDriver: driverNativo() });
+    useLevarA(opComeco, noComeco ? 1 : 0, reduzir !== false, esmaecer(opComeco));
+    useLevarA(opFim, noFim ? 1 : 0, reduzir !== false, esmaecer(opFim));
+    if (!filho)
+        return null;
+    const rolador = React.cloneElement(filho, {
+        scrollEventThrottle: p.scrollEventThrottle ?? AVISO_DE_ROLAGEM,
+        onLayout: (e) => {
+            const { width, height } = e.nativeEvent.layout;
+            medidas.current.visivel = horizontal ? width : height;
+            recalcular();
+            p.onLayout?.(e);
+        },
+        onContentSizeChange: (w, h) => {
+            medidas.current.conteudo = horizontal ? w : h;
+            recalcular();
+            p.onContentSizeChange?.(w, h);
+        },
+        onScroll: (e) => {
+            const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+            const m = medidas.current;
+            m.deslocamento = horizontal ? contentOffset.x : contentOffset.y;
+            if (layoutMeasurement)
+                m.visivel = horizontal ? layoutMeasurement.width : layoutMeasurement.height;
+            if (contentSize)
+                m.conteudo = horizontal ? contentSize.width : contentSize.height;
+            recalcular();
+            if (typeof p.onScroll === "function")
+                p.onScroll(e);
+        },
+    });
+    // Os fios são enfeite: fora do toque e fora do leitor de tela — quem lê a lista já ouve onde está.
+    const decorativo = {
+        pointerEvents: "none",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+    };
+    const superficie = variant === "surface";
+    const noLado = superficie && (horizontal ? s.fioDaEsquerdaNaSuperficie : s.fioDeCimaNaSuperficie);
+    const fios = (_jsxs(_Fragment, { children: [_jsx(Animated.View, { ...decorativo, testID: testID ? `${testID}-start` : undefined, style: [horizontal ? s.fioDaEsquerda : s.fioDeCima, noLado, { opacity: opComeco }] }), _jsx(Animated.View, { ...decorativo, testID: testID ? `${testID}-end` : undefined, style: [horizontal ? s.fioDaDireita : s.fioDeBaixo, noLado, { opacity: opFim }] })] }));
+    if (!superficie) {
+        return _jsxs(View, { testID: testID, style: style, children: [rolador, fios] });
+    }
+    // Na superfície, os fios ficam na borda da JANELA da lista (o miolo), e não na da caixa.
+    return (_jsx(View, { testID: testID, style: [s.superficieDaLista, style], children: _jsxs(View, { style: s.miolo, children: [rolador, fios] }) }));
+}
+/**
+ * Um comando para vários esqueletos — o skeleton-group da referência. O `isLoading` e a `animation`
+ * descem para todo `Skeleton` de dentro (a qualquer profundidade), e cada um pode trocar o seu.
+ *
+ * O PULSO é um só, do grupo: as caixas sobem e descem juntas, em vez de cada uma no tempo em que
+ * montou. `SkeletonGroup.Item` é o próprio `Skeleton` — o nome existe porque a referência o tem.
+ */
+function SkeletonGroupRaiz({ children, isLoading = true, isSkeletonOnly = false, animation = "pulse", style, testID, }) {
+    const pulso = usePulsoDoEsqueleto(isLoading && animation === "pulse");
+    const valor = React.useMemo(() => ({ isLoading, animation, pulso }), [isLoading, animation, pulso]);
+    if (isSkeletonOnly && !isLoading)
+        return null;
+    return (_jsx(GrupoDeEsqueleto.Provider, { value: valor, children: _jsx(View, { testID: testID, style: style, children: children }) }));
+}
+export const SkeletonGroup = Object.assign(SkeletonGroupRaiz, { Item: Skeleton });
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// PressableFeedback
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// Os números da referência.
+const ESCALA_PRESSIONADA = 0.985;
+const LARGURA_DE_REFERENCIA = 300; // a peça de 300 encolhe 0,985; a de 600, metade disso
+const DURACAO_DA_ESCALA = 300;
+const OPACIDADE_DO_REALCE = 0.1;
+const DURACAO_DO_REALCE = 200;
+const FATOR_DO_RAIO = 1.25; // o círculo da onda: 1,25 × a diagonal da peça
+const DIAGONAL_DE_REFERENCIA = 450; // a onda de 1000 ms é a de uma peça com 450 de diagonal
+const DURACAO_DA_ONDA = 1000;
+const DURACAO_MINIMA_DA_ONDA = 750;
+/** O quanto a peça encolhe: `escala` numa peça de 300; mais larga, menos; mais estreita, mais. */
+const alvoDaEscala = (escala, largura) => 1 - (1 - escala) * (largura > 0 ? LARGURA_DE_REFERENCIA / largura : 1);
+const Toque = React.createContext(null);
+function useToque(peca) {
+    const v = React.useContext(Toque);
+    if (!v)
+        throw new Error(`Aurea ${peca}: use dentro de um PressableFeedback.`);
+    return v;
+}
+// A raiz é o `Pressable` ANIMADO, como o dela: a escala vai no próprio alvo do toque, com o fundo e
+// a borda de quem usa junto. Criado no primeiro desenho, e não ao importar o módulo — importar o
+// pacote não pode depender de uma função de animação existir (o dublê dos testes não a tem).
+const criarPressionavel = () => Animated.createAnimatedComponent(Pressable);
+let pressionavelAnimado = null;
+/**
+ * Um alvo de toque que responde — o pressable-feedback da referência. Por padrão a peça inteira
+ * encolhe um pouco com o dedo em cima (0,985 numa peça de 300, proporcional à largura, em 300 ms).
+ * Dentro dele, três partes que se combinam: `PressableFeedback.Highlight` (a camada que acende),
+ * `PressableFeedback.Ripple` (a onda que nasce no dedo) e `PressableFeedback.Scale` (a escala num
+ * filho só).
+ *
+ * É um botão para o leitor de tela (`accessibilityRole` troca). Com "menos movimento" a escala e o
+ * realce SALTAM em vez de deslizar — como o `Button` da Aurea, que salta para 0,97 —, e a onda vira
+ * uma camada parada.
+ *
+ * ⚠ Ele é UM elemento para o leitor de tela: não ponha botão dentro (no iPhone, o de dentro some —
+ * o `check 43`). O que vai dentro é conteúdo.
+ */
+function PressableFeedbackRaiz({ children, isDisabled = false, animation = true, scale = ESCALA_PRESSIONADA, style, onLayout, onPressIn, onPressOut, accessibilityRole, accessibilityState, ...resto }) {
+    const s = folha(useAureaTokens());
+    const reduzir = useReduceMotion();
+    const [pressionado, setPressionado] = React.useState(false);
+    const [medida, setMedida] = React.useState({ largura: 0, altura: 0 });
+    const tudoParado = animation === "disable-all";
+    const comEscala = animation !== false && !tudoParado;
+    const escala = React.useRef(new Animated.Value(1)).current;
+    useLevarA(escala, pressionado && comEscala ? alvoDaEscala(scale, medida.largura) : 1, reduzir !== false, (destino) => Animated.timing(escala, {
+        toValue: destino, duration: DURACAO_DA_ESCALA, easing: SAIDA_SUAVE, useNativeDriver: driverNativo(),
+    }));
+    const contexto = React.useMemo(() => ({ pressionado, largura: medida.largura, altura: medida.altura, tudoParado }), [pressionado, medida, tudoParado]);
+    const Raiz = (pressionavelAnimado ??= criarPressionavel());
+    return (_jsx(Toque.Provider, { value: contexto, children: _jsx(Raiz, { ...resto, disabled: isDisabled, accessibilityRole: accessibilityRole ?? "button", ...estadoAcessivel({ ...accessibilityState, disabled: isDisabled }), onLayout: (e) => {
+                const { width, height } = e.nativeEvent.layout;
+                setMedida((m) => (m.largura === width && m.altura === height ? m : { largura: width, altura: height }));
+                onLayout?.(e);
+            }, onPressIn: (e) => { setPressionado(true); onPressIn?.(e); }, onPressOut: (e) => { setPressionado(false); onPressOut?.(e); }, style: [s.raizDoToque, isDisabled && REACAO_AO_TOQUE.inerte,
+                comEscala && { transform: [{ scale: escala }] }, style], children: children }) }));
+}
+/** A escala num filho só — com `animation={false}` na raiz, para não encolher duas vezes. */
+function EscalaDoToque({ children, scale = ESCALA_PRESSIONADA, animation = true, style, testID }) {
+    const toque = useToque("PressableFeedback.Scale");
+    const reduzir = useReduceMotion();
+    const ligado = animation && !toque.tudoParado;
+    const valor = React.useRef(new Animated.Value(1)).current;
+    useLevarA(valor, toque.pressionado && ligado ? alvoDaEscala(scale, toque.largura) : 1, reduzir !== false, (destino) => Animated.timing(valor, {
+        toValue: destino, duration: DURACAO_DA_ESCALA, easing: SAIDA_SUAVE, useNativeDriver: driverNativo(),
+    }));
+    return (_jsx(Animated.View, { testID: testID, style: [ligado && { transform: [{ scale: valor }] }, style], children: children }));
+}
+/** A camada que acende com o dedo em cima (o toque do iPhone): cobre a peça e vai a 10% em 200 ms. */
+function RealceDoToque({ color, opacity = OPACIDADE_DO_REALCE, animation = true, style, testID }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const toque = useToque("PressableFeedback.Highlight");
+    const reduzir = useReduceMotion();
+    const ligado = animation && !toque.tudoParado;
+    const valor = React.useRef(new Animated.Value(0)).current;
+    useLevarA(valor, toque.pressionado && ligado ? opacity : 0, reduzir !== false, (destino) => Animated.timing(valor, { toValue: destino, duration: DURACAO_DO_REALCE, useNativeDriver: driverNativo() }));
+    if (!ligado)
+        return null;
+    return (_jsx(Animated.View, { testID: testID, pointerEvents: "none", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [s.camada, { backgroundColor: color ?? t.color.foreground, opacity: valor }, style] }));
+}
+/**
+ * A onda que nasce no dedo (o toque do Android): um círculo de 1,25 × a diagonal da peça, que
+ * cresce de 0 até cobrir tudo e some ao soltar. Duas camadas que se revezam, como na referência: o
+ * toque novo começa numa camada limpa enquanto a anterior termina de sumir, e a onda não pisca.
+ *
+ * Círculo cheio, de UMA cor — a dela é um degradê do centro para fora, e a Aurea não tem degradê.
+ * Com "menos movimento" ela não cresce: acende inteira ao tocar e apaga ao soltar.
+ */
+function OndaDoToque({ color, opacity = OPACIDADE_DO_REALCE, animation = true, style, testID }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const toque = useToque("PressableFeedback.Ripple");
+    const reduzir = useReduceMotion();
+    const ligado = animation && !toque.tudoParado;
+    const camadas = React.useRef([0, 1].map(() => ({
+        x: new Animated.Value(0), y: new Animated.Value(0), progresso: new Animated.Value(0), viva: false, animacao: null,
+    }))).current;
+    const ativa = React.useRef(0);
+    React.useEffect(() => () => camadas.forEach((c) => c.animacao?.stop()), [camadas]);
+    const diagonal = Math.hypot(toque.largura, toque.altura);
+    const raio = diagonal * FATOR_DO_RAIO;
+    // A duração acompanha o tamanho: 1000 ms numa diagonal de 450, nunca menos de 750 nem mais de 2000.
+    const duracao = Math.min(Math.max(DURACAO_DA_ONDA * (diagonal > 0 ? diagonal / DIAGONAL_DE_REFERENCIA : 1), DURACAO_MINIMA_DA_ONDA), DURACAO_DA_ONDA * 2);
+    const levar = (c, destino) => {
+        c.animacao?.stop();
+        c.animacao = null;
+        if (reduzir !== false) {
+            c.progresso.setValue(destino);
+            return;
+        }
+        const a = Animated.timing(c.progresso, { toValue: destino, duration: duracao, useNativeDriver: driverNativo() });
+        a.start();
+        c.animacao = a;
+    };
+    const tocou = (e) => {
+        if (!ligado)
+            return;
+        const anterior = camadas[ativa.current];
+        // Só a onda que ainda está no ar termina de sumir; a camada parada em 0 iria a 2 passando pelo
+        // pico, e piscaria no lugar antigo. A que já foi solta segue o próprio caminho até 2.
+        if (anterior.viva) {
+            anterior.viva = false;
+            levar(anterior, 2);
+        }
+        ativa.current = 1 - ativa.current;
+        const nova = camadas[ativa.current];
+        nova.animacao?.stop();
+        nova.x.setValue(e.nativeEvent.locationX - raio);
+        nova.y.setValue(e.nativeEvent.locationY - raio);
+        nova.progresso.setValue(0);
+        nova.viva = true;
+        levar(nova, 1);
+    };
+    const soltou = () => {
+        const c = camadas[ativa.current];
+        if (ligado && c.viva) {
+            c.viva = false;
+            levar(c, 2);
+        }
+    };
+    if (!ligado)
+        return null;
+    return (_jsx(View, { testID: testID, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", onTouchStart: tocou, onTouchEnd: soltou, onTouchCancel: soltou, style: [s.camada, style], children: camadas.map((c, i) => (_jsx(Animated.View, { pointerEvents: "none", style: [s.onda, {
+                    width: raio * 2, height: raio * 2, ...canto(raio), backgroundColor: color ?? t.color.foreground,
+                    opacity: c.progresso.interpolate({ inputRange: [0, 1, 2], outputRange: [0, opacity, 0] }),
+                    transform: [
+                        { translateX: c.x }, { translateY: c.y },
+                        { scale: c.progresso.interpolate({ inputRange: [0, 1, 2], outputRange: [0, 1, 1] }) },
+                    ],
+                }] }, i))) }));
+}
+export const PressableFeedback = Object.assign(PressableFeedbackRaiz, {
+    Scale: EscalaDoToque,
+    Highlight: RealceDoToque,
+    Ripple: OndaDoToque,
+});

package/dist/feedback.d.ts

@@ -1,10 +1,13 @@
 import * as React from "react";
-import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { Animated, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
 import { type IconName, type AureaIcon } from "./icon.js";
 import { type AureaUniversalState } from "./strings.js";
 export type AureaSpinnerSize = "sm" | "md" | "lg";
 export interface SpinnerProps {
-    /** `sm` é o padrão, como na web (`.spinner` sem modificador usa `--icon-sm`). */
+    /**
+     * 16 · 24 · 32, e o padrão é o `md` (24) — a escala do pacote nativo da referência (0.32.0).
+     * Até a 0.31.0 era 16 · 20 · 24, com o `sm` de padrão, como a web.
+     */
     size?: AureaSpinnerSize;
     /** O que o leitor de tela anuncia. Sem ele, a frase `loading` do provider. */
     label?: string;
@@ -22,6 +25,9 @@ export interface SpinnerProps {
  * "algo está acontecendo" continua vendo o rótulo.
  */
 export declare function Spinner({ size, label, decorative, style, testID }: SpinnerProps): React.JSX.Element;
+/** O pulso (`"pulse"`, o padrão) ou a caixa parada (`"none"`) — os nomes da web (0.32.0). O brilho que
+ *  corre da referência ("shimmer") é degradê, e degradê a Aurea não tem. */
+export type AureaSkeletonAnimation = "pulse" | "none";
 export interface SkeletonProps {
     /** Padrão: ocupa a largura disponível. */
     width?: number | `${number}%`;
@@ -30,7 +36,36 @@ export interface SkeletonProps {
     radius?: number;
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * 0.32.0: `false` troca a caixa pelo conteúdo de verdade (`children`) — o `isLoading` da referência.
+     * Padrão: `true`, a caixa de sempre. Dentro de um `SkeletonGroup`, sem este, vale o do grupo.
+     */
+    isLoading?: boolean;
+    /** O conteúdo que aparece no lugar da caixa quando `isLoading` é `false`. */
+    children?: React.ReactNode;
+    /** `"none"` deixa a caixa parada, como na web. Dentro de um `SkeletonGroup`, sem este, vale o do grupo. */
+    animation?: AureaSkeletonAnimation;
+}
+/**
+ * O que o `SkeletonGroup` manda para os esqueletos de dentro: o `isLoading` e a `animation` do grupo,
+ * e o PULSO — um valor só, e por isso todos sobem e descem juntos, em vez de cada um no seu tempo.
+ *
+ * Mora aqui, ao lado do `Skeleton`, porque é ele quem lê. O grupo (`exibicao.tsx`) importa daqui;
+ * o contrário fecharia um ciclo de importação entre os dois arquivos. Ferramenta de dentro: não sai
+ * pela porta da frente do pacote.
+ */
+export interface GrupoDeEsqueletoValor {
+    isLoading: boolean;
+    animation: AureaSkeletonAnimation;
+    pulso: Animated.Value;
 }
+export declare const GrupoDeEsqueleto: React.Context<GrupoDeEsqueletoValor | null>;
+/**
+ * O pulso do esqueleto: liga só quando `ativo`, e só depois de o sistema dizer que pode mexer.
+ * Desligado, a opacidade volta a 1 — um laço parado no meio deixaria a caixa meio apagada.
+ * O `SkeletonGroup` usa o mesmo, uma vez para o grupo inteiro.
+ */
+export declare function usePulsoDoEsqueleto(ativo: boolean): Animated.Value;
 /**
  * A caixa cinza que pulsa enquanto o dado não chega.
  *
@@ -41,8 +76,13 @@ export interface SkeletonProps {
  *
  * Ele é **invisível para o leitor de tela** (`aria-hidden` na web, `accessibilityElementsHidden`
  * aqui): anunciar "caixa" três vezes enquanto a tela carrega não ajuda ninguém.
+ *
+ * 0.32.0: o `isLoading` e os `children` da referência. Com `isLoading={false}` a caixa sai e o
+ * conteúdo entra, num esmaecer da duração lenta da Aurea (a referência usa o esmaecer padrão do
+ * motor dela); com "menos movimento", ou no primeiro desenho, ele entra sem esmaecer. Sem as props
+ * novas, nada muda: é a caixa de sempre.
  */
-export declare function Skeleton({ width, height, radius, style, testID }: SkeletonProps): React.JSX.Element;
+export declare function Skeleton({ width, height, radius, style, testID, isLoading, children, animation }: SkeletonProps): React.JSX.Element;
 /** O tom da barra: a mesma lista fechada do `tone` do `Button`. Pausado é `neutral`; falha é `danger`. */
 export type AureaProgressTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
 export interface ProgressProps {
@@ -137,6 +177,10 @@ export interface DataStateProps extends Omit<ViewProps, "children"> {
     action?: React.ReactNode;
     /** Função para o conteúdo caro não ser construído enquanto o estado o esconde. */
     children: React.ReactNode | (() => React.ReactNode);
+    /** A barreira de erro (MNT-25): o que quebrar ao desenhar o conteúdo vira a cara de erro, com "Tentar de novo". */
+    catchErrors?: boolean;
+    /** Recebe o erro que a barreira pegou — para o app registrar. */
+    onCatch?: (error: unknown, info: React.ErrorInfo) => void;
 }
 /**
  * A região que troca de cara. **Ela não desenha nada próprio** — empilha o que já existe.
@@ -146,4 +190,4 @@ export interface DataStateProps extends Omit<ViewProps, "children"> {
  * dado está aí e tem ressalva — esconder o dado seria trocar informação parcial por informação
  * nenhuma. Só `loading`, `error` e `empty` tomam o lugar.
  */
-export declare function DataState({ state, message, skeleton, emptyTitle, emptyIcon, action, children, style, ...rest }: DataStateProps): React.JSX.Element;
+export declare function DataState({ catchErrors, onCatch, ...props }: DataStateProps): React.JSX.Element;