@aurea-uds/native 0.16.1 → 0.18.0

package/dist/feedback.d.ts

@@ -43,20 +43,38 @@ export interface SkeletonProps {
  * aqui): anunciar "caixa" três vezes enquanto a tela carrega não ajuda ninguém.
  */
 export declare function Skeleton({ width, height, radius, style, testID }: SkeletonProps): React.JSX.Element;
+/** O tom da barra: a mesma lista fechada do `tone` do `Button`. Pausado é `neutral`; falha é `danger`. */
+export type AureaProgressTone = "brand" | "neutral" | "success" | "warning" | "danger" | "info";
 export interface ProgressProps {
-    /** 0 a 100. Fora disso é grampeado, como na web (`Math.max(0, Math.min(100, value))`). */
-    value: number;
+    /**
+     * 0 a 100. Fora disso é grampeado, como na web (`Math.max(0, Math.min(100, value))`).
+     * **Sem `value`, a barra é indeterminada** (AN-07): o total ainda não se sabe, e um pedaço corre
+     * pelo trilho, no lugar de um 0% que parece parado.
+     */
+    value?: number;
     label?: string;
+    /**
+     * O texto de apoio, no alto à direita — o `ProgressBar.Output` do HeroUI: velocidade, tempo que
+     * falta, bytes. Em texto, ele vai junto no `accessibilityValue`. É texto: a barra é um elemento
+     * só para o leitor de tela, e coisa tocável dentro dela some no iPhone (`check 43`).
+     */
+    detail?: React.ReactNode;
+    tone?: AureaProgressTone;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
 /**
- * A barra determinada. Só ela — **não há variante indeterminada**, nem na web.
+ * A barra de progresso — determinada, ou indeterminada quando não há `value` (AN-07, 03/10/2026).
  *
  * O papel é `progressbar` e o valor vai no `accessibilityValue`: sem isso o leitor de tela
  * anuncia que existe uma barra e não diz em quanto ela está, que é a única informação que ela tem.
+ * Sem total, não há `now` — a barra não finge um 0%.
+ *
+ * Sem total, um pedaço de 2/5 corre de -100% a 350% da própria largura em 1,5 s, na curva do
+ * `ProgressBar` do HeroUI 3.2.6 — os mesmos números da web. Quando a pessoa pede menos movimento
+ * ele não corre: a barra inteira, apagada, e nunca um pedaço parado, que leria como 40% feito.
  */
-export declare function Progress({ value, label, style, testID }: ProgressProps): React.JSX.Element;
+export declare function Progress({ value, label, detail, tone, style, testID }: ProgressProps): React.JSX.Element;
 export type AureaAlertVariant = "info" | "success" | "warning" | "danger";
 /** Mesmos quatro glifos do `feedback-client.tsx:43`. */
 export declare const ICONE_DA_VARIANTE: Readonly<Record<AureaAlertVariant, IconName>>;

package/dist/feedback.js

@@ -43,6 +43,11 @@ const folha = criarFolha((t) => ({
     // ── Progress ───────────────────────────────────────────────────────────────────────────────
     trilho: { height: 8, borderRadius: t.size.radiusFull, backgroundColor: t.color.surface3, overflow: "hidden" },
     preenchimento: { height: "100%", borderRadius: t.size.radiusFull, backgroundColor: t.color.primary },
+    // AN-07: a caixa com o texto de apoio em cima — a grade do HeroUI, `gap-1` até o trilho, a saída
+    // à direita em algarismos de largura igual.
+    campoProgresso: { gap: t.size.space1 },
+    apoioProgresso: { alignSelf: "flex-end" },
+    algarismos: { fontVariant: ["tabular-nums"] },
     // ── Alert ──────────────────────────────────────────────────────────────────────────────────
     // A web usa GRADE de três trilhas (ícone, corpo, ação). Aqui é linha de flex com o corpo
     // `flex:1` — mesmo resultado, e `display:grid` não existe no RN (a mesma nota do `Grid`).
@@ -152,16 +157,67 @@ export function Skeleton({ width, height, radius, style, testID }) {
             style,
         ] }));
 }
+const COR_DO_TOM = {
+    brand: "primary", neutral: "mutedForeground", success: "success",
+    warning: "warning", danger: "destructive", info: "info",
+};
 /**
- * A barra determinada. Só ela — **não há variante indeterminada**, nem na web.
+ * A barra de progresso — determinada, ou indeterminada quando não há `value` (AN-07, 03/10/2026).
  *
  * O papel é `progressbar` e o valor vai no `accessibilityValue`: sem isso o leitor de tela
  * anuncia que existe uma barra e não diz em quanto ela está, que é a única informação que ela tem.
+ * Sem total, não há `now` — a barra não finge um 0%.
+ *
+ * Sem total, um pedaço de 2/5 corre de -100% a 350% da própria largura em 1,5 s, na curva do
+ * `ProgressBar` do HeroUI 3.2.6 — os mesmos números da web. Quando a pessoa pede menos movimento
+ * ele não corre: a barra inteira, apagada, e nunca um pedaço parado, que leria como 40% feito.
  */
-export function Progress({ value, label, style, testID }) {
-    const s = folha(useAureaTokens());
-    const pct = Math.max(0, Math.min(100, value));
-    return (_jsx(View, { testID: testID, accessible: true, accessibilityRole: "progressbar", accessibilityLabel: label, accessibilityValue: { min: 0, max: 100, now: pct }, style: [s.trilho, style], children: _jsx(View, { style: [s.preenchimento, { width: `${pct}%` }] }) }));
+export function Progress({ value, label, detail, tone = "brand", style, testID }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    const reduzir = useReduceMotion();
+    const semTotal = value == null || Number.isNaN(value);
+    const pct = semTotal ? undefined : Math.max(0, Math.min(100, value));
+    const cor = t.color[COR_DO_TOM[tone]];
+    const temApoio = detail != null && detail !== false && detail !== "";
+    const emTexto = temApoio && (typeof detail === "string" || typeof detail === "number") ? String(detail) : undefined;
+    // A largura do trilho, para o pedaço saber quanto andar. O `translateX` do RN não aceita
+    // porcentagem, e a do CSS é da própria peça — aqui ela vira conta: 2/5 do trilho.
+    const [largura, setLargura] = React.useState(0);
+    const corrida = React.useRef(new Animated.Value(0)).current;
+    const corre = semTotal && reduzir === false && largura > 0;
+    React.useEffect(() => {
+        // `reduzir === false`, e não `!reduzir`: enquanto é `null` o sistema ainda não respondeu.
+        if (!corre)
+            return;
+        corrida.setValue(0);
+        const laco = Animated.loop(Animated.timing(corrida, {
+            toValue: 1, duration: 1500, easing: Easing.bezier(0.65, 0, 0.35, 1), useNativeDriver: driverNativo(),
+        }));
+        laco.start();
+        return () => laco.stop();
+    }, [corrida, corre, largura]);
+    const pedaco = largura * 0.4;
+    const preenchimento = !semTotal
+        ? _jsx(View, { style: [s.preenchimento, { width: `${pct}%`, backgroundColor: cor }] })
+        : corre
+            ? _jsx(Animated.View, { style: [s.preenchimento, { width: pedaco, backgroundColor: cor },
+                    { transform: [{ translateX: corrida.interpolate({ inputRange: [0, 1], outputRange: [-pedaco, pedaco * 3.5] }) }] }] })
+            : _jsx(View, { style: [s.preenchimento, { width: "100%", backgroundColor: cor, opacity: t.size.opacityDisabled }] });
+    const valor = semTotal
+        ? (emTexto != null ? { text: emTexto } : undefined)
+        : { min: 0, max: 100, now: pct, ...(emTexto != null && { text: `${pct}%, ${emTexto}` }) };
+    const papel = {
+        testID, accessible: true, accessibilityRole: "progressbar",
+        accessibilityLabel: label, accessibilityValue: valor,
+    };
+    const medir = semTotal ? (e) => setLargura(e.nativeEvent.layout.width) : undefined;
+    if (!temApoio) {
+        return _jsx(View, { ...papel, onLayout: medir, style: [s.trilho, style], children: preenchimento });
+    }
+    return (_jsxs(View, { ...papel, style: [s.campoProgresso, style], children: [emTexto != null
+                ? _jsx(Text, { type: "body-sm", weight: 500, tone: "muted", style: [s.apoioProgresso, s.algarismos], children: emTexto })
+                : _jsx(View, { style: s.apoioProgresso, children: detail }), _jsx(View, { onLayout: medir, style: s.trilho, children: preenchimento })] }));
 }
 /** Mesmos quatro glifos do `feedback-client.tsx:43`. */
 export const ICONE_DA_VARIANTE = {

package/dist/index.d.ts

@@ -11,11 +11,11 @@ export type { IconProps, IconName, PhosphorIconName, AureaIconNames, IconWeight,
 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, AureaStackAlign, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, } from "./layout.js";
+export type { StackProps, ClusterProps, AureaStackAlign, AureaClusterAlign, AureaClusterJustify, GridProps, CardProps, SeparatorProps, AureaCardVariant, AureaGridMin, } 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 type { SpinnerProps, SkeletonProps, ProgressProps, AlertProps, EmptyStateProps, DataStateProps, AureaSpinnerSize, AureaAlertVariant, AureaDataStateValue, AureaProgressTone, } from "./feedback.js";
 export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.js";
 export type { BadgeProps, StatusProps, AvatarProps, KPIProps, AureaBadgeAnchor, AureaBadgeEmphasis, AureaBadgeFit, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
 export { useAureaStrings } from "./theme.js";
@@ -23,7 +23,7 @@ export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from
 export type { AureaStrings, AureaUniversalState } from "./strings.js";
 export { useReduceMotion } from "./movimento.js";
 export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
-export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, AureaTabsVariant, } from "./navigation.js";
+export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaNavListIndicator, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, AureaTabsVariant, } from "./navigation.js";
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, RadioGroup, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
 export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, RadioGroupProps, RadioGroupItemProps, AureaRadioIndicatorPlacement, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
 export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";

package/dist/layout.d.ts

@@ -33,12 +33,19 @@ export interface ClusterProps extends Omit<StackProps, "align"> {
  * Sem nenhuma das três, nada muda.
  */
 export declare function Cluster({ align, justify, wrap, style, ...rest }: ClusterProps): React.JSX.Element;
+/**
+ * A largura mínima da coluna, por nome — AN-08 (03/10/2026), os mesmos quatro da web (`.grid-min-*`
+ * no `aurea.css`): `xs` 8rem, `sm` 12rem, `md` 15rem (o padrão) e `lg` 20rem. Em rem, porque é rem
+ * na web; o `remInDp` do token faz a conta.
+ */
+export type AureaGridMin = "xs" | "sm" | "md" | "lg";
 export interface GridProps extends ViewProps {
     /**
-     * Largura mínima de cada coluna, em dp. O equivalente do `--grid-min` da web, cujo padrão é
-     * `15rem` — e `1rem = 16dp`, medido, então **240**.
+     * Largura mínima de cada coluna, em dp, ou por nome (`xs`, `sm`, `md`, `lg` — AN-08). O
+     * equivalente do `--grid-min` da web, cujo padrão é `15rem` — e `1rem = 16dp`, medido, então
+     * **240**.
      */
-    minColumnWidth?: number;
+    minColumnWidth?: number | AureaGridMin;
     children?: React.ReactNode;
 }
 /**
@@ -61,7 +68,7 @@ export interface GridProps extends ViewProps {
  * 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, onLayout, ...rest }: GridProps): React.JSX.Element;
+export declare function Grid({ minColumnWidth: pedido, 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

@@ -86,6 +86,7 @@ export function Cluster({ align, justify, wrap, style, ...rest }) {
             style,
         ], ...rest }));
 }
+const REM_DA_COLUNA = { xs: 8, sm: 12, md: 15, lg: 20 };
 /**
  * Colunas que se acomodam sem breakpoint.
  *
@@ -106,9 +107,10 @@ export function Cluster({ align, justify, wrap, style, ...rest }) {
  * 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, onLayout, ...rest }) {
+export function Grid({ minColumnWidth: pedido = 240, style, children, onLayout, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const minColumnWidth = typeof pedido === "number" ? pedido : REM_DA_COLUNA[pedido] * t.remInDp;
     const [largura, setLargura] = React.useState(null);
     const plano = (StyleSheet.flatten([s.grid, style]) ?? {});
     const vao = numero(plano.columnGap) ?? numero(plano.gap) ?? t.size.space4;

package/dist/navigation.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type ViewProps } from "react-native";
+import { type ImageSourcePropType, type ViewProps } from "react-native";
 import { type AureaIcon } from "./icon.js";
 import { type AureaFilaJustify } from "./rolagem.js";
 export interface AureaNavItem {
@@ -14,7 +14,7 @@ export interface AureaNavItem {
 export type AureaBottomNavVariant = "floating" | "edge";
 /** Quanto a pílula ocupa: a tela menos a margem (`full`, o de sempre) ou só as abas (`content`). */
 export type AureaBottomNavWidth = "full" | "content";
-export type AureaBottomNavIndicator = "none" | "subtle" | "pill" | "circle" | "circle-raised" | "circle-outline" | "circle-bold";
+export type AureaBottomNavIndicator = "none" | "subtle" | "pill" | "circle" | "circle-raised" | "circle-outline" | "circle-bold" | "capsule" | "expand";
 export interface BottomNavProps extends ViewProps {
     items: AureaNavItem[];
     /** O `id` do item corrente. */
@@ -136,6 +136,11 @@ export interface TopbarProps extends ViewProps {
  * e quem nomeia a tela é o conteúdo dela.
  */
 export declare function Topbar({ variant, inset, brand, children, style, ...rest }: TopbarProps): React.JSX.Element;
+/** Um sinal da linha (AN-04): fixada, silenciada. O `label` não aparece; é o que o leitor de tela lê. */
+export interface AureaNavListIndicator {
+    icon: AureaIcon;
+    label: string;
+}
 export interface AureaNavListItem {
     id: string;
     label: React.ReactNode;
@@ -145,6 +150,16 @@ export interface AureaNavListItem {
     icon?: AureaIcon;
     onPress?: () => void;
     disabled?: boolean;
+    /**
+     * A foto da linha (AN-04, 03/10/2026) — o formato do `Avatar` daqui (`source`, `fallback`), no
+     * tamanho dele de sempre, o mesmo da web. Toma o lugar do `icon`.
+     */
+    avatar?: {
+        source?: ImageSourcePropType | string;
+        fallback?: React.ReactNode;
+    };
+    /** Os sinais ao lado do `value` (AN-04): pequenos e apagados, cada um com nome. */
+    indicators?: AureaNavListIndicator[];
 }
 export interface NavListProps extends ViewProps {
     items: AureaNavListItem[];

package/dist/navigation.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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 { Avatar, Badge } from "./display.js";
 import { comOpacidade, criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Card } from "./layout.js";
@@ -80,7 +80,18 @@ const folha = criarFolha((t) => ({
         flex: 1, minWidth: 0, alignItems: "center", justifyContent: "center",
         // `space05` e não `space1` — a barra mais baixa (30/09/2026, pedido do Victor, aprovado pela
         // imagem). Com a moldura de 32 e o vão de 4 eram 9 entre o ícone e o rótulo; ver `marca`.
-        gap: t.size.space05, minHeight: t.size.controlHLg, padding: t.size.space1,
+        // O NOME COLADO NO ÍCONE — 03/10/2026, pedido do Victor (*"o texto pode ficar mais próximo do
+        // ícone"*): vão ZERO, como no Telegram, em que o nome começa onde a caixa do ícone acaba. O
+        // `space05` daqui (30/09/2026) somava 2 aos 2 de folga da própria linha do nome; medido na
+        // bancada, eram 9 de tinta a tinta no `pill` e 13 no `circle-bold`.
+        gap: 0, minHeight: t.size.controlHLg,
+        // 🔴 A ALTURA DO TELEGRAM — 03/10/2026, pedido do Victor: *"ainda acho ele muito largo
+        // comparado a bottomnav como do telegram"*, e "largo" é a grossura. Medido no fonte do
+        // Telegram para Android 12.10.6 (`DialogsActivity.MAIN_TABS_HEIGHT = 56`, `GlassTabView`): a
+        // pílula tem 56; o botão, 48; o ícone, 24; o nome, 12. A nossa media 73 no `circle-bold`. O
+        // recheio de cima e de baixo cai de `space1` para `space05`, e o nome sai em 12 com a
+        // entrelinha justa (ver o `Text` do rótulo). Igual na web (`aurea.css`).
+        paddingHorizontal: t.size.space1, paddingVertical: t.size.space05,
         borderRadius: t.size.radiusControl,
     },
     // Com a pílula do tamanho do conteúdo, `flex: 1` MATA as abas: no RN ele é base ZERO, e a soma
@@ -100,6 +111,57 @@ const folha = criarFolha((t) => ({
         width: 32, height: 32, borderRadius: t.size.radiusControl },
     marcaRedonda: { borderRadius: t.size.radiusFull },
     contador: { position: "absolute", top: -t.size.space05, right: -t.size.space05 },
+    // ── A BARRA FICA PARADA QUANDO SE TROCA DE ABA — pedido do Victor, 03/10/2026 ──────────────
+    // *"me incomoda o bottom nav todo se mexer [...] quero ele estático, apenas os botões
+    // dinâmicos"*. Medido na bancada com o `react-native-web`: no `circle-bold` com
+    // `width="content"` a barra ia de 249 a 257 de largura conforme a aba escolhida, e por estar no
+    // centro, andava inteira. A regra daqui para baixo: NENHUMA medida depende de o item estar
+    // escolhido. Só a pintura muda. Quem cobra: `tests/unit/native-bottomnav-parada.test.tsx`.
+    //
+    // `circle-bold`: o disco amarelo é uma caixa DENTRO do item, de 56 (o `--bottomnav-bold` do
+    // `aurea.css`), em TODOS os itens. Antes o disco ERA o item escolhido: ele media 56 e os outros
+    // mediam o conteúdo, então a soma mudava com a escolha. O recheio passa do item para o disco,
+    // e a altura da barra não muda.
+    aba_disco: { paddingHorizontal: 0, paddingVertical: 0 },
+    // Sem a moldura de 32 (é o disco que desenha a forma, e não ela) e sem vão, o nome fica colado
+    // no ícone; o recheio de cima e de baixo volta a `space1` para o disco continuar quase redondo
+    // (56 × 48).
+    disco: {
+        alignItems: "center", justifyContent: "center", gap: 0,
+        width: 56, minHeight: t.size.controlHLg, borderRadius: t.size.radiusFull,
+        paddingHorizontal: t.size.space1, paddingVertical: t.size.space1,
+    },
+    // `capsule` (a "A" da bancada, o Material 3 Expressive): a moldura do ícone vira a cápsula de
+    // 56 × 32 do indicador ativo dele — os mesmos `--bottomnav-bold` e `--bottomnav-ring` do
+    // `aurea.css`, em todos os itens. O rótulo fica embaixo, fora dela.
+    marcaCapsula: { width: 56, height: 32, borderRadius: t.size.radiusFull },
+    // O contador fica no canto do ÍCONE, e não da cápsula: sem a cápsula pintada (item não
+    // escolhido) ele ficaria solto, longe do sino. São os (56 − 32) / 2 a mais para dentro.
+    contadorCapsula: { right: (56 - 32) / 2 - t.size.space05 },
+    // No `content` o item tem a largura da cápsula mais o recheio de sempre (`space1`), e não o
+    // `space3` do `aba_content`: com ele cada item teria 80 e a barra, 340.
+    aba_capsula_content: { paddingHorizontal: t.size.space1 },
+    // `expand` (a "C" da bancada): os outros itens mostram só o ícone; o escolhido vira cápsula
+    // amarela com o nome ao lado. É o ÚNICO em que o botão escolhido cresce — os botões andam, e a
+    // BARRA não: a vaga do escolhido é FIXA, e não do tamanho do nome. Ícone (24) + vão (`space2`)
+    // + lugar do nome (`space20`, 80) + recheio (`space3` dos dois lados) = 136. Nome maior que 80
+    // termina em "…". Medir o nome de cada aba daria uma barra que muda com a lista; esta não muda.
+    aba_expande: {
+        flexDirection: "row", gap: t.size.space2, paddingVertical: 0, paddingHorizontal: 0,
+        minHeight: t.size.targetMin, minWidth: t.size.targetMin,
+    },
+    aba_expande_outro_content: { flexGrow: 0, flexShrink: 0, flexBasis: "auto", width: t.size.targetMin },
+    aba_expande_escolhido: {
+        flexGrow: 0, flexShrink: 0, flexBasis: "auto",
+        width: t.size.iconLg + t.size.space2 + t.size.space20 + t.size.space3 * 2,
+        paddingHorizontal: t.size.space3, backgroundColor: t.color.primary,
+    },
+    // A moldura do ícone no `expand` tem a largura do ícone: o contador pendura nele e o nome vem
+    // logo ao lado — com 32 de moldura sobrava folga dos dois lados do ícone dentro da cápsula.
+    marcaExpande: { width: t.size.iconLg },
+    // O nome do item que NÃO é texto, nos não escolhidos do `expand`: fora da tela e sem ocupar
+    // lugar, mas na árvore — o texto simples vira `accessibilityLabel` do item.
+    rotuloEscondido: { position: "absolute", opacity: 0 },
     // ── NavList ────────────────────────────────────────────────────────────────────────────────
     lista: { gap: t.size.space05 },
     linha: {
@@ -113,6 +175,8 @@ const folha = criarFolha((t) => ({
     // Nenhuma medida nova: `flex`, `minWidth` e o MESMO `gap` da moldura.
     linhaMiolo: { flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: t.size.space3 },
     linhaTexto: { flex: 1, minWidth: 0 },
+    // AN-04: os sinais, com o vão de dentro do texto (`space1`), como o `.nav-list-indicators` da web.
+    sinais: { flexDirection: "row", alignItems: "center", gap: t.size.space1 },
     // ── Tabs ───────────────────────────────────────────────────────────────────────────────────
     // A cápsula é a MESMA do `SegmentedControl`, e o CSS diz isso em voz alta no comentário de
     // cima do `.tabs` (`aurea.css:1114`): *"Mesma regra da .segmented"*. Os três números vêm de
@@ -241,6 +305,9 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
     const strings = useAureaStrings();
     const inset = useSafeAreaInsets();
     const redondo = indicator.startsWith("circle");
+    const disco = indicator === "circle-bold";
+    const capsula = indicator === "capsule";
+    const expande = indicator === "expand";
     const anotar = useAnotarBottomNav();
     const flutua = variant !== "edge";
     const justa = flutua && width === "content";
@@ -270,48 +337,72 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
             const ativo = it.id === current;
             const corDoTexto = !ativo ? t.color.mutedForeground
                 : indicator === "none" ? t.color.primaryEmphasis
-                    : indicator === "circle-bold" ? t.color.primaryForeground
+                    : indicator === "circle-bold" || indicator === "expand" ? t.color.primaryForeground
                         : indicator === "subtle" || indicator === "pill" ? t.color.primaryEmphasis
                             : redondo ? t.color.primaryEmphasis
                                 : t.color.foreground;
-            return (_jsxs(Pressable, { onPress: it.onPress, disabled: it.disabled, 
+            // Na `capsule` o ícone está SOBRE o amarelo e o rótulo não: cada um tem a sua cor.
+            const corDoIcone = ativo && capsula ? t.color.primaryForeground : corDoTexto;
+            // No `expand` o nome só aparece no escolhido; nos outros ele vira o nome do item para o
+            // leitor de tela (o texto simples) ou fica na árvore sem ocupar lugar (o que não é texto).
+            const nomeVisivel = !expande || ativo;
+            const marca = (_jsxs(View, { style: [
+                    // A moldura de 32 só serve aos indicadores redondos, em que ela VIRA o círculo. Nos
+                    // outros ela era folga vazia em volta do ícone de 24: fica da altura dele. A largura
+                    // continua 32, que é o canto do contador. Igual na web (`aurea.css`).
+                    // No `circle-bold` a moldura NÃO é o círculo (é o disco, em volta do ícone E do nome):
+                    // ela fica da altura do ícone, e o nome encosta nele.
+                    s.marca, redondo && !disco ? s.marcaRedonda : { height: t.size.iconLg },
+                    capsula && s.marcaCapsula, expande && s.marcaExpande,
+                    ativo && indicator === "circle" && { backgroundColor: comOpacidade(t.color.primary, 0.14) },
+                    ativo && indicator === "circle-raised" && {
+                        backgroundColor: t.color.popover, boxShadow: [t.shadow.shadowMd],
+                    },
+                    ativo && indicator === "circle-outline" && {
+                        borderWidth: t.size.borderWidth, borderColor: t.color.primaryEmphasis,
+                    },
+                    ativo && capsula && { backgroundColor: t.color.primary },
+                ], children: [it.icon && _jsx(Icon, { name: it.icon, size: "lg", color: corDoIcone, weight: ativo ? "fill" : undefined }), it.badge != null && it.badge !== false && (_jsx(View, { style: [s.contador, capsula && s.contadorCapsula], children: typeof it.badge === "number"
+                            ? _jsx(Badge, { tone: "danger", emphasis: "solid", size: "xs", count: it.badge })
+                            : _jsx(Badge, { tone: "danger", emphasis: "solid", size: "xs", dot: true }) }))] }));
+            // 🔴 O PESO DO RÓTULO NÃO MUDA COM A ESCOLHA (03/10/2026). Era 500 no escolhido e 400 nos
+            // outros, e texto mais grosso é texto mais LARGO: no `content` a barra mudava de largura a
+            // cada toque, em todos os indicadores. Agora é 500 em todos — o "Label medium" do Material
+            // 3, que também deixou de engrossar o escolhido no Expressive pela mesma razão. O que marca
+            // a escolha é a cor, o ícone cheio e a forma. No `expand` o nome é `sm`: ao lado do ícone,
+            // e não embaixo dele.
+            const rotulo = typeof it.label === "string"
+                ? (nomeVisivel
+                    // 12 numa linha de 16, o do Telegram — e o `text-xs` da web. Antes era o `xs` do `Text`
+                    // nativo, que sobe para 14 (ADR-0050) com linha de 21: era o que mais engrossava a
+                    // barra. A linha é o tamanho mais `space1`, como na web: com a entrelinha justa (14,4)
+                    // a perna do "j" passava da caixa. No `expand` o nome vai ao lado do ícone, em 14.
+                    ? _jsx(Text, { type: expande ? "body-sm" : "body-xs", weight: 500, numberOfLines: 1, style: [{ color: corDoTexto, lineHeight: (expande ? t.size.textSm : t.size.textXs) + t.size.space1 },
+                            expande && { flexShrink: 1 }], children: it.label })
+                    : null)
+                : (nomeVisivel ? it.label : _jsx(View, { style: s.rotuloEscondido, children: it.label }));
+            return (_jsx(Pressable, { onPress: it.onPress, disabled: it.disabled, 
                 // `link` e não `tab`: uma aba troca um painel DESTA tela; isto troca de tela.
-                accessibilityRole: "link", ...estadoAcessivel({ selected: ativo, disabled: !!it.disabled }), style: [
+                accessibilityRole: "link", accessibilityLabel: !nomeVisivel && typeof it.label === "string" ? it.label : undefined, ...estadoAcessivel({ selected: ativo, disabled: !!it.disabled }), style: [
                     s.aba, justa && s.aba_content,
                     indicator === "subtle" && { borderRadius: t.size.radiusCard - t.size.space1 },
                     ativo && (indicator === "subtle" || indicator === "pill")
                         && { backgroundColor: comOpacidade(t.color.primary, 0.12) },
-                    // O círculo é o `flex:none; width:var(--bottomnav-bold,3.5rem)` da web (`aurea.css`,
-                    // `.bottom-nav-ind-circle-bold`): não cresce, não encolhe, 56 de largura.
-                    // 🔴 Escrito por EXTENSO, e não `flex: 0` — defeito visto pelo Victor no app rodando
+                    disco && s.aba_disco,
+                    capsula && justa && s.aba_capsula_content,
+                    // 🔴 Larguras por EXTENSO, e não `flex: 0` — defeito visto pelo Victor no app rodando
                     // no navegador (02/10/2026): o `react-native-web` 0.21.3 passa `flex: 0` cru para o
-                    // CSS, onde ele vale `0 1 0%`, e o círculo encolhia até o recheio (8 de largura, um
-                    // risco amarelo). No Yoga `flex: 0` é "inflexível"; as três por extenso valem o mesmo
-                    // nos dois. Quem cobra: `tests/unit/native-flex-navegador.test.tsx`.
-                    // E o recheio dos lados volta a `space1` (o da `aba`): no `content` ele era `space3`,
-                    // e dentro dos 56 sobravam 32 para o rótulo — "Avisos" saía "Avi…". Igual na web.
-                    ativo && indicator === "circle-bold" && {
-                        flexGrow: 0, flexShrink: 0, flexBasis: "auto", width: 56,
-                        paddingHorizontal: t.size.space1,
-                        borderRadius: t.size.radiusFull, backgroundColor: t.color.primary,
-                    },
-                ], children: [_jsxs(View, { style: [
-                            // A moldura de 32 só serve aos indicadores redondos, em que ela VIRA o círculo. Nos
-                            // outros ela era folga vazia em volta do ícone de 24: fica da altura dele. A largura
-                            // continua 32, que é o canto do contador. Igual na web (`aurea.css`).
-                            s.marca, redondo ? s.marcaRedonda : { height: t.size.iconLg },
-                            ativo && indicator === "circle" && { backgroundColor: comOpacidade(t.color.primary, 0.14) },
-                            ativo && indicator === "circle-raised" && {
-                                backgroundColor: t.color.popover, boxShadow: [t.shadow.shadowMd],
-                            },
-                            ativo && indicator === "circle-outline" && {
-                                borderWidth: t.size.borderWidth, borderColor: t.color.primaryEmphasis,
-                            },
-                        ], children: [it.icon && _jsx(Icon, { name: it.icon, size: "lg", color: corDoTexto, weight: ativo ? "fill" : undefined }), it.badge != null && it.badge !== false && (_jsx(View, { style: s.contador, children: typeof it.badge === "number"
-                                    ? _jsx(Badge, { tone: "danger", emphasis: "solid", size: "xs", count: it.badge })
-                                    : _jsx(Badge, { tone: "danger", emphasis: "solid", size: "xs", dot: true }) }))] }), typeof it.label === "string"
-                        ? _jsx(Text, { size: "xs", weight: ativo ? 500 : 400, numberOfLines: 1, style: { color: corDoTexto }, children: it.label })
-                        : it.label] }, it.id));
+                    // CSS, onde ele vale `0 1 0%`, e a peça encolhia até o recheio. No Yoga `flex: 0` é
+                    // "inflexível"; as três por extenso valem o mesmo nos dois.
+                    // Quem cobra: `tests/unit/native-flex-navegador.test.tsx`.
+                    expande && s.aba_expande,
+                    expande && !ativo && justa && s.aba_expande_outro_content,
+                    expande && ativo && s.aba_expande_escolhido,
+                ], children: disco
+                    // O disco do `circle-bold`: 56 de largura em todos os itens, amarelo só no escolhido.
+                    // É o `.bottom-nav-disc` da web.
+                    ? _jsxs(View, { style: [s.disco, ativo && { backgroundColor: t.color.primary }], children: [marca, rotulo] })
+                    : _jsxs(_Fragment, { children: [marca, rotulo] }) }, it.id));
         }) }));
 }
 /**
@@ -373,10 +464,12 @@ export function NavList({ items, chevron = "caret-right", style, ...rest }) {
             //   • valor em COMPONENTE fica FORA, irmão do miolo, porque pode ser tocável.
             const temAcao = typeof it.onPress === "function";
             const valorEhTexto = typeof it.value === "string" || typeof it.value === "number";
-            const miolo = (_jsxs(_Fragment, { children: [it.icon && _jsx(Icon, { name: it.icon, size: "md", color: t.color.foreground }), _jsxs(View, { style: s.linhaTexto, children: [typeof it.label === "string"
+            const miolo = (_jsxs(_Fragment, { children: [it.avatar
+                        ? _jsx(Avatar, { source: it.avatar.source, fallback: it.avatar.fallback })
+                        : it.icon && _jsx(Icon, { name: it.icon, size: "md", color: t.color.foreground }), _jsxs(View, { style: s.linhaTexto, children: [typeof it.label === "string"
                                 ? _jsx(Text, { size: "sm", numberOfLines: 1, children: it.label }) : it.label, it.description != null && (typeof it.description === "string"
                                 ? _jsx(Text, { size: "xs", tone: "muted", numberOfLines: 1, children: it.description })
-                                : it.description)] }), valorEhTexto && _jsx(Text, { size: "sm", tone: "muted", children: it.value }), temAcao && chevron
+                                : it.description)] }), it.indicators && it.indicators.length > 0 && (_jsx(View, { style: s.sinais, children: it.indicators.map((x) => (_jsx(View, { accessibilityLabel: x.label, children: _jsx(Icon, { name: x.icon, size: "sm", color: t.color.mutedForeground }) }, x.label))) })), valorEhTexto && _jsx(Text, { size: "sm", tone: "muted", children: it.value }), temAcao && chevron
                         && _jsx(Icon, { name: chevron, size: "sm", color: t.color.mutedForeground })] }));
             return (_jsxs(View, { style: [s.linha, it.disabled && { opacity: t.size.opacityDisabled }], children: [temAcao ? (_jsx(Pressable, { onPress: it.onPress, disabled: it.disabled, accessibilityRole: "link", ...estadoAcessivel({ disabled: !!it.disabled }), style: s.linhaMiolo, children: miolo })) : (_jsx(View, { accessible: true, ...estadoAcessivel({ disabled: !!it.disabled }), style: s.linhaMiolo, children: miolo })), !valorEhTexto && it.value != null ? it.value : null] }, it.id));
         }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Phosphor sobre react-native-svg.",
   "keywords": [
     "aurea",
@@ -55,7 +55,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.16.1"
+    "@aurea-uds/tokens": "^0.18.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",