@aurea-uds/native 0.10.1 → 0.12.1

package/dist/index.d.ts

@@ -4,16 +4,16 @@ export { BottomNavProvider, useBottomNavSpace } from "./barranav.js";
 export { resolverTokens } from "./tokens.js";
 export type { AureaDensity, AureaFontFamilies, AureaFontInput, AureaFontScale, AureaShadow, AureaThemeName, AureaTokens, } from "./tokens.js";
 export { criarFolha, comOpacidade } from "./estilos.js";
-export { Text } from "./text.js";
-export type { TextProps, AureaTextFont, AureaTextLeading, AureaTextSize, AureaTextTone, AureaTextWeight, } from "./text.js";
+export { Text, Heading, Paragraph, Code } from "./text.js";
+export type { TextProps, AureaTextFont, AureaTextLeading, AureaTextSize, AureaTextTone, AureaTextWeight, AureaTextType, HeadingProps, ParagraphProps, CodeProps, AureaTypographyColor, AureaTypographyWeight, AureaTypographyAlign, } from "./text.js";
 export { Icon, IconRegistryProvider, criarRegistroDeIcones, criarGlifo } from "./icon.js";
-export type { IconProps, IconName, AureaIconComponent, AureaIconRegistry, AureaIconSize, AureaGlifoDesenho, AureaGlifoCaminho, AureaGlifoCirculo, AureaGlifoRetangulo, } from "./icon.js";
+export type { IconProps, IconName, CarbonIconName, AureaIconNames, AureaIconComponent, AureaIconRegistry, AureaIconSize, AureaGlifoDesenho, AureaGlifoCaminho, AureaGlifoCirculo, AureaGlifoRetangulo, } from "./icon.js";
 export { Screen } from "./screen.js";
 export type { ScreenProps, AureaScreenBackground, AureaScreenEdge } from "./screen.js";
 export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
-export type { StackProps, ClusterProps, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, } from "./layout.js";
-export { Button, IconButton } from "./actions.js";
-export type { ButtonProps, IconButtonProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, } from "./actions.js";
+export type { StackProps, ClusterProps, AureaStackAlign, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, } from "./layout.js";
+export { Button, IconButton, LinkButton, ThemeToggle } from "./actions.js";
+export type { ButtonProps, IconButtonProps, LinkButtonProps, ThemeToggleProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, } from "./actions.js";
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";
 export type { SpinnerProps, SkeletonProps, ProgressProps, AlertProps, EmptyStateProps, DataStateProps, AureaSpinnerSize, AureaAlertVariant, AureaDataStateValue, } from "./feedback.js";
 export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.js";
@@ -42,3 +42,4 @@ export { NumberField, formatarNumero, lerNumero, separadoresDoLocale } from "./n
 export type { NumberFieldProps, AureaSeparadores } from "./numero.js";
 export { Image, Gallery } from "./midia.js";
 export type { ImageProps, GalleryProps, AureaGalleryItem, AureaImageSource, } from "./midia.js";
+export type { AureaFilaJustify } from "./rolagem.js";

package/dist/index.js

@@ -31,13 +31,13 @@ export { resolverTokens } from "./tokens.js";
 // A fábrica de folhas memoizada por (tema, densidade). Pública porque o consumidor tem o mesmo
 // problema que os componentes daqui — e a medição em aparelho mostrou que ele é real.
 export { criarFolha, comOpacidade } from "./estilos.js";
-export { Text } from "./text.js";
+export { Text, Heading, Paragraph, Code } from "./text.js";
 export { Icon, IconRegistryProvider, criarRegistroDeIcones, criarGlifo } from "./icon.js";
 // A ÚNICA peça do Lote 1 com dependência de terceiro — `react-native-safe-area-context`,
 // autorizada pelo Victor em 03/09/2026 depois de o lote parar por ela (`BUILDING.md` §3).
 export { Screen } from "./screen.js";
 export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
-export { Button, IconButton } from "./actions.js";
+export { Button, IconButton, LinkButton, ThemeToggle } from "./actions.js";
 // ── Lote 2 — o painel, que é só leitura ────────────────────────────────────────────────────
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";
 export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.js";

package/dist/inputs.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { TextInput, type KeyboardTypeOptions, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
+import { type AureaFilaJustify } from "./rolagem.js";
 import { type AureaIconRegistry, type IconName } from "./icon.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
 type ContextoDeCampo = {
@@ -150,6 +151,12 @@ interface ControleProps {
     size?: AureaFieldSize;
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * Onde a marca fica na altura do texto — E5, 25/09/2026. `center` (o padrão) põe a marca no meio
+     * do bloco, como o HeroUI Native (`radio.css` e `control-field.css`: `align-items: center`).
+     * `start` a põe no meio da PRIMEIRA linha, para rótulo longo, de várias linhas.
+     */
+    align?: "center" | "start";
     /**
      * O nome para quem usa leitor de tela, quando ele NÃO deve aparecer escrito no controle.
      *
@@ -275,6 +282,8 @@ export interface SegmentedControlProps extends ViewProps {
     /** Nome do grupo para o leitor de tela. */
     label?: string;
     disabled?: boolean;
+    /** Onde o controle fica quando cabe na linha: `start` (padrão), `center` ou `end` (E3). */
+    justify?: AureaFilaJustify;
 }
 /**
  * Um de poucos, lado a lado.
@@ -284,7 +293,7 @@ export interface SegmentedControlProps extends ViewProps {
  * há teclado aqui**, então o que resta é o que já se faz à mão: papel de grupo de rádio, um
  * `radio` por segmento, e o estado `selected` em quem está escolhido.
  */
-export declare function SegmentedControl({ items, value, onChange, label, disabled, style, ...rest }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ items, value, onChange, label, disabled, justify, style, ...rest }: SegmentedControlProps): React.JSX.Element;
 export interface SelectProps {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -44,6 +44,7 @@ import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
+import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens, usePeleSobreAMarca, ForaDaMarca } from "./theme.js";
 const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
@@ -79,11 +80,14 @@ const folha = criarFolha((t) => ({
     campoNoGrupo: { flex: 1, minWidth: 0, paddingVertical: 0, textAlignVertical: "center" },
     encaixe: { flexDirection: "row", alignItems: "center", flexShrink: 0, gap: t.size.space1 },
     marcaBase: {
-        alignItems: "center", justifyContent: "center", marginTop: 1,
+        alignItems: "center", justifyContent: "center",
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
         backgroundColor: t.color.fieldBg,
     },
-    linhaDeControle: { flexDirection: "row", alignItems: "flex-start", gap: 9 },
+    // E5: a marca no MEIO da altura do texto, como o HeroUI Native. 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 },
+    linhaNoTopo: { alignItems: "flex-start" },
     trilho: { borderRadius: t.size.radiusFull, backgroundColor: t.color.muted,
         borderWidth: t.size.borderWidth, borderColor: t.color.border, justifyContent: "center" },
     polegar: { position: "absolute", left: 3, borderRadius: t.size.radiusFull },
@@ -327,7 +331,7 @@ export function PasswordField({ defaultVisible = false, size, disabled, autoCapi
     const inativo = disabled ?? campo?.disabled;
     return (_jsxs(InputGroup, { size: tam, disabled: inativo, testID: testID, children: [leading ? _jsx(InputGroupAddon, { children: leading }) : null, _jsx(Input, { ...rest, size: tam, disabled: inativo, autoCapitalize: autoCapitalize, secureTextEntry: !visivel, style: style, testID: testID ? `${testID}-campo` : undefined }), _jsx(InputGroupAddon, { children: _jsx(IconButton, { name: visivel ? "view--off" : "view", label: visivel ? strings.passwordHide : strings.passwordShow, appearance: "ghost", size: tam === "lg" ? "md" : "sm", disabled: inativo, icons: icons, onPress: () => setVisivel(v => !v), testID: testID ? `${testID}-olho` : undefined }) })] }));
 }
-function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }) {
+function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, align = "center", }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
@@ -339,12 +343,16 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
     // A marca é METADE da altura do controle — `aurea.css:871`, e é o que faz ela crescer junto
     // com a densidade sem token próprio.
     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.
+    const linha = t.size.textBase * t.size.leadingNormal;
+    const noTopo = align === "start" ? { marginTop: Math.max(0, (linha - lado) / 2) } : null;
     return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: papel, accessibilityState: { checked: !!checked, disabled: !!inativo }, 
         // ⚠ O `accessibilityLabel` de fora vence o `label` escrito, e existe para o caso em que o
         // nome JÁ está na tela ao lado — uma linha de `NavList`, por exemplo. Sem ele, ou o nome
         // 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, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
-                    s.marcaBase,
+        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,
                     { width: lado, height: lado,
                         borderRadius: papel === "radio" ? t.size.radiusFull : 5 },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
@@ -452,12 +460,12 @@ export function Switch({ label, description, checked, onChange, disabled, size,
  * há teclado aqui**, então o que resta é o que já se faz à mão: papel de grupo de rádio, um
  * `radio` por segmento, e o estado `selected` em quem está escolhido.
  */
-export function SegmentedControl({ items, value, onChange, label, disabled, style, ...rest }) {
+export function SegmentedControl({ items, value, onChange, label, disabled, justify, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
-    return (_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
+    return (_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
                 const ativo = it.value === value;
                 return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
                             ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, 
@@ -519,7 +527,7 @@ export function Select({ items, value, onChange, placeholder, disabled, size, ch
                     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", onRequestClose: () => setAberto(false), children: _jsxs(View, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsx(View, { style: s.lista, onStartShouldSetResponder: () => true, children: _jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", accessibilityState: { selected: it.value === value, disabled: !!it.disabled }, style: [s.opcao, it.disabled && s.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }) })] }) }) })] }));
+                ], 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: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: () => setAberto(false), accessible: false }), _jsxs(View, { style: s.lista, children: [_jsx(ScrollView, { children: items.map((it) => (_jsx(Pressable, { disabled: it.disabled, onPress: () => { onChange?.(it.value); setAberto(false); }, accessibilityRole: "menuitem", accessibilityState: { selected: it.value === value, disabled: !!it.disabled }, style: [s.opcao, it.disabled && s.desabilitado], children: _jsx(Text, { size: "md", weight: it.value === value ? 600 : 400, children: it.label }) }, it.value))) }), _jsx(RecuoDaFolha, {})] })] }) }) })] }));
 }
 /**
  * A pilha de campos, com o respiro do `--space-5`.

package/dist/layout.d.ts

@@ -1,13 +1,21 @@
 import * as React from "react";
 import { type ViewProps } from "react-native";
+/** Eixo cruzado do `Stack` — os MESMOS valores do `Stack` da web (B-01). */
+export type AureaStackAlign = "start" | "center" | "end" | "stretch";
 export interface StackProps extends ViewProps {
     children?: React.ReactNode;
+    /**
+     * Eixo cruzado (o horizontal). Padrão `stretch`: os filhos ocupam a largura, como sempre e como
+     * na web. E2, 25/09/2026: desde que o `Button` passou a obedecer o pai (como no HeroUI Native e
+     * na web), é aqui que se diz "botão do tamanho do texto" (`start`) ou "no meio" (`center`).
+     */
+    align?: AureaStackAlign;
 }
 /** Coluna com `--space-4` entre os filhos. **Sem prop de espaçamento, de propósito.** */
-export declare function Stack({ style, ...rest }: StackProps): React.JSX.Element;
+export declare function Stack({ align, style, ...rest }: StackProps): React.JSX.Element;
 export type AureaClusterAlign = "start" | "center" | "end" | "baseline";
 export type AureaClusterJustify = "start" | "center" | "end" | "between";
-export interface ClusterProps extends StackProps {
+export interface ClusterProps extends Omit<StackProps, "align"> {
     /** Eixo cruzado (o vertical). Padrão `center`, o `align-items:center` do `.cluster`. */
     align?: AureaClusterAlign;
     /** Eixo principal (o horizontal). Padrão `start`. `between` espalha o que sobrar entre os itens. */
@@ -41,15 +49,19 @@ export interface GridProps extends ViewProps {
  * sozinho e ESTICA a última linha. **No React Native não existe CSS Grid**: o layout é flexbox e
  * nada mais (medido no contrato do `react-native`; não há `display:grid`).
  *
- * O que se faz aqui é o mais próximo honesto: `flexWrap` com uma largura mínima por filho. A
- * diferença visível é uma só, e fica declarada em vez de escondida — **os itens da última linha
- * não esticam para preencher a sobra**. Quem precisa de célula elástica passa `flexGrow: 1` no
- * filho; é decisão de tela, não do primitivo.
+ * ~~O que se faz aqui é o mais próximo honesto: `flexWrap` com uma largura mínima por filho. A
+ * diferença visível é uma só (…) os itens da última linha não esticam para preencher a sobra.~~
+ * **E11 (0.12.1):** a diferença era maior do que a declarada — nenhuma linha repartia a sobra.
+ * Com `minColumnWidth={150}` numa linha de 372 ficavam duas colunas de 150 e 56 vazios (medido no
+ * Yoga). Agora a grade mede a própria largura (`onLayout`) e faz a conta do `auto-fill` da web:
+ * cabem `⌊(largura + vão) / (mínimo + vão)⌋` colunas, e a sobra se reparte entre elas. Na última
+ * linha a célula continua do tamanho de UMA coluna, como na web. Antes da medida (o primeiro
+ * quadro), vale a largura mínima de sempre.
  *
  * O `min(…, 100%)` da web tem par aqui: `maxWidth: "100%"` no filho, para a coluna não estourar o
  * contêiner quando o texto cresce — a mesma lição que a Fase 11 registrou no CSS.
  */
-export declare function Grid({ minColumnWidth, style, children, ...rest }: GridProps): React.JSX.Element;
+export declare function Grid({ minColumnWidth, style, children, onLayout, ...rest }: GridProps): React.JSX.Element;
 /** Qual superfície o cartão é. Mesmos seis nomes da ficha da web. */
 export interface SeparatorProps extends ViewProps {
     orientation?: "horizontal" | "vertical";

package/dist/layout.js

@@ -12,7 +12,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // do `Stack` na web escreve o porquê — *"um primitivo de layout que aceita qualquer espaçamento é
 // como um sistema deixa de ter espaçamento"*. Reabrir isso no nativo criaria dois sistemas.
 import * as React from "react";
-import { Pressable, View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 // `ref` chega por PROPS, sem `forwardRef` — e' o padrao do React 19, e e' o que o
 // `@aurea-uds/react` ja' faz (o `Stack` da web e' `HTMLAttributes & RefAttributes`, sem
 // envelope). O `ViewProps`/`TextProps` do RN 0.87 ja' declaram `ref`, entao ele viaja no
@@ -59,10 +59,11 @@ const folha = criarFolha((t) => ({
     // A ação fica embaixo, separada pelo mesmo respiro que o resto da casa usa entre blocos.
     acaoDaMarca: { marginTop: t.size.space3 },
 }));
+const ALINHAR_COLUNA = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" };
 /** Coluna com `--space-4` entre os filhos. **Sem prop de espaçamento, de propósito.** */
-export function Stack({ style, ...rest }) {
+export function Stack({ align, style, ...rest }) {
     const s = folha(useAureaTokens());
-    return _jsx(View, { style: [s.stack, style], ...rest });
+    return _jsx(View, { style: [s.stack, align != null && { alignItems: ALINHAR_COLUNA[align] }, style], ...rest });
 }
 const ALINHAR = { start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
 const JUSTIFICAR = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
@@ -93,18 +94,44 @@ export function Cluster({ align, justify, wrap, style, ...rest }) {
  * sozinho e ESTICA a última linha. **No React Native não existe CSS Grid**: o layout é flexbox e
  * nada mais (medido no contrato do `react-native`; não há `display:grid`).
  *
- * O que se faz aqui é o mais próximo honesto: `flexWrap` com uma largura mínima por filho. A
- * diferença visível é uma só, e fica declarada em vez de escondida — **os itens da última linha
- * não esticam para preencher a sobra**. Quem precisa de célula elástica passa `flexGrow: 1` no
- * filho; é decisão de tela, não do primitivo.
+ * ~~O que se faz aqui é o mais próximo honesto: `flexWrap` com uma largura mínima por filho. A
+ * diferença visível é uma só (…) os itens da última linha não esticam para preencher a sobra.~~
+ * **E11 (0.12.1):** a diferença era maior do que a declarada — nenhuma linha repartia a sobra.
+ * Com `minColumnWidth={150}` numa linha de 372 ficavam duas colunas de 150 e 56 vazios (medido no
+ * Yoga). Agora a grade mede a própria largura (`onLayout`) e faz a conta do `auto-fill` da web:
+ * cabem `⌊(largura + vão) / (mínimo + vão)⌋` colunas, e a sobra se reparte entre elas. Na última
+ * linha a célula continua do tamanho de UMA coluna, como na web. Antes da medida (o primeiro
+ * quadro), vale a largura mínima de sempre.
  *
  * O `min(…, 100%)` da web tem par aqui: `maxWidth: "100%"` no filho, para a coluna não estourar o
  * contêiner quando o texto cresce — a mesma lição que a Fase 11 registrou no CSS.
  */
-export function Grid({ minColumnWidth = 240, style, children, ...rest }) {
-    const s = folha(useAureaTokens());
-    const celula = React.useMemo(() => ({ flexGrow: 0, flexShrink: 1, flexBasis: minColumnWidth, minWidth: minColumnWidth, maxWidth: "100%" }), [minColumnWidth]);
-    return (_jsx(View, { style: [s.grid, style], ...rest, children: React.Children.map(children, (filho) => {
+export function Grid({ minColumnWidth = 240, style, children, onLayout, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const [largura, setLargura] = React.useState(null);
+    const plano = (StyleSheet.flatten([s.grid, style]) ?? {});
+    const vao = numero(plano.columnGap) ?? numero(plano.gap) ?? t.size.space4;
+    // A largura por dentro: o `onLayout` dá a de fora, e o recuo e a borda do `style` saem dela.
+    const recuo = (numero(plano.paddingLeft) ?? numero(plano.paddingHorizontal) ?? numero(plano.padding) ?? 0)
+        + (numero(plano.paddingRight) ?? numero(plano.paddingHorizontal) ?? numero(plano.padding) ?? 0)
+        + (numero(plano.borderLeftWidth) ?? numero(plano.borderWidth) ?? 0)
+        + (numero(plano.borderRightWidth) ?? numero(plano.borderWidth) ?? 0);
+    const celula = React.useMemo(() => {
+        if (largura == null || largura <= 0) {
+            return { flexGrow: 0, flexShrink: 1, flexBasis: minColumnWidth, minWidth: minColumnWidth, maxWidth: "100%" };
+        }
+        // `repeat(auto-fill, minmax(min(mínimo, 100%), 1fr))` da web, em conta.
+        const colunas = Math.max(1, Math.floor((largura + vao) / (minColumnWidth + vao)));
+        const coluna = (largura - vao * (colunas - 1)) / colunas;
+        // ⚠ A base vai ARREDONDADA PARA BAIXO e o teto é o número exato: o motor arredonda cada
+        // largura ao pixel do aparelho, e duas colunas exatas podiam somar um fio a mais que a linha
+        // e cair uma para a linha de baixo. Com a base menor elas sempre cabem, e o `flexGrow` as
+        // leva até o teto — a linha cheia fecha certo, e a célula sozinha da última linha para no
+        // tamanho de uma coluna.
+        return { flexGrow: 1, flexShrink: 1, flexBasis: Math.floor(coluna), maxWidth: coluna, minWidth: 0 };
+    }, [largura, minColumnWidth, vao]);
+    return (_jsx(View, { style: [s.grid, style], ...rest, onLayout: (e) => { setLargura(e.nativeEvent.layout.width - recuo); onLayout?.(e); }, children: React.Children.map(children, (filho) => {
             if (!React.isValidElement(filho))
                 return filho;
             // 🔴 O `flexGrow: 1` É O ITEM C14, e ele existe porque a célula NÃO basta.
@@ -128,6 +155,8 @@ export function Grid({ minColumnWidth = 240, style, children, ...rest }) {
             return _jsx(View, { style: celula, children: estica });
         }) }));
 }
+/** O número de um estilo, ou nada — porcentagem e `"auto"` não entram na conta da grade. */
+const numero = (v) => (typeof v === "number" ? v : undefined);
 /**
  * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.
  *

package/dist/navigation.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { type ViewProps } from "react-native";
 import { type IconName } from "./icon.js";
+import { type AureaFilaJustify } from "./rolagem.js";
 export interface AureaNavItem {
     id: string;
     label: React.ReactNode;
@@ -197,6 +198,8 @@ export interface TabsProps extends ViewProps {
     onChange?: (id: string) => void;
     /** Nome da fila de abas para o leitor de tela. */
     label?: string;
+    /** Onde a fila de abas fica quando cabe: `start` (padrão), `center` ou `end` (E3). */
+    justify?: AureaFilaJustify;
 }
 /**
  * As abas DENTRO da tela — trocar o painel, não trocar de página.
@@ -231,4 +234,4 @@ export interface TabsProps extends ViewProps {
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export declare function Tabs({ tabs, value, onChange, label, style, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, onChange, label, justify, style, ...rest }: TabsProps): React.JSX.Element;

package/dist/navigation.js

@@ -413,12 +413,12 @@ export function Stepper({ items, label, doneIcon = "checkmark", errorIcon = "err
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export function Tabs({ tabs, value, onChange, label, style, ...rest }) {
+export function Tabs({ tabs, value, onChange, label, justify, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
     const aberta = tabs.find((it) => it.id === value);
-    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
                         const ativa = it.id === value;
                         return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", accessibilityState: { selected: ativa, disabled: !!it.disabled }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && 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 })

package/dist/numero.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
+import type { IconName } from "./icon-names.js";
 import { type AureaFieldSize } from "./inputs.js";
 /** Os separadores de um locale, derivados de um número-sonda. */
 export type AureaSeparadores = {
@@ -71,13 +72,12 @@ export interface NumberFieldProps {
     keyboardType?: "numeric" | "decimal-pad" | "number-pad" | "numbers-and-punctuation";
     /** Os glifos dos botões. Registre-os, ou passe `false` para tirar os dois. */
     icons?: {
-        increment: IconNameLocal;
-        decrement: IconNameLocal;
+        increment: IconName;
+        decrement: IconName;
     } | false;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-type IconNameLocal = string;
 /**
  * O número que se digita OU se empurra de um em um.
  *
@@ -116,4 +116,3 @@ type IconNameLocal = string;
  * partir de outros dois funcionar.
  */
 export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, format, locale, disabled, readOnly, size, fullWidth, label, placeholder, keyboardType, icons, style, testID, }: NumberFieldProps): React.JSX.Element;
-export {};

package/dist/overlays.js

@@ -60,6 +60,7 @@ import { Animated, Easing, Modal, PanResponder, Pressable, ScrollView, View, } f
 import { Button } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { IconButton } from "./actions.js";
+import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens, ForaDaMarca } from "./theme.js";
 import { useReduceMotion } from "./movimento.js";
@@ -133,8 +134,14 @@ const DURACAO = 280;
 // afirmação mais forte que "passou no teste", mas não é o vidro. Foi exatamente confiar em
 // "passou no teste" que produziu a primeira tentativa.
 //
-// O `naoAtravessa` FICA no painel como segunda linha: agora é redundante, e redundância que
-// não custa nada num caminho que já falhou uma vez se paga.
+// ~~O `naoAtravessa` FICA no painel como segunda linha: agora é redundante, e redundância que
+// não custa nada num caminho que já falhou uma vez se paga.~~ — **E4, 25/09/2026: ela CUSTAVA.**
+// No Android, um `View` que vira dono do toque pelo JavaScript passa a interceptar os movimentos
+// seguintes (`JSResponderHandler.onInterceptTouchEvent`), e o `ScrollView` de dentro deixa de
+// rolar. O app viu a lista do `Select` e a do `Combobox` sem rolar; a suspeita não está confirmada
+// no aparelho, mas a linha era redundante por construção e saiu dos painéis que têm rolagem dentro
+// (`Dialog`, `Drawer`, `Select`, `Combobox`). Fica no `ConfirmDialog` (sem fundo tocável e sem
+// rolagem) e no `BottomSheet`, onde os `panHandlers` do arrasto já a sobrescrevem.
 //
 // ⚠ Vale para os QUATRO que têm esta forma: `Dialog`, `Drawer`, `BottomSheet` e o `Select` do
 // Lote 4 (`inputs.tsx`). O `ConfirmDialog` é imune desde que nasceu — o fundo dele não tem
@@ -157,7 +164,7 @@ export function Dialog({ open, title, children, footer, onClose, scroll = true,
     const s = folha(t);
     const strings = useAureaStrings();
     const Corpo = scroll ? ScrollView : View;
-    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: [s.fundo, s.centro], children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { ...naoAtravessa, style: [s.superficie, style], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), footer ? _jsx(View, { style: s.rodape, children: footer }) : null] })] }) }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: [s.fundo, s.centro], children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { style: [s.superficie, style], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), footer ? _jsx(View, { style: s.rodape, children: footer }) : null] })] }) }) }));
 }
 /**
  * A decisão que não se desfaz.
@@ -229,7 +236,7 @@ export function Drawer({ open, title, children, onClose, side = "right", scroll
         inputRange: [0, 1],
         outputRange: [side === "right" ? 480 : -480, 0],
     });
-    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, style: [
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [
                             s.gaveta, side === "right" ? s.gavetaDireita : s.gavetaEsquerda,
                             { transform: [{ translateX: desloca }] }, style,
                         ], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }) }));
@@ -287,5 +294,5 @@ export function BottomSheet({ open, title, children, onClose, grabber = true, dr
             }).start();
         },
     }), [draggable, onClose, arrasto, reduzir, t.easing.easeEmphasized]);
-    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, ...gestos.panHandlers, onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, style: [s.folhaBaixo, { transform: [{ translateY: arrasto }] }, style], children: [grabber ? (_jsx(View, { style: s.puxadorArea, accessible: false, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) })) : null, title ? (_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) })) : null, _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, ...gestos.panHandlers, onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, style: [s.folhaBaixo, { transform: [{ translateY: arrasto }] }, style], children: [grabber ? (_jsx(View, { style: s.puxadorArea, accessible: false, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) })) : null, title ? (_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) })) : null, _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), _jsx(RecuoDaFolha, {})] })] }) }) }));
 }

package/dist/rolagem.d.ts

@@ -6,11 +6,18 @@ export interface FilaRolanteProps {
     /** Estilo do invólucro externo, não do conteúdo. */
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * Onde a fila fica quando CABE — E3, 25/09/2026. `start` (o padrão, o de sempre), `center` ou
+     * `end`. Quando não cabe, ela rola, e o alinhamento deixa de existir: começa no início.
+     */
+    justify?: AureaFilaJustify;
 }
+/** Onde a fila fica, na linha, quando cabe. O nome é o do `Cluster` (R-09): o eixo da fileira. */
+export type AureaFilaJustify = "start" | "center" | "end";
 /**
  * Uma linha que rola para o lado quando não cabe, e que sabe QUANDO não cabe.
  *
  * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
  * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
  */
-export declare function FilaRolante({ children, style, testID }: FilaRolanteProps): React.JSX.Element;
+export declare function FilaRolante({ children, style, testID, justify }: FilaRolanteProps): React.JSX.Element;

package/dist/rolagem.js

@@ -25,13 +25,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // iOS.** O que está provado aqui é a medição, não a leitura.
 import * as React from "react";
 import { ScrollView } from "react-native";
+const JUSTIFICAR = { center: "center", end: "flex-end" };
 /**
  * Uma linha que rola para o lado quando não cabe, e que sabe QUANDO não cabe.
  *
  * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
  * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
  */
-export function FilaRolante({ children, style, testID }) {
+export function FilaRolante({ children, style, testID, justify = "start" }) {
     const [visivel, setVisivel] = React.useState(0);
     const [conteudo, setConteudo] = React.useState(0);
     const transbordou = conteudo > visivel && visivel > 0;
@@ -41,5 +42,9 @@ export function FilaRolante({ children, style, testID }) {
         showsHorizontalScrollIndicator: transbordou, 
         // Sem isto o conteúdo estica até a largura do rolador, e o respiro da cápsula aparece como
         // faixa vazia à direita quando os itens cabem.
-        contentContainerStyle: { flexGrow: 0 }, style: style, children: children }));
+        // E3: centralizar ou ir para o fim exige o contrário — o recipiente do conteúdo cresce até a
+        // largura do rolador (`flexGrow: 1`) e POSICIONA a cápsula lá dentro. Ela não estica: na
+        // fileira, o filho tem a largura dele. Medido pelo app: rolador 335 de largura, fileira 281,
+        // encostada à esquerda, e um `Cluster justify="center"` em volta não mudava nada.
+        contentContainerStyle: justify === "start" ? { flexGrow: 0 } : { flexGrow: 1, justifyContent: JUSTIFICAR[justify] }, style: style, children: children }));
 }

package/dist/screen.d.ts

@@ -66,3 +66,13 @@ export interface ScreenProps extends ViewProps {
  * nenhum). Quem exige o provider são os HOOKS — e quem usa `react-navigation` já o tem.
  */
 export declare function Screen({ edges, padded, scroll, background, onRefresh, refreshing, footer, style, children, ...rest }: ScreenProps): React.JSX.Element;
+/** O recuo de baixo do sistema (barra de botões ou de gestos), em dp. */
+export declare function useRecuoDoSistema(): number;
+/**
+ * O espaço do recuo do sistema no fim de uma folha de baixo. Uso interno.
+ * `comTeclado`: com o teclado aberto a folha sobe acima dele e deixa de ficar atrás da barra do
+ * sistema, e o espaço vai a zero — senão sobraria uma faixa vazia entre a lista e o teclado.
+ */
+export declare function RecuoDaFolha({ comTeclado }: {
+    comTeclado?: boolean;
+}): React.JSX.Element;

package/dist/screen.js

@@ -1,6 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RefreshControl, ScrollView, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+// Aurea nativo — `Screen`, a casca de uma tela.
+//
+// **NÃO TEM PAR NA WEB, e a razão é a plataforma.** Lá o `<body>` já é a tela: o navegador
+// desenha a barra de status, o browser resolve o entalhe, e a única regra da Aurea é
+// `body { background: var(--background) }` (medido no `packages/core/src/aurea.css`). No React
+// Native não há `<body>`: a raiz de cada tela é um `View` que alguém precisa mandar preencher,
+// pintar e afastar do entalhe.
+//
+// ── A DEPENDÊNCIA, E POR QUE ELA EXISTE ──────────────────────────────────────────────────────
+// Este é o único componente do Lote 1 que precisou de dependência nova, e por isso ele parou o
+// lote e voltou para o Victor (`BUILDING.md` §3). Ele autorizou o peer em 03/09/2026.
+//
+// O que foi medido antes de pedir:
+//   • o `SafeAreaView` do PRÓPRIO React Native está **deprecado** desde a 0.81 — e nunca fez nada
+//     no Android, onde ele é literalmente um `View`;
+//   • o substituto de fato é `react-native-safe-area-context` (**MIT**), que é o que o
+//     `react-navigation` e o `expo-router` já arrastam. Adotá-lo como peer não adiciona peso ao
+//     app: declara o que já ia estar lá;
+//   • ele é **módulo nativo** (`android/`, `ios/`, `common/cpp/` no tarball) — vem embutido no
+//     Expo Go, então o caminho de smoke test continua valendo.
+//
+// ── POR QUE `SafeAreaView` E NÃO `useSafeAreaInsets` ─────────────────────────────────────────
+// A biblioteca oferece os dois. O hook devolve números e deixa você somar; o componente resolve
+// no lado NATIVO. Escolhi o componente, e a razão saiu da leitura do fonte C++
+// (`RNCSafeAreaViewShadowNode.cpp`, versão 5.9.1), não de preferência:
+//
+//     getEdgeValue: "off" -> só o seu padding
+//                   "maximum" -> max(inset, padding)
+//                   qualquer outro (o padrão é "additive") -> inset + padding
+//
+// Ou seja: o inset **SOMA** ao padding que a folha da Aurea já pôs, no cálculo de layout do Yoga,
+// antes do primeiro frame. Com o hook, o padding sairia de um `useState` que só tem valor DEPOIS
+// que o nativo avisa — um quadro com o conteúdo embaixo do entalhe, e um re-render a cada
+// rotação. O componente não tem esse quadro.
+//
+// ⚠ Um limite que o mesmo fonte declara e que herdamos: **padding em porcentagem não é
+// suportado** na soma. Os tokens da Aurea são todos numéricos (dp), então isto não morde aqui —
+// mas morde quem passar `padding: "5%"` no `style`.
+import * as React from "react";
+import { Keyboard, RefreshControl, ScrollView, View } from "react-native";
+import { SafeAreaInsetsContext, SafeAreaView, initialWindowMetrics } from "react-native-safe-area-context";
 import { useBottomNavSpace } from "./barranav.js";
 import { criarFolha } from "./estilos.js";
 import { useAureaTokens } from "./theme.js";
@@ -95,3 +134,46 @@ function Rodape({ dentroDoRespiro, pegaABorda, respiroDaBarra, children }) {
         return _jsx(View, { style: recuo, children: children });
     return _jsx(SafeAreaView, { edges: ["bottom"], style: recuo, children: children });
 }
+// ── E10 · O RECUO DAS FOLHAS DE BAIXO (`Select`, `Combobox`, `BottomSheet`) ──────────────────
+// 🔴 DENTRO DE UM `Modal`, O `SafeAreaView` NÃO SERVE, e a razão foi lida no fonte da biblioteca
+// (`SafeAreaView.kt` e `SafeAreaUtils.kt`, versão 5.9.1), não presumida:
+//
+//     findProvider(): sobe pelos pais atrás de um `SafeAreaProvider`; sem achar, usa A SI MESMO.
+//     getSafeAreaInsets(view): if (view.height == 0) return null   // "ainda sem layout"
+//
+// O `Modal` é outra janela do Android: o `SafeAreaProvider` do app não é pai de nada lá dentro.
+// Então a peça mede a si mesma — e a da 0.11.0 era VAZIA, de altura 0, esperando o recuo para
+// ganhar altura. Nunca ganhava: o recuo ficava em zero e o último item, atrás dos botões do
+// sistema (achado E10 do app).
+//
+// A saída é a do HeroUI Native (`select.tsx`, `useSafeAreaInsets`): o número vem do CONTEXTO
+// do React, que atravessa o `Modal`, e vira um espaço de altura conhecida no fim da folha. Sem
+// `SafeAreaProvider` no app, vale a medida da abertura (`initialWindowMetrics`), que a
+// biblioteca calcula sem provider — e o componente não quebra quem não tem provider.
+// ⚠ As três folhas cobrem a tela toda (`navigationBarTranslucent`): é o que faz o recuo do
+// contexto, que é o da janela do app, ser exatamente o que a folha fica atrás da barra.
+/** O recuo de baixo do sistema (barra de botões ou de gestos), em dp. */
+export function useRecuoDoSistema() {
+    const doContexto = React.useContext(SafeAreaInsetsContext);
+    return (doContexto ?? initialWindowMetrics?.insets)?.bottom ?? 0;
+}
+/** O teclado está aberto? Pelos avisos do próprio React Native. */
+function useTecladoAberto() {
+    const [aberto, setAberto] = React.useState(false);
+    React.useEffect(() => {
+        const mostra = Keyboard.addListener("keyboardDidShow", () => setAberto(true));
+        const esconde = Keyboard.addListener("keyboardDidHide", () => setAberto(false));
+        return () => { mostra.remove(); esconde.remove(); };
+    }, []);
+    return aberto;
+}
+/**
+ * O espaço do recuo do sistema no fim de uma folha de baixo. Uso interno.
+ * `comTeclado`: com o teclado aberto a folha sobe acima dele e deixa de ficar atrás da barra do
+ * sistema, e o espaço vai a zero — senão sobraria uma faixa vazia entre a lista e o teclado.
+ */
+export function RecuoDaFolha({ comTeclado = false }) {
+    const recuo = useRecuoDoSistema();
+    const teclado = useTecladoAberto();
+    return _jsx(View, { style: { height: comTeclado && teclado ? 0 : recuo } });
+}

package/dist/strings.d.ts

@@ -62,6 +62,9 @@ export interface AureaStrings {
     comboboxEmpty: string;
     /** O botão que desfaz a escolha do `Combobox`. Mesmo nome da web. */
     comboboxClear: string;
+    /** O nome do `ThemeToggle` quando ele leva ao tema escuro, e ao claro. Mesmos nomes da web. */
+    themeToDark: string;
+    themeToLight: string;
     /** O que o `Combobox` anuncia enquanto a busca remota não voltou. Mesmo nome da web. */
     comboboxLoading: string;
     /**