@aurea-uds/native 0.8.2 → 0.8.4

package/dist/actions.js

@@ -42,8 +42,25 @@ const ICONE = {
 function pintar(t, tone) {
     const m = {
         neutral: { solido: t.color.secondary, texto: t.color.secondaryForeground, sobre: t.color.foreground },
-        brand: { solido: t.color.primary, texto: t.color.primaryForeground, sobre: t.color.primary },
-        danger: { solido: t.color.destructive, texto: t.color.destructiveForeground, sobre: t.color.destructive },
+        // ⚠ O TOM DA MARCA TEM DUAS CORES, e confundi-las foi defeito publicado na `0.8.2`.
+        //
+        // `solido` é o amarelo da marca, que é FUNDO: o texto por cima é escuro e lê bem.
+        // `sobre` é o mesmo amarelo virando TEXTO — e aí ele some. Medido sobre o fundo do tema
+        // claro: **1,73:1**, contra os 4,5:1 que a WCAG exige para texto normal. No escuro dá 10,34.
+        //
+        // O token certo existe desde sempre e é o `link`: mesmo matiz (86.047), mais escuro,
+        // **5,02:1** no claro — e no escuro ele É o amarelo da marca, então nada muda lá. A
+        // identidade não foi tocada: o amarelo de preencher continua invariável, como manda o
+        // `CLAUDE.md`. O que mudou é qual dos dois se usa para ESCREVER.
+        //
+        // ⚠ Achado pelo app na tela de entrar, não por teste nosso — os 1430 passavam por cima.
+        brand: { solido: t.color.primary, texto: t.color.primaryForeground, sobre: t.color.link },
+        // ⚠ MESMO DEFEITO DO TOM DA MARCA, achado por medir os outros tons em vez de parar no
+        // primeiro: `destructive` escrito sobre o tema claro dá **4,30:1** — reprova por pouco, mas
+        // reprova. O `danger400` passa nos DOIS temas (6,86 no claro, 7,47 no escuro), e não é
+        // invenção: o `Input` já usa esse token para a borda de inválido.
+        // O `solido` continua no `destructive`, porque ali ele é FUNDO e o texto por cima é claro.
+        danger: { solido: t.color.destructive, texto: t.color.destructiveForeground, sobre: t.color.danger400 ?? t.color.destructive },
         success: { solido: t.color.success, texto: t.color.successForeground, sobre: t.color.success },
         warning: { solido: t.color.warning, texto: t.color.warningForeground, sobre: t.color.warning },
         info: { solido: t.color.info, texto: t.color.infoForeground, sobre: t.color.info },

package/dist/busca.js

@@ -114,6 +114,23 @@ const folha = criarFolha((t) => ({
     // `space05` mede 2 — o mesmo valor, agora com nome. O `.combobox-actions` da web
     // (`aurea.css:1673`) usa `gap:2px` literal; aqui o token existe, então é ele que entra.
     acoes: { flexDirection: "row", alignItems: "center", gap: t.size.space05 },
+    // 🔴 O GATILHO É IRMÃO DO X, NÃO ANCESTRAL — defeito achado pelo consumidor em 16/09/2026.
+    // O `IconButton` de limpar vivia DENTRO deste `Pressable`, e um `Pressable` nasce `accessible`
+    // (`Pressable.js:274`). No iOS esse `accessible` vira `isAccessibilityElement`
+    // (`RCTViewComponentView.mm:398`), e quem é elemento de acessibilidade NÃO expõe os filhos —
+    // então o X existia na tela e não existia para o VoiceOver.
+    // ⚠ **No Android não sumia**, e é por isso que o defeito atravessou o smoke inteiro: lá
+    // `accessible` só liga `isFocusable` (`ReactViewManager.kt:96`) e o `ReactViewGroup.kt:1048`
+    // continua entregando os filhos à árvore. Um aparelho só nunca responderia esta pergunta.
+    // ⚠ É a MESMA forma dos dois consertos que este pacote já carrega (`busca.tsx` fundo da folha,
+    // `inputs.tsx:909`): **num sistema de toque, o irmão resolve o que o ancestral quebra.**
+    // Nenhuma distância nova: `flex`, `minWidth` e `100%` são relações, não medidas.
+    gatilho: { flex: 1, minWidth: 0, height: "100%", flexDirection: "row", alignItems: "center" },
+    // A seta deixou de ser enfeite dentro do gatilho e virou toque próprio — é onde a pessoa toca
+    // para abrir. `accessible={false}` no JSX porque o gatilho JÁ anuncia tudo: um segundo botão
+    // aqui seria a mesma informação duas vezes. O `Icon` sem rótulo já se esconde sozinho
+    // (`icon.tsx:104`), então não sobra nada para o leitor de tela tropeçar.
+    setaToque: { height: "100%", justifyContent: "center" },
     // A folha, com a mesma anatomia da do `Select` (`inputs.tsx:98-113`) — e é de propósito que
     // sejam iguais: são o mesmo gesto, e duas folhas diferentes para o mesmo gesto é como uma
     // biblioteca deixa de ter linguagem.
@@ -271,13 +288,13 @@ export function Combobox({ items, value, onValueChange, onSearchChange, searchDe
         return items.filter((i) => dobrar(i.label).includes(alvo));
     }, [items, texto, onSearchChange]);
     const nada = !loading && filtrados.length === 0;
-    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value?.label }, accessibilityState: { disabled: !!inativo, expanded: aberto }, style: [
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: [
                     s.caixa,
                     { height: alturaDoTamanho(t, tam), paddingHorizontal: respiroDoTamanho(t, tam) },
                     campo?.invalido && s.invalido,
                     inativo && s.desabilitado,
                     style,
-                ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "close", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground })] })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [s.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, onStartShouldSetResponder: () => true, children: [_jsx(View, { style: s.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) }), _jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
+                ], children: [_jsx(Pressable, { testID: testID, onPress: inativo ? undefined : () => setAberto(true), disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label, accessibilityHint: campo?.hint, accessibilityValue: { text: value?.label }, accessibilityState: { disabled: !!inativo, expanded: aberto }, style: s.gatilho, children: _jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, style: { flex: 1, minWidth: 0 }, children: value?.label ?? placeholder ?? "" }) }), _jsxs(View, { style: s.acoes, children: [clearable && value != null && !inativo && (_jsx(IconButton, { name: "close", label: strings.comboboxClear, appearance: "ghost", size: "sm", onPress: () => onValueChange?.(null), testID: testID ? `${testID}-limpar` : undefined })), chevron && (_jsx(Pressable, { accessible: false, disabled: inativo, style: s.setaToque, onPress: inativo ? undefined : () => setAberto(true), testID: testID ? `${testID}-seta` : undefined, children: _jsx(Icon, { name: chevron, size: "sm", color: t.color.subtleForeground }) }))] })] }), _jsx(Modal, { visible: aberto, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: fechar, children: _jsxs(KeyboardAvoiding, { style: s.fundoDaLista, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: fechar, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { style: [s.lista, { transform: [{ translateY: arrasto }] }], onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, onStartShouldSetResponder: () => true, children: [_jsx(View, { style: s.puxadorArea, ...(draggable ? gestos.panHandlers : null), accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) }), _jsxs(View, { style: [s.grupo, { height: alturaDoTamanho(t, tam) }], ...(draggable ? gestos.panHandlers : null), children: [searchIcon && _jsx(Icon, { name: searchIcon, size: "sm", color: t.color.subtleForeground }), _jsx(TextInput, { testID: testID ? `${testID}-busca` : undefined, value: texto, onChangeText: digitar, placeholder: searchPlaceholder ?? strings.comboboxSearch, placeholderTextColor: t.color.subtleForeground, 
                                             // ⚠ `autoFocus` é o que faz a folha valer a pena: abrir um campo de busca e
                                             // exigir um segundo toque para o teclado subir é um toque a mais em cada
                                             // cadastro. O foco entra com a folha; o teclado vem junto.

package/dist/index.d.ts

@@ -9,8 +9,8 @@ export { Icon, IconRegistryProvider, criarRegistroDeIcones } from "./icon.js";
 export type { IconProps, IconName, AureaIconComponent, AureaIconRegistry, AureaIconSize, } from "./icon.js";
 export { Screen } from "./screen.js";
 export type { ScreenProps, AureaScreenBackground, AureaScreenEdge } from "./screen.js";
-export { Stack, Cluster, Grid, Card } from "./layout.js";
-export type { StackProps, GridProps, CardProps, AureaCardVariant } from "./layout.js";
+export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
+export type { StackProps, GridProps, CardProps, SeparatorProps, AureaCardVariant } from "./layout.js";
 export { Button, IconButton } from "./actions.js";
 export type { ButtonProps, IconButtonProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, } from "./actions.js";
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";

package/dist/index.js

@@ -33,7 +33,7 @@ export { Icon, IconRegistryProvider, criarRegistroDeIcones } from "./icon.js";
 // A ÚNICA peça do Lote 1 com dependência de terceiro — `react-native-safe-area-context`,
 // autorizada pelo Victor em 03/09/2026 depois de o lote parar por ela (`BUILDING.md` §3).
 export { Screen } from "./screen.js";
-export { Stack, Cluster, Grid, Card } from "./layout.js";
+export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
 export { Button, IconButton } from "./actions.js";
 // ── Lote 2 — o painel, que é só leitura ────────────────────────────────────────────────────
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";

package/dist/inputs.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type KeyboardTypeOptions, type StyleProp, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
-import { type IconName } from "./icon.js";
+import { TextInput, type KeyboardTypeOptions, type StyleProp, type TextInputProps, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
+import { type AureaIconRegistry, type IconName } from "./icon.js";
 export type AureaFieldSize = "sm" | "md" | "lg";
 type ContextoDeCampo = {
     label?: string;
@@ -59,7 +59,30 @@ export interface LabelProps extends ViewProps {
  * entrega. Um `Label` solto é decoração; use-o dentro de um `Field`.
  */
 export declare function Label({ children, trailing, style, ...rest }: LabelProps): React.JSX.Element;
-export interface InputProps {
+/**
+ * ⚠ **O `Input` HERDA do `TextInput`, e isso é conserto de defeito publicado na `0.8.2`.**
+ *
+ * Até ali a interface listava catorze props e o componente desestruturava as catorze **sem
+ * `...rest`**: tudo o que não estivesse na lista era **descartado em silêncio**. O app achou na
+ * tela de entrar, e o efeito não aparece na tela — aparece no uso: sem `autoComplete` e
+ * `textContentType` o gerenciador de senhas não reconhece os campos; sem `autoCorrect` o teclado
+ * "corrige" o e-mail; sem `returnKeyType`/`onSubmitEditing` o botão "próximo" não pula para a
+ * senha; e sem `ref` não há como focar o campo por código.
+ *
+ * ⚠ **Era pior do que parece:** o `PasswordField` repassa `...rest` ao `Input` — e o `Input`
+ * jogava fora. Duas camadas concordando em perder a prop.
+ *
+ * O que continua sendo da Aurea está no `Omit` abaixo, e a razão de cada um está ao lado.
+ */
+export interface InputProps extends Omit<TextInputProps, "style" | "editable" | "placeholderTextColor" | "onBlur" | "onFocus" | "accessibilityLabel" | "accessibilityHint" | "accessibilityState"> {
+    /**
+     * O nó do `TextInput` lá dentro — para focar por código (`ref.current?.focus()`), que é como
+     * o "próximo" do teclado pula de um campo para o outro.
+     *
+     * Chega por PROPS e atravessa no `...rest`: é o padrão do React 19, sem `forwardRef`, o mesmo
+     * que o `layout.tsx` já documenta. **Faltava na `0.8.2`** — não havia como focar campo nenhum.
+     */
+    ref?: React.Ref<React.ComponentRef<typeof TextInput>>;
     value?: string;
     defaultValue?: string;
     onChangeText?: (v: string) => void;
@@ -111,7 +134,7 @@ export interface InputProps {
  * (`aurea.css:686`); **não há ponteiro no telefone**. O foco continua existindo e é o que marca o
  * campo ativo.
  */
-export declare function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, }: InputProps): React.JSX.Element;
+export declare function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, ...rest }: InputProps): React.JSX.Element;
 export interface TextareaProps extends InputProps {
     /** Linhas visíveis. Vira altura mínima, porque no RN não há `rows`. */
     rows?: number;
@@ -173,8 +196,33 @@ export declare function InputGroupAddon({ children, style, testID, ...rest }: In
 export interface PasswordFieldProps extends Omit<InputProps, "secureTextEntry" | "multiline" | "keyboardType"> {
     /** Começa visível. Padrão: escondida. */
     defaultVisible?: boolean;
+    /**
+     * Um desenho na FRENTE do campo — o cadeado, quase sempre.
+     *
+     * ⚠ **Faltava na `0.8.2`, e a falta era de desenho meu:** o `PasswordField` monta o grupo por
+     * dentro, então não havia onde encaixar nada antes do campo. Quem quisesse um cadeado teria de
+     * desmontar a peça e remontar à mão, perdendo o olho, o rótulo que anuncia o estado e o
+     * `autoCapitalize` que nasce em `none`.
+     *
+     *     <PasswordField leading={<Icon name="locked" size="sm" />} … />
+     */
+    leading?: React.ReactNode;
+    /**
+     * O registro de glifos, quando o do `AureaProvider` não tem os dois que este componente usa.
+     *
+     * 🔴 **ELE PRECISA DE DOIS ÍCONES, e isto não estava escrito em lugar nenhum — defeito da
+     * `0.8.2`:** o olho é `view` e `view--off`. Se faltarem no registro, **o botão fica invisível**
+     * e o aviso sai só em desenvolvimento: em produção a pessoa simplesmente não consegue ver a
+     * senha que digitou, sem nada na tela explicando.
+     *
+     *     import Olho from "@aurea-uds/native/icons/view";
+     *     import OlhoOff from "@aurea-uds/native/icons/view--off";
+     *     const ICONES = criarRegistroDeIcones({view: Olho, "view--off": OlhoOff});
+     *     // no provider, junto dos outros — ou aqui: <PasswordField icons={ICONES} />
+     */
+    icons?: AureaIconRegistry;
 }
-export declare function PasswordField({ defaultVisible, size, disabled, autoCapitalize, testID, style, ...rest }: PasswordFieldProps): React.JSX.Element;
+export declare function PasswordField({ defaultVisible, size, disabled, autoCapitalize, leading, icons, testID, style, ...rest }: PasswordFieldProps): React.JSX.Element;
 export type CheckboxProps = ControleProps;
 export type RadioProps = ControleProps;
 /** A caixa que marca. `accessibilityRole="checkbox"` + `state.checked`. */

package/dist/inputs.js

@@ -168,7 +168,11 @@ export function Label({ children, trailing, style, ...rest }) {
  * (`aurea.css:686`); **não há ponteiro no telefone**. O foco continua existindo e é o que marca o
  * campo ativo.
  */
-export function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, }) {
+export function Input({ value, defaultValue, onChangeText, placeholder, disabled, size, keyboardType, secureTextEntry, autoCapitalize, formatOnBlur, onBlur, onFocus, multiline, style, testID, 
+// ⚠ O `...rest` NÃO é enfeite: sem ele, toda prop do `TextInput` que a lista acima não nomeia
+// era descartada em silêncio — `autoComplete`, `textContentType`, `autoCorrect`,
+// `returnKeyType`, `onSubmitEditing`, `maxLength`. Defeito publicado na `0.8.2`.
+...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
@@ -176,7 +180,11 @@ export function Input({ value, defaultValue, onChangeText, placeholder, disabled
     const tam = size ?? grupo?.size ?? campo?.size ?? "md";
     const inativo = disabled ?? grupo?.disabled ?? campo?.disabled;
     const [focado, setFocado] = React.useState(false);
-    return (_jsx(TextInput, { testID: testID, value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, editable: !inativo, keyboardType: keyboardType, secureTextEntry: secureTextEntry, autoCapitalize: autoCapitalize, multiline: multiline, onFocus: () => { setFocado(true); grupo?.aoFocar(true); onFocus?.(); }, onBlur: () => {
+    return (_jsx(TextInput
+    // O resto vem PRIMEIRO de propósito: o que a Aurea calcula (respiro, cor, nome do `Field`,
+    // `editable`) tem de vencer, e as props que ela redefine estão no `Omit` da interface —
+    // então não chegam por aqui e não há o que sobrescrever por acidente.
+    , { ...rest, testID: testID, value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, editable: !inativo, keyboardType: keyboardType, secureTextEntry: secureTextEntry, autoCapitalize: autoCapitalize, multiline: multiline, onFocus: () => { setFocado(true); grupo?.aoFocar(true); onFocus?.(); }, onBlur: () => {
             setFocado(false);
             grupo?.aoFocar(false);
             // Só avisa quando o texto MUDOU: emitir o mesmo valor a cada saída de foco faria o app
@@ -281,13 +289,13 @@ export function InputGroupAddon({ children, style, testID, ...rest }) {
     const s = folha(t);
     return _jsx(View, { testID: testID, style: [s.encaixe, style], ...rest, children: children });
 }
-export function PasswordField({ defaultVisible = false, size, disabled, autoCapitalize = "none", testID, style, ...rest }) {
+export function PasswordField({ defaultVisible = false, size, disabled, autoCapitalize = "none", leading, icons, testID, style, ...rest }) {
     const strings = useAureaStrings();
     const campo = useCampo();
     const [visivel, setVisivel] = React.useState(defaultVisible);
     const tam = size ?? campo?.size ?? "md";
     const inativo = disabled ?? campo?.disabled;
-    return (_jsxs(InputGroup, { size: tam, disabled: inativo, testID: testID, children: [_jsx(Input, { ...rest, size: tam, disabled: inativo, autoCapitalize: autoCapitalize, secureTextEntry: !visivel, style: style, testID: testID ? `${testID}-campo` : undefined }), _jsx(InputGroupAddon, { children: _jsx(IconButton, { name: visivel ? "view--off" : "view", label: visivel ? strings.passwordHide : strings.passwordShow, appearance: "ghost", size: tam === "lg" ? "md" : "sm", disabled: inativo, onPress: () => setVisivel(v => !v), testID: testID ? `${testID}-olho` : undefined }) })] }));
+    return (_jsxs(InputGroup, { size: tam, disabled: inativo, testID: testID, children: [leading ? _jsx(InputGroupAddon, { children: leading }) : null, _jsx(Input, { ...rest, size: tam, disabled: inativo, autoCapitalize: autoCapitalize, secureTextEntry: !visivel, style: style, testID: testID ? `${testID}-campo` : undefined }), _jsx(InputGroupAddon, { children: _jsx(IconButton, { name: visivel ? "view--off" : "view", label: visivel ? strings.passwordHide : strings.passwordShow, appearance: "ghost", size: tam === "lg" ? "md" : "sm", disabled: inativo, icons: icons, onPress: () => setVisivel(v => !v), testID: testID ? `${testID}-olho` : undefined }) })] }));
 }
 function ControleMarcado({ papel, label, description, checked, onChange, disabled, size, style, testID, }) {
     const t = useAureaTokens();

package/dist/layout.d.ts

@@ -33,6 +33,28 @@ export interface GridProps extends ViewProps {
  */
 export declare function Grid({ minColumnWidth, style, children, ...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";
+    /**
+     * Um texto NO MEIO da linha — "ou entre com", numa tela de entrar.
+     *
+     * ⚠ **Isto NÃO existe na web, e a divergência fica declarada em vez de escondida.** Lá o
+     * `.separator` é só a linha, e um rótulo no meio nunca foi pedido. Aqui foi: o app mediu essa
+     * lacuna na tela de entrar, e a demanda manda no nativo desde o Lote 7. **Com `label`, a
+     * orientação é sempre horizontal** — texto no meio de uma linha vertical não é a mesma peça.
+     */
+    label?: React.ReactNode;
+}
+/**
+ * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.
+ *
+ * ⚠ **Ela NÃO recebe papel de acessibilidade, e isso é escolha medida, não esquecimento.** O
+ * `<hr>` da web traz o papel `separator` de graça; no React Native esse papel **não existe na
+ * lista** — inventar o mais parecido diria uma coisa errada ao leitor de tela, que é exatamente
+ * a armadilha que o Lote 5 e a `Table` do Lote 6 já pagaram. Uma linha decorativa calada é o
+ * 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;

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { 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á:
@@ -18,8 +18,18 @@ import { View } from "react-native";
 // 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 { Text } from "./text.js";
 import { useAureaTokens } 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
+    // do sistema é de um pixel, e um pixel não é espaçamento. A mesma frase está no CSS.
+    separador: { backgroundColor: t.color.border },
+    separadorH: { height: t.size.borderWidth, width: "100%" },
+    separadorV: { width: t.size.borderWidth, alignSelf: "stretch", minHeight: t.size.space5 },
+    // A linha COM texto no meio: duas linhas que esticam e o rótulo entre elas, sem encolher.
+    separadorRotulado: { flexDirection: "row", alignItems: "center", gap: t.size.space3, width: "100%" },
+    separadorPedaco: { flex: 1, height: t.size.borderWidth, backgroundColor: t.color.border },
     // `gap` no RN existe desde a 0.71 e é o mesmo conceito do flex gap do CSS — medido no contrato
     // do `react-native` 0.86/0.87 que o pacote declara como peer (>=0.76).
     stack: { flexDirection: "column", gap: t.size.space4 },
@@ -74,6 +84,25 @@ export function Grid({ minColumnWidth = 240, style, children, ...rest }) {
     const celula = React.useMemo(() => ({ flexGrow: 0, flexShrink: 1, flexBasis: minColumnWidth, minWidth: minColumnWidth, maxWidth: "100%" }), [minColumnWidth]);
     return (_jsx(View, { style: [s.grid, style], ...rest, children: React.Children.map(children, (filho) => React.isValidElement(filho) ? _jsx(View, { style: celula, children: filho }) : filho) }));
 }
+/**
+ * A linha de divisão do sistema. Mesma cor e mesma espessura do `.separator` da web.
+ *
+ * ⚠ **Ela NÃO recebe papel de acessibilidade, e isso é escolha medida, não esquecimento.** O
+ * `<hr>` da web traz o papel `separator` de graça; no React Native esse papel **não existe na
+ * lista** — inventar o mais parecido diria uma coisa errada ao leitor de tela, que é exatamente
+ * a armadilha que o Lote 5 e a `Table` do Lote 6 já pagaram. Uma linha decorativa calada é o
+ * comportamento certo.
+ */
+export function Separator({ orientation = "horizontal", label, style, ...rest }) {
+    const t = useAureaTokens();
+    const s = folha(t);
+    if (label != null) {
+        return (_jsxs(View, { style: [s.separadorRotulado, style], ...rest, children: [_jsx(View, { style: s.separadorPedaco }), typeof label === "string"
+                    ? _jsx(Text, { size: "sm", tone: "muted", children: label })
+                    : label, _jsx(View, { style: s.separadorPedaco })] }));
+    }
+    return (_jsx(View, { style: [s.separador, orientation === "vertical" ? s.separadorV : s.separadorH, style], ...rest }));
+}
 /**
  * Superfície flutuante, raio 22 (`--radius-card`) — identidade declarada INTOCÁVEL.
  *

package/dist/text.d.ts

@@ -7,7 +7,7 @@ export type AureaTextWeight = 400 | 500 | 600 | 700;
 /** Papel de tipografia — os três `--font-*` da Aurea. */
 export type AureaTextFont = "ui" | "editorial" | "code";
 /** O que a cor SIGNIFICA. Mesmo vocabulário do `tone` do Button (ADR-0044). */
-export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "danger" | "success" | "warning" | "info";
+export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "link" | "danger" | "success" | "warning" | "info";
 export type AureaTextLeading = "none" | "tight" | "normal" | "relaxed";
 export interface TextProps extends TextPropsRN {
     size?: AureaTextSize;

package/dist/text.js

@@ -32,7 +32,11 @@ const ENTRELINHA = {
 };
 const COR = {
     default: "foreground", muted: "mutedForeground", subtle: "subtleForeground",
-    primary: "primary", danger: "destructive", success: "success",
+    // ⚠ `primary` e `link` são o MESMO amarelo em matiz, e NÃO são intercambiáveis.
+    // `primary` é o amarelo de PREENCHER, e escrito sobre o tema claro ele mede 1,73:1 — some.
+    // `link` é o de ESCREVER: mesmo matiz, mais escuro, 5,02:1 no claro, e no escuro é o próprio
+    // amarelo da marca. Quem quer texto amarelo legível nos dois temas usa `link`.
+    primary: "primary", link: "link", danger: "destructive", success: "success",
     warning: "warning", info: "info",
 };
 // A folha cobre só o que NÃO depende das props — a cor por tom. O resto (tamanho, peso, família)

package/package.json

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