@aurea-uds/native 0.31.0 → 0.32.0

package/dist/actions.d.ts

@@ -87,11 +87,25 @@ export declare function IconButton(props: IconButtonProps): React.JSX.Element;
 /**
  * Quanto a ÁREA DE TOQUE do `IconButton` passa do círculo desenhado, de cada lado — R-24
  * (08/10/2026). O alvo é o maior entre o desenho e o `targetMin` (44), centrado; o círculo de
- * `md` tem 36, então sobram 4 de cada lado. O `Badge` preso usa isto para se prender ao CÍRCULO,
+ * `md` tinha 36, e sobravam 4 de cada lado. O `Badge` preso usa isto para se prender ao CÍRCULO,
  * e não ao canto da área de toque — medido: preso à área de toque, o selo ficava 4 para fora.
+ * 0.32.0: com a escala de toque o `md` tem 48 e a folga é 0; sobra no `sm` (40: 2) e no `xs`.
  */
 export declare function folgaDoToque(t: AureaTokens, size?: AureaButtonSize): number;
 /** Fechado: sem `appearance` e sem `tone`, porque a cor é a do glifo. */
 export interface ThemeToggleProps extends Omit<IconButtonProps, "name" | "label" | "onPress" | "appearance" | "tone" | "share"> {
 }
 export declare function ThemeToggle(props: ThemeToggleProps): React.JSX.Element;
+export interface CloseButtonProps {
+    /** O nome que o leitor de tela anuncia. Padrão: a frase `close` ("Close"/"Fechar"). */
+    label?: string;
+    onPress?: PressableProps["onPress"];
+    disabled?: boolean;
+    /** Registro local de ícones, quando não há um em contexto. */
+    icons?: AureaIconRegistry;
+    /** Troca o X. */
+    children?: React.ReactNode;
+    testID?: string;
+}
+/** O botão de fechar: círculo neutro com o X, que já se chama "Close"/"Fechar". */
+export declare function CloseButton({ label, onPress, disabled, icons, children, testID }: CloseButtonProps): React.JSX.Element;

package/dist/actions.js

@@ -26,17 +26,22 @@ import { canto, criarFolha, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.j
 import { Icon } from "./icon.js";
 import { Text } from "./text.js";
 import { AvisosContext, useAureaStrings, useAureaTheme, useAureaTokens, useSobreAMarca } from "./theme.js";
-const ALTURA = {
-    xs: "controlHXs", sm: "controlHSm", md: "controlHMd", lg: "controlHLg", xl: "controlHXl",
+const MEDIDA = {
+    xs: (s) => ({ altura: s.controlHSm, recheio: s.space3, vao: s.space1 + s.space05 }),
+    sm: (s) => ({ altura: s.touchControlHSm, recheio: s.space3 + s.space05, vao: s.space1 + s.space05 }),
+    md: (s) => ({ altura: s.touchControlHMd, recheio: s.space4, vao: s.space2 }),
+    lg: (s) => ({ altura: s.touchControlHLg, recheio: s.space5, vao: s.space2 + s.space05 }),
+    xl: (s) => ({ altura: s.touchControlHLg + s.space2, recheio: s.space6, vao: s.space2 + s.space05 }),
 };
-// Os mesmos números do `.btn-*` do core, medidos lá — não reinventados aqui.
-const PADDING = { xs: 10, sm: 12, md: 15, lg: 20, xl: 26 };
-const GAP = { xs: 6, sm: 8, md: 8, lg: 8, xl: 10 };
+// O degrau do `Text` do nativo, que sobe um em relação à web (ADR-0050): `xs` é 14, `base` é 16 e
+// `lg` é 18.
 const FONTE = {
-    xs: "xs", sm: "xs", md: "sm", lg: "base", xl: "base",
+    xs: "xs", sm: "xs", md: "base", lg: "lg", xl: "lg",
 };
+// O ícone acompanha a altura nova: 16 até o `sm` (40), 20 no `md` (48), 24 do `lg` (56) para cima.
+// Era 16 até o `md` e 20 no `lg` e no `xl`, quando o `md` tinha 36.
 const ICONE = {
-    xs: "sm", sm: "sm", md: "sm", lg: "md", xl: "md",
+    xs: "sm", sm: "sm", md: "md", lg: "lg", xl: "lg",
 };
 /** Par (fundo, texto, borda) por tom, para cada aparência. Tudo de token, nada cru. */
 function pintar(t, tone) {
@@ -121,6 +126,8 @@ const folha = criarFolha((t) => ({
     // pinta fundo, borda e raio é a `caixa` interna, com a altura do token. O botão continua com
     // 36 dp de desenho e passa a ter 44 de alvo — e o leitor de tela enxerga os 44, porque o
     // elemento acessível é o `Pressable`, não um retângulo invisível ao lado dele.
+    // 0.32.0: com a escala de toque, o `md` (48) e o `lg` (56) já passam do alvo sozinhos; o `sm`
+    // (40) e o `xs` (32) continuam ganhando os 44 por aqui.
     // E2 (25/09/2026): SEM `alignSelf`. O botão obedece o pai, como na referência (a folha do botão dela
     // não fixa alinhamento) e como o `.btn` da web num `.stack`. Era `alignSelf: "flex-start"`, e ele
     // vencia o `alignItems: "center"` do pai: o botão do `EmptyState` ficava à esquerda com o resto
@@ -209,17 +216,18 @@ function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size =
     const marca = useSobreAMarca();
     const cor = pintarSobreAMarca(pintar(t, tone), marca, tone, appearance);
     const corDaBorda = marca?.tinta ?? t.color.border;
+    const medida = MEDIDA[size](t.size);
     const caixa = React.useMemo(() => ({
-        height: t.size[ALTURA[size]],
-        paddingHorizontal: PADDING[size],
-        gap: GAP[size],
+        height: medida.altura,
+        paddingHorizontal: medida.recheio,
+        gap: medida.vao,
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
         borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
         ...(fullWidth ? { flex: 1 } : null),
         // A regra do botão-link da referência: `height: auto; padding: 0`, e a do botão dela já
         // tem `border-width: 0`. A borda transparente de 1 empurraria o texto 1 para dentro.
         ...(semRecuo ? { height: undefined, paddingHorizontal: 0, borderWidth: 0 } : null),
-    }), [t, size, appearance, cor.solido, cor.contorno, corDaBorda, fullWidth, semRecuo]);
+    }), [medida.altura, medida.recheio, medida.vao, appearance, cor.solido, cor.contorno, corDaBorda, fullWidth, semRecuo]);
     const corDoTexto = appearance === "solid" ? cor.texto : cor.sobre;
     return (_jsx(Pressable, { disabled: disabled, onPress: aoTocar, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
             s.alvo, fullWidth && s.alvoLargura,
@@ -231,8 +239,8 @@ function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size =
                     // Atkinson Hyperlegible (ADR-0053) sobe 0,984 e desce 0,316, o mesmo 1,3 (medido na
                     // tabela `hhea` dos dois arquivos, 01/10/2026): no Android o RN
                     // corta o que passa da linha, e a perna do g, do p e do ç sumia. Cabe em todo tamanho e
-                    // densidade (medido): `xs`/`sm` têm linha de 21 e o menor botão mede 24 (compacto); os
-                    // maiores têm linha de 24 e medem 32 ou mais.
+                    // densidade (conta da 0.32.0): `xs`/`sm` têm linha de 21 e o menor botão mede 28 (`xs`
+                    // no compacto); o `md` tem linha de 24 e mede 44 ou mais; `lg`/`xl`, 27 e 52 ou mais.
                     ? _jsx(Text, { size: FONTE[size], weight: 500, leading: "normal", style: { color: corDoTexto }, children: children })
                     : children, trailingIcon ? _jsx(Icon, { name: trailingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, trailing ?? null] }) }));
 }
@@ -256,11 +264,12 @@ export function IconButton(props) {
 /**
  * Quanto a ÁREA DE TOQUE do `IconButton` passa do círculo desenhado, de cada lado — R-24
  * (08/10/2026). O alvo é o maior entre o desenho e o `targetMin` (44), centrado; o círculo de
- * `md` tem 36, então sobram 4 de cada lado. O `Badge` preso usa isto para se prender ao CÍRCULO,
+ * `md` tinha 36, e sobravam 4 de cada lado. O `Badge` preso usa isto para se prender ao CÍRCULO,
  * e não ao canto da área de toque — medido: preso à área de toque, o selo ficava 4 para fora.
+ * 0.32.0: com a escala de toque o `md` tem 48 e a folga é 0; sobra no `sm` (40: 2) e no `xs`.
  */
 export function folgaDoToque(t, size = "md") {
-    const lado = t.size[ALTURA[size]];
+    const lado = MEDIDA[size](t.size).altura;
     return Math.max(0, (Math.max(lado, t.size.targetMin) - lado) / 2);
 }
 /** O corpo do `IconButton`. A cor própria do ícone (`corDoIcone`) é só do `ThemeToggle`: o
@@ -272,13 +281,14 @@ function BotaoDeIcone({ name, label, appearance = "ghost", tone = "neutral", siz
     const marca = useSobreAMarca();
     const cor = pintarSobreAMarca(pintar(t, tone), marca, tone, appearance);
     const corDaBorda = marca?.tinta ?? t.color.border;
-    const lado = t.size[ALTURA[size]];
+    // O círculo tem a altura do botão do mesmo tamanho (o só-ícone da referência: `aspect-ratio: 1`).
+    const lado = MEDIDA[size](t.size).altura;
     const caixa = React.useMemo(() => ({
         height: lado, width: lado, paddingHorizontal: 0,
         ...canto(t.size.radiusControl),
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
         borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
-    }), [t, lado, size, appearance, cor.solido, cor.contorno, corDaBorda]);
+    }), [t, lado, appearance, cor.solido, cor.contorno, corDaBorda]);
     return (_jsx(Pressable, { disabled: disabled, onPress: aoTocar, accessibilityRole: "button", accessibilityLabel: label, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
             // Largura FIXA, como o só-ícone da referência: ele nunca estica,
             // nem numa coluna sem alinhamento. O alvo é o maior entre o desenho e o `targetMin`.
@@ -293,3 +303,16 @@ export function ThemeToggle(props) {
     const escuro = theme === "dark";
     return (_jsx(BotaoDeIcone, { ...props, name: escuro ? "sun" : "moon", label: escuro ? s.themeToLight : s.themeToDark, corDoIcone: escuro ? t.color.primary : t.color.foreground, pesoDoIcone: "fill", onPress: toggleTheme }));
 }
+/** O botão de fechar: círculo neutro com o X, que já se chama "Close"/"Fechar". */
+export function CloseButton({ label, onPress, disabled, icons, children, testID }) {
+    const t = useAureaTokens();
+    const s = useAureaStrings();
+    const lado = t.size.touchControlHSm;
+    return (_jsx(Pressable, { disabled: disabled, onPress: onPress, accessibilityRole: "button", accessibilityLabel: label ?? s.close, ...estadoAcessivel({ disabled: !!disabled }), hitSlop: t.size.space3, testID: testID, style: ({ pressed: tocando }) => [
+            { width: lado, height: lado, alignItems: "center", justifyContent: "center",
+                ...canto(t.size.radiusFull), backgroundColor: t.color.secondary },
+            // Encolhe a 93%, como o da referência (o botão comum da Aurea vai a 97%).
+            tocando && { opacity: REACAO_AO_TOQUE.pressionado.opacity, transform: [{ scale: 0.93 }] },
+            disabled && REACAO_AO_TOQUE.inerte,
+        ], children: children ?? _jsx(Icon, { name: "x", weight: "bold", size: "md", icons: icons, color: t.color.mutedForeground }) }));
+}

package/dist/busca.js

@@ -72,20 +72,16 @@ import { IconButton } from "./actions.js";
 import { canto, cantosDeCima, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Spinner } from "./feedback.js";
 import { Icon } from "./icon.js";
-import { KeyboardAvoiding, useCampo } from "./inputs.js";
+import { KeyboardAvoiding, alturaDoTamanho, indicadorDaEscolhida, respiroDoGatilho, respiroDoTamanho, useCampo, } from "./inputs.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens, useTokensDoApp, ForaDaMarca, usePeleSobreAMarca } from "./theme.js";
-// As mesmas contas do `inputs.tsx`, e elas são repetidas AQUI de propósito: exportá-las de lá
-// tornaria pública uma conta interna do outro módulo, e um `import` de função privada entre
-// módulos irmãos é o começo de um acoplamento que ninguém declara. São três linhas.
-const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
+// A altura e o respiro do campo vêm do `inputs.tsx` (0.32.0). Eram repetidos aqui, de propósito,
+// para não tornar pública uma conta interna de lá — mas desde 02/10/2026 o `inputs.tsx` já os
+// exporta ao `FileInput`, e a escala de toque mostrou o custo da cópia: duas contas para mudar
+// juntas. Saem do arquivo, não do pacote.
 const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textSm : s === "lg" ? t.size.textLg : t.size.textBase; // ADR-0050: um degrau acima da web
-// ⚠ O `13` do tamanho `md` NÃO é número inventado: é o `padding-inline` literal do `.input`
-// (`aurea.css:685`), e é o mesmo valor que o `inputs.tsx:60` usa. Não há token de 13 — a escala
-// tem `space3`=12 e `space4`=16 —, e é por isso que o CSS o escreve cru dos dois lados.
-const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
 // ── AS DUAS CONSTANTES DE INTERAÇÃO, e elas NÃO são geometria ────────────────────────────────
 // Ficam nomeadas e no topo porque número solto no meio do componente é o que o `CLAUDE.md`
 // passou a proibir em 12/09/2026. **Nenhuma das duas tem linha de `aurea.css` atrás, e não
@@ -175,10 +171,14 @@ const folha = criarFolha((t) => ({
     // `CLAUDE.md` ("correção local é proibida sem responder quem mais tem esse problema") é o que
     // traz as duas linhas para cá, e este campo é exatamente "quem mais".
     campoDeTexto: { flex: 1, minWidth: 0, paddingVertical: 0, textAlignVertical: "center" },
+    // 0.32.0: a opção da lista do `Select` (`inputs.tsx`), que é a da referência — 12 em cima e
+    // embaixo, 8 dos lados, 8 até o indicador, 48 de toque no mínimo. Era `controlHLg` (40), 16 dos
+    // lados e 8 em cima e embaixo. As duas folhas continuam iguais, que é o combinado acima.
     opcao: {
-        minHeight: t.size.controlHLg, justifyContent: "center",
-        paddingHorizontal: t.size.space4, paddingVertical: t.size.space2,
+        minHeight: t.size.touchControlHMd, flexDirection: "row", alignItems: "center", gap: t.size.space2,
+        paddingHorizontal: t.size.space2, paddingVertical: t.size.space3,
     },
+    textoDaOpcao: { flex: 1, minWidth: 0 },
     opcaoEscolhida: { backgroundColor: t.color.surface3 ?? t.color.muted },
     vazio: { paddingHorizontal: t.size.space4, paddingVertical: t.size.space5, alignItems: "center" },
     carregando: { paddingVertical: t.size.space4, alignItems: "center" },
@@ -304,7 +304,9 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
     const nada = !loading && filtrados.length === 0;
     return (_jsxs(_Fragment, { children: [_jsxs(View, { style: [
                     s.caixa,
-                    { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
+                    // 0.32.0: o gatilho do `Select` — altura de toque, 16 dos lados no `md` e 12 entre o
+                    // texto e as ações (era 13 e nada).
+                    { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoGatilho(t, tam), gap: t.size.space3 },
                     campo?.invalido && s.invalido,
                     // Sobre a marca a tinta vence inválido — ver `usePeleSobreAMarca`.
                     peleDaMarca,
@@ -324,7 +326,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                     sf.campoDeTexto,
                                                     { fontSize: fonteDoTamanho(t, tam), fontFamily: tf.font.ui[400],
                                                         color: tf.color.foreground },
-                                                ] }), texto.length > 0 && (_jsx(IconButton, { name: "x", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: sf.carregando, children: _jsx(Spinner, { label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: sf.vazio, children: typeof empty === "string" || empty == null
+                                                ] }), texto.length > 0 && (_jsx(IconButton, { name: "x", label: strings.searchClear, appearance: "ghost", size: "sm", onPress: () => digitar(""), testID: testID ? `${testID}-busca-limpar` : undefined }))] }), loading && (_jsx(View, { style: sf.carregando, children: _jsx(Spinner, { size: "sm", label: strings.comboboxLoading }) })), nada && (_jsx(View, { style: sf.vazio, children: typeof empty === "string" || empty == null
                                             ? _jsx(Text, { size: "sm", tone: "muted", children: empty ?? strings.comboboxEmpty })
                                             : empty })), _jsx(FlatList, { data: filtrados, keyExtractor: (i) => i.value, keyboardShouldPersistTaps: "handled", onEndReached: onEndReached, onEndReachedThreshold: ANTECEDENCIA_DE_PAGINA, renderItem: ({ item }) => (_jsxs(Pressable, { disabled: item.disabled, onPress: () => { onValueChange?.(item); fechar(); }, accessibilityRole: "menuitem", ...estadoAcessivel({
                                                 selected: item.value === value?.value, disabled: !!item.disabled,
@@ -332,7 +334,7 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
                                                 sf.opcao,
                                                 item.value === value?.value && sf.opcaoEscolhida,
                                                 item.disabled && sf.desabilitado,
-                                            ], children: [_jsx(Text, { size: "md", weight: item.value === value?.value ? 600 : 400, children: item.label }), item.description != null && (_jsx(Text, { size: "xs", tone: "muted", children: item.description }))] })) }), _jsx(RecuoDaFolha, { comTeclado: true })] })] }) }) })] }));
+                                            ], children: [_jsxs(View, { style: sf.textoDaOpcao, children: [_jsx(Text, { size: "md", weight: 500, children: item.label }), item.description != null && (_jsx(Text, { size: "xs", tone: "muted", children: item.description }))] }), item.value === value?.value && indicadorDaEscolhida(tf)] })) }), _jsx(RecuoDaFolha, { comTeclado: true })] })] }) }) })] }));
 }
 // ── A DOBRA DE ACENTO, e por que ela é sondada em vez de presumida ───────────────────────────
 // Buscar "acucar" tem de achar "açúcar" — num catálogo em português, exigir o acento certo é

package/dist/display.js

@@ -15,7 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   .badge-solid/outline :1053-4  as duas ênfases além do `soft`
 //   .status       aurea.css:1060  linha, gap space-2, mutedForeground, textSm
 //   .status-dot   aurea.css:1055  8 quadrado, redondo, halo de 3 na cor corrente a 14%
-//   .avatar       aurea.css:1196  quadrado da altura de controle, redondo, borda borderStrong
+//   .avatar       aurea.css:1196  ~~quadrado da altura de controle~~, redondo, borda borderStrong
+//                                 (0.32.0: o lado e a letra são os do avatar nativo da referência)
 //   .kpi          aurea.css:1207  coluna com gap 5 — **dentro de um Card**
 //
 // ⚠ **O `.kpi` do CSS mente sozinho, e o fonte corrige:** `markup.tsx:105` mostra que o `KPI` é
@@ -73,6 +74,8 @@ const folha = criarFolha((t) => ({
     // RN, o mesmo efeito sai com opacidade no próprio anel.
     pontoDeEstado: { width: 8, height: 8, ...canto(t.size.radiusFull) },
     // ── Avatar ─────────────────────────────────────────────────────────────────────────────────
+    // 0.32.0 (ADR-0066): as medidas do avatar NATIVO da referência, lidas no pacote dela — 40 · 48 · 64,
+    // com as iniciais em 12 · 14 · 16 e peso médio. O lado sai no componente (`LADO_DO_AVATAR`).
     avatar: {
         alignItems: "center", justifyContent: "center", overflow: "hidden",
         ...canto(t.size.radiusFull), backgroundColor: t.color.surface3,
@@ -242,6 +245,14 @@ export function Status({ variant, state, children, style, ...rest }) {
                 ? _jsx(Text, { size: "sm", children: rotulo })
                 : rotulo] }));
 }
+/**
+ * O lado do avatar, do pacote nativo da referência: 40 · 48 · 64 (0.32.0). Até a 0.31.0 era a altura
+ * de controle da WEB (`controlHSm/Md/Lg`, 32 · 36 · 40 no confortável), pequena para o polegar.
+ * Na escala de ESPAÇO, e não na de toque: o avatar não é controle e não anda com a densidade — é o
+ * que o `.avatar` da web já faz (`--space-8/10/12`). O 64 é o mesmo `space16` das molduras de 64
+ * da casa (a tela vazia, a miniatura do `PhotoInput`).
+ */
+const LADO_DO_AVATAR = (t, size) => size === "sm" ? t.size.space10 : size === "lg" ? t.size.space16 : t.size.space12;
 /**
  * O retrato redondo.
  *
@@ -255,12 +266,15 @@ export function Avatar({ source, alt, fallback, size = "md", style, testID }) {
     const [falhou, setFalhou] = React.useState(false);
     // A `source` nova merece uma tentativa nova — é o `useEffect([src])` do `identity-client.tsx`.
     React.useEffect(() => { setFalhou(false); }, [source]);
-    const lado = size === "sm" ? t.size.controlHSm : size === "lg" ? t.size.controlHLg : t.size.controlHMd;
+    const lado = LADO_DO_AVATAR(t, size);
     const fonte = typeof source === "string" ? { uri: source } : source;
     return (_jsx(View, { testID: testID, accessible: !!alt, accessibilityRole: alt ? "image" : undefined, accessibilityLabel: alt || undefined, style: [s.avatar, { width: lado, height: lado }, style], children: fonte && !falhou
             ? _jsx(Image, { source: fonte, style: s.imagem, onError: () => setFalhou(true) })
             : typeof fallback === "string"
-                ? _jsx(Text, { size: size === "sm" ? "xs" : "md", weight: 700, children: fallback })
+                // As iniciais da referência: 12 · 14 · 16 em peso médio (eram 14 ou 16, em negrito), com
+                // as linhas de 16 · 20 · 24 — a mesma escada da letra do selo, e pela mesma razão: o token
+                // direto, porque o `size` do `Text` sobe um degrau no telefone (ADR-0050) e a referência não.
+                ? _jsx(Text, { weight: 500, style: LETRA_DO_SELO(t, size), children: fallback })
                 : fallback }));
 }
 const TOM_DA_DIRECAO = { up: "success", down: "danger", flat: "neutral" };

package/dist/escolha.d.ts

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type AureaIcon, type AureaIconRegistry } from "./icon.js";
+export type AureaSliderOrientation = "horizontal" | "vertical";
+export interface SliderProps<V extends number | readonly number[] = number | readonly number[]> {
+    /** O rótulo. Obrigatório: é o nome das alças. `labelHidden` o tira da tela e deixa para o leitor de tela. */
+    label: React.ReactNode;
+    labelHidden?: boolean;
+    /** Um número, ou uma lista de dois para a faixa (duas alças). */
+    value?: V;
+    defaultValue?: V;
+    /** Chamado a cada passo, com o número (ou a lista, na faixa). */
+    onValueChange?: (value: V) => void;
+    /** Chamado ao soltar a alça, ao tocar no trilho e a cada passo do leitor de tela — o momento de salvar. */
+    onValueCommitted?: (value: V) => void;
+    /** Padrões da web: 0, 100 e 1. */
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: AureaSliderOrientation;
+    disabled?: boolean;
+    /** As opções do `Intl.NumberFormat` do valor. Mesma prop da web e do `NumberField`. */
+    format?: Intl.NumberFormatOptions;
+    /** O locale do `Intl`. Sem ele, o do aparelho. */
+    locale?: string;
+    /** Mostrar o valor ao lado do rótulo. Padrão: sim. */
+    showValue?: boolean;
+    /** Com dois valores, o nome de cada alça, na ordem ("Mínimo", "Máximo"). */
+    thumbLabels?: readonly string[];
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * O controle deslizante da referência: o trilho, o preenchimento e a alça em cápsula, com o rótulo
+ * e o valor na linha de cima.
+ *
+ *     <Slider label="Volume" defaultValue={30} />
+ *     <Slider label="Preço" value={faixa} onValueChange={setFaixa} min={0} max={1000} step={10}
+ *             format={{style: "currency", currency: "BRL"}} locale="pt-BR" thumbLabels={["Mínimo", "Máximo"]} />
+ *
+ * Arrastar a alça move a partir de onde ela está; tocar no trilho leva a alça mais perto até ali (e
+ * continua arrastando, como na web). Na faixa, uma alça não passa da outra — para nela, como na
+ * referência. Cada alça é um elemento `adjustable`: o leitor de tela anuncia o valor formatado e
+ * desliza um passo para cima ou para baixo (`increment`/`decrement`).
+ */
+export declare function Slider<V extends number | readonly number[]>({ label, labelHidden, value, defaultValue, onValueChange, onValueCommitted, min, max, step, orientation, disabled, format, locale, showValue, thumbLabels, style, testID, }: SliderProps<V>): React.JSX.Element;
+export interface OTPFieldProps {
+    /** Quantas casas. Obrigatório, como na web: sem ele o campo não sabe quando está completo. */
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Esconde os dígitos atrás de um ponto. */
+    mask?: boolean;
+    disabled?: boolean;
+    /** O nome do campo para o leitor de tela. Dentro de um `Field`, vale o rótulo dele. */
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * O campo de código de uso único — a anatomia da referência: UM campo de texto invisível por cima
+ * das casas, que só desenham. É ele que recebe o teclado, o colar e o código do SMS
+ * (`textContentType="oneTimeCode"` no iPhone, `autoComplete="sms-otp"` no Android).
+ *
+ *     <Field label="Código enviado por SMS"><OTPField length={6} value={codigo} onValueChange={setCodigo} /></Field>
+ *
+ * A casa da vez ganha a borda do foco e o cursor que pisca (parado com "menos movimento"). Só
+ * dígitos entram, como na web. Para o leitor de tela é um campo só, com o nome do `label` (ou do
+ * `Field`); as casas ficam fora da árvore, para ele não ler cada dígito duas vezes.
+ */
+export declare function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, label, style, testID }: OTPFieldProps): React.JSX.Element;
+export type AureaTagGroupSelectionMode = "none" | "single" | "multiple";
+export type AureaTagSize = "sm" | "md" | "lg";
+export type AureaTagVariant = "default" | "surface";
+export interface AureaTagItem {
+    id: string;
+    label: React.ReactNode;
+    /** O texto do nome do X ("Remover Design"), quando o `label` não é texto. */
+    textValue?: string;
+    /** O nome de um glifo do registro, ou o próprio desenho (R-11). */
+    icon?: AureaIcon;
+    disabled?: boolean;
+}
+export interface TagGroupProps {
+    /** O nome do grupo. `labelHidden` o tira da tela e deixa para o leitor de tela. */
+    label: React.ReactNode;
+    labelHidden?: boolean;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    items: readonly AureaTagItem[];
+    selectionMode?: AureaTagGroupSelectionMode;
+    selectedKeys?: readonly string[];
+    defaultSelectedKeys?: readonly string[];
+    onSelectionChange?: (keys: string[]) => void;
+    /** Com ele, cada etiqueta ganha o X. */
+    onRemove?: (ids: string[]) => void;
+    size?: AureaTagSize;
+    variant?: AureaTagVariant;
+    /** Registro local de ícones (o `x` e os das etiquetas), quando não há um em contexto. */
+    icons?: AureaIconRegistry;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * O grupo de etiquetas da referência: as etiquetas numa fila que quebra, com rótulo, descrição e
+ * erro; escolha de nenhuma, uma ou várias; e o X de tirar.
+ *
+ *     <TagGroup label="Assuntos" selectionMode="multiple" items={assuntos}
+ *               selectedKeys={escolhidos} onSelectionChange={setEscolhidos} onRemove={tirar} />
+ *
+ * ⚠ **O X é IRMÃO da etiqueta, e não filho**, ao contrário da referência (lá o botão de tirar mora
+ * dentro do item tocável). No iPhone, um tocável dentro de outro some para o VoiceOver (`check
+ * 43`); aqui a etiqueta é uma moldura com duas partes lado a lado — a que escolhe e a que tira —,
+ * como o `.tag-main` e o `.tag-remove` da web.
+ *
+ * Com escolha, cada etiqueta é um botão com o estado `selected`; sem escolha, é só texto. A
+ * escolhida ganha o fundo com 10% da marca e a letra no destaque (`primaryEmphasis`), a pintura
+ * da web.
+ */
+export declare function TagGroup({ label, labelHidden, description, errorMessage, items, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, onRemove, size, variant, icons, style, testID, }: TagGroupProps): React.JSX.Element;