@aurea-uds/native 0.30.0 → 0.32.0

package/dist/menu.js

@@ -0,0 +1,452 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Aurea nativo — `Popover` e `DropdownMenu`: a camada que abre PRESA ao gatilho (0.32.0).
+//
+// Os nomes e a API são os da web (`overlays.tsx` do `@aurea-uds/react`): `trigger` é um elemento,
+// `side` escolhe o lado, `arrow` liga a seta do `Popover`, e o menu recebe `items` na MESMA união
+// `MenuEntry`. A anatomia, as medidas e o comportamento são os do pacote NATIVO da referência (o
+// `Popover` e o `Menu` dela); a pele é a da Aurea — fundo `popover`, borda, canto 22 e sombra LG, a
+// mesma superfície do `Dialog`.
+//
+// ── O QUE MUDA NA TRAVESSIA ──────────────────────────────────────────────────────────────────
+//   a web (Base UI)               |  aqui
+//   ------------------------------|------------------------------------------------------------
+//   portal + posicionador         |  o `Modal` do RN (a janela de cima, sem dependência nova) e a
+//                                 |  conta de posição nossa, a partir do `measureInWindow` do gatilho
+//   `Escape` fecha                |  `onRequestClose` (o VOLTAR do Android) e `onAccessibilityEscape`
+//                                 |  (o gesto de saída do VoiceOver, que o `Modal` não ouve)
+//   clique fora fecha             |  o fundo tocável, IRMÃO do painel — a lição do `overlays.tsx`
+//   submenu ao lado               |  abre NO LUGAR, dentro do mesmo painel, como o da referência:
+//                                 |  num telefone não há "ao lado"
+//   `menuitemcheckbox`/`radio`    |  `checkbox` e `radio`: o RN não tem os papéis de menu com marca
+//
+// ⚠ **A posição não está medida em aparelho.** O `measureInWindow` do gatilho e o `Modal` com
+// `statusBarTranslucent` precisam contar do MESMO zero (o topo da tela). Com a tela de ponta a ponta
+// do Android (o padrão das versões novas) contam; num app sem ela, o painel pode sair deslocado pela
+// altura da barra de status. É pergunta para o `apps/native-smoke`, não para o dublê.
+import * as React from "react";
+import { Animated, Easing, Linking, Modal, Pressable, ScrollView, View, useWindowDimensions, } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
+import { canto, criarFolha, estadoAcessivel, letraDoToken } from "./estilos.js";
+import { Icon } from "./icon.js";
+import { Text } from "./text.js";
+import { ForaDaMarca, useTokensDoApp } from "./theme.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// A folha
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// Medidas do pacote nativo da referência, escritas com o token que dá o mesmo número. Onde a escala
+// da Aurea não tem o número dela, vale o token mais perto, e a linha diz qual era.
+const folha = criarFolha((t) => ({
+    camada: { flex: 1 },
+    fundoDeToque: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
+    painel: {
+        position: "absolute",
+        backgroundColor: t.color.popover,
+        borderWidth: t.size.borderWidth, borderColor: t.color.border,
+        ...canto(t.size.radiusCard),
+        boxShadow: [...t.shadowLayers.shadowLg],
+    },
+    // O `Popover` da referência: 12 em cima e embaixo, 16 dos lados.
+    painelPopover: { paddingVertical: t.size.space3, paddingHorizontal: t.size.space4 },
+    // O `Menu` da referência: 12 em cima e embaixo; dos lados ela usa 6, que a escala não tem — vale
+    // o `space1` (4), o recheio do `.menu` da web. O texto do item continua a 16 da borda (4 + 12).
+    painelMenu: { paddingVertical: t.size.space3, paddingHorizontal: t.size.space1 },
+    // O título do `Popover`: 18 em peso médio (no componente), e 4 até o corpo — o `gap-1` do exemplo
+    // da referência.
+    titulo: { marginBottom: t.size.space1 },
+    // A lista rola quando passa da janela; sem crescer, para o painel ter o tamanho do conteúdo.
+    rolagem: { flexGrow: 0, flexShrink: 1 },
+    // O item: 8 em cima e embaixo, como o dela. Dos lados ela usa 10 e entre as peças 10, que a escala
+    // não tem: aqui 12 (o texto fica a 16 da borda, o mesmo número dela) e 8. ⚠ A altura dela é 40
+    // (8 + a linha de 24 + 8); aqui o mínimo é o `targetMin` (44), e não `hitSlop` — o `actions.tsx`
+    // mediu que o TalkBack não enxerga o `hitSlop`.
+    item: {
+        minHeight: t.size.targetMin, flexDirection: "row", alignItems: "center",
+        gap: t.size.space2, paddingVertical: t.size.space2, paddingHorizontal: t.size.space3,
+        ...canto(t.size.radiusLg),
+    },
+    // O toque: o fundo de destaque do `.menu-item` da web (`surface-3`) e o 0,98 da referência; no item
+    // que destrói, o fundo suave do perigo, como o dela.
+    itemTocando: { backgroundColor: t.color.surface3, transform: [{ scale: 0.98 }] },
+    itemTocandoPerigo: { backgroundColor: t.color.dangerBg, transform: [{ scale: 0.98 }] },
+    desabilitado: { opacity: t.size.opacityDisabled },
+    // Cresce, mas sem `flex: 1`: com base zero, num painel que tem a largura do conteúdo, o rótulo
+    // não empurraria a largura e quebraria letra a letra.
+    rotulo: { flexGrow: 1, flexShrink: 1, minWidth: 0 },
+    // A casa da marca: a caixa de 20 do indicador da referência, com o `check` de 16 — a mesma do
+    // `Select`. Largura FIXA, como o `.menu-mark` da web: o rótulo não anda quando a marca aparece.
+    indicador: { width: t.size.iconMd, height: t.size.iconMd, alignItems: "center", justifyContent: "center" },
+    // O ponto do rádio: 8, o da referência e o `.menu-ponto` da web. Forma, não ícone.
+    ponto: {
+        width: t.size.space2, height: t.size.space2, ...canto(t.size.radiusFull),
+        backgroundColor: t.color.primaryEmphasis,
+    },
+    // O rótulo de seção: 14 em peso médio e esmaecido (no componente), alinhado ao texto dos itens.
+    rotuloDoGrupo: { paddingHorizontal: t.size.space3, paddingTop: t.size.space2, paddingBottom: t.size.space1 },
+    separador: {
+        height: t.size.borderWidth, marginVertical: t.size.space2, marginHorizontal: t.size.space2,
+        backgroundColor: t.color.border,
+    },
+    // O submenu aberto é uma superfície acima do menu, como o da referência: o fundo, a linha e a
+    // sombra numa camada própria ATRÁS das linhas. Ela nasce já pintada (montada só com o submenu
+    // aberto) — caixa que ganha cor depois de montada perde o raio no Android (react-native#52415).
+    fundoDoSubmenu: {
+        position: "absolute", top: 0, right: 0, bottom: 0, left: 0,
+        backgroundColor: t.color.popover,
+        borderWidth: t.size.borderWidth, borderColor: t.color.border,
+        ...canto(t.size.radiusLg),
+        boxShadow: [...t.shadowLayers.shadowMd],
+    },
+}));
+// A seta do `Popover`: a da referência tem 20 de largura e 12 de altura (`space5` × `space3`).
+const larguraDaSeta = (t) => t.size.space5;
+const alturaDaSeta = (t) => t.size.space3;
+const preso = (v, min, max) => Math.max(min, Math.min(v, max));
+/**
+ * Onde o painel fica. Centrado no gatilho, como o da referência (o alinhamento padrão dela e o da
+ * web), e preso dentro da janela com o recuo.
+ *
+ * ⚠ **Ele VIRA de lado quando não cabe e o outro lado tem mais espaço** — o que o posicionador da
+ * web faz. A referência não vira: só empurra o painel para dentro da tela, e um menu pedido para
+ * baixo num gatilho no pé da tela acaba EM CIMA do gatilho. Depois de virar, ele ainda é preso à
+ * janela, como o dela.
+ */
+function posicionar(a, c, W, H, r, d, pedido) {
+    const vertical = pedido === "top" || pedido === "bottom";
+    let lado = pedido;
+    if (vertical) {
+        const baixo = H - r.bottom - (a.y + a.height + d);
+        const cima = a.y - d - r.top;
+        if (pedido === "bottom" && c.height > baixo && cima > baixo)
+            lado = "top";
+        if (pedido === "top" && c.height > cima && baixo > cima)
+            lado = "bottom";
+    }
+    else {
+        const direita = W - r.right - (a.x + a.width + d);
+        const esquerda = a.x - d - r.left;
+        if (pedido === "right" && c.width > direita && esquerda > direita)
+            lado = "left";
+        if (pedido === "left" && c.width > esquerda && direita > esquerda)
+            lado = "right";
+    }
+    const left = vertical ? a.x + a.width / 2 - c.width / 2
+        : lado === "right" ? a.x + a.width + d : a.x - d - c.width;
+    const top = !vertical ? a.y + a.height / 2 - c.height / 2
+        : lado === "bottom" ? a.y + a.height + d : a.y - d - c.height;
+    return {
+        lado,
+        left: preso(left, r.left, W - r.right - c.width),
+        top: preso(top, r.top, H - r.bottom - c.height),
+    };
+}
+/**
+ * O gatilho da web é um ELEMENTO (`render={trigger}` no Base UI); aqui ele é clonado com o toque que
+ * abre, a REF que mede e o estado `expanded` — o toque do app continua valendo, depois do nosso.
+ *
+ * ⚠ **A medida vem da ref**, e o `Button` e o `IconButton` da Aurea a levam até o `Pressable` (no
+ * React 19 a `ref` é prop). Um gatilho que a engula ainda abre: cai no `currentTarget` do toque e,
+ * sem ele, no PONTO do dedo — o painel abre onde a pessoa tocou, em vez de não abrir.
+ */
+function useCamada(trigger, aoFecharTambem) {
+    const [aberto, setAberto] = React.useState(false);
+    const [ancora, setAncora] = React.useState(null);
+    const [tamanho, setTamanho] = React.useState(null);
+    const no = React.useRef(null);
+    const { width: W, height: H } = useWindowDimensions();
+    const props = trigger.props;
+    const refOriginal = props.ref;
+    const medir = React.useCallback((e) => {
+        const alvo = no.current ?? e?.currentTarget;
+        if (alvo && typeof alvo.measureInWindow === "function") {
+            alvo.measureInWindow((x, y, width, height) => {
+                if ([x, y, width, height].every(Number.isFinite))
+                    setAncora({ x, y, width, height });
+            });
+            return;
+        }
+        const toque = e?.nativeEvent;
+        if (toque)
+            setAncora({ x: toque.pageX, y: toque.pageY, width: 0, height: 0 });
+    }, []);
+    // A janela girou (ou mudou de tamanho) com a camada aberta: o gatilho andou, mede de novo.
+    // Só a janela entra na lista: abrir já mede no toque, e medir de novo ao abrir seria dobrado.
+    const abertoAgora = React.useRef(aberto);
+    abertoAgora.current = aberto;
+    React.useEffect(() => { if (abertoAgora.current)
+        medir(); }, [W, H, medir]);
+    const fechar = React.useCallback(() => {
+        setAberto(false);
+        setAncora(null);
+        setTamanho(null);
+        aoFecharTambem?.();
+    }, [aoFecharTambem]);
+    const aoMedirPainel = React.useCallback((e) => {
+        const { width, height } = e.nativeEvent.layout;
+        // Mudar `left`/`top` dispara outro `onLayout` com o MESMO tamanho; sem a comparação, laço.
+        setTamanho((antes) => antes && antes.width === width && antes.height === height ? antes : { width, height });
+    }, []);
+    const ref = React.useCallback((n) => {
+        no.current = n ?? null;
+        if (typeof refOriginal === "function")
+            refOriginal(n);
+        else if (refOriginal && typeof refOriginal === "object")
+            refOriginal.current = n;
+    }, [refOriginal]);
+    const doApp = props.onPress;
+    const tocar = React.useCallback((e) => {
+        medir(e);
+        setAberto(true);
+        doApp?.(e);
+    }, [medir, doApp]);
+    // O estado do gatilho é ESCRITO por cima do que o botão calculou (o `...rest` dele vem depois),
+    // então o `disabled` e o `pressed` dele entram de novo aqui, para não se perderem.
+    const estado = {
+        ...props.accessibilityState,
+        ...(props.disabled != null ? { disabled: !!props.disabled } : null),
+        ...(props.pressed !== undefined ? { checked: props.pressed } : null),
+        expanded: aberto,
+    };
+    const gatilho = React.cloneElement(trigger, {
+        ref, onPress: tocar, accessibilityState: estado, "aria-expanded": aberto,
+    });
+    return { aberto, ancora, tamanho, fechar, aoMedirPainel, gatilho };
+}
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// A camada: o `Modal`, o fundo tocável, o painel e a seta
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+const SEM_RECUO = { top: 0, right: 0, bottom: 0, left: 0 };
+/**
+ * A entrada é a da referência: o painel nasce invisível, é MEDIDO, vai para o lugar e só então
+ * aparece — opacidade de 0 a 1, escala de 0,97 a 1 e um passo de 8 vindo do gatilho, no `durationBase`
+ * (a dela é 200; a escala de duração da Aurea tem 180). A saída é imediata: o `Modal` some na hora.
+ */
+function CamadaPresa({ c, side, seta = false, menu = false, label, testID, children }) {
+    // A camada sai do fluxo: o FUNDO é pintado com os tokens do APP (ADR-0063 — ver `useTokensDoApp`).
+    // O texto e o ícone de dentro leem o tema do app sozinhos, porque estão dentro do `ForaDaMarca`.
+    const tf = useTokensDoApp();
+    const s = folha(tf);
+    const { width: W, height: H } = useWindowDimensions();
+    const reduzir = useReduceMotion();
+    // O recuo da janela é o da referência (12) somado à área do sistema — do CONTEXTO, que atravessa o
+    // `Modal`; sem `SafeAreaProvider`, a medida da abertura (o mesmo caminho do `RecuoDaFolha`).
+    const sa = React.useContext(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets ?? SEM_RECUO;
+    const recuo = {
+        top: tf.size.space3 + sa.top, right: tf.size.space3 + sa.right,
+        bottom: tf.size.space3 + sa.bottom, left: tf.size.space3 + sa.left,
+    };
+    // A distância do gatilho: a referência usa 9, que a escala não tem — vale o `space2` (8), o mesmo
+    // do `Popover` da web. Com a seta, a altura dela: a ponta encosta no gatilho, sem passar por cima.
+    const distancia = seta ? alturaDaSeta(tf) : tf.size.space2;
+    const pronto = c.aberto && c.ancora != null && c.tamanho != null;
+    const pos = pronto ? posicionar(c.ancora, c.tamanho, W, H, recuo, distancia, side) : null;
+    const progresso = React.useRef(new Animated.Value(0)).current;
+    React.useEffect(() => {
+        if (!pronto) {
+            progresso.setValue(0);
+            return;
+        }
+        // `!== false`, e não `=== true`: enquanto o sistema não respondeu, não anima (ver `movimento.ts`).
+        if (reduzir !== false) {
+            progresso.setValue(1);
+            return;
+        }
+        const laco = Animated.timing(progresso, {
+            toValue: 1, duration: tf.size.durationBase, useNativeDriver: driverNativo(),
+            easing: Easing.bezier(...tf.easing.easeStandard),
+        });
+        laco.start();
+        return () => laco.stop();
+    }, [pronto, reduzir, progresso, tf.size.durationBase, tf.easing.easeStandard]);
+    // O passo vem do lado do gatilho: abaixo dele, o painel desce; acima, sobe. O da referência é a
+    // distância, no máximo 12.
+    const passo = Math.min(distancia, alturaDaSeta(tf));
+    const de = pos && (pos.lado === "bottom" || pos.lado === "right") ? -passo : passo;
+    const desloca = progresso.interpolate({ inputRange: [0, 1], outputRange: [de, 0] });
+    const entrada = pos
+        ? {
+            left: pos.left, top: pos.top, opacity: progresso,
+            transform: [
+                pos.lado === "top" || pos.lado === "bottom" ? { translateY: desloca } : { translateX: desloca },
+                { scale: progresso.interpolate({ inputRange: [0, 1], outputRange: [0.97, 1] }) },
+            ],
+        }
+        // Antes de medido, invisível: é a medida dele que diz onde ele vai.
+        : { opacity: 0 };
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: c.aberto, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: c.fechar, testID: testID, children: c.aberto ? (_jsxs(View, { style: s.camada, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: c.fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { testID: testID ? `${testID}-painel` : undefined, onLayout: c.aoMedirPainel, onAccessibilityEscape: c.fechar, pointerEvents: pos ? "auto" : "none", accessibilityRole: menu ? "menu" : undefined, accessibilityLabel: label, style: [
+                            s.painel, menu ? s.painelMenu : s.painelPopover,
+                            { left: recuo.left, top: recuo.top,
+                                maxWidth: W - recuo.left - recuo.right, maxHeight: H - recuo.top - recuo.bottom },
+                            entrada,
+                        ], children: [seta && pos && c.ancora && c.tamanho
+                                ? _jsx(Seta, { tf: tf, lado: pos.lado, ancora: c.ancora, painel: { ...c.tamanho, x: pos.left, y: pos.top } })
+                                : null, children] })] })) : null }) }));
+}
+/**
+ * A seta: a medida e o lugar da referência (20 × 12, apontando para o MEIO do gatilho, a 12 das
+ * pontas do painel); o desenho é o da seta da web, uma curva só, e não um triângulo de bico.
+ * O fundo cobre a borda do painel embaixo dela, e o traço continua a borda.
+ */
+function Seta({ tf, lado, ancora, painel }) {
+    const w = larguraDaSeta(tf);
+    const h = alturaDaSeta(tf);
+    const b = tf.size.borderWidth;
+    const meio = b / 2; // o bico recua meio traço, para o traço não ser cortado pela caixa
+    const vertical = lado === "top" || lado === "bottom";
+    // Ao longo da borda, contado de dentro dela (o absoluto do RN conta da caixa de recheio).
+    const ao = vertical
+        ? preso(ancora.x + ancora.width / 2 - painel.x - b - w / 2, tf.size.space3, painel.width - 2 * b - w - tf.size.space3)
+        : preso(ancora.y + ancora.height / 2 - painel.y - b - w / 2, tf.size.space3, painel.height - 2 * b - w - tf.size.space3);
+    // A curva: o ponto de controle a DUAS profundidades da base deixa o bico exatamente na ponta.
+    const linha = lado === "bottom" ? `M0 ${h} Q${w / 2} ${2 * meio - h} ${w} ${h}` // painel embaixo: aponta para cima
+        : lado === "top" ? `M0 0 Q${w / 2} ${2 * (h - meio)} ${w} 0` // painel em cima: para baixo
+            : lado === "right" ? `M${h} 0 Q${2 * meio - h} ${w / 2} ${h} ${w}` // painel à direita: para a esquerda
+                : `M0 0 Q${2 * (h - meio)} ${w / 2} 0 ${w}`; // painel à esquerda: para a direita
+    const lugar = lado === "bottom" ? { top: -h, left: ao }
+        : lado === "top" ? { bottom: -h, left: ao }
+            : lado === "right" ? { left: -h, top: ao }
+                : { right: -h, top: ao };
+    return (_jsx(View, { pointerEvents: "none", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [{ position: "absolute" }, lugar], children: _jsxs(Svg, { width: vertical ? w : h, height: vertical ? h : w, children: [_jsx(Path, { d: `${linha} Z`, fill: tf.color.popover }), _jsx(Path, { d: linha, fill: "none", stroke: tf.color.border, strokeWidth: b, strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+}
+/**
+ * A janela pequena presa ao gatilho: abre no toque, fecha no toque fora e no VOLTAR.
+ *
+ * ⚠ **Sem papel de diálogo**, pela razão medida no `overlays.tsx`: `role="dialog"` não mapeia em
+ * plataforma nenhuma. O confinamento do leitor de tela vem do `Modal`, que é uma janela do sistema;
+ * o nome vem do título, que é um cabeçalho. No iOS, o gesto de saída do VoiceOver fecha.
+ */
+export function Popover({ trigger, title, children, side = "bottom", arrow = false, testID }) {
+    const c = useCamada(trigger);
+    return (_jsxs(_Fragment, { children: [c.gatilho, _jsxs(CamadaPresa, { c: c, side: side, seta: arrow, testID: testID, children: [_jsx(TituloDoPopover, { title: title }), typeof children === "string" ? _jsx(Text, { size: "md", tone: "muted", children: children }) : children] })] }));
+}
+function TituloDoPopover({ title }) {
+    const s = folha(useTokensDoApp());
+    if (title == null || title === false)
+        return null;
+    return _jsx(Text, { size: "lg", weight: 500, accessibilityRole: "header", style: s.titulo, children: title });
+}
+// Com um submenu aberto, o resto do menu esmaece e não responde, como o da referência: o que está
+// fora do caminho aberto. A chave de cada entrada é o caminho dela (`3/1/0`).
+const apagado = (k, aberto) => aberto != null && k !== aberto && !k.startsWith(`${aberto}/`) && !aberto.startsWith(`${k}/`);
+/**
+ * O menu de comandos preso ao gatilho.
+ *
+ * O estado de quem alterna sem ser controlado (`defaultChecked`, `defaultValue`) mora AQUI, e não no
+ * painel: o painel desmonta ao fechar, e o item marcado tem de continuar marcado na próxima vez.
+ */
+export function DropdownMenu({ trigger, items, side = "bottom", label, testID }) {
+    const tf = useTokensDoApp();
+    const s = folha(tf);
+    const [subAberto, setSubAberto] = React.useState(null);
+    const [marcado, setMarcado] = React.useState({});
+    // Fechar o menu fecha os submenus — ele reabre do começo.
+    const fecharSub = React.useCallback(() => setSubAberto(null), []);
+    const c = useCamada(trigger, fecharSub);
+    const marcar = React.useCallback((k, v) => setMarcado((m) => ({ ...m, [k]: v })), []);
+    const ctx = { tf, s, subAberto, setSubAberto, marcado, marcar, fechar: c.fechar };
+    return (_jsxs(_Fragment, { children: [c.gatilho, _jsx(CamadaPresa, { c: c, side: side, menu: true, label: label, testID: testID, children: _jsx(ScrollView, { style: s.rolagem, children: renderizar(items, "", null, ctx) }) })] }));
+}
+function renderizar(items, prefixo, paiSub, ctx) {
+    const { s, subAberto } = ctx;
+    return items.map((it, i) => {
+        const k = `${prefixo}${i}`;
+        if (it === "separator") {
+            return _jsx(View, { style: [s.separador, apagado(k, subAberto) && s.desabilitado], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" }, k);
+        }
+        switch (it.kind ?? "item") {
+            case "group": {
+                const g = it;
+                return (_jsxs(View, { children: [_jsx(RotuloDoGrupo, { ctx: ctx, k: k, children: g.label }), renderizar(g.items, `${k}/`, paiSub, ctx)] }, k));
+            }
+            case "radiogroup": {
+                const g = it;
+                const atual = g.value ?? ctx.marcado[k] ?? g.defaultValue;
+                return (_jsxs(View, { accessibilityRole: "radiogroup", accessibilityLabel: typeof g.label === "string" ? g.label : undefined, children: [_jsx(RotuloDoGrupo, { ctx: ctx, k: k, children: g.label }), g.items.map((r, j) => {
+                            const kr = `${k}/${j}`;
+                            const escolhido = r.value === atual;
+                            return (_jsx(Linha, { ctx: ctx, papel: "radio", rotulo: r.label, icone: r.leadingIcon, estado: { checked: escolhido }, inativo: !!r.disabled || apagado(kr, subAberto), marca: escolhido ? _jsx(View, { style: s.ponto }) : null, aoTocar: () => {
+                                    if (!escolhido) {
+                                        if (g.value === undefined)
+                                            ctx.marcar(k, r.value);
+                                        g.onValueChange?.(r.value);
+                                    }
+                                    ctx.fechar();
+                                } }, kr));
+                        })] }, k));
+            }
+            case "checkbox": {
+                const cb = it;
+                const ligado = cb.checked ?? ctx.marcado[k] ?? cb.defaultChecked ?? false;
+                return (_jsx(Linha, { ctx: ctx, papel: "checkbox", rotulo: cb.label, icone: cb.leadingIcon, estado: { checked: ligado }, inativo: !!cb.disabled || apagado(k, subAberto), marca: ligado ? _jsx(Icon, { name: "check", size: "sm", color: ctx.tf.color.primaryEmphasis }) : null, aoTocar: () => {
+                        // Alterna e FICA aberto — a escolha múltipla da referência e o item da web.
+                        if (cb.checked === undefined)
+                            ctx.marcar(k, !ligado);
+                        cb.onCheckedChange?.(!ligado);
+                    } }, k));
+            }
+            case "link": {
+                const l = it;
+                return (_jsx(Linha, { ctx: ctx, papel: "link", rotulo: l.label, icone: l.leadingIcon, inativo: apagado(k, subAberto), aoTocar: () => {
+                        // Endereço que nenhum app abre rejeita a promessa; não há o que dizer, e não pode virar erro solto.
+                        void Linking.openURL(l.href).catch(() => { });
+                        if (l.closeOnClick ?? true)
+                            ctx.fechar();
+                    } }, k));
+            }
+            case "submenu": {
+                const sm = it;
+                const aberto = subAberto === k || (subAberto?.startsWith(`${k}/`) ?? false);
+                return (_jsx(LinhaDeSubmenu, { ctx: ctx, def: sm, aberto: aberto, inativo: !!sm.disabled || apagado(k, subAberto), alternar: () => ctx.setSubAberto(aberto ? paiSub : k), children: renderizar(sm.items, `${k}/`, k, ctx) }, k));
+            }
+            default: {
+                const a = it;
+                return (_jsx(Linha, { ctx: ctx, papel: "menuitem", rotulo: a.label, icone: a.leadingIcon, destrutivo: a.destructive, inativo: !!a.disabled || apagado(k, subAberto), aoTocar: () => { a.onClick?.(); ctx.fechar(); } }, k));
+            }
+        }
+    });
+}
+function RotuloDoGrupo({ ctx, k, children }) {
+    if (children == null || children === false)
+        return null;
+    return (_jsx(View, { style: [ctx.s.rotuloDoGrupo, apagado(k, ctx.subAberto) && ctx.s.desabilitado], children: typeof children === "string"
+            ? _jsx(Text, { size: "xs", weight: 500, tone: "muted", accessibilityRole: "header", children: children })
+            : children }));
+}
+function Linha({ ctx, papel, rotulo, icone, marca, estado, inativo = false, destrutivo = false, final, aoTocar }) {
+    const { tf, s } = ctx;
+    const cor = destrutivo ? letraDoToken(tf, "destructive") ?? tf.color.destructive : tf.color.foreground;
+    return (_jsxs(Pressable, { onPress: inativo ? undefined : aoTocar, disabled: inativo, 
+        // Escrito por extenso, e não `{papel}`: o check 41 lê os papéis no fonte, e só confere o que vê.
+        accessibilityRole: papel === "checkbox" ? "checkbox" : papel === "radio" ? "radio"
+            : papel === "link" ? "link" : "menuitem", ...estadoAcessivel({ ...estado, disabled: inativo }), style: ({ pressed }) => [
+            s.item, pressed && (destrutivo ? s.itemTocandoPerigo : s.itemTocando), inativo && s.desabilitado,
+        ], children: [marca !== undefined ? _jsx(View, { style: s.indicador, children: marca }) : null, icone ? _jsx(Icon, { name: icone, size: "md", color: cor }) : null, typeof rotulo === "string" || typeof rotulo === "number"
+                // 16 em peso médio, o título do item da referência.
+                ? _jsx(Text, { size: "md", weight: 500, tone: destrutivo ? "danger" : "default", style: s.rotulo, children: rotulo })
+                : _jsx(View, { style: s.rotulo, children: rotulo }), final] }));
+}
+/** O gatilho do submenu: a seta de 16 gira 90° ao abrir, como a da referência. */
+function LinhaDeSubmenu({ ctx, def, aberto, inativo, alternar, children }) {
+    const { tf, s } = ctx;
+    const reduzir = useReduceMotion();
+    const giro = React.useRef(new Animated.Value(aberto ? 1 : 0)).current;
+    const antes = React.useRef(aberto);
+    React.useEffect(() => {
+        const mudou = antes.current !== aberto;
+        antes.current = aberto;
+        // Só anima o que MUDOU: a resposta do sistema chegando não pode virar um giro de 0 para 0.
+        if (!mudou || reduzir !== false) {
+            giro.setValue(aberto ? 1 : 0);
+            return;
+        }
+        const laco = Animated.timing(giro, {
+            toValue: aberto ? 1 : 0, duration: tf.size.durationFast, useNativeDriver: driverNativo(),
+            easing: Easing.bezier(...tf.easing.easeStandard),
+        });
+        laco.start();
+        return () => laco.stop();
+    }, [aberto, reduzir, giro, tf.size.durationFast, tf.easing.easeStandard]);
+    const seta = (_jsx(Animated.View, { style: { transform: [{ rotate: giro.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "90deg"] }) }] }, children: _jsx(Icon, { name: "caret-right", size: "sm", color: tf.color.mutedForeground }) }));
+    return (_jsxs(View, { children: [aberto ? _jsx(View, { pointerEvents: "none", style: s.fundoDoSubmenu }) : null, _jsx(Linha, { ctx: ctx, papel: "menuitem", rotulo: def.label, icone: def.leadingIcon, estado: { expanded: aberto }, inativo: inativo, final: seta, aoTocar: alternar }), aberto ? children : null] }));
+}

package/dist/navigation.d.ts

@@ -160,7 +160,7 @@ export interface AureaNavListItem {
     disabled?: boolean;
     /**
      * A foto da linha (AN-04, 03/10/2026) — o formato do `Avatar` daqui (`source`, `fallback`), no
-     * tamanho dele de sempre, o mesmo da web. Toma o lugar do `icon`.
+     * tamanho padrão dele (`md`, 48 desde a 0.32.0). Toma o lugar do `icon`.
      */
     avatar?: {
         source?: ImageSourcePropType | string;

package/dist/navigation.js

@@ -164,37 +164,52 @@ const folha = criarFolha((t) => ({
     rotuloEscondido: { position: "absolute", opacity: 0 },
     // ── NavList ────────────────────────────────────────────────────────────────────────────────
     lista: { gap: t.size.space05 },
+    // 0.32.0 (ADR-0066): a linha da lista do pacote NATIVO da referência — recheio de 16 em volta e vão
+    // de 12; título 16 em peso médio e descrição 14 (no componente). Até a 0.31.0 era a linha da web:
+    // altura mínima de controle (`controlHLg`), 8 em cima e embaixo, 12 dos lados. A altura mínima saiu:
+    // a altura vem do recheio e da linha do texto, como lá.
     linha: {
         flexDirection: "row", alignItems: "center", gap: t.size.space3, width: "100%",
-        minHeight: t.size.controlHLg,
-        paddingVertical: t.size.space2, paddingHorizontal: t.size.space3,
+        paddingHorizontal: t.size.space4,
         ...canto(t.size.radiusCard - t.size.space1),
     },
     // O MIOLO da linha: ícone + texto (+ valor em texto) + seta. Ele é quem toca; o que vem
     // depois dele, na moldura, é IRMÃO — ver o comentário no componente.
-    // Nenhuma medida nova: `flex`, `minWidth` e o MESMO `gap` da moldura.
-    linhaMiolo: { flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: t.size.space3 },
+    // ⚠ O recheio de CIMA E DE BAIXO mora aqui, e não na moldura: é o miolo que toca, e na referência
+    // a linha inteira é o alvo. Na moldura ele ficaria fora do toque, e o miolo de uma linha só
+    // mediria a linha do título (24), abaixo dos 44 do alvo mínimo; aqui ele mede 16 + 24 + 16 = 56.
+    // O valor que é componente (irmão) fica no meio da altura, como antes.
+    linhaMiolo: {
+        flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: t.size.space3,
+        paddingVertical: t.size.space4,
+    },
     linhaTexto: { flex: 1, minWidth: 0 },
     // AN-04: os sinais, com o vão de dentro do texto (`space1`), como o `.nav-list-indicators` da web.
     sinais: { flexDirection: "row", alignItems: "center", gap: t.size.space1 },
     // ── Tabs ───────────────────────────────────────────────────────────────────────────────────
-    // A cápsula é a MESMA do `SegmentedControl`, e o CSS diz isso em voz alta no comentário de
-    // cima do `.tabs` (`aurea.css:1114`): *"Mesma regra da .segmented"*. Os três números vêm de
-    // lá — `gap:3px; padding:3px` — e não de mim.
+    // ~~A cápsula é a MESMA do `SegmentedControl` [...] `gap:3px; padding:3px`~~ — 0.32.0 (ADR-0066):
+    // a lista com cápsula do pacote NATIVO da referência. O trilho tem 3 de recheio lá; aqui é o
+    // `space1` (4), o token mais perto — a escala não tem 3, e escala nova não nasce no meio de um
+    // componente. É o mesmo 4 do `.tabs` da web desta versão. O vão entre as abas é 4, o dela.
+    // A altura sai da aba (6 + a linha de 24 + 6 = 36) mais o trilho: 44. A altura mínima de controle
+    // (`controlHMd`) saiu, como na referência.
     abas: {
-        flexDirection: "row", gap: 3, padding: 3,
-        minHeight: t.size.controlHMd, ...canto(t.size.radiusControl),
+        flexDirection: "row", gap: t.size.space1, padding: t.size.space1,
+        ...canto(t.size.radiusControl),
         backgroundColor: t.color.muted,
     },
-    // `padding:0 14px` é literal no `.tab` (`aurea.css:1127`). A aba NÃO estica (nada de `flex`):
-    // na web ela é conteúdo dentro de um `inline-flex`, e é isso que deixa a lista rolar quando
-    // não cabe, em vez de espremer todas.
+    // A aba da referência nativa: 12 dos lados, 6 em cima e embaixo, 6 de vão entre o que vai dentro
+    // (o rótulo e um ícone, quando o app passa os dois), e o rótulo 16 em peso médio (no componente).
+    // Era o `padding:0 14px` do `.tab` da web antiga. A aba NÃO estica (nada de `flex`): é isso que
+    // deixa a lista rolar quando não cabe, em vez de espremer todas.
     // ⚠ O nome é `abaDeTab` porque `aba` JÁ EXISTE neste arquivo — é o item do `BottomNav`
     // (linha 78), que tem `flex: 1` e cresce. Reusar o nome teria sobrescrito um dos dois em
     // silêncio, e o `tsc` só pegou porque são chaves do mesmo objeto.
     abaDeTab: {
-        alignItems: "center", justifyContent: "center",
-        paddingHorizontal: 14, ...canto(t.size.radiusControl),
+        flexDirection: "row", alignItems: "center", justifyContent: "center",
+        gap: t.size.space1 + t.size.space05,
+        paddingHorizontal: t.size.space3, paddingVertical: t.size.space1 + t.size.space05,
+        ...canto(t.size.radiusControl),
     },
     // A aba escolhida: a mesma cápsula do `segmentoAtivo` (`inputs.tsx`), pelo mesmo motivo — ADR-0059.
     abaDeTabAtiva: { backgroundColor: t.color.segment, boxShadow: [...t.shadowLayers.shadowSm] },
@@ -204,8 +219,10 @@ const folha = criarFolha((t) => ({
     //   fila                            gap de 1 unidade → space1
     //   aba                             padding-inline de 3 unidades → space3 · padding-block de 1,5
     //                                   → space1 + space05. Rótulo `text-base` + entrelinha 1.5 dá
-    //                                   36, que é o `controlHMd`: a altura da fila da cápsula, então
-    //                                   trocar de variante não muda a altura da fila.
+    //                                   36, que é o `controlHMd`. ~~a altura da fila da cápsula, então
+    //                                   trocar de variante não muda a altura da fila~~ — 0.32.0: a
+    //                                   aba da cápsula também tem 36, mas a fila dela soma o trilho
+    //                                   de 4 de cada lado (44).
     //   indicador (secundária)          border-bottom 2px na cor de destaque → `fioDoEscolhido`
     abasSecundarias: {
         flexDirection: "row", gap: t.size.space1,
@@ -489,7 +506,7 @@ export function NavList({ items, chevron = "caret-right", style, ...rest }) {
             const miolo = (_jsxs(_Fragment, { children: [it.avatar
                         ? _jsx(Avatar, { source: it.avatar.source, fallback: it.avatar.fallback })
                         : it.icon && _jsx(Icon, { name: it.icon, size: "md", color: t.color.foreground }), _jsxs(View, { style: s.linhaTexto, children: [typeof it.label === "string"
-                                ? _jsx(Text, { size: "sm", numberOfLines: 1, children: it.label }) : it.label, it.description != null && (typeof it.description === "string"
+                                ? _jsx(Text, { size: "sm", weight: 500, numberOfLines: 1, children: it.label }) : it.label, it.description != null && (typeof it.description === "string"
                                 ? _jsx(Text, { size: "xs", tone: "muted", numberOfLines: 1, children: it.description })
                                 : it.description)] }), it.indicators && it.indicators.length > 0 && (_jsx(View, { style: s.sinais, children: it.indicators.map((x) => (_jsx(View, { accessibilityLabel: x.label, children: _jsx(Icon, { name: x.icon, size: "sm", color: t.color.mutedForeground }) }, x.label))) })), valorEhTexto && _jsx(Text, { size: "sm", tone: "muted", children: it.value }), temAcao && chevron
                         && _jsx(Icon, { name: chevron, size: "sm", color: t.color.mutedForeground })] }));
@@ -574,7 +591,7 @@ export function Tabs({ tabs, value, onChange, label, justify, variant = "primary
                                 ativa && !secundaria && s.abaDeTabAtiva,
                                 it.disabled && { opacity: t.size.opacityDisabled },
                             ], children: [typeof it.label === "string"
-                                    ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
+                                    ? _jsx(Text, { size: "sm", weight: secundaria ? (ativa ? 600 : 400) : 500, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
                                     : it.label, ativa && secundaria && _jsx(View, { style: s.fioDaAba })] }, it.id));
                     }) }) }), aberta && panel === "plain" ? (_jsx(View, { accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content })) : aberta ? (_jsx(Card, { variant: "inset", accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content })) : null] }));
 }

package/dist/numero.d.ts

@@ -9,8 +9,8 @@ import { type AureaFieldSize } from "./inputs.js";
  * peça nossa —
  * e as medidas saem de escalas que JÁ existem, nenhuma nova:
  *   letra    `text3xl` (30) em seminegrito — o título 2 (`h2` do B-02). Escolha do Victor.
- *   altura   `controlHXl` — o degrau seguinte da escala de altura dos controles, que muda com a
- *            densidade como as outras três.
+ *   altura   o degrau acima do `lg` na escala de toque (`touchControlHLg + space2`, 64 no
+ *            confortável; até a 0.31.0 era o `controlHXl`, 50), como o `Button xl`.
  *   largura  `space24` (96): o `space16` (64) do campo comum não cabe "1.234" em 30.
  *   botões   os do `lg`, o maior do `IconButton`.
  */

package/dist/numero.js

@@ -51,8 +51,12 @@ import { IconButton } from "./actions.js";
 import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { useCampo } from "./inputs.js";
 import { useAureaStrings, useAureaTokens, usePeleSobreAMarca } from "./theme.js";
-const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg
-    : s === "display" ? t.size.controlHXl : t.size.controlHMd;
+// 0.32.0: o campo comum na altura de TOQUE, como o `Input` (40 · 48 · 56; era 32 · 36 · 40). O
+// `display` (peça nossa, sem medida na referência) sobe para o degrau acima do `lg` que o `Button xl`
+// também usa: `touchControlHLg + space2` = 64 (era o `controlHXl`, 50, que com a escala nova ficaria
+// MAIS BAIXO que o `lg`).
+const alturaDoTamanho = (t, s) => s === "sm" ? t.size.touchControlHSm : s === "lg" ? t.size.touchControlHLg
+    : s === "display" ? t.size.touchControlHLg + t.size.space2 : t.size.touchControlHMd;
 const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textSm : s === "lg" ? t.size.textLg
     : s === "display" ? t.size.text3xl : t.size.textBase; // ADR-0050: um degrau acima da web
 const folha = criarFolha((t) => ({