@aurea-uds/native 0.13.0 → 0.15.0

package/dist/feedback.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { type IconName, type AureaIcon } from "./icon.js";
 import { type AureaUniversalState } from "./strings.js";
 export type AureaSpinnerSize = "sm" | "md" | "lg";
 export interface SpinnerProps {
@@ -65,7 +65,7 @@ export interface AlertProps extends ViewProps {
     /** Um dos sete estados universais. Ele **escolhe a variante** e escreve o texto padrão. */
     state?: AureaUniversalState;
     title?: React.ReactNode;
-    icon?: IconName;
+    icon?: AureaIcon;
     onDismiss?: () => void;
     children?: React.ReactNode;
 }
@@ -86,7 +86,12 @@ export interface AlertProps extends ViewProps {
  */
 export declare function Alert({ variant, state, title, icon, onDismiss, children, style, accessibilityLabel, accessibilityHint, ...rest }: AlertProps): React.JSX.Element;
 export interface EmptyStateProps {
-    icon?: IconName;
+    /**
+     * O glifo, dentro de uma moldura redonda — R-15, 02/10/2026, escolhida pelo Victor na prancha
+     * (*"1 c"*). Moldura de 64 (o `Avatar` `lg` do HeroUI) e glifo de 32, o de antes. O desenho
+     * do próprio app entra aqui também (`icon={Logo}`, R-11).
+     */
+    icon?: AureaIcon;
     title: React.ReactNode;
     description?: React.ReactNode;
     action?: React.ReactNode;
@@ -110,7 +115,7 @@ export interface DataStateProps extends Omit<ViewProps, "children"> {
     /** Substitui o esqueleto padrão de `loading`. */
     skeleton?: React.ReactNode;
     emptyTitle?: React.ReactNode;
-    emptyIcon?: IconName;
+    emptyIcon?: AureaIcon;
     action?: React.ReactNode;
     /** Função para o conteúdo caro não ser construído enquanto o estado o esconde. */
     children: React.ReactNode | (() => React.ReactNode);

package/dist/feedback.js

@@ -24,7 +24,8 @@ import { Animated, Easing, View } from "react-native";
 import { IconButton } from "./actions.js";
 import { criarFolha, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
-import { useReduceMotion } from "./movimento.js";
+import { IconeEmMoldura } from "./moldura.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
 import { gravidadeDoEstado } from "./strings.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
@@ -96,7 +97,7 @@ export function Spinner({ size = "sm", label, decorative, style, testID }) {
         if (reduzir !== false)
             return;
         const laco = Animated.loop(Animated.timing(giro, {
-            toValue: 1, duration: 700, easing: Easing.linear, useNativeDriver: true,
+            toValue: 1, duration: 700, easing: Easing.linear, useNativeDriver: driverNativo(),
         }));
         laco.start();
         // Sem o `stop` o laço sobrevive à desmontagem e continua acordando o JS — o vazamento
@@ -137,8 +138,8 @@ export function Skeleton({ width, height, radius, style, testID }) {
         // 1,35 s no total, com o vale em .55 na METADE — é o `@keyframes skeleton-pulse` do
         // `aurea.css:1112` lido literalmente: 675 ms para descer e 675 para voltar.
         const laco = Animated.loop(Animated.sequence([
-            Animated.timing(opacidade, { toValue: 0.55, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
-            Animated.timing(opacidade, { toValue: 1, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+            Animated.timing(opacidade, { toValue: 0.55, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: driverNativo() }),
+            Animated.timing(opacidade, { toValue: 1, duration: 675, easing: Easing.inOut(Easing.ease), useNativeDriver: driverNativo() }),
         ]));
         laco.start();
         return () => laco.stop();
@@ -220,7 +221,7 @@ export function EmptyState({ icon = "file", title, description, action, state, s
     const s = folha(t);
     const strings = useAureaStrings();
     const desc = description ?? (state ? strings.universalState[state] : null);
-    return (_jsxs(View, { testID: testID, style: [s.vazio, style], children: [_jsx(Icon, { name: icon, size: "xl", color: t.color.subtleForeground }), typeof title === "string"
+    return (_jsxs(View, { testID: testID, style: [s.vazio, style], children: [_jsx(IconeEmMoldura, { icon: icon, moldura: t.size.space16, glifo: t.size.iconXl }), typeof title === "string"
                 ? _jsx(Text, { size: "base", weight: 600, leading: "tight", align: "center", children: title })
                 : title, desc != null && (typeof desc === "string"
                 ? _jsx(Text, { size: "sm", tone: "muted", align: "center", children: desc })

package/dist/icon.d.ts

@@ -4,6 +4,17 @@ export type AureaIconComponent = (props: {
     size?: number;
     color?: string;
 }) => React.ReactElement;
+/**
+ * Um ícone: o NOME de um glifo do registro (`"truck"`) ou o próprio DESENHO (`Logo`) — R-11,
+ * 02/10/2026. É o jeito do HeroUI: lá nenhuma peça recebe nome de ícone, o app põe o componente
+ * dele dentro. Aqui os dois valem em toda prop de ícone, e o desenho dispensa registro e
+ * `declare module`: o logotipo do app entra como `icon={Logo}`, com o `Logo` de `criarGlifo` ou o
+ * `default` de um `icons/*`. Ele recebe o `size` e a `color` que a peça pedir.
+ *
+ * ⚠ O desenho passado direto não tem forma cheia: no item escolhido ele sai igual (a forma cheia
+ * mora no registro, como `<nome>-fill`).
+ */
+export type AureaIcon = IconName | AureaIconComponent;
 export type { IconName, PhosphorIconName, AureaIconNames, IconWeight } from "./icon-names.js";
 import type { IconName, IconWeight, PhosphorIconName } from "./icon-names.js";
 /**
@@ -75,6 +86,10 @@ export interface AureaGlifoDesenho extends Pintura {
  * // a traço: a tinta no desenho inteiro, como no `<svg>` raiz
  * const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
  *                          strokeLinecap: "round", paths: ["M…"]});
+ * // o caminho curto (R-11, 02/10/2026): o desenho entra direto em qualquer prop de ícone
+ * <Icon name={Marca} size="xl" />
+ * <BottomNav items={[{id: "inicio", label: "Início", icon: Marca}]} />
+ * // o caminho do registro, para usar por NOME (pede `AureaIconNames`)
  * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
  * <Icon name="marca" size="xl" />
  * ```
@@ -99,7 +114,8 @@ export declare function IconRegistryProvider({ registry, children }: {
 /** A escala de glifo dos tokens. Começa em `sm`: **não existe `--icon-xs`** — como na web. */
 export type AureaIconSize = "sm" | "md" | "lg" | "xl";
 export interface IconProps {
-    name: IconName;
+    /** O nome de um glifo do registro, ou o próprio desenho (`AureaIcon`, R-11). */
+    name: AureaIcon;
     size?: AureaIconSize | number;
     /** Padrão: a cor de texto do tema. Ver a nota sobre herança abaixo. */
     color?: string;

package/dist/icon.js

@@ -52,6 +52,10 @@ function pintar(forma, desenho, color) {
  * // a traço: a tinta no desenho inteiro, como no `<svg>` raiz
  * const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
  *                          strokeLinecap: "round", paths: ["M…"]});
+ * // o caminho curto (R-11, 02/10/2026): o desenho entra direto em qualquer prop de ícone
+ * <Icon name={Marca} size="xl" />
+ * <BottomNav items={[{id: "inicio", label: "Início", icon: Marca}]} />
+ * // o caminho do registro, para usar por NOME (pede `AureaIconNames`)
  * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
  * <Icon name="marca" size="xl" />
  * ```
@@ -99,7 +103,10 @@ export function Icon({ name, size = "md", color, icons, label, weight }) {
     const doContexto = React.useContext(Contexto);
     // Lido como mapa de texto: a chave `-fill` não é um `IconName`, e o tipo do registro já a aceita.
     const registro = (icons ?? doContexto);
-    const Glifo = (weight === "fill" ? registro?.[`${name}-fill`] : undefined) ?? registro?.[name];
+    // O desenho passado direto (R-11) não consulta o registro.
+    const Glifo = typeof name === "function"
+        ? name
+        : (weight === "fill" ? registro?.[`${name}-fill`] : undefined) ?? registro?.[name];
     if (!Glifo) {
         if (__DEV__) {
             console.warn(`Aurea Icon: "${name}" não está no registro. Importe-o pelo caminho profundo e ` +

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { criarFolha, comOpacidade } from "./estilos.js";
 export { Text, Heading, Paragraph, Code } from "./text.js";
 export type { TextProps, AureaTextFont, AureaTextLeading, AureaTextSize, AureaTextTone, AureaTextWeight, AureaTextType, HeadingProps, ParagraphProps, CodeProps, AureaTypographyColor, AureaTypographyWeight, AureaTypographyAlign, } from "./text.js";
 export { Icon, IconRegistryProvider, criarRegistroDeIcones, criarGlifo } from "./icon.js";
-export type { IconProps, IconName, PhosphorIconName, AureaIconNames, IconWeight, AureaIconComponent, AureaIconRegistry, AureaIconSize, AureaGlifoDesenho, AureaGlifoCaminho, AureaGlifoCirculo, AureaGlifoRetangulo, } from "./icon.js";
+export type { IconProps, IconName, PhosphorIconName, AureaIconNames, IconWeight, AureaIconComponent, AureaIconRegistry, AureaIcon, AureaIconSize, AureaGlifoDesenho, AureaGlifoCaminho, AureaGlifoCirculo, AureaGlifoRetangulo, } from "./icon.js";
 export { Screen } from "./screen.js";
 export type { ScreenProps, AureaScreenBackground, AureaScreenEdge } from "./screen.js";
 export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
@@ -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, } 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 { 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";
@@ -39,7 +39,7 @@ export type { ChartProps, ChartLegendProps, AureaSeries, AureaChartMark } from "
 export { Combobox, SearchField } from "./busca.js";
 export type { ComboboxProps, SearchFieldProps, AureaComboboxItem } from "./busca.js";
 export { NumberField, formatarNumero, lerNumero, separadoresDoLocale } from "./numero.js";
-export type { NumberFieldProps, AureaSeparadores } from "./numero.js";
+export type { NumberFieldProps, AureaSeparadores, AureaNumberFieldSize } from "./numero.js";
 export { Image, Gallery } from "./midia.js";
 export type { ImageProps, GalleryProps, AureaGalleryItem, AureaImageSource, } from "./midia.js";
 export type { AureaFilaJustify } from "./rolagem.js";

package/dist/inputs.d.ts

@@ -1,8 +1,11 @@
 import * as React from "react";
 import { TextInput, type KeyboardTypeOptions, type PressableProps, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
 import { type AureaFilaJustify } from "./rolagem.js";
-import { type AureaIconRegistry, type IconName } from "./icon.js";
+import { type AureaIconRegistry, type AureaIcon } from "./icon.js";
+import type { AureaTokens } from "./tokens.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
+export declare const alturaDoTamanho: (t: AureaTokens, s: AureaFieldSize) => number;
+export declare const respiroDoTamanho: (t: AureaTokens, s: AureaFieldSize) => number;
 type ContextoDeCampo = {
     label?: string;
     hint?: string;
@@ -282,10 +285,18 @@ export interface RadioGroupItemProps extends Omit<PressableProps, "children" | "
     invalid?: boolean;
     /** O lado da marca só neste item; sem ele, vale o do grupo. */
     indicatorPlacement?: AureaRadioIndicatorPlacement;
+    /**
+     * Um ícone antes do texto (R-19, 01/10/2026). O HeroUI não tem esta prop: no `RadioGroup.Item`
+     * dele o ícone entra como mais um filho, e a Aurea traduz filho livre em nome de ícone, como em
+     * todo o resto. Tamanho `iconLg` (24, o mesmo da marca; o HeroUI usa 22 nos ícones de lista, que
+     * não existe aqui — escolha do Victor), vão de 12 até o texto. Na opção escolhida sai a forma
+     * cheia (ADR-0053), se o registro a tiver.
+     */
+    icon?: AureaIcon;
     style?: StyleProp<ViewStyle>;
 }
 declare function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation, indicatorPlacement, style, children, ...rest }: RadioGroupProps): React.JSX.Element;
-declare function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, style, accessibilityLabel, ...rest }: RadioGroupItemProps): React.JSX.Element;
+declare function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, icon, style, accessibilityLabel, ...rest }: RadioGroupItemProps): React.JSX.Element;
 /**
  * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.
  *
@@ -359,7 +370,7 @@ export interface SelectProps {
     disabled?: boolean;
     size?: AureaFieldSize;
     /** O glifo da seta. Registre-o, ou passe `false`. */
-    chevron?: IconName | false;
+    chevron?: AureaIcon | false;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/dist/inputs.js

@@ -39,17 +39,20 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   .segmented     :922            linha, gap 3, padding 3, minH controlHMd, fundo muted
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
-import { comOpacidade, criarFolha, estadoAcessivel } from "./estilos.js";
+import { criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
-import { useReduceMotion } from "./movimento.js";
+import { useReduceMotion, driverNativo } from "./movimento.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens, usePeleSobreAMarca, ForaDaMarca } from "./theme.js";
-const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
+// `alturaDoTamanho` e `respiroDoTamanho` saem do arquivo (não do pacote) desde 02/10/2026: o
+// `FileInput` (R-21) desenha um gatilho com a medida do campo, e copiar os números para lá é o
+// defeito que o `CLAUDE.md` nomeia.
+export const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
 const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textSm : s === "lg" ? t.size.textLg : t.size.textBase; // ADR-0050: um degrau acima da web
-const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
+export const respiroDoTamanho = (t, s) => s === "sm" ? t.size.space3 : s === "lg" ? t.size.space4 : 13;
 const folha = criarFolha((t) => ({
     campo: { gap: 7 },
     rotulo: { flexDirection: "row", justifyContent: "space-between", gap: 12 },
@@ -99,20 +102,9 @@ const folha = criarFolha((t) => ({
     segmento: { flex: 1, alignItems: "center", justifyContent: "center",
         paddingHorizontal: 14, borderRadius: t.size.radiusControl },
     segmentoAtivo: { backgroundColor: t.color.secondary },
-    // 🔴 O FIO AMARELO DO ESCOLHIDO — ele faltava, e a falta era metade do defeito C4.
-    // O `aurea.css:958-960` põe este fio em TODOS os selecionados da casa (`.is-selected`, aba
-    // ativa, botão alternado e `.segmented button.active`), e o bloco de comentário acima dele
-    // diz por quê, com data: *"Item de nav ativo, aba ativa, item de lista lateral e botão
-    // alternado ligado mostram o MESMO sinal (…) Um usuário aprende uma vez e reconhece em todo
-    // lugar (pedido do Victor, 24/07)."*
-    // Os três números saem daquela linha, não de mim: altura 2 (fração de pixel borra), recuo 15,
-    // e o amarelo a 75% (cheio ele grita mais que o próprio rótulo).
-    // ⚠ Em segmento estreito o recuo de 15 de cada lado zera a largura e o fio some — **e é o
-    // mesmo comportamento da web**, onde `inset-inline:15px` num box estreito não desenha nada.
-    fioDoSegmento: {
-        position: "absolute", left: 15, right: 15, bottom: 0, height: 2,
-        borderRadius: t.size.radiusFull, backgroundColor: comOpacidade(t.color.primary, 0.75),
-    },
+    // 🔴 O FIO AMARELO DO ESCOLHIDO — ele faltava, e a falta era metade do defeito C4. Os números
+    // e a razão moram no `fioDoEscolhido` (`estilos.ts`), que a aba do `Tabs` secundário também usa.
+    fioDoSegmento: fioDoEscolhido(t),
     formulario: { gap: t.size.space5 },
     // A folha do `Select`: no RN não existe `<select>`, então a lista é um `Modal` — que é
     // exatamente o "motor novo sobre `Modal`" que a §5.2.4 previu.
@@ -388,7 +380,7 @@ function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, or
     const contexto = React.useMemo(() => ({ value, onValueChange, disabled, invalid, indicatorPlacement }), [value, onValueChange, disabled, invalid, indicatorPlacement]);
     return (_jsx(GrupoDeRadio.Provider, { value: contexto, children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label, ...estadoAcessivel({ disabled: !!disabled }), style: [{ gap: t.size.space3, flexDirection: orientation === "horizontal" ? "row" : "column" }, style], ...rest, children: children }) }));
 }
-function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, style, accessibilityLabel, ...rest }) {
+function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, icon, style, accessibilityLabel, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const grupo = React.useContext(GrupoDeRadio);
@@ -403,7 +395,7 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
     const noInicio = (indicatorPlacement ?? grupo?.indicatorPlacement ?? "end") === "start";
     const texto = (label != null || description != null) && (_jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [typeof label === "string"
                 ? _jsx(Text, { size: "base", weight: 500, tone: erro ? "danger" : "default", children: label }) : label, description != null && (typeof description === "string"
-                ? _jsx(Text, { size: "sm", tone: "muted", children: description }) : description)] }, "texto"));
+                ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] }, "texto"));
     const marcaDesenhada = (_jsx(View, { style: [
             s.marcaBase,
             { width: marca, height: marca, borderRadius: t.size.radiusFull },
@@ -412,11 +404,14 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
                 borderColor: erro ? perigo : t.color.controlSelected },
         ], children: escolhido && _jsx(View, { style: { width: ponto, height: ponto, borderRadius: t.size.radiusFull,
                 backgroundColor: t.color.controlSelectedForeground } }) }, "marca"));
+    // O ícone é decorativo: o rótulo já diz o que a opção é, e o `Icon` sem `label` sai da árvore
+    // de acessibilidade. A cor acompanha a do rótulo, inclusive no erro.
+    const glifo = icon != null && (_jsx(Icon, { name: icon, size: "lg", weight: escolhido ? "fill" : "regular", color: erro ? perigo : t.color.foreground }, "icone"));
     return (_jsx(Pressable, { onPress: inativo || escolhido ? undefined : () => grupo?.onValueChange?.(value), disabled: inativo, accessibilityRole: "radio", ...estadoAcessivel({ checked: escolhido, disabled: !!inativo }), accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : undefined), accessibilityHint: typeof description === "string" ? description : undefined, style: [
             { flexDirection: "row", alignItems: "center", justifyContent: "space-between",
                 gap: t.size.space3, minHeight: t.size.targetMin },
             inativo && s.desabilitado, style,
-        ], ...rest, children: noInicio ? [marcaDesenhada, texto] : [texto, marcaDesenhada] }));
+        ], ...rest, children: noInicio ? [marcaDesenhada, glifo, texto] : [glifo, texto, marcaDesenhada] }));
 }
 /**
  * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.
@@ -465,7 +460,7 @@ export function Switch({ label, description, checked, onChange, disabled, size,
         }
         if (reduzir === null)
             return;
-        const a = Animated.timing(pos, { toValue: destino, duration: 160, useNativeDriver: true });
+        const a = Animated.timing(pos, { toValue: destino, duration: 160, useNativeDriver: driverNativo() });
         a.start();
         return () => a.stop();
     }, [checked, pos, reduzir]);

package/dist/midia.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type ImageSourcePropType, type StyleProp, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { type AureaIcon } from "./icon.js";
 /** URL ou `require()` de um asset local — as duas formas do `Image` do RN, como no `Avatar`. */
 export type AureaImageSource = ImageSourcePropType | string;
 export interface ImageProps {
@@ -17,7 +17,7 @@ export interface ImageProps {
     /** O que aparece no lugar quando o bitmap não vem. Sem ele, o glifo `image` sobre a caixa reservada. */
     fallback?: React.ReactNode;
     /** O glifo do substituto. Registre-o, ou passe `false`. */
-    fallbackIcon?: IconName | false;
+    fallbackIcon?: AureaIcon | false;
     /**
      * Desenha OUTRO componente de imagem com a nossa pele — é o caso do consumidor que já usa
      * `expo-image` por cache de disco.
@@ -96,3 +96,20 @@ export interface GalleryProps {
  * um alvo que engana quem navega por leitor de tela — mesma decisão da web, mesma razão.
  */
 export declare function Gallery({ items, label, selected, onSelect, zoom, ratio, minTileWidth, style, testID, }: GalleryProps): React.JSX.Element;
+/**
+ * A foto grande, no `Dialog` — a da `Gallery` e, desde a R-22 (02/10/2026), a do `PhotoInput`.
+ * Morava dentro da `Gallery`; duas cópias do zoom é o defeito que o `CLAUDE.md` nomeia, e o dia em
+ * que uma das duas muda e a outra não. Não sai pelo barril: é peça de dentro.
+ *
+ * ⚠ Aberta quando há `source`. O `Dialog` fica montado e fechado no resto do tempo — é o contrato
+ * dele, e o `Modal` do RN não desenha nada fechado.
+ */
+export declare function FotoAmpliada({ source, title, alt, ratio, onClose, testID }: {
+    source?: AureaImageSource;
+    /** O título da janela: uma caixa sem nome anuncia só "janela". */
+    title: string;
+    alt: string;
+    ratio?: number | string;
+    onClose: () => void;
+    testID?: string;
+}): React.JSX.Element;

package/dist/midia.js

@@ -177,5 +177,16 @@ export function Gallery({ items, label, selected, onSelect, zoom, ratio = 1, min
                         // `alt=""` acima). Sem legenda, o nome é o `alt`.
                         accessibilityLabel: temLegenda && typeof item.caption === "string"
                             ? item.caption : item.alt, ...estadoAcessivel({ selected: item.id === selected }), style: [s.ladrilho, item.id === selected && s.ladrilhoEscolhido], children: miolo }, item.id));
-                }) }), zoom && (_jsx(Dialog, { open: aberto != null, title: aberto ? (typeof aberto.caption === "string" ? aberto.caption : aberto.alt) : "", onClose: () => setAmpliado(null), testID: testID ? `${testID}-ampliada` : undefined, children: aberto && _jsx(Image, { source: aberto.source, alt: aberto.alt, fit: "contain", ratio: ratio }) }))] }));
+                }) }), zoom && (_jsx(FotoAmpliada, { source: aberto?.source, title: aberto ? (typeof aberto.caption === "string" ? aberto.caption : aberto.alt) : "", alt: aberto?.alt ?? "", ratio: ratio, onClose: () => setAmpliado(null), testID: testID ? `${testID}-ampliada` : undefined }))] }));
+}
+/**
+ * A foto grande, no `Dialog` — a da `Gallery` e, desde a R-22 (02/10/2026), a do `PhotoInput`.
+ * Morava dentro da `Gallery`; duas cópias do zoom é o defeito que o `CLAUDE.md` nomeia, e o dia em
+ * que uma das duas muda e a outra não. Não sai pelo barril: é peça de dentro.
+ *
+ * ⚠ Aberta quando há `source`. O `Dialog` fica montado e fechado no resto do tempo — é o contrato
+ * dele, e o `Modal` do RN não desenha nada fechado.
+ */
+export function FotoAmpliada({ source, title, alt, ratio, onClose, testID }) {
+    return (_jsx(Dialog, { open: source != null, title: title, onClose: onClose, testID: testID, children: source != null && _jsx(Image, { source: source, alt: alt, fit: "contain", ratio: ratio }) }));
 }

package/dist/moldura.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type TomDeCor } from "./estilos.js";
+import { type AureaIcon } from "./icon.js";
+export interface IconeEmMolduraProps {
+    icon: AureaIcon;
+    /** O lado da moldura, em dp — sempre de um token. */
+    moldura: number;
+    /** O lado do glifo, em dp — sempre de um token. */
+    glifo: number;
+    tone?: TomDeCor;
+    /**
+     * A cor de BAIXO, quando há algo atrás. No escuro os fundos suaves são translúcidos (o
+     * `successBg` é `oklch(0.42 0.11 150 / 0.36)`), e o trilho da `Timeline` aparecia através da
+     * moldura. É o mesmo truque do ponto da linha do tempo: a cor da superfície faz o buraco.
+     */
+    sobre?: string;
+}
+export declare function IconeEmMoldura({ icon, moldura, glifo, tone, sobre }: IconeEmMolduraProps): React.JSX.Element;

package/dist/moldura.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { acentoDoTom, comOpacidade, fundoDoTom } from "./estilos.js";
+import { Icon } from "./icon.js";
+import { useAureaTokens } from "./theme.js";
+export function IconeEmMoldura({ icon, moldura, glifo, tone = "neutral", sobre }) {
+    const t = useAureaTokens();
+    const fundo = tone === "neutral" ? t.color.muted
+        : tone === "primary" ? comOpacidade(t.color.primary, 0.1)
+            : fundoDoTom(t, tone);
+    const cor = tone === "neutral" ? t.color.mutedForeground : acentoDoTom(t, tone);
+    const redondo = { width: moldura, height: moldura, borderRadius: t.size.radiusFull, flexGrow: 0, flexShrink: 0 };
+    const circulo = (_jsx(View, { style: [redondo, { alignItems: "center", justifyContent: "center", backgroundColor: fundo }], children: _jsx(Icon, { name: icon, size: glifo, color: cor }) }));
+    return sobre == null ? circulo : (_jsx(View, { style: [redondo, { backgroundColor: sobre }], children: circulo }));
+}

package/dist/movimento.d.ts

@@ -15,3 +15,15 @@
  * Quem só quer um booleano escreve `useReduceMotion() === true`.
  */
 export declare function useReduceMotion(): boolean | null;
+/**
+ * O `useNativeDriver` de toda animação da Aurea — E13, 02/10/2026.
+ *
+ * No aparelho, `true`: a animação roda fora do JS. **No navegador não existe esse motor**: o
+ * React Native Web (0.21.3, `NativeAnimatedHelper.js:429`) avisa no console *"`useNativeDriver`
+ * is not supported"* toda vez que recebe `true`, e anima pelo JS do mesmo jeito. Então lá vai
+ * `false`, dito com todas as letras (sem a chave, ele avisa outra coisa: *"was not specified"*).
+ *
+ * Função, e não constante, para o teste conseguir trocar a plataforma entre um caso e outro.
+ * Quem pega o `useNativeDriver: true` escrito à mão é o `native-e13.test.tsx`.
+ */
+export declare function driverNativo(): boolean;

package/dist/movimento.js

@@ -14,7 +14,7 @@
 //
 // A pergunta é do sistema: iOS "Reduzir movimento", Android "Remover animações".
 import * as React from "react";
-import { AccessibilityInfo } from "react-native";
+import { AccessibilityInfo, Platform } from "react-native";
 /**
  * `true` quando a pessoa pediu menos movimento, `false` quando não, **`null` enquanto o sistema
  * não respondeu**.
@@ -43,3 +43,17 @@ export function useReduceMotion() {
     }, []);
     return reduzir;
 }
+/**
+ * O `useNativeDriver` de toda animação da Aurea — E13, 02/10/2026.
+ *
+ * No aparelho, `true`: a animação roda fora do JS. **No navegador não existe esse motor**: o
+ * React Native Web (0.21.3, `NativeAnimatedHelper.js:429`) avisa no console *"`useNativeDriver`
+ * is not supported"* toda vez que recebe `true`, e anima pelo JS do mesmo jeito. Então lá vai
+ * `false`, dito com todas as letras (sem a chave, ele avisa outra coisa: *"was not specified"*).
+ *
+ * Função, e não constante, para o teste conseguir trocar a plataforma entre um caso e outro.
+ * Quem pega o `useNativeDriver: true` escrito à mão é o `native-e13.test.tsx`.
+ */
+export function driverNativo() {
+    return Platform.OS !== "web";
+}

package/dist/navigation.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { type ViewProps } from "react-native";
-import { type IconName } from "./icon.js";
+import { type AureaIcon } from "./icon.js";
 import { type AureaFilaJustify } from "./rolagem.js";
 export interface AureaNavItem {
     id: string;
     label: React.ReactNode;
-    icon?: IconName;
+    icon?: AureaIcon;
     /** O contador de não lidos. Número vira selo; `true` vira ponto. */
     badge?: number | boolean;
     onPress?: () => void;
@@ -142,14 +142,14 @@ export interface AureaNavListItem {
     description?: React.ReactNode;
     /** O valor à direita — um número, um estado, uma data. */
     value?: React.ReactNode;
-    icon?: IconName;
+    icon?: AureaIcon;
     onPress?: () => void;
     disabled?: boolean;
 }
 export interface NavListProps extends ViewProps {
     items: AureaNavListItem[];
     /** O glifo de "isto abre", à direita. Registre-o, ou passe `false`. */
-    chevron?: IconName | false;
+    chevron?: AureaIcon | false;
 }
 /**
  * A lista de destinos DENTRO da página — a tela de ajustes, não a moldura do app.
@@ -174,8 +174,8 @@ export interface StepperProps extends ViewProps {
     items: AureaStepItem[];
     label?: string;
     /** Glifos de `done` e `error`. Registre-os, ou o passo mostra o número. */
-    doneIcon?: IconName | false;
-    errorIcon?: IconName | false;
+    doneIcon?: AureaIcon | false;
+    errorIcon?: AureaIcon | false;
 }
 /**
  * A trilha de passos — o onboarding de 3 passos que o consumidor já tem.
@@ -200,7 +200,16 @@ export interface TabsProps extends ViewProps {
     label?: string;
     /** Onde a fila de abas fica quando cabe: `start` (padrão), `center` ou `end` (E3). */
     justify?: AureaFilaJustify;
+    /**
+     * O jeito da fila, com os nomes do HeroUI (R-12, 01/10/2026):
+     * - `primary` (padrão): a cápsula, com a aba aberta num fundo `secondary`.
+     * - `secondary`: sem cápsula — um fio fino embaixo da fila inteira e o **fio amarelo** da casa
+     *   embaixo da aba aberta, o mesmo do `SegmentedControl`.
+     */
+    variant?: AureaTabsVariant;
 }
+/** Os dois jeitos da fila de abas, com os nomes do `Tabs` do HeroUI Native. */
+export type AureaTabsVariant = "primary" | "secondary";
 /**
  * As abas DENTRO da tela — trocar o painel, não trocar de página.
  *
@@ -234,4 +243,4 @@ export interface TabsProps extends ViewProps {
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export declare function Tabs({ tabs, value, onChange, label, justify, style, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, onChange, label, justify, variant, style, ...rest }: TabsProps): React.JSX.Element;

package/dist/navigation.js

@@ -3,7 +3,7 @@ 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, estadoAcessivel } from "./estilos.js";
+import { comOpacidade, criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Card } from "./layout.js";
 import { FilaRolante } from "./rolagem.js";
@@ -133,6 +133,24 @@ const folha = criarFolha((t) => ({
         paddingHorizontal: 14, borderRadius: t.size.radiusControl,
     },
     abaDeTabAtiva: { backgroundColor: t.color.secondary },
+    // `variant="secondary"` (R-12, 01/10/2026): o `secondary` do HeroUI Native 1.0.10
+    // (`styles/components/tabs.css`), com o fio da casa no lugar do indicador azul deles.
+    //   .tabs__list--variant-secondary  padding 0 · border-bottom 1px, cor da borda
+    //   .tabs__list                     gap `* 1` → space1
+    //   .tabs__trigger                  padding-inline `* 3` → space3 · padding-block `* 1.5`
+    //                                   → space1 + space05. Rótulo `text-base` + entrelinha 1.5 dá
+    //                                   36, que é o `controlHMd`: a altura da fila da cápsula, então
+    //                                   trocar de variante não muda a altura da fila.
+    //   .tabs__indicator--variant-secondary  border-bottom 2px na cor de destaque → `fioDoEscolhido`
+    abasSecundarias: {
+        flexDirection: "row", gap: t.size.space1,
+        borderBottomWidth: t.size.borderWidth, borderColor: t.color.border,
+    },
+    abaSecundaria: {
+        alignItems: "center", justifyContent: "center", minHeight: t.size.controlHMd,
+        paddingHorizontal: t.size.space3, paddingVertical: t.size.space1 + t.size.space05,
+    },
+    fioDaAba: fioDoEscolhido(t),
     painel: { marginTop: t.size.space3 },
     // ── Stepper ────────────────────────────────────────────────────────────────────────────────
     trilha: { flexDirection: "row" },
@@ -418,16 +436,21 @@ export function Stepper({ items, label, doneIcon = "check", errorIcon = "x-circl
  * largura de tela grande. Não há tablet medido neste projeto, e no nativo vale demanda antes de
  * cobertura — a mesma decisão da `Table` do Lote 6.
  */
-export function Tabs({ tabs, value, onChange, label, justify, style, ...rest }) {
+export function Tabs({ tabs, value, onChange, label, justify, variant = "primary", style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
     const aberta = tabs.find((it) => it.id === value);
-    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+    const secundaria = variant === "secondary";
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: secundaria ? s.abasSecundarias : s.abas, children: tabs.map((it) => {
                         const ativa = it.id === value;
-                        return (_jsx(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", ...estadoAcessivel({ selected: ativa, disabled: !!it.disabled }), accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: t.size.opacityDisabled }], children: typeof it.label === "string"
-                                ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
-                                : it.label }, it.id));
+                        return (_jsxs(Pressable, { onPress: it.disabled ? undefined : () => onChange?.(it.id), disabled: it.disabled, accessibilityRole: "tab", ...estadoAcessivel({ selected: ativa, disabled: !!it.disabled }), accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [
+                                secundaria ? s.abaSecundaria : s.abaDeTab,
+                                ativa && !secundaria && s.abaDeTabAtiva,
+                                it.disabled && { opacity: t.size.opacityDisabled },
+                            ], children: [typeof it.label === "string"
+                                    ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
+                                    : it.label, ativa && secundaria && _jsx(View, { style: s.fioDaAba })] }, it.id));
                     }) }) }), aberta
                 ? (_jsx(Card, { variant: "inset", accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content }))
                 : null] }));

package/dist/numero.d.ts

@@ -1,7 +1,19 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-import type { IconName } from "./icon-names.js";
+import type { AureaIcon } from "./icon.js";
 import { type AureaFieldSize } from "./inputs.js";
+/**
+ * Os tamanhos do `NumberField`: os três do campo e mais o `display` (R-16, 01/10/2026), o número
+ * grande de destaque. Nenhuma referência da fila tem esse tamanho (o `NumberField` do HeroUI web
+ * só tem `variant`; o telefone dele nem tem a peça; o ReUI também não), então ele é peça nossa —
+ * e as medidas saem de escalas que JÁ existem, nenhuma nova:
+ *   letra    `text3xl` (30) em seminegrito — o título 2 (`h2` do B-02). Escolha do Victor.
+ *   altura   `controlHXl` — o degrau seguinte da escala de altura dos controles, que muda com a
+ *            densidade como as outras três.
+ *   largura  `space24` (96): o `space16` (64) do campo comum não cabe "1.234" em 30.
+ *   botões   os do `lg`, o maior do `IconButton`.
+ */
+export type AureaNumberFieldSize = AureaFieldSize | "display";
 /** Os separadores de um locale, derivados de um número-sonda. */
 export type AureaSeparadores = {
     decimal: string;
@@ -52,7 +64,11 @@ export interface NumberFieldProps {
     disabled?: boolean;
     /** Mostra o valor e não deixa editar — os botões também somem. */
     readOnly?: boolean;
-    size?: AureaFieldSize;
+    /**
+     * `sm` · `md` · `lg`, como os outros campos, e `display`: o número grande de destaque, com a
+     * letra do título 2 (30). Ver `AureaNumberFieldSize`. Moeda em `display` pede `fullWidth`.
+     */
+    size?: AureaNumberFieldSize;
     /**
      * Ocupa a largura disponível em vez de abraçar o conteúdo. Padrão **false**.
      *
@@ -72,8 +88,8 @@ export interface NumberFieldProps {
     keyboardType?: "numeric" | "decimal-pad" | "number-pad" | "numbers-and-punctuation";
     /** Os glifos dos botões. Registre-os, ou passe `false` para tirar os dois. */
     icons?: {
-        increment: IconName;
-        decrement: IconName;
+        increment: AureaIcon;
+        decrement: AureaIcon;
     } | false;
     style?: StyleProp<ViewStyle>;
     testID?: string;