@aurea-uds/native 0.8.7 → 0.8.8

package/dist/barranav.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+/**
+ * Põe em volta do navegador de abas. O `BottomNav` mede a própria altura e conta para ele; o
+ * `Screen` com `scroll` lê e reserva o espaço no fim do conteúdo, sozinho.
+ *
+ * ```tsx
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={rotas.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
+ * ```
+ *
+ * ⚠ **O `BottomNav` vai SOLTO no `tabBar`, sem `View` em volta.** Um embrulho com fundo pinta uma
+ * faixa atrás da pílula e acaba com a flutuação — era o que a documentação antiga mandava fazer,
+ * e era o defeito.
+ *
+ * ⚠ **Fora daqui, `useBottomNavSpace()` devolve 0** e o `Screen` não reserva nada. É o que faz
+ * uma tela cheia, sem abas, continuar exatamente como era.
+ */
+export declare function BottomNavProvider({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Quanto espaço a barra de abas ocupa no pé da tela, em pontos — pílula, margens e folga do
+ * sistema somadas. **Zero** quando não há `BottomNavProvider` em volta, ou quando a barra é
+ * `edge` (que fica no fluxo e já encurta a tela sozinha).
+ *
+ * O `Screen` com `scroll` já usa isto sozinho. Este gancho é para o resto: uma fileira de botões
+ * presa no pé da tela, por exemplo, que precisa subir acima da pílula.
+ *
+ * ```tsx
+ * const respiro = useBottomNavSpace();
+ * <View style={{position: "absolute", left: 0, right: 0, bottom: respiro}}>
+ *   <Button fullWidth>Salvar</Button>
+ * </View>
+ * ```
+ */
+export declare function useBottomNavSpace(): number;
+/**
+ * Interno: como o `BottomNav` conta a própria altura. Devolve `null` fora de um provedor, e nesse
+ * caso a barra não mede nada — ninguém está ouvindo.
+ */
+export declare function useAnotarBottomNav(): ((n: number) => void) | null;

package/dist/barranav.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Aurea nativo — quanto espaço a barra de abas ocupa, e quem precisa saber.
+//
+// 🔴 **ESTE MÓDULO EXISTE POR UM DEFEITO MEDIDO EM APARELHO, 19/09/2026**, e não por arquitetura.
+// A variante `floating` do `BottomNav` passou a flutuar POR CIMA da tela — que é o que o nome
+// dela sempre prometeu e o que a web já fazia (`.bottom-nav` é `position: sticky; bottom: 0`,
+// `aurea.css:270`). Flutuar por cima tem um preço: **o fim da rolagem fica escondido atrás da
+// pílula.** Alguém tem de reservar esse espaço, e a conta não pode cair no app.
+//
+// ⚠ **Por que a conta não pode ser do app:** ela é a altura da pílula (que depende da densidade,
+// do tamanho da letra do sistema e de haver rótulo) mais as duas margens mais a folga do sistema
+// — que muda entre um aparelho com três botões (≈48) e um com gesto (≈16). Deixar isso para o
+// consumidor é pedir um número mágico que fica errado no primeiro aparelho diferente.
+//
+// ── POR QUE ELE MORA NUM ARQUIVO SÓ DELE ─────────────────────────────────────────────────────
+// Quem MEDE é o `BottomNav` (`navigation.tsx`); quem LÊ é o `Screen` (`screen.tsx`). Os dois não
+// se importam hoje, e pôr o contexto em qualquer um dos dois criaria um ciclo. É a mesma razão
+// que fez a tinta da marca morar no `theme.tsx` — com a diferença de que ali os dois já
+// importavam o `theme`, e aqui não há módulo comum. Então: um arquivo, sem dependência nenhuma
+// além do React.
+import * as React from "react";
+const BarraCtx = React.createContext(null);
+/**
+ * Põe em volta do navegador de abas. O `BottomNav` mede a própria altura e conta para ele; o
+ * `Screen` com `scroll` lê e reserva o espaço no fim do conteúdo, sozinho.
+ *
+ * ```tsx
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={rotas.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
+ * ```
+ *
+ * ⚠ **O `BottomNav` vai SOLTO no `tabBar`, sem `View` em volta.** Um embrulho com fundo pinta uma
+ * faixa atrás da pílula e acaba com a flutuação — era o que a documentação antiga mandava fazer,
+ * e era o defeito.
+ *
+ * ⚠ **Fora daqui, `useBottomNavSpace()` devolve 0** e o `Screen` não reserva nada. É o que faz
+ * uma tela cheia, sem abas, continuar exatamente como era.
+ */
+export function BottomNavProvider({ children }) {
+    const [espaco, setEspaco] = React.useState(0);
+    // `setEspaco` tem identidade estável, então isto só muda quando o número muda — e o número só
+    // muda quando a barra muda de tamanho de verdade (rotação, letra do sistema, troca de variante).
+    const valor = React.useMemo(() => ({ espaco, anotar: setEspaco }), [espaco]);
+    return _jsx(BarraCtx.Provider, { value: valor, children: children });
+}
+/**
+ * Quanto espaço a barra de abas ocupa no pé da tela, em pontos — pílula, margens e folga do
+ * sistema somadas. **Zero** quando não há `BottomNavProvider` em volta, ou quando a barra é
+ * `edge` (que fica no fluxo e já encurta a tela sozinha).
+ *
+ * O `Screen` com `scroll` já usa isto sozinho. Este gancho é para o resto: uma fileira de botões
+ * presa no pé da tela, por exemplo, que precisa subir acima da pílula.
+ *
+ * ```tsx
+ * const respiro = useBottomNavSpace();
+ * <View style={{position: "absolute", left: 0, right: 0, bottom: respiro}}>
+ *   <Button fullWidth>Salvar</Button>
+ * </View>
+ * ```
+ */
+export function useBottomNavSpace() {
+    return React.useContext(BarraCtx)?.espaco ?? 0;
+}
+/**
+ * Interno: como o `BottomNav` conta a própria altura. Devolve `null` fora de um provedor, e nesse
+ * caso a barra não mede nada — ninguém está ouvindo.
+ */
+export function useAnotarBottomNav() {
+    return React.useContext(BarraCtx)?.anotar ?? null;
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { AureaProvider, useAureaTheme, useAureaTokens } from "./theme.js";
 export type { AureaProviderProps, AureaThemeControl } from "./theme.js";
+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 } from "./estilos.js";

package/dist/index.js

@@ -24,6 +24,9 @@
 // e o caminho profundo é a forma documentada (ADR-0038, cláusula 1) — importar daqui traria os
 // 2571 ao grafo do bundler.
 export { AureaProvider, useAureaTheme, useAureaTokens } from "./theme.js";
+// A barra de abas que flutua precisa contar a própria altura para a tela reservar o fim da
+// rolagem. Ver `barranav.tsx` — e o `BottomNav`, que é quem mede.
+export { BottomNavProvider, useBottomNavSpace } from "./barranav.js";
 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.

package/dist/inputs.d.ts

@@ -150,6 +150,14 @@ interface ControleProps {
     size?: AureaFieldSize;
     style?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * O nome para quem usa leitor de tela, quando ele NÃO deve aparecer escrito no controle.
+     *
+     * É o caso de uma linha de `NavList`: o nome já está na linha, então repeti-lo no `label` o
+     * escreveria duas vezes — e omitir os dois deixaria o controle **MUDO** para o leitor de tela.
+     * Ele vence o `label` quando os dois vêm.
+     */
+    accessibilityLabel?: string;
 }
 export interface InputGroupProps extends ViewProps {
     /** O degrau do sistema. Cai no `Field` em volta quando não vem, como no `Input`. */
@@ -256,7 +264,7 @@ export interface SwitchProps extends ControleProps {
  * ⚠ **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.
  */
-export declare function Switch({ label, description, checked, onChange, disabled, size, style, testID, }: SwitchProps): React.JSX.Element;
+export declare function Switch({ label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }: SwitchProps): React.JSX.Element;
 export interface SegmentedControlProps extends ViewProps {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -327,16 +327,23 @@ 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, }) {
+function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
+    // Mesma conta do `Switch`, pela mesma razão: sem texto, a coluna vazia com `flex: 1` tomaria a
+    // 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.
     const lado = alturaDoTamanho(t, tam) / 2;
-    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: papel, accessibilityState: { checked: !!checked, disabled: !!inativo }, 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: [
+    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,
                     { width: lado, height: lado,
                         borderRadius: papel === "radio" ? t.size.radiusFull : 5 },
@@ -355,8 +362,8 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
                             borderLeftWidth: 2, borderBottomWidth: 2,
                             borderColor: t.color.controlSelectedForeground,
                             transform: [{ rotate: "-45deg" }],
-                        } })) }), _jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
-                        ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] })] }));
+                        } })) }), temTexto && (_jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
+                        ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] }))] }));
 }
 /** A caixa que marca. `accessibilityRole="checkbox"` + `state.checked`. */
 export function Checkbox(p) { return _jsx(ControleMarcado, { ...p, papel: "checkbox" }); }
@@ -378,13 +385,14 @@ export function Radio(p) { return _jsx(ControleMarcado, { ...p, papel: "radio" }
  * ⚠ **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.
  */
-export function Switch({ label, description, checked, onChange, disabled, size, style, testID, }) {
+export function Switch({ label, description, checked, onChange, disabled, size, style, testID, accessibilityLabel, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
     const reduzir = useReduceMotion();
+    const temTexto = label != null || description != null;
     const h = alturaDoTamanho(t, tam);
     const larguraDoTrilho = h * 7 / 6;
     const alturaDoTrilho = h * 2 / 3;
@@ -403,10 +411,28 @@ export function Switch({ label, description, checked, onChange, disabled, size,
         a.start();
         return () => a.stop();
     }, [checked, pos, reduzir]);
-    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: "switch", accessibilityState: { checked: !!checked, disabled: !!inativo }, accessibilityLabel: typeof label === "string" ? label : campo?.label, 
+    return (_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => onChange?.(!checked), disabled: inativo, accessibilityRole: "switch", accessibilityState: { checked: !!checked, disabled: !!inativo }, 
+        // O `accessibilityLabel` de fora vence o `label` escrito — ver a prop, em `ControleProps`.
+        accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : campo?.label), 
         // Mesma regra do `ControleMarcado`: a descrição vira DICA quando é texto. Sem isto ela
         // desenha na tela e não existe para quem usa leitor de tela.
-        accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [{ flexDirection: "row", alignItems: "center", gap: 10 }, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
+        accessibilityHint: typeof description === "string" ? description : campo?.hint, 
+        // 🔴 SEM RÓTULO E SEM DESCRIÇÃO, A RAIZ É O TRILHO E MAIS NADA — e isto é conserto de um
+        // defeito que só aparece no ANDROID, achado pelo consumidor em 19/09/2026.
+        //
+        // A coluna de texto abaixo tem `flex: 1` e existia mesmo vazia. Dentro de uma fileira — uma
+        // linha de `NavList`, onde o valor-componente é IRMÃO do miolo (`navigation.tsx:248`) — esse
+        // `flex: 1` faz a raiz do `Switch` tomar toda a largura que sobra. O miolo, que também tem
+        // `flex: 1`, encolhe até restar só o ícone, e o NOME DA LINHA SOME.
+        //
+        // ⚠ **No navegador o defeito não aparece**, porque lá a divisão de espaço entre dois
+        // irmãos com `flex:1` parte da largura do conteúdo. É a mesma família do `padding-block` do
+        // `Input`: o que a cascata resolve de graça, aqui é conta explícita.
+        style: [
+            { flexDirection: "row", alignItems: "center" },
+            temTexto && { gap: 10 },
+            inativo && s.desabilitado, style,
+        ], children: [_jsx(View, { style: [
                     s.trilho,
                     { width: larguraDoTrilho, height: alturaDoTrilho },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
@@ -415,8 +441,8 @@ export function Switch({ label, description, checked, onChange, disabled, size,
                         { width: ladoDoPolegar, height: ladoDoPolegar,
                             backgroundColor: checked ? t.color.controlSelectedForeground : t.color.mutedForeground,
                             transform: [{ translateX: pos.interpolate({ inputRange: [0, 1], outputRange: [0, curso] }) }] },
-                    ] }) }), _jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
-                        ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] })] }));
+                    ] }) }), temTexto && (_jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
+                        ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] }))] }));
 }
 /**
  * Um de poucos, lado a lado.

package/dist/layout.js

@@ -87,7 +87,29 @@ export function Cluster({ style, ...rest }) {
 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) => React.isValidElement(filho) ? _jsx(View, { style: celula, children: filho }) : filho) }));
+    return (_jsx(View, { style: [s.grid, style], ...rest, 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.
+            //
+            // A célula já tem a altura certa: a grade é `flexWrap: "wrap"`, e o padrão do Yoga é
+            // `alignItems: Stretch` — medido no fonte do motor, `Style.h:907` —, então cada célula
+            // estica até a mais alta da LINHA. O que não acontecia é o filho preencher a célula: numa
+            // coluna, um filho sem `flexGrow` mede o próprio conteúdo, e dois `KPI` lado a lado, um
+            // com duas linhas de texto e outro com uma, saíam de alturas diferentes.
+            //
+            // ⚠ **Na web isto é de graça e por isso não tinha sido notado:** o `.grid`
+            // (`aurea.css:54`) é `display: grid`, e ali o cartão é o PRÓPRIO item da grade —
+            // `align-items` vale `stretch` por padrão e ele preenche a linha. Aqui existe uma célula
+            // no meio, e é ela que corta a herança de altura.
+            //
+            // ⚠ **O estilo vai ANTES do que o filho já tinha**, para um `style` do consumidor
+            // continuar vencendo. E um filho que não aceite `style` simplesmente não estica — fica
+            // como estava, nunca pior.
+            const proprio = filho.props.style;
+            const estica = React.cloneElement(filho, { style: [{ flexGrow: 1 }, proprio] });
+            return _jsx(View, { style: celula, children: estica });
+        }) }));
 }
 /**
  * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.

package/dist/navigation.d.ts

@@ -33,31 +33,66 @@ export interface BottomNavProps extends ViewProps {
  *   ]} />
  * ```
  *
- * ⚠ **Ela respeita a barra de gestos sozinha.** Na web isso é
- * `padding-bottom: max(--space-1, env(safe-area-inset-bottom))` (`aurea.css:270`); aqui é o
- * `useSafeAreaInsets().bottom`, pela mesma conta de máximo. Sem isso, num aparelho com barra de
- * gestos, a última linha de rótulo fica embaixo dela.
+ * ⚠ **Ela respeita a área do sistema sozinha, e desde 19/09/2026 POR FORA da pílula.** No
+ * `floating` a folga vira `marginBottom`: a borda de baixo fica exatamente `space4` acima do topo
+ * da área do sistema, seja ela a faixa dos três botões do Android (≈48), a linha de gesto (≈16)
+ * ou o indicador do iPhone. No `edge`, que encosta na borda, ela continua sendo recheio por
+ * dentro — igual à web, onde `.bottom-nav-edge` faz exatamente isso.
  *
  * ⚠ **Não é `Tabs`, e isso é decisão registrada**, não esquecimento — ver o bloco acima.
  *
- * 🔴 **E VOCÊ FICA DONO DO FUNDO ATRÁS DELA — leia isto antes de montar a primeira tela.** Esta
- * barra é IRMÃ da tela, não filha: é assim que se põe uma barra fixa no RN. Só que o `Screen`
- * pinta o tema **na própria raiz**, então o que aparece atrás desta barra é a raiz do SEU app —
- * e raiz sem cor, no Android, é **BRANCA**. Num app de tema escuro isso é uma faixa branca no pé
- * da tela. Envolva os dois num `View` com `flex: 1` e `backgroundColor: tokens.color.background`:
+ * ── COMO MONTAR AS ABAS, com `expo-router` ou `react-navigation` ─────────────────────────────
  *
  * ```tsx
- * const t = useAureaTokens();
- * <View style={{flex: 1, backgroundColor: t.color.background}}>
- *   <Screen scroll>{…}</Screen>
- *   <BottomNav items={…} current={…} />
- * </View>
+ * import {Tabs} from "expo-router";
+ * import {BottomNav, BottomNavProvider} from "@aurea-uds/native";
+ *
+ * const ROTAS = [
+ *   {name: "index",  titulo: "Início", icone: "home"},
+ *   {name: "perfil", titulo: "Perfil", icone: "user"},
+ * ];
+ *
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={ROTAS.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
  * ```
  *
+ * E as telas, sem conta nenhuma de respiro: `<Screen scroll edges={["top"]}>`.
+ *
+ * 🔴 **O `BottomNav` VAI SOLTO NO `tabBar`, SEM `View` EM VOLTA — e esta linha já mandou o
+ * contrário.** Até a `0.8.7` a documentação aqui mandava embrulhar a barra num `View` pintado com
+ * o fundo do tema, porque a barra ficava no FLUXO e o que aparecia atrás dela era a raiz do app,
+ * que no Android é branca. O consumidor seguiu, e o resultado em aparelho foi uma **caixa cinza
+ * em volta da pílula**: ela não flutuava, e a tela terminava acima dela.
+ *
+ * ✅ **Hoje o `floating` é `position: absolute`** — ele sai do fluxo e passa por cima da tela,
+ * que volta a ocupar a altura inteira. Não há nada atrás da pílula para pintar, então **o
+ * embrulho não é mais necessário e atrapalha**: ele é quem desenha a faixa.
+ *
+ * ⚠ **O `edge` continua no fluxo**, e para ELE o conselho antigo continua valendo: embrulhe os
+ * dois num `View` com `flex: 1` e `backgroundColor: t.color.background`, senão sobra a faixa
+ * branca do Android no pé da tela.
+ *
  * ⚠ **E o sintoma engana.** Visto em foto no aparelho em 10/09/2026: com a faixa branca a barra
  * *parece* flutuando longe do pé, que é exatamente o sinal de que o respiro virou SOMA em vez de
  * `Math.max`. A conta estava certa; o branco é que empurrava a leitura. **Antes de acusar a
  * aritmética, pinte o fundo.**
+ *
+ * 🔴 **FLUTUAR TEM UM PREÇO, E A BIBLIOTECA É QUEM PAGA:** o fim da rolagem fica atrás da pílula.
+ * É para isso que o `BottomNavProvider` existe — a barra mede a própria altura e conta para ele,
+ * e o `Screen scroll` reserva o espaço sozinho. **O app não calcula nada.** Para uma tela que não
+ * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
+ * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
 export declare function BottomNav({ items, current, variant, indicator, label, style, ...rest }: BottomNavProps): React.JSX.Element;
 export type AureaTopbarVariant = "floating" | "flush" | "pill";

package/dist/navigation.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAnotarBottomNav } from "./barranav.js";
 import { Badge } from "./display.js";
 import { comOpacidade, criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
@@ -32,14 +33,28 @@ const folha = criarFolha((t) => ({
         borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
     },
     // ── BottomNav ──────────────────────────────────────────────────────────────────────────────
+    // 🔴 `floating` FLUTUA POR CIMA DA TELA, e isto é conserto de 19/09/2026 — a variante prometia
+    // isso no nome e não fazia. `position: absolute` a tira do fluxo: a tela passa a ocupar a altura
+    // inteira e rola POR BAIXO da pílula. É o mesmo que a web faz desde sempre com
+    // `position: sticky; bottom: 0` (`aurea.css:270`) — a divergência era só deste lado.
+    //
+    // ⚠ **As margens são o que deixa o toque passar.** Com `left/right/bottom: 0` e `margin`, a
+    // caixa deste `View` É a pílula: o que sobra em volta não pertence a ela, e o dedo encontra a
+    // tela de baixo. Se a barra fosse uma faixa de largura cheia com a pílula centralizada dentro,
+    // a faixa comeria o toque em silêncio.
+    //
+    // `zSticky` é token (20), o mesmo `--z-sticky` que a web usa na mesma peça.
     barra: {
+        position: "absolute", left: 0, right: 0, bottom: 0, zIndex: t.size.zSticky,
         flexDirection: "row", gap: t.size.space1, margin: t.size.space4, padding: t.size.space1,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
         borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
         boxShadow: [t.shadow.shadowMd],
     },
-    // `edge` encosta na borda: sem margem, sem raio, só a linha de cima.
+    // `edge` encosta na borda: sem margem, sem raio, só a linha de cima — e continua NO FLUXO,
+    // porque uma barra encostada que flutuasse esconderia o fim da tela sem nada reservar.
     barra_edge: {
+        position: "relative", left: undefined, right: undefined, bottom: undefined, zIndex: undefined,
         margin: 0, paddingHorizontal: 0, borderRadius: 0, backgroundColor: t.color.background,
         borderWidth: 0, borderTopWidth: t.size.borderWidth, boxShadow: undefined,
     },
@@ -112,31 +127,66 @@ const folha = criarFolha((t) => ({
  *   ]} />
  * ```
  *
- * ⚠ **Ela respeita a barra de gestos sozinha.** Na web isso é
- * `padding-bottom: max(--space-1, env(safe-area-inset-bottom))` (`aurea.css:270`); aqui é o
- * `useSafeAreaInsets().bottom`, pela mesma conta de máximo. Sem isso, num aparelho com barra de
- * gestos, a última linha de rótulo fica embaixo dela.
+ * ⚠ **Ela respeita a área do sistema sozinha, e desde 19/09/2026 POR FORA da pílula.** No
+ * `floating` a folga vira `marginBottom`: a borda de baixo fica exatamente `space4` acima do topo
+ * da área do sistema, seja ela a faixa dos três botões do Android (≈48), a linha de gesto (≈16)
+ * ou o indicador do iPhone. No `edge`, que encosta na borda, ela continua sendo recheio por
+ * dentro — igual à web, onde `.bottom-nav-edge` faz exatamente isso.
  *
  * ⚠ **Não é `Tabs`, e isso é decisão registrada**, não esquecimento — ver o bloco acima.
  *
- * 🔴 **E VOCÊ FICA DONO DO FUNDO ATRÁS DELA — leia isto antes de montar a primeira tela.** Esta
- * barra é IRMÃ da tela, não filha: é assim que se põe uma barra fixa no RN. Só que o `Screen`
- * pinta o tema **na própria raiz**, então o que aparece atrás desta barra é a raiz do SEU app —
- * e raiz sem cor, no Android, é **BRANCA**. Num app de tema escuro isso é uma faixa branca no pé
- * da tela. Envolva os dois num `View` com `flex: 1` e `backgroundColor: tokens.color.background`:
+ * ── COMO MONTAR AS ABAS, com `expo-router` ou `react-navigation` ─────────────────────────────
  *
  * ```tsx
- * const t = useAureaTokens();
- * <View style={{flex: 1, backgroundColor: t.color.background}}>
- *   <Screen scroll>{…}</Screen>
- *   <BottomNav items={…} current={…} />
- * </View>
+ * import {Tabs} from "expo-router";
+ * import {BottomNav, BottomNavProvider} from "@aurea-uds/native";
+ *
+ * const ROTAS = [
+ *   {name: "index",  titulo: "Início", icone: "home"},
+ *   {name: "perfil", titulo: "Perfil", icone: "user"},
+ * ];
+ *
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={ROTAS.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
  * ```
  *
+ * E as telas, sem conta nenhuma de respiro: `<Screen scroll edges={["top"]}>`.
+ *
+ * 🔴 **O `BottomNav` VAI SOLTO NO `tabBar`, SEM `View` EM VOLTA — e esta linha já mandou o
+ * contrário.** Até a `0.8.7` a documentação aqui mandava embrulhar a barra num `View` pintado com
+ * o fundo do tema, porque a barra ficava no FLUXO e o que aparecia atrás dela era a raiz do app,
+ * que no Android é branca. O consumidor seguiu, e o resultado em aparelho foi uma **caixa cinza
+ * em volta da pílula**: ela não flutuava, e a tela terminava acima dela.
+ *
+ * ✅ **Hoje o `floating` é `position: absolute`** — ele sai do fluxo e passa por cima da tela,
+ * que volta a ocupar a altura inteira. Não há nada atrás da pílula para pintar, então **o
+ * embrulho não é mais necessário e atrapalha**: ele é quem desenha a faixa.
+ *
+ * ⚠ **O `edge` continua no fluxo**, e para ELE o conselho antigo continua valendo: embrulhe os
+ * dois num `View` com `flex: 1` e `backgroundColor: t.color.background`, senão sobra a faixa
+ * branca do Android no pé da tela.
+ *
  * ⚠ **E o sintoma engana.** Visto em foto no aparelho em 10/09/2026: com a faixa branca a barra
  * *parece* flutuando longe do pé, que é exatamente o sinal de que o respiro virou SOMA em vez de
  * `Math.max`. A conta estava certa; o branco é que empurrava a leitura. **Antes de acusar a
  * aritmética, pinte o fundo.**
+ *
+ * 🔴 **FLUTUAR TEM UM PREÇO, E A BIBLIOTECA É QUEM PAGA:** o fim da rolagem fica atrás da pílula.
+ * É para isso que o `BottomNavProvider` existe — a barra mede a própria altura e conta para ele,
+ * e o `Screen scroll` reserva o espaço sozinho. **O app não calcula nada.** Para uma tela que não
+ * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
+ * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
 export function BottomNav({ items, current, variant = "floating", indicator = "none", label, style, ...rest }) {
     const t = useAureaTokens();
@@ -144,11 +194,29 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
     const strings = useAureaStrings();
     const inset = useSafeAreaInsets();
     const redondo = indicator.startsWith("circle");
-    return (_jsx(View, { accessibilityLabel: label ?? strings.bottomNavLabel, style: [
+    const anotar = useAnotarBottomNav();
+    const flutua = variant !== "edge";
+    return (_jsx(View, { accessibilityLabel: label ?? strings.bottomNavLabel, 
+        // 🔴 A BARRA CONTA A PRÓPRIA ALTURA — é o que permite o `Screen` reservar o fim da rolagem
+        // sem o app calcular nada. A conta é a pílula (o que o layout mede) mais as DUAS margens
+        // mais a folga do sistema; `edge` conta zero, porque ela fica no fluxo e já encurta a tela.
+        onLayout: anotar == null ? undefined : (e) => anotar(flutua ? e.nativeEvent.layout.height + t.size.space4 * 2 + inset.bottom : 0), style: [
             s.barra, variant === "edge" && s.barra_edge,
-            // `max`, e não soma: com barra de gestos o respiro dela substitui o nosso; sem ela, o
-            // nosso vale. Somar daria duas vezes o espaço num aparelho e o certo no outro.
-            { paddingBottom: Math.max(t.size.space1, inset.bottom) },
+            // 🔴 NO `floating` A FOLGA DO SISTEMA VAI POR FORA — conserto de 19/09/2026, visto em
+            // aparelho Samsung com os três botões (|||, ○, <).
+            //
+            // Antes, os ≈48 pontos da faixa do sistema entravam como RECHEIO dentro da pílula: ela
+            // crescia para baixo e a barriga dela ficava atrás dos botões. A `margin: space4` não
+            // compensava, porque o que cresceu foi o miolo.
+            //
+            // Agora: recheio de baixo igual aos outros lados, e a folga empurra a pílula para cima.
+            // A borda de baixo fica exatamente `space4` acima do topo da área do sistema, em aparelho
+            // de botões, de gesto ou com o indicador do iPhone — os três caem na mesma conta.
+            flutua
+                ? { paddingBottom: t.size.space1, marginBottom: t.size.space4 + inset.bottom }
+                // `edge` NÃO MUDA: encostada na borda, a folga é recheio mesmo, senão sobraria uma
+                // faixa de fundo entre a barra e o pé da tela. `max` e não soma, como sempre foi.
+                : { paddingBottom: Math.max(t.size.space1, inset.bottom) },
             style,
         ], ...rest, children: items.map((it) => {
             const ativo = it.id === current;

package/dist/numero.d.ts

@@ -103,6 +103,17 @@ type IconNameLocal = string;
  *
  * ⚠ **Formata no blur, e só no blur.** Enquanto o campo tem foco, ele mostra exatamente o que foi
  * digitado — essa é a decisão inteira da ADR-0024, e o teste que a cobra está no lote.
+ *
+ * ⚠ **`onValueChange` dispara a CADA TECLA**, com o número lido pelas regras do `locale` — "12,"
+ * em pt-BR entrega `12`, "1.234,5" entrega `1234.5`, apagar tudo entrega `null`. Texto que ainda
+ * não é número (só "," ou só "-") não dispara nada. **`min`/`max` NÃO prendem durante a
+ * digitação**, só no blur — e se prender mudar o número, ele é emitido de novo.
+ *
+ * ⚠ **Com FOCO, quem manda é quem digita.** Se o pai trocar o `value` por outro número enquanto o
+ * campo está sendo editado, o texto na tela **não muda** — inclusive quando o pai só devolve o
+ * mesmo número que acabou de receber, que é o caso comum de um `useState` controlado. Sem foco, o
+ * campo obedece ao `value` e mostra o número novo formatado, que é o que faz um campo calculado a
+ * 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/numero.js

@@ -231,6 +231,17 @@ const paraEdicao = (n, locale) => {
  *
  * ⚠ **Formata no blur, e só no blur.** Enquanto o campo tem foco, ele mostra exatamente o que foi
  * digitado — essa é a decisão inteira da ADR-0024, e o teste que a cobra está no lote.
+ *
+ * ⚠ **`onValueChange` dispara a CADA TECLA**, com o número lido pelas regras do `locale` — "12,"
+ * em pt-BR entrega `12`, "1.234,5" entrega `1234.5`, apagar tudo entrega `null`. Texto que ainda
+ * não é número (só "," ou só "-") não dispara nada. **`min`/`max` NÃO prendem durante a
+ * digitação**, só no blur — e se prender mudar o número, ele é emitido de novo.
+ *
+ * ⚠ **Com FOCO, quem manda é quem digita.** Se o pai trocar o `value` por outro número enquanto o
+ * campo está sendo editado, o texto na tela **não muda** — inclusive quando o pai só devolve o
+ * mesmo número que acabou de receber, que é o caso comum de um `useState` controlado. Sem foco, o
+ * campo obedece ao `value` e mostra o número novo formatado, que é o que faz um campo calculado a
+ * partir de outros dois funcionar.
  */
 export function NumberField({ value, defaultValue, onValueChange, min, max, step = 1, format, locale, disabled, readOnly, size, fullWidth = false, label, placeholder, keyboardType, icons = { increment: "add", decrement: "subtract" }, style, testID, }) {
     const t = useAureaTokens();
@@ -277,8 +288,41 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
                 emitir(null);
             return;
         }
+        // ⚠ **Só aqui é que `min`/`max` prendem**, e é no blur de propósito — ver `digitar` abaixo.
+        // Se prender mudou o número, o pai recebe o preso: quem ouviu "1" durante a digitação precisa
+        // ouvir o "10" final, senão fica com um valor que o campo não mostra mais.
         emitir(prender(lido, min, max));
     }, [emEdicao, locale, emitir, min, max]);
+    // 🔴 CADA TECLA ENTREGA O NÚMERO — e isto é conserto de defeito que GRAVA DADO ERRADO, não
+    // refinamento. Achado pelo consumidor em aparelho, 19/09/2026.
+    //
+    // Antes, `onChangeText` só guardava o texto aqui dentro e o pai só era avisado no blur. Num
+    // cartão com o campo e o botão de confirmar lado a lado, o `Screen` tem
+    // `keyboardShouldPersistTaps="handled"` (`screen.tsx:154`) — então o toque no botão CHEGA ao
+    // botão sem passar pelo blur. O `onPress` roda com o valor ANTIGO.
+    //
+    // ⚠ **A cara disso na tela é "o campo está vazio"**, e o dano real é maior e mudo: num
+    // formulário que corrige um número já salvo, tocar em Salvar com o teclado aberto regrava o
+    // número velho, sem erro e sem aviso.
+    //
+    // O que NÃO muda com isto, e é a ADR-0024 inteira: o campo continua mostrando o que foi
+    // digitado enquanto tem foco (`emEdicao` é quem manda em `mostrar`), e continua formatando só
+    // no blur. **Digitar nunca é interrompido** — nem pelo formato, nem pelo eco do pai: enquanto
+    // `emEdicao` não é `null`, nada que venha por `value` reescreve o texto.
+    const digitar = React.useCallback((texto) => {
+        setEmEdicao(texto);
+        const lido = lerNumero(texto, locale);
+        // Apagar tudo é VAZIO, que é diferente de ilegível: o vazio é uma intenção e vira `null`.
+        if (lido == null) {
+            if (texto.trim() === "")
+                emitir(null);
+            return;
+        }
+        // ⚠ **NÃO prende aqui.** Com `min={10}`, prender durante a digitação faria o "1" virar 10 na
+        // cara de quem ainda ia digitar o "5" de 15 — o campo escreveria por cima da pessoa. Prender
+        // é do blur, e só.
+        emitir(lido);
+    }, [locale, emitir]);
     const empurrar = React.useCallback((direcao) => {
         // Se o campo está sendo editado, o que vale é o que está escrito — empurrar por cima do valor
         // antigo descartaria a digitação em silêncio.
@@ -311,7 +355,7 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
     // (`aurea.css:685`), com os dois botões FORA dela. O estado que faltava é o deles; a geometria
     // continua sendo a nossa.
     const [focado, setFocado] = React.useState(false);
-    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: setEmEdicao, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
+    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: digitar, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
                 // O nome vem do `Field`, como em todo controle deste pacote — e `label` cobre quem usa o
                 // campo solto. Sem um dos dois, é um nó anônimo para o leitor de tela.
                 accessibilityLabel: label ?? campo?.label, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, "aria-invalid": campo?.invalido, style: [

package/dist/screen.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RefreshControl, ScrollView } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useBottomNavSpace } from "./barranav.js";
 import { criarFolha } from "./estilos.js";
 import { useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -43,7 +44,18 @@ export function Screen({ edges = TODAS_AS_BORDAS, padded = true, scroll = false,
     const t = useAureaTokens();
     const s = folha(t);
     const fundo = s[`fundo_${background}`];
-    return (_jsx(SafeAreaView, { style: [s.raiz, fundo, !scroll && padded && s.respiro, style], edges: edges, ...rest, children: scroll ? (_jsx(ScrollView, { style: s.raiz, contentContainerStyle: [s.conteudo, padded && s.respiro], 
+    // 🔴 O ESPAÇO DA BARRA DE ABAS, quando ela flutua por cima desta tela — ver `barranav.tsx`.
+    // **Zero** fora de um `BottomNavProvider`, que é o caso de toda tela cheia: sem abas, nada muda.
+    const respiroDaBarra = useBottomNavSpace();
+    return (_jsx(SafeAreaView, { style: [s.raiz, fundo, !scroll && padded && s.respiro, style], edges: edges, ...rest, children: scroll ? (_jsx(ScrollView, { style: s.raiz, 
+            // ⚠ O respiro da barra SOMA ao do tema em vez de substituí-lo: escrever
+            // `paddingBottom` depois de `s.respiro` apagaria os 16 do tema e colaria o último
+            // item na pílula. A conta é explícita porque a folha não soma sozinha.
+            contentContainerStyle: [
+                s.conteudo, padded && s.respiro,
+                respiroDaBarra > 0
+                    && { paddingBottom: (padded ? t.size.space4 : 0) + respiroDaBarra },
+            ], 
             // A rosca do sistema é a única aparência da plataforma que a Aurea aceita aqui, e a
             // razão é que ela NÃO É desenho nosso: é o gesto do sistema operacional, com a física
             // que a pessoa já conhece. O que dá para pintar, pintamos — a cor é do tema.

package/dist/text.js

@@ -23,6 +23,36 @@ import * as React from "react";
 import { Text as TextRN } from "react-native";
 import { criarFolha } from "./estilos.js";
 import { useAureaTokens, useSobreAMarca } from "./theme.js";
+// 🔴 A ESCALA TEM CINCO DEGRAUS QUE SE ENXERGAM, E DEZ NOMES — ordem do Victor, 19/09/2026,
+// olhando o app no aparelho: *"o tamanho das fontes: existem variações demais, fica muito
+// estranho"*.
+//
+// Medido no token antes de mexer: **12 · 13 · 14 · 16** eram quatro degraus em quatro pontos.
+// Lado a lado, isso não lê como hierarquia — lê como erro. Uma tela só (a de Início) mostrava de
+// 12 a 36 em SETE tamanhos.
+//
+// A escala nova sobe 25% por degrau, que é o mínimo para dois vizinhos serem distinguíveis a olho
+// nu, e **nada encolhe** — o que importa, porque o Victor tem baixa visão:
+//
+//     legenda, apoio .............. 13   (era 12)
+//     texto corrido, controle ..... 16   (era 13 e 14)
+//     nome de cartão .............. 20   (era 16 e 18)
+//     título de tela .............. 25   (era 20 e 24)
+//     número em destaque .......... 31   (era 30)
+//
+// ⚠ **Os DEZ nomes continuam existindo, e alguns apontam para o mesmo número** — `sm`, `md` e
+// `base` são 16; `lg` e `xl` são 20. Isso é de propósito: `size` é API pública dos dois alvos, e
+// apagar nome quebraria consumidor sem ganhar nada. O que encolheu foi a lista de VALORES, que é
+// o que a pessoa vê. Por isso nenhum componente do pacote precisou trocar de degrau: os degraus é
+// que se juntaram.
+//
+// ⚠ **O topo (36 e 48) não foi tocado.** A queixa é do pé da escala, e ali as razões já eram boas
+// (1,2 e 1,33). Mexer sem queixa é inventar trabalho.
+//
+// ⚠ **O limite, medido e declarado:** com a letra do sistema em 1,3× o corpo de 16 vira ~21 e a
+// linha ~29. Isso cabe em toda cápsula, MENOS o controle `sm` na densidade compacta (28 de
+// altura), que estoura por 1 ponto. Em 1,5× vários estouram — e isso já era verdade na escala
+// antiga.
 const TAMANHO = {
     xs: "textXs", sm: "textSm", md: "textMd", base: "textBase", lg: "textLg",
     xl: "textXl", "2xl": "text2xl", "3xl": "text3xl", "4xl": "text4xl", "5xl": "text5xl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "React Native target for Aurea UDS: the theme x density provider, the first components and the Carbon icons, drawn on react-native-svg.",
   "keywords": [
     "aurea",
@@ -47,7 +47,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.8.7"
+    "@aurea-uds/tokens": "^0.8.8"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",