@aurea-uds/native 0.8.5 → 0.8.6

package/dist/inputs.js

@@ -40,6 +40,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Animated, KeyboardAvoidingView as KeyboardAvoidingViewRN, Modal, Platform, Pressable, ScrollView, TextInput, View, } from "react-native";
 import { comOpacidade, criarFolha } from "./estilos.js";
+import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
 import { useReduceMotion } from "./movimento.js";
@@ -415,30 +416,30 @@ export function SegmentedControl({ items, value, onChange, label, disabled, styl
     const s = folha(t);
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
-    return (_jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
-            const ativo = it.value === value;
-            return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
-                        ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, 
-                            // 🔴 ERA `foreground`, E ISSO QUEBRAVA A LINGUAGEM DE SELECIONADO.
-                            // Achado pelo consumidor em 17/09/2026. A web pinta o escolhido com a
-                            // MARCA (`aurea.css:937-938`), e o comentário de cima daquela regra diz
-                            // que nav ativo, aba ativa, item de lista e botão ligado mostram o mesmo
-                            // sinal — ordem do Victor, 24/07. O `SegmentedControl` daqui discordava
-                            // da web **e do `BottomNav` deste mesmo pacote**, que já usa este token.
-                            //
-                            // ⚠ **`primaryEmphasis` e NÃO `primary`, e a razão está no CSS:** *"sem
-                            // fundo, a marca vira TEXTO, e o amarelo puro"* não se lê no claro
-                            // (`aurea.css:358`). É a mesma lição que a `0.8.3` pagou no `Button`.
-                            // No escuro os dois valem o mesmo amarelo; no claro este aprofunda.
-                            //
-                            // ⚠ **Uma divergência declarada, não escondida:** para o `.segmented` a
-                            // web usa uma mistura própria (`primary 45% + foreground`) em vez do
-                            // token, enquanto para o `.bottom-nav` usa o token. São dois âmbares
-                            // parecidos para a MESMA linguagem, e isso é incoerência DA WEB. Escolhi
-                            // o token, que deixa os dois componentes daqui iguais entre si.
-                            style: { color: ativo ? t.color.primaryEmphasis : t.color.mutedForeground }, children: it.label })
-                        : it.label, ativo && _jsx(View, { style: s.fioDoSegmento })] }, it.value));
-        }) }));
+    return (_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
+                const ativo = it.value === value;
+                return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", accessibilityState: { checked: ativo, disabled: !!inativo }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
+                            ? _jsx(Text, { size: "sm", weight: ativo ? 600 : 400, 
+                                // 🔴 ERA `foreground`, E ISSO QUEBRAVA A LINGUAGEM DE SELECIONADO.
+                                // Achado pelo consumidor em 17/09/2026. A web pinta o escolhido com a
+                                // MARCA (`aurea.css:937-938`), e o comentário de cima daquela regra diz
+                                // que nav ativo, aba ativa, item de lista e botão ligado mostram o mesmo
+                                // sinal — ordem do Victor, 24/07. O `SegmentedControl` daqui discordava
+                                // da web **e do `BottomNav` deste mesmo pacote**, que já usa este token.
+                                //
+                                // ⚠ **`primaryEmphasis` e NÃO `primary`, e a razão está no CSS:** *"sem
+                                // fundo, a marca vira TEXTO, e o amarelo puro"* não se lê no claro
+                                // (`aurea.css:358`). É a mesma lição que a `0.8.3` pagou no `Button`.
+                                // No escuro os dois valem o mesmo amarelo; no claro este aprofunda.
+                                //
+                                // ⚠ **Uma divergência declarada, não escondida:** para o `.segmented` a
+                                // web usa uma mistura própria (`primary 45% + foreground`) em vez do
+                                // token, enquanto para o `.bottom-nav` usa o token. São dois âmbares
+                                // parecidos para a MESMA linguagem, e isso é incoerência DA WEB. Escolhi
+                                // o token, que deixa os dois componentes daqui iguais entre si.
+                                style: { color: ativo ? t.color.primaryEmphasis : t.color.mutedForeground }, children: it.label })
+                            : it.label, ativo && _jsx(View, { style: s.fioDoSegmento })] }, it.value));
+            }) }) }));
 }
 /**
  * A escolha de um de muitos.

package/dist/layout.d.ts

@@ -55,11 +55,34 @@ export interface SeparatorProps extends ViewProps {
  * comportamento certo.
  */
 export declare function Separator({ orientation, label, style, ...rest }: SeparatorProps): React.JSX.Element;
-export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger";
-export interface CardProps extends ViewProps {
-    variant?: AureaCardVariant;
+export type AureaCardVariant = "base" | "raised" | "interactive" | "inset" | "selected" | "danger" | "brand";
+interface CardBase extends ViewProps {
     children?: React.ReactNode;
 }
+/**
+ * 🔴 **O `brand` EXIGE `action`, e isso é de propósito — a regra é do TIPO, não de documento.**
+ *
+ * O cartão na cor da marca entrou em 17/09/2026 e é a **primeira superfície grande preenchida
+ * com o amarelo** neste sistema. Até aqui ele só pintava coisa pequena: o ponto do contador, a
+ * pílula do passo atual, o link de pular para o conteúdo. Um cartão amarelo é precedente, e
+ * precedente sem trava vira decoração — outras telas pedem o mesmo e o amarelo deixa de
+ * significar "aja aqui".
+ *
+ * A regra combinada foi *"o cartão amarelo é só para pedir uma ação da pessoa"*. **Escrita num
+ * documento, ela apagaria** — este repositório tem registro disso em cada arquivo, e a §"Afirmação
+ * velha" do `CLAUDE.md` existe por causa desse desgaste. Então ela mora no tipo: sem `action`, o
+ * `brand` não compila. É a mesma escolha que faz o `label` do `IconButton` ser obrigatório.
+ */
+interface CardDaMarca extends CardBase {
+    variant: "brand";
+    /** O que a pessoa faz aqui — um `Button`, um `IconButton`, um campo. Sem isto não compila. */
+    action: React.ReactNode;
+}
+interface CardComum extends CardBase {
+    variant?: Exclude<AureaCardVariant, "brand">;
+    action?: never;
+}
+export type CardProps = CardDaMarca | CardComum;
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *
@@ -69,3 +92,4 @@ export interface CardProps extends ViewProps {
  * que É um alvo — quem o torna tocável é a tela.
  */
 export declare function Card({ variant, style, ...rest }: CardProps): React.JSX.Element;
+export {};

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Aurea nativo — os primitivos de layout: `Stack`, `Cluster`, `Grid`, `Card`.
 //
 // Medidos no core da web antes de escrever (passo 1 do BUILDING.md), e o que eles são lá:
@@ -19,7 +19,7 @@ import { View } from "react-native";
 // `...rest` sem nada a mais.
 import { criarFolha } from "./estilos.js";
 import { Text } from "./text.js";
-import { useAureaTokens } from "./theme.js";
+import { useAureaTokens, SobreAMarca } from "./theme.js";
 const folha = criarFolha((t) => ({
     // A LINHA DO SISTEMA, e os números são os mesmos do `.separator` da web (`aurea.css`): cor de
     // `border` e espessura de UM pixel. ⚠ Um pixel não sai de `--space-*` de propósito — a linha
@@ -52,6 +52,11 @@ const folha = criarFolha((t) => ({
     card_inset: { backgroundColor: t.color.surfaceInset, borderColor: "transparent" },
     card_selected: { borderColor: t.color.primaryOutline, backgroundColor: t.color.surface2 },
     card_danger: { borderColor: t.color.danger400 ?? t.color.destructive, backgroundColor: t.color.dangerBg },
+    // O amarelo é o DE PREENCHER — `primary`, o mesmo do botão sólido. A borda some: uma superfície
+    // cheia não precisa de contorno, e um contorno sobre o amarelo mede 2,43 no claro (invisível).
+    card_brand: { backgroundColor: t.color.primary, borderColor: "transparent" },
+    // A ação fica embaixo, separada pelo mesmo respiro que o resto da casa usa entre blocos.
+    acaoDaMarca: { marginTop: t.size.space3 },
 }));
 /** Coluna com `--space-4` entre os filhos. **Sem prop de espaçamento, de propósito.** */
 export function Stack({ style, ...rest }) {
@@ -112,6 +117,24 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
  * que É um alvo — quem o torna tocável é a tela.
  */
 export function Card({ variant = "base", style, ...rest }) {
-    const s = folha(useAureaTokens());
-    return _jsx(View, { style: [s.cardBase, s[`card_${variant}`], style], ...rest });
+    const t = useAureaTokens();
+    const s = folha(t);
+    const { action, children, ...resto } = rest;
+    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 });
+    // 🔴 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
+    //     texto esmaecido .....  4,24 no claro  ·  **1,35 no escuro**  🔴 ilegível
+    //     primary-foreground ..  4,54 nos DOIS                          ✅ único que serve
+    // Sem forçar, o cartão da marca sairia quebrado no tema escuro **sem ninguém ver no claro**.
+    // ⚠ **E no RN não há cascata de cor**: `color` num `View` não desce para o `Text` de dentro.
+    // A saída é CONTEXTO — a mesma decisão que o `Field` do Lote 4 tomou para empurrar nome e dica.
+    //
+    // ⚠ **Consequência declarada: sobre o amarelo existe UMA cor de texto, não duas.** O tom
+    // `muted` mede 1,35 no escuro, então ele não pode sobreviver aqui. A hierarquia dentro deste
+    // cartão sai de PESO e TAMANHO, não de cor — e isso é restrição do contraste, não gosto.
+    return variant === "brand"
+        ? _jsx(SobreAMarca.Provider, { value: t.color.primaryForeground, children: pele })
+        : pele;
 }

package/dist/navigation.js

@@ -1,10 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, View, ScrollView } from "react-native";
+import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Badge } from "./display.js";
 import { comOpacidade, criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Card } from "./layout.js";
+import { FilaRolante } from "./rolagem.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -317,10 +318,7 @@ export function Tabs({ tabs, value, onChange, label, style, ...rest }) {
     const s = folha(t);
     const strings = useAureaStrings();
     const aberta = tabs.find((it) => it.id === value);
-    return (_jsxs(View, { style: style, ...rest, children: [_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, 
-                // Sem isto o conteúdo estica até a largura do rolador e o `padding` de 3 da cápsula
-                // aparece como faixa vazia à direita quando as abas cabem.
-                contentContainerStyle: { flexGrow: 0 }, children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: s.abas, children: tabs.map((it) => {
+    return (_jsxs(View, { style: style, ...rest, children: [_jsx(FilaRolante, { children: _jsx(View, { accessibilityRole: "tablist", accessibilityLabel: label ?? strings.tabsLabel, style: 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", accessibilityState: { selected: ativa, disabled: !!it.disabled }, accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.abaDeTab, ativa && s.abaDeTabAtiva, it.disabled && { opacity: 0.5 }], 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 })

package/dist/rolagem.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface FilaRolanteProps {
+    /** O conteúdo da fila — normalmente a cápsula com os itens dentro. */
+    children: React.ReactNode;
+    /** Estilo do invólucro externo, não do conteúdo. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Uma linha que rola para o lado quando não cabe, e que sabe QUANDO não cabe.
+ *
+ * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
+ * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
+ */
+export declare function FilaRolante({ children, style, testID }: FilaRolanteProps): React.JSX.Element;

package/dist/rolagem.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// A FILA QUE ROLA — e por que ela existe em vez de cada componente resolver o seu.
+//
+// 🔴 **ISTO NÃO É DESENHO NOVO: É TRADUÇÃO QUE FALTOU.** O consumidor pediu em 17/09/2026 um
+// grupo de opções que coubesse com seis itens, e a primeira resposta que eu ia dar era criar um
+// componente de "chips". **Medindo a web antes, o pedido já estava resolvido lá:**
+//
+//     aurea.css:2127, em tela de até 640px:
+//     .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; }
+//
+// Ou seja: **na web o segmentado e as abas JÁ rolam no telefone.** O nativo é que não traduziu.
+// Criar um terceiro jeito de escolher teria sido inventar o que já existia — e essa briga tem
+// nome neste repositório: o `Sidebar`.
+//
+// ⚠ **E o sinal de "tem mais" foi pedido junto, com razão:** quem não sabe que dá para arrastar
+// não acha a sexta opção. A saída óbvia do React Native **não serve** — `fadingEdgeLength` é
+// `@platform android` (medido no tipo do RN), e usá-la daria o aviso no Android e **nada no
+// iPhone**. É a armadilha de um alvo só que este projeto já pagou várias vezes.
+// Gradiente também não: proibido desde a Fase 0.
+//
+// **O que fica, e é o mesmo da web:** a opção cortada pela borda é o sinal, e ele vem do recorte.
+// O que este módulo acrescenta é MEDIR se há transbordo, para (1) mostrar a barra de rolagem só
+// quando ela significa alguma coisa e (2) dar ao teste um número para conferir.
+// ⚠ **Declarado: se o corte LÊ bem é pergunta de vidro, e nenhum aparelho deste projeto rodou
+// iOS.** O que está provado aqui é a medição, não a leitura.
+import * as React from "react";
+import { ScrollView } from "react-native";
+/**
+ * Uma linha que rola para o lado quando não cabe, e que sabe QUANDO não cabe.
+ *
+ * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
+ * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
+ */
+export function FilaRolante({ children, style, testID }) {
+    const [visivel, setVisivel] = React.useState(0);
+    const [conteudo, setConteudo] = React.useState(0);
+    const transbordou = conteudo > visivel && visivel > 0;
+    return (_jsx(ScrollView, { horizontal: true, testID: testID, onLayout: (e) => setVisivel(e.nativeEvent.layout.width), onContentSizeChange: (w) => setConteudo(w), 
+        // A barra só aparece quando ela quer dizer alguma coisa. Com tudo cabendo ela seria ruído,
+        // e é assim que o `overflow-x:auto` da web se comporta: sem transbordo, sem barra.
+        showsHorizontalScrollIndicator: transbordou, 
+        // Sem isto o conteúdo estica até a largura do rolador, e o respiro da cápsula aparece como
+        // faixa vazia à direita quando os itens cabem.
+        contentContainerStyle: { flexGrow: 0 }, style: style, children: children }));
+}

package/dist/text.js

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Text as TextRN } from "react-native";
 import { criarFolha } from "./estilos.js";
-import { useAureaTokens } from "./theme.js";
+import { useAureaTokens, useSobreAMarca } from "./theme.js";
 const TAMANHO = {
     xs: "textXs", sm: "textSm", md: "textMd", base: "textBase", lg: "textLg",
     xl: "textXl", "2xl": "text2xl", "3xl": "text3xl", "4xl": "text4xl", "5xl": "text5xl",
@@ -61,6 +61,7 @@ const folha = criarFolha((t) => {
 export function Text({ size = "md", weight = 400, font = "ui", tone = "default", leading = "normal", italic = false, align, tracking, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const sobreAMarca = useSobreAMarca();
     const proprio = React.useMemo(() => {
         const fontSize = t.size[TAMANHO[size]] ?? t.size.textMd;
         const escala = t.font[font];
@@ -79,5 +80,13 @@ export function Text({ size = "md", weight = 400, font = "ui", tone = "default",
             ...(align ? { textAlign: align } : null),
         };
     }, [t, size, weight, font, leading, italic, align, tracking]);
-    return _jsx(TextRN, { style: [s[tone], proprio, style], ...rest });
+    // 🔴 SOBRE UMA SUPERFÍCIE DA MARCA A COR É FORÇADA, e ela vence até o tom explícito.
+    // Medido contra o `primary` nos dois temas: texto comum dá **1,83 no escuro**, esmaecido
+    // **1,35**, e `danger` menos ainda. **Nenhum tom alcança os 4,5 da norma sobre o amarelo** —
+    // só o `primary-foreground`, com 4,54. Respeitar um `tone` ali dentro seria obedecer a prop e
+    // entregar texto que não se lê.
+    // ⚠ **A consequência está declarada e não é neutra:** dentro de um cartão da marca não existe
+    // texto esmaecido. A hierarquia sai de PESO e TAMANHO.
+    // ⚠ E `style` continua por último de propósito: quem passa cor à mão assume a conta.
+    return _jsx(TextRN, { style: [s[tone], sobreAMarca && { color: sobreAMarca }, proprio, style], ...rest });
 }

package/dist/theme.d.ts

@@ -73,3 +73,13 @@ export declare function useAureaTokens(): AureaTokens;
  * `strings.ts`.
  */
 export declare function useAureaStrings(): AureaStrings;
+/** O provedor. Quem usa é o `Card variant="brand"`. */
+export declare const SobreAMarca: React.Context<string | null>;
+/**
+ * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ *
+ * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
+ * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ */
+export declare function useSobreAMarca(): string | null;

package/dist/theme.js

@@ -109,3 +109,33 @@ export function useAureaTokens() {
 export function useAureaStrings() {
     return usar("useAureaStrings").strings;
 }
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+// Sobre a marca — a cor de texto FORÇADA dentro de uma superfície amarela
+// ─────────────────────────────────────────────────────────────────────────────────────────────
+//
+// 🔴 **Isto existe porque o contraste não deixou escolha**, e os números estão no `layout.tsx`:
+// sobre o `primary`, o texto comum mede **1,83 no tema escuro** e o esmaecido **1,35**. Os dois
+// são ilegíveis. O único par que serve nos DOIS temas é `primary-foreground`, com 4,54.
+//
+// ⚠ **E no React Native não há cascata de cor** — `color` num `View` não desce para o `Text` de
+// dentro, como desceria no CSS. Então a cor tem de viajar por CONTEXTO, que é exatamente a
+// decisão que o `Field` do Lote 4 tomou para empurrar nome, dica e estado de inválido.
+//
+// ⚠ **Ele mora AQUI e não no `layout.tsx` por uma razão de estrutura:** o `layout.tsx` importa o
+// `Text`, então se ele também exportasse o contexto o `text.tsx` teria de importar de volta — um
+// ciclo. Este módulo é o que os dois já importam.
+//
+// ⚠ **Não sai pela porta da frente do pacote.** É acordo interno entre o `Card` e o `Text`.
+const SobreAMarcaCtx = React.createContext(null);
+/** O provedor. Quem usa é o `Card variant="brand"`. */
+export const SobreAMarca = SobreAMarcaCtx;
+/**
+ * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ *
+ * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
+ * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ */
+export function useSobreAMarca() {
+    return React.useContext(SobreAMarcaCtx);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "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.5"
+    "@aurea-uds/tokens": "^0.8.6"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",