@aurea-uds/native 0.31.0 → 0.32.0

package/dist/inputs.js

@@ -37,6 +37,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   .switch-track  :882            largura h×7/6, altura h×2/3, raio 999, fundo muted
 //   o polegar      :894            inset 3, lado = 100% − space-1 − space-05, redondo
 //   .segmented     :922            linha, gap 3, padding 3, minH controlHMd, fundo muted
+//
+// ── 0.32.0: A ESCALA DE TOQUE (aprovada pelo Victor: "sim, aprovo a escala de 48 no nativo") ────
+// Os campos e controles deste arquivo deixam a altura da web (32 · 36 · 40) e passam à do pacote
+// nativo da referência: `touchControlH*`, 40 · 48 · 56 no confortável. As medidas de cada peça
+// estão ao lado dela. O `SegmentedControl` fica na escala da web — não é desta frente.
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
 import { canto, cantosDeCima, criarFolha, estadoAcessivel, fioDoEscolhido, peleDoCartao, peleDoCartaoEscolhido } from "./estilos.js";
@@ -50,9 +55,16 @@ import { useAureaStrings, useAureaTokens, useTokensDoApp, usePeleSobreAMarca, Fo
 // `alturaDoTamanho` e `respiroDoTamanho` saem do arquivo (não do pacote) desde 02/10/2026: o
 // `FileInput` (R-21) desenha um gatilho com a medida do campo, e copiar os números para lá é o
 // defeito que o `CLAUDE.md` nomeia.
-export const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
+// 0.32.0: a altura é a de TOQUE (40 · 48 · 56; a do campo da referência é 48), e anda com a
+// densidade como a da web andava.
+export const alturaDoTamanho = (t, s) => s === "sm" ? t.size.touchControlHSm : s === "lg" ? t.size.touchControlHLg : t.size.touchControlHMd;
 const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textSm : s === "lg" ? t.size.textLg : t.size.textBase; // ADR-0050: um degrau acima da web
-export const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
+// 0.32.0: o `md` é o 12 do campo da referência (`space3`). Era 13, o `padding-inline` cru do
+// `.input` da web, que não tinha token.
+export const respiroDoTamanho = (t, s) => s === "lg" ? t.size.space4 : t.size.space3;
+// O gatilho de LISTA (`Select`, e o `Combobox`, que é igual a ele) tem 16 dos lados no `md`, o da
+// referência; o `sm` e o `lg` ficam com o do campo.
+export const respiroDoGatilho = (t, s) => s === "sm" ? respiroDoTamanho(t, s) : t.size.space4;
 const folha = criarFolha((t) => ({
     campo: { gap: 7 },
     rotulo: { flexDirection: "row", justifyContent: "space-between", gap: 12 },
@@ -64,7 +76,9 @@ const folha = criarFolha((t) => ({
     },
     // O `.textarea` é o único da família com raio LG em vez do de controle: uma caixa alta em
     // pílula viraria uma cápsula, e o CSS já decidiu isso (`aurea.css:694`).
-    areaDeTexto: { minHeight: 104, paddingVertical: t.size.space3, ...canto(t.size.radiusLg) },
+    // 0.32.0: a caixa alta da referência — 128 de altura (era 104) e 8 em cima e embaixo (era 12).
+    areaDeTexto: { minHeight: t.size.space24 + t.size.space8, paddingVertical: t.size.space2,
+        ...canto(t.size.radiusLg) },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
     desabilitado: { opacity: t.size.opacityDisabled },
     // O GRUPO é a mesma caixa do campo virada em LINHA, e os números são os mesmos: mesma borda,
@@ -89,7 +103,8 @@ const folha = criarFolha((t) => ({
     },
     // E5: a marca no MEIO da altura do texto, como a referência. Era `flex-start` com um
     // `marginTop: 1` fixo, e a bolinha ficava presa no topo do rótulo.
-    linhaDeControle: { flexDirection: "row", alignItems: "center", gap: 9 },
+    // 0.32.0: 12 entre a marca e o texto, o vão do campo de controle da referência (era 9).
+    linhaDeControle: { flexDirection: "row", alignItems: "center", gap: t.size.space3 },
     // CHK-01: o item do `RadioGroup variant="card"` — a pele do `Card` (`estilos.ts`), com a marca
     // no alto, na linha do título.
     itemCartao: { ...peleDoCartao(t), alignItems: "flex-start" },
@@ -97,7 +112,9 @@ const folha = criarFolha((t) => ({
     linhaNoTopo: { alignItems: "flex-start" },
     trilho: { ...canto(t.size.radiusFull), backgroundColor: t.color.muted,
         borderWidth: t.size.borderWidth, borderColor: t.color.border, justifyContent: "center" },
-    polegar: { position: "absolute", left: 3, ...canto(t.size.radiusFull) },
+    // 0.32.0: a 2 da borda de FORA, como a bolinha da referência — o `left` conta de dentro da borda
+    // do trilho, então é `space05 − borderWidth` (1), a mesma conta do `.switch-track:after` da web.
+    polegar: { position: "absolute", left: t.size.space05 - t.size.borderWidth, ...canto(t.size.radiusFull) },
     segmentada: {
         flexDirection: "row", alignSelf: "flex-start", gap: 3, padding: 3,
         minHeight: t.size.controlHMd, ...canto(t.size.radiusControl),
@@ -138,8 +155,13 @@ const folha = criarFolha((t) => ({
         ...cantosDeCima(t.size.radiusSheet),
         backgroundColor: t.color.popover, borderWidth: t.size.borderWidth, borderColor: t.color.border,
     },
-    opcao: { minHeight: t.size.controlHLg, justifyContent: "center",
-        paddingHorizontal: t.size.space4 },
+    // 0.32.0: a opção da lista da referência — 12 em cima e embaixo, 8 dos lados, 8 entre o rótulo e
+    // o indicador. Com a linha de 24 do rótulo dá 48, a altura de toque (era `controlHLg`, 40).
+    opcao: { minHeight: t.size.touchControlHMd, flexDirection: "row", alignItems: "center",
+        gap: t.size.space2, paddingVertical: t.size.space3, paddingHorizontal: t.size.space2 },
+    // O indicador da escolhida: a caixa de 20 (`iconMd`) com o `check` de 16 no meio, como o da
+    // referência e a coluna `.combobox-check` da web.
+    indicador: { width: t.size.iconMd, height: t.size.iconMd, alignItems: "center", justifyContent: "center" },
 }));
 const CampoCtx = React.createContext(null);
 /** O que os controles leem do `Field` acima deles. Público porque um controle novo vai precisar. */
@@ -193,7 +215,7 @@ export function Field({ label, hint, error, disabled, size = "md", children, sty
 export function Label({ children, trailing, style, ...rest }) {
     const s = folha(useAureaTokens());
     return (_jsxs(View, { style: [s.rotulo, style], ...rest, children: [typeof children === "string"
-                ? _jsx(Text, { size: "sm", weight: 600, children: children }) : children, trailing] }));
+                ? _jsx(Text, { size: "sm", weight: 500, children: children }) : children, trailing] }));
 }
 /**
  * O campo de uma linha.
@@ -278,7 +300,7 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
             style,
         ] }));
 }
-/** A caixa alta. Mesmo campo, `multiline`, raio LG e altura mínima de 104 (medida no CSS). */
+/** A caixa alta. Mesmo campo, `multiline`, raio LG e altura mínima de 128 (a da referência, 0.32.0). */
 export function Textarea({ rows, size, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
@@ -356,7 +378,8 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
     // largura que sobra dentro de uma fileira e apagaria o que estivesse ao lado.
     const temTexto = label != null || description != null;
     // A marca é METADE da altura do controle — `aurea.css:871`, e é o que faz ela crescer junto
-    // com a densidade sem token próprio.
+    // com a densidade sem token próprio. 0.32.0: da altura de TOQUE, então o `md` dá os 24 da caixa
+    // da referência (era 18).
     const lado = alturaDoTamanho(t, tam) / 2;
     // `start`: o meio da marca no meio da PRIMEIRA linha do rótulo. A linha é a do `Text size="sm"`
     // do rótulo (entrelinha normal), então a conta sai dos mesmos tokens que desenham o texto.
@@ -368,14 +391,16 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
         // aparece escrito duas vezes, ou o controle sobe MUDO para quem usa leitor de tela.
         accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : campo?.label), accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [s.linhaDeControle, align === "start" && s.linhaNoTopo, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
                     s.marcaBase, noTopo,
+                    // 0.32.0: o canto da caixa é o `radiusXs` (6), o mesmo do `.checkbox .control-mark` da
+                    // web; era 5 cru.
                     { width: lado, height: lado,
-                        ...canto(papel === "radio" ? t.size.radiusFull : 5) },
+                        ...canto(papel === "radio" ? t.size.radiusFull : t.size.radiusXs) },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
                 ], children: checked && (papel === "radio"
-                    // O ponto do rádio é 8×8 e da cor SELECIONADA, não da cor de primeiro plano — no CSS
-                    // ele é `background: var(--control-selected)` sobre a marca já pintada.
-                    ? _jsx(View, { style: { width: 8, height: 8, ...canto(t.size.radiusFull),
-                            backgroundColor: t.color.controlSelectedForeground } })
+                    // O ponto do rádio é da cor de primeiro plano da seleção, sobre a marca já pintada.
+                    // 0.32.0: 10, o ponto da referência e o do `RadioGroup` (`space2 + space05`); era 8.
+                    ? _jsx(View, { style: { width: t.size.space2 + t.size.space05, height: t.size.space2 + t.size.space05,
+                            ...canto(t.size.radiusFull), backgroundColor: t.color.controlSelectedForeground } })
                     // O visto da web é desenhado com DUAS BORDAS de um retângulo 8×4 girado −45°. Isso
                     // atravessa inteiro: `transform: rotate` e `borderLeftWidth`/`borderBottomWidth`
                     // existem no RN. Desenhá-lo assim, em vez de trazer um glifo, mantém a peça sem
@@ -463,8 +488,8 @@ export const RadioGroup = Object.assign(RaizDoGrupoDeRadio, { Item: ItemDoGrupoD
  *
  * ⚠ **NÃO é o `Switch` do React Native**, pela mesma razão que o `Spinner` não é o
  * `ActivityIndicator`: aquele desenha o interruptor do sistema no Android e o do iOS no iOS —
- * duas aparências que o `CLAUDE.md` proíbe em voz alta. As medidas aqui são as do CSS: trilho de
- * `altura × 7/6` por `altura × 2/3`, polegar com 3 de folga.
+ * duas aparências que o `CLAUDE.md` proíbe em voz alta. As medidas são as do interruptor da
+ * referência (0.32.0): trilho de 48 × 24 e bolinha em cápsula de 28 × 20, a 2 da borda.
  *
  * ⚠ **E ele respeita "menos movimento"**: com a preferência ligada, o polegar salta em vez de
  * deslizar. O estado continua o mesmo — o que some é a animação, não a informação.
@@ -477,11 +502,17 @@ export function Switch({ label, description, checked, onChange, disabled, size,
     const inativo = disabled ?? campo?.disabled;
     const reduzir = useReduceMotion();
     const temTexto = label != null || description != null;
+    // 0.32.0: o interruptor da referência — trilho 48 × 24 e bolinha em CÁPSULA de 28 × 20, a 2 da
+    // borda de fora (era trilho 42 × 24 e bolinha redonda de 18). Na altura de toque: o trilho é a
+    // altura do controle por METADE dela (a largura é o dobro da altura, como na web); a bolinha é a
+    // altura do trilho menos 4 e 8 mais larga que alta. sm 40 × 20 / 24 × 16 · lg 56 × 28 / 32 × 24.
     const h = alturaDoTamanho(t, tam);
-    const larguraDoTrilho = h * 7 / 6;
-    const alturaDoTrilho = h * 2 / 3;
-    const ladoDoPolegar = alturaDoTrilho - t.size.space1 - t.size.space05;
-    const curso = larguraDoTrilho - ladoDoPolegar - 6;
+    const larguraDoTrilho = h;
+    const alturaDoTrilho = h / 2;
+    const alturaDoPolegar = alturaDoTrilho - 2 * t.size.space05;
+    const larguraDoPolegar = alturaDoPolegar + t.size.space2;
+    // O curso deixa os mesmos 2 da borda de fora na outra ponta (a conta do `--switch-x` da web).
+    const curso = larguraDoTrilho - larguraDoPolegar - 2 * t.size.space05;
     const pos = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
     React.useEffect(() => {
         const destino = checked ? 1 : 0;
@@ -514,7 +545,8 @@ export function Switch({ label, description, checked, onChange, disabled, size,
         // `Input`: o que a cascata resolve de graça, aqui é conta explícita.
         style: [
             { flexDirection: "row", alignItems: "center" },
-            temTexto && { gap: 10 },
+            // 0.32.0: 12 até o texto, o vão do campo de controle da referência e o do `Checkbox` (era 10).
+            temTexto && { gap: t.size.space3 },
             inativo && s.desabilitado, style,
         ], children: [_jsx(View, { style: [
                     s.trilho,
@@ -522,7 +554,7 @@ export function Switch({ label, description, checked, onChange, disabled, size,
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
                 ], children: _jsx(Animated.View, { style: [
                         s.polegar,
-                        { width: ladoDoPolegar, height: ladoDoPolegar,
+                        { width: larguraDoPolegar, height: alturaDoPolegar,
                             backgroundColor: checked ? t.color.controlSelectedForeground : t.color.mutedForeground,
                             transform: [{ translateX: pos.interpolate({ inputRange: [0, 1], outputRange: [0, curso] }) }] },
                     ] }) }), temTexto && (_jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
@@ -566,6 +598,17 @@ export function SegmentedControl({ items, value, onChange, label, disabled, just
                             : it.label, ativo && _jsx(View, { style: s.fioDoSegmento })] }, it.value));
             }) }) }));
 }
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// Select — o "motor novo sobre `Modal`" que a §5.2.4 previu
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+/**
+ * O indicador da opção escolhida, nas listas do `Select` e do `Combobox` (0.32.0): o da referência
+ * — a caixa de 20 com o `check` de 16 — e o mesmo glifo da coluna `.combobox-check` da web. A cor
+ * é a do destaque que se lê como ícone nos dois temas (`primaryEmphasis`, ADR-0054). Sai do
+ * arquivo, não do pacote — e é função, não componente, para não contar como peça nova. ⚠ Pede o
+ * `check` no registro de ícones do app; sem ele, o aviso de desenvolvimento do `Icon` diz o import.
+ */
+export const indicadorDaEscolhida = (t) => (_jsx(View, { style: folha(t).indicador, children: _jsx(Icon, { name: "check", size: "sm", color: t.color.primaryEmphasis }) }));
 /**
  * A escolha de um de muitos.
  *
@@ -599,14 +642,17 @@ export function Select({ items, value, onChange, placeholder, disabled, size, ch
     const escolhido = items.find((i) => i.value === value);
     return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: escolhido?.label }, ...estadoAcessivel({ disabled: !!inativo, expanded: aberto }), style: [
                     s.caixa,
+                    // 0.32.0: o gatilho da referência — 16 dos lados (era 13) e 12 entre o valor e a seta.
+                    // Os 12 de cima e de baixo dela são a altura de toque: 48 menos a linha de 24 do valor.
                     { flexDirection: "row", alignItems: "center", justifyContent: "space-between",
-                        height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
+                        gap: t.size.space3, height: alturaDoTamanho(t, tam),
+                        paddingHorizontal: respiroDoGatilho(t, tam) },
                     campo?.invalido && s.invalido,
                     // Sobre a marca a tinta vence inválido — ver `usePeleSobreAMarca`.
                     peleDaMarca,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: escolhido ? "default" : "subtle", numberOfLines: 1, children: escolhido?.label ?? placeholder ?? "" }), chevron && _jsx(Icon, { name: chevron, size: "sm", color: peleDaMarca?.color ?? t.color.subtleForeground })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setAberto(false), children: _jsxs(View, { style: sf.fundoDaLista, children: [_jsx(Pressable, { style: sf.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsxs(View, { style: sf.lista, children: [_jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", ...estadoAcessivel({ selected: it.value === value, disabled: !!it.disabled }), style: [sf.opcao, it.disabled && sf.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }), _jsx(RecuoDaFolha, {})] })] }) }) })] }));
+                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: escolhido ? "default" : "subtle", numberOfLines: 1, children: escolhido?.label ?? placeholder ?? "" }), chevron && _jsx(Icon, { name: chevron, size: "sm", color: peleDaMarca?.color ?? t.color.subtleForeground })] }), _jsx(ForaDaMarca, { children: _jsx(Modal, { visible: aberto, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setAberto(false), children: _jsxs(View, { style: sf.fundoDaLista, children: [_jsx(Pressable, { style: sf.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsxs(View, { style: sf.lista, children: [_jsx(ScrollView, { children: items.map((it) => (_jsxs(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", ...estadoAcessivel({ selected: it.value === value, disabled: !!it.disabled }), style: [sf.opcao, it.disabled && sf.desabilitado], children: [_jsx(Text, { size: "md", weight: 500, style: { flex: 1, minWidth: 0 }, children: it.label }), it.value === value && indicadorDaEscolhida(tf)] }, it.value))) }), _jsx(RecuoDaFolha, {})] })] }) }) })] }));
 }
 /**
  * A pilha de campos, com o respiro do `--space-5`.

package/dist/layout.d.ts

@@ -92,7 +92,7 @@ export interface SeparatorProps extends ViewProps {
  * comportamento certo.
  */
 export declare function Separator({ orientation, label, style, ...rest }: SeparatorProps): React.JSX.Element;
-export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger" | "brand" | "contrast";
+export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "outline" | "selected" | "danger" | "brand" | "contrast";
 /** O tom do traço no topo (`accent`, MT-02, ADR-0063) — os MESMOS cinco da web. */
 export type AureaCardAccent = "brand" | "success" | "info" | "warning" | "danger";
 interface CardBase extends ViewProps {

package/dist/layout.js

@@ -46,6 +46,9 @@ const folha = criarFolha((t) => ({
     card_interactive: { borderColor: t.color.borderStrong },
     // `inset` recessa em vez de flutuar — é o painel DENTRO de um card, e a ficha da web diz isso.
     card_inset: { backgroundColor: t.color.surfaceInset, borderColor: "transparent" },
+    // 0.32.0: `outline` é o cartão da cor de onde ele está, só com a linha em volta — o mesmo nome da
+    // web. Sem fundo; a borda, o raio e o recheio continuam os do `cardBase`.
+    card_outline: { backgroundColor: "transparent" },
     card_selected: peleDoCartaoEscolhido(t),
     card_danger: { borderColor: t.color.danger400 ?? t.color.destructive, backgroundColor: t.color.dangerBg },
     // O amarelo é o DE PREENCHER — `primary`, o mesmo do botão sólido. A borda some: uma superfície

package/dist/menu.d.ts

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { type AureaIcon } from "./icon.js";
+/** O lado do gatilho onde a camada abre. FÍSICO, como o `OverlaySide` da web. */
+export type AureaOverlaySide = "top" | "right" | "bottom" | "left";
+export interface PopoverProps {
+    /** O elemento que abre — um `Button`, um `IconButton`. O toque dele continua valendo. */
+    trigger: React.ReactElement;
+    /** O título: 18 em peso médio, anunciado como cabeçalho. */
+    title?: React.ReactNode;
+    /** O corpo. Texto solto sai como a descrição da referência: 16, esmaecido. */
+    children: React.ReactNode;
+    /** O lado do gatilho. Vira sozinho quando não cabe. */
+    side?: AureaOverlaySide;
+    /** A seta apontando para o gatilho. */
+    arrow?: boolean;
+    /** Só do nativo, como nos outros sobrepostos: `-fundo` e `-painel` marcam as duas peças. */
+    testID?: string;
+}
+/**
+ * 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 declare function Popover({ trigger, title, children, side, arrow, testID }: PopoverProps): React.JSX.Element;
+interface MenuItemBase {
+    label: React.ReactNode;
+    disabled?: boolean;
+    leadingIcon?: AureaIcon;
+}
+/** Item de ação. `kind` é opcional, como na web. */
+export interface MenuActionDef extends MenuItemBase {
+    kind?: "item";
+    onClick?: () => void;
+    /**
+     * Só do nativo: o item que DESTRÓI dado, com o texto e o toque no tom de perigo — o `danger` do
+     * item da referência. A web ainda não tem o campo.
+     */
+    destructive?: boolean;
+}
+/** Item que abre um endereço — no aparelho, pelo `Linking`. Sem `disabled`, como na web. */
+export interface MenuLinkDef {
+    kind: "link";
+    label: React.ReactNode;
+    leadingIcon?: AureaIcon;
+    href: string;
+    /** Fechar ao tocar. Padrão `true`, como na web. */
+    closeOnClick?: boolean;
+}
+/** Item que ALTERNA. Controlado (`checked`) ou não (`defaultChecked`). O menu fica aberto. */
+export interface MenuCheckboxDef extends MenuItemBase {
+    kind: "checkbox";
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** Opções mutuamente exclusivas. Escolher fecha o menu, como a escolha única da referência. */
+export interface MenuRadioGroupDef {
+    kind: "radiogroup";
+    label?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    items: Array<{
+        value: string;
+        label: React.ReactNode;
+        disabled?: boolean;
+        leadingIcon?: AureaIcon;
+    }>;
+}
+/** Submenu: abre NO LUGAR, dentro do painel. `items` aninha a mesma união. */
+export interface MenuSubmenuDef extends MenuItemBase {
+    kind: "submenu";
+    items: MenuEntry[];
+}
+/** Seção rotulada. O rótulo não é item: não se toca. */
+export interface MenuGroupDef {
+    kind: "group";
+    label?: React.ReactNode;
+    items: MenuEntry[];
+}
+export type MenuEntry = MenuActionDef | MenuLinkDef | MenuCheckboxDef | MenuRadioGroupDef | MenuSubmenuDef | MenuGroupDef | "separator";
+export interface DropdownMenuProps {
+    trigger: React.ReactElement;
+    items: MenuEntry[];
+    side?: AureaOverlaySide;
+    /** O nome do menu para o leitor de tela. */
+    label?: string;
+    testID?: string;
+}
+/**
+ * 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 declare function DropdownMenu({ trigger, items, side, label, testID }: DropdownMenuProps): React.JSX.Element;
+export {};