@aurea-uds/native 0.8.12 → 0.8.13

package/dist/actions.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //                 do Lote 3. Aparência sem consumidor é a ADR-0034 ("ter a variante não é usar").
 import * as React from "react";
 import { Pressable, View } from "react-native";
-import { criarFolha } from "./estilos.js";
+import { criarFolha, REACAO_AO_TOQUE } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Text } from "./text.js";
 import { useAureaTokens, useSobreAMarca } from "./theme.js";
@@ -114,10 +114,9 @@ const folha = criarFolha((t) => ({
         borderRadius: t.size.radiusControl, // 999 — pill, identidade INTOCÁVEL
         borderWidth: t.size.borderWidth,
     },
-    // `.btn:active { transform:scale(.97); opacity:.9 }` no core — a mesma reação, medida lá.
-    pressionado: { opacity: 0.9, transform: [{ scale: 0.97 }] },
-    // `.btn:disabled { opacity:.45 }`
-    inerte: { opacity: 0.45 },
+    // `.btn:active` e `.btn:disabled` do core — os números moram no `estilos.ts` desde que o
+    // `Card` com `onPress` passou a reagir igual (R-04, 24/09/2026).
+    ...REACAO_AO_TOQUE,
 }));
 /**
  * Botão. `Pressable` do RN, alvo ≥ `--target-min`, pele de token.

package/dist/estilos.d.ts

@@ -30,4 +30,29 @@ export declare function criarFolha<T extends NamedStyles<T> | NamedStyles<Record
  * do pacote**: é ferramenta de dentro, e o `check 39` cobraria teste de tudo que sai por lá.
  */
 export declare const comOpacidade: (cor: string, pct: number) => string;
+/**
+ * A reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com
+ * `onPress`. Os números são os do core: `.btn:active { transform:scale(.97); opacity:.9 }` e
+ * `.btn:disabled { opacity:.45 }`.
+ *
+ * ⚠ **Mora aqui desde 24/09/2026 (R-04)**, quando o `Card` passou a responder ao toque e a
+ * decisão foi *"a mesma reação do `Button`"*. Copiar os três números para o `layout.tsx` faria
+ * duas peças dizerem a mesma coisa em dois lugares — e a primeira que mudasse deixaria a outra
+ * para trás. Mesma razão do `comOpacidade` acima, e pelo mesmo motivo **não sai pela porta da
+ * frente do pacote**.
+ *
+ * ⚠ **Não é animação:** não há transição, o alvo SALTA para 0,97 enquanto o dedo está em cima.
+ * Por isso ele não consulta `useReduceMotion` — não há movimento para parar.
+ */
+export declare const REACAO_AO_TOQUE: {
+    readonly pressionado: {
+        readonly opacity: 0.9;
+        readonly transform: readonly [{
+            readonly scale: 0.97;
+        }];
+    };
+    readonly inerte: {
+        readonly opacity: 0.45;
+    };
+};
 export {};

package/dist/estilos.js

@@ -46,3 +46,21 @@ export function criarFolha(descrever) {
 export const comOpacidade = (cor, pct) => /^#[0-9a-fA-F]{6}$/.test(cor)
     ? cor + Math.round(Math.max(0, Math.min(1, pct)) * 255).toString(16).padStart(2, "0")
     : cor;
+/**
+ * A reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com
+ * `onPress`. Os números são os do core: `.btn:active { transform:scale(.97); opacity:.9 }` e
+ * `.btn:disabled { opacity:.45 }`.
+ *
+ * ⚠ **Mora aqui desde 24/09/2026 (R-04)**, quando o `Card` passou a responder ao toque e a
+ * decisão foi *"a mesma reação do `Button`"*. Copiar os três números para o `layout.tsx` faria
+ * duas peças dizerem a mesma coisa em dois lugares — e a primeira que mudasse deixaria a outra
+ * para trás. Mesma razão do `comOpacidade` acima, e pelo mesmo motivo **não sai pela porta da
+ * frente do pacote**.
+ *
+ * ⚠ **Não é animação:** não há transição, o alvo SALTA para 0,97 enquanto o dedo está em cima.
+ * Por isso ele não consulta `useReduceMotion` — não há movimento para parar.
+ */
+export const REACAO_AO_TOQUE = {
+    pressionado: { opacity: 0.9, transform: [{ scale: 0.97 }] },
+    inerte: { opacity: 0.45 },
+};

package/dist/index.d.ts

@@ -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, AureaTopbarVariant, TabsProps, AureaTabItem, } from "./navigation.js";
+export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, TabsProps, AureaTabItem, } from "./navigation.js";
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
 export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
 export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";

package/dist/layout.d.ts

@@ -81,15 +81,49 @@ interface CardDaMarca extends CardBase {
 interface CardComum extends CardBase {
     variant?: Exclude<AureaCardVariant, "brand">;
     action?: never;
+    onPress?: undefined;
 }
-export type CardProps = CardDaMarca | CardComum;
+/**
+ * 🔴 **O cartão que É um alvo — R-04, 24/09/2026.** Até aqui a documentação mandava a tela
+ * embrulhar o cartão num `Pressable`, e o consumidor que segue a regra "só Aurea" ficava sem
+ * caminho. Agora o toque é do `Card`, e **as duas obrigações que a nota antiga deixava com a tela
+ * passam a ser do TIPO:** com `onPress` o nome para o leitor de tela é obrigatório, e o papel de
+ * botão vem de dentro. Mesma escolha do `action` do `brand` e do `label` do `IconButton`.
+ *
+ * ⚠ **E o `brand` NÃO aceita `onPress`, de propósito.** Ele exige `action`, e `action` é um botão
+ * DENTRO do cartão — botão dentro de botão, o defeito que o `check 43` barra. No iPhone o de
+ * dentro some para o VoiceOver.
+ */
+interface CardTocavel extends CardBase {
+    variant?: Exclude<AureaCardVariant, "brand">;
+    action?: never;
+    /** O que acontece ao tocar no cartão. Com isto o cartão inteiro vira UM botão. */
+    onPress: () => void;
+    /** O nome do cartão para o leitor de tela. Obrigatório com `onPress`: é o que ele anuncia. */
+    accessibilityLabel: string;
+    disabled?: boolean;
+}
+export type CardProps = CardDaMarca | CardComum | CardTocavel;
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *
- * ⚠ **`interactive` aqui NÃO responde ao toque sozinho.** Na web ele é a variante que responde ao
- * ponteiro; no nativo não há hover, e um cartão que vira alvo precisa de `Pressable` em volta,
- * com rótulo e papel de acessibilidade próprios. A variante existe para a **pele** de um cartão
- * que É um alvo — quem o torna tocável é a tela.
+ * ✅ **O cartão responde ao toque com `onPress`** (R-04, 24/09/2026):
+ *
+ * ```tsx
+ * <Card onPress={abrir} accessibilityLabel="Moto CG 160">…</Card>
+ * ```
+ *
+ * Com `onPress` a variante padrão passa a ser `interactive` — a pele de um cartão que é alvo — e
+ * o toque dá a MESMA reação do `Button` (`REACAO_AO_TOQUE`). Sem `onPress`, nada muda: `interactive`
+ * continua sendo só a pele.
+ *
+ * 🔴 **Um cartão com `onPress` NÃO PODE ter coisa tocável dentro** — nem `Button`, nem `Switch`,
+ * nem link. O cartão vira UM elemento para o leitor de tela, e no iPhone quem é elemento **não
+ * expõe os filhos**: o botão de dentro existiria na tela e não existiria para o VoiceOver. É o
+ * defeito que o `check 43` guarda no nosso código, e aqui ele não alcança, porque o conteúdo é
+ * do app. ⚠ **O exemplo do HeroUI faz exatamente isso** (`PressableFeedback` em volta de um
+ * `Card` com `Button` dentro, `heroui-native@1.0.10`) — é o ponto em que a referência não serve.
+ * Cartão com duas ações não tem `onPress`: cada ação é um botão dentro de um cartão comum.
  */
 export declare function Card({ variant, style, ...rest }: CardProps): React.JSX.Element;
 export {};

package/dist/layout.js

@@ -12,12 +12,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // do `Stack` na web escreve o porquê — *"um primitivo de layout que aceita qualquer espaçamento é
 // como um sistema deixa de ter espaçamento"*. Reabrir isso no nativo criaria dois sistemas.
 import * as React from "react";
-import { View } from "react-native";
+import { Pressable, View } from "react-native";
 // `ref` chega por PROPS, sem `forwardRef` — e' o padrao do React 19, e e' o que o
 // `@aurea-uds/react` ja' faz (o `Stack` da web e' `HTMLAttributes & RefAttributes`, sem
 // envelope). O `ViewProps`/`TextProps` do RN 0.87 ja' declaram `ref`, entao ele viaja no
 // `...rest` sem nada a mais.
-import { criarFolha } from "./estilos.js";
+import { criarFolha, REACAO_AO_TOQUE } from "./estilos.js";
 import { Text } from "./text.js";
 import { useAureaTokens, SobreAMarca } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -133,17 +133,38 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *
- * ⚠ **`interactive` aqui NÃO responde ao toque sozinho.** Na web ele é a variante que responde ao
- * ponteiro; no nativo não há hover, e um cartão que vira alvo precisa de `Pressable` em volta,
- * com rótulo e papel de acessibilidade próprios. A variante existe para a **pele** de um cartão
- * que É um alvo — quem o torna tocável é a tela.
+ * ✅ **O cartão responde ao toque com `onPress`** (R-04, 24/09/2026):
+ *
+ * ```tsx
+ * <Card onPress={abrir} accessibilityLabel="Moto CG 160">…</Card>
+ * ```
+ *
+ * Com `onPress` a variante padrão passa a ser `interactive` — a pele de um cartão que é alvo — e
+ * o toque dá a MESMA reação do `Button` (`REACAO_AO_TOQUE`). Sem `onPress`, nada muda: `interactive`
+ * continua sendo só a pele.
+ *
+ * 🔴 **Um cartão com `onPress` NÃO PODE ter coisa tocável dentro** — nem `Button`, nem `Switch`,
+ * nem link. O cartão vira UM elemento para o leitor de tela, e no iPhone quem é elemento **não
+ * expõe os filhos**: o botão de dentro existiria na tela e não existiria para o VoiceOver. É o
+ * defeito que o `check 43` guarda no nosso código, e aqui ele não alcança, porque o conteúdo é
+ * do app. ⚠ **O exemplo do HeroUI faz exatamente isso** (`PressableFeedback` em volta de um
+ * `Card` com `Button` dentro, `heroui-native@1.0.10`) — é o ponto em que a referência não serve.
+ * Cartão com duas ações não tem `onPress`: cada ação é um botão dentro de um cartão comum.
  */
-export function Card({ variant = "base", style, ...rest }) {
+export function Card({ variant, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
-    const { action, children, ...resto } = rest;
+    const { action, children, onPress, disabled, ...resto } = rest;
+    if (onPress != null) {
+        const pele = variant ?? "interactive";
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, style: ({ pressed: tocando }) => [
+                s.cardBase, s[`card_${pele}`],
+                tocando && REACAO_AO_TOQUE.pressionado, disabled && REACAO_AO_TOQUE.inerte,
+                style,
+            ], ...resto, children: children }));
+    }
     const corpo = (_jsxs(_Fragment, { children: [children, action != null && _jsx(View, { style: s.acaoDaMarca, children: action })] }));
-    const pele = _jsx(View, { style: [s.cardBase, s[`card_${variant}`], style], ...resto, children: corpo });
+    const pele = _jsx(View, { style: [s.cardBase, s[`card_${variant ?? "base"}`], style], ...resto, children: corpo });
     // 🔴 SOBRE O AMARELO A COR DO TEXTO NÃO É ESCOLHA, É OBRIGAÇÃO — e os números decidiram isto.
     // Medido nos dois temas, texto contra o `primary`:
     //     texto comum ........ 10,34 no claro  ·  **1,83 no escuro**  🔴 ilegível

package/dist/navigation.d.ts

@@ -11,6 +11,8 @@ export interface AureaNavItem {
     disabled?: boolean;
 }
 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 interface BottomNavProps extends ViewProps {
     items: AureaNavItem[];
@@ -18,6 +20,11 @@ export interface BottomNavProps extends ViewProps {
     current?: string;
     variant?: AureaBottomNavVariant;
     indicator?: AureaBottomNavIndicator;
+    /**
+     * `content` põe a pílula do tamanho das abas, no centro, em vez de ir de uma borda à outra.
+     * Vale só no `floating`: a `edge` encosta na borda e continua da largura da tela.
+     */
+    width?: AureaBottomNavWidth;
     /** Nome da barra para o leitor de tela. Sem ele, a frase do provider. */
     label?: string;
 }
@@ -94,7 +101,7 @@ export interface BottomNavProps extends ViewProps {
  * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
  * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
-export declare function BottomNav({ items, current, variant, indicator, label, style, ...rest }: BottomNavProps): React.JSX.Element;
+export declare function BottomNav({ items, current, variant, indicator, width, label, style, ...rest }: BottomNavProps): React.JSX.Element;
 export type AureaTopbarVariant = "floating" | "flush" | "pill";
 export interface TopbarProps extends ViewProps {
     variant?: AureaTopbarVariant;

package/dist/navigation.js

@@ -45,7 +45,7 @@ const folha = criarFolha((t) => ({
     //
     // `zSticky` é token (20), o mesmo `--z-sticky` que a web usa na mesma peça.
     barra: {
-        position: "absolute", left: 0, right: 0, bottom: 0, zIndex: t.size.zSticky,
+        position: "absolute", bottom: 0, zIndex: t.size.zSticky,
         flexDirection: "row", gap: t.size.space1, margin: t.size.space4, padding: t.size.space1,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
         borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
@@ -58,11 +58,33 @@ const folha = criarFolha((t) => ({
         margin: 0, paddingHorizontal: 0, borderRadius: 0, backgroundColor: t.color.background,
         borderWidth: 0, borderTopWidth: t.size.borderWidth, boxShadow: undefined,
     },
+    // A pílula CHEIA, de uma borda à outra menos a margem — o de sempre. Mora fora da `barra` para
+    // o `content` nunca precisar DESFAZER estes dois (ver abaixo).
+    barra_cheia: { left: 0, right: 0 },
+    // 🔴 `width="content"` — R-08, 24/09/2026: *"ficou super largo"*. A pílula deixa de ir de uma
+    // borda à outra e fica do tamanho das abas, no centro. Nenhuma conta nossa: medido no Yoga do
+    // `react-native@0.87.1`, uma peça `absolute` SEM `left`/`right` se mede pelo conteúdo, limitada
+    // à largura do pai (`AbsoluteLayout.cpp`, o ramo `FitContent` de `layoutAbsoluteChild`), e é
+    // posicionada pelo `alignSelf` (`alignAbsoluteChild`, o caso `Align::Center`).
+    // ⚠ **Por isso `left/right` NÃO podem existir aqui**, e a forma importa: escrever
+    // `left: undefined` por cima de um `left: 0` apaga na montagem, mas NÃO numa atualização — o
+    // `restoreDeletedValuesInNestedArray` do `ReactNativeAttributePayload.js` pula `undefined` e
+    // devolve o valor do item anterior. Trocar `width` com a tela aberta deixaria a pílula cheia.
+    barra_content: { alignSelf: "center" },
     aba: {
         flex: 1, minWidth: 0, alignItems: "center", justifyContent: "center",
         gap: t.size.space1, minHeight: t.size.controlHLg, padding: t.size.space1,
         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
+    // de zeros é uma pílula de largura zero. Aqui cada aba mede o próprio conteúdo (base `auto`) e
+    // só encolhe se não couber. O mínimo é o alvo de toque da própria aba, `controlHLg`, para uma
+    // aba de rótulo curto não virar um alvo mais estreito que alto; e o respiro dos lados é o
+    // `space3` que o `.bottom-nav-content` da web usa na mesma peça.
+    aba_content: {
+        flexGrow: 0, flexShrink: 1, flexBasis: "auto",
+        minWidth: t.size.controlHLg, paddingHorizontal: t.size.space3,
+    },
     // A CAIXA QUE ANCORA O CONTADOR, e ela existe por um defeito visto em tela: pendurado no ITEM,
     // o número cai no meio do RÓTULO. O `navigation-client.tsx:336` conta a história inteira — o
     // Victor viu o contador cobrir o nome em 17/08/2026, e a pesquisa (Material 3 e os guias de
@@ -188,7 +210,7 @@ const folha = criarFolha((t) => ({
  * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
  * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
-export function BottomNav({ items, current, variant = "floating", indicator = "none", label, style, ...rest }) {
+export function BottomNav({ items, current, variant = "floating", indicator = "none", width = "full", label, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
@@ -196,12 +218,13 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
     const redondo = indicator.startsWith("circle");
     const anotar = useAnotarBottomNav();
     const flutua = variant !== "edge";
+    const justa = flutua && width === "content";
     return (_jsx(View, { accessibilityLabel: label ?? strings.bottomNavLabel, 
         // 🔴 A BARRA CONTA A PRÓPRIA ALTURA — é o que permite o `Screen` reservar o fim da rolagem
         // sem o app calcular nada. A conta é a pílula (o que o layout mede) mais as DUAS margens
         // mais a folga do sistema; `edge` conta zero, porque ela fica no fluxo e já encurta a tela.
         onLayout: anotar == null ? undefined : (e) => anotar(flutua ? e.nativeEvent.layout.height + t.size.space4 * 2 + inset.bottom : 0), style: [
-            s.barra, variant === "edge" && s.barra_edge,
+            s.barra, justa ? s.barra_content : s.barra_cheia, variant === "edge" && s.barra_edge,
             // 🔴 NO `floating` A FOLGA DO SISTEMA VAI POR FORA — conserto de 19/09/2026, visto em
             // aparelho Samsung com os três botões (|||, ○, <).
             //
@@ -229,7 +252,7 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
             return (_jsxs(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", accessibilityState: { selected: ativo, disabled: !!it.disabled }, style: [
-                    s.aba,
+                    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) },

package/package.json

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