@aurea-uds/native 0.17.0 → 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 {
@@ -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";
@@ -175,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
@@ -462,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.17.0",
+  "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.17.0"
+    "@aurea-uds/tokens": "^0.18.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",