@aurea-uds/native 0.35.0 → 0.37.0

package/dist/display.d.ts

@@ -64,6 +64,10 @@ export interface BadgeProps extends ViewProps {
     children?: React.ReactNode;
 }
 export declare function Badge({ tone, emphasis, size, dot, count, max, showZero, leading, trailing, fit, anchor, badgeContent, invisible, children, style, ...rest }: BadgeProps): React.JSX.Element;
+/** `Chip` é outro nome do `Badge` (GAR-20, 19/10/2026): o nome que a referência dá à mesma peça. Igual em tudo. */
+export type ChipProps = BadgeProps;
+/** `Chip` é outro nome do `Badge` (GAR-20, 19/10/2026): o nome que a referência dá à mesma peça. Igual em tudo. */
+export declare function Chip(props: BadgeProps): React.JSX.Element;
 export type AureaStatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "success" | "warning" | "danger" | "info";
 export interface StatusProps extends ViewProps {
     variant?: AureaStatusVariant;

package/dist/display.js

@@ -132,7 +132,10 @@ export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, c
     // a de sempre caía abaixo de 4,5:1 (o verde do claro, o `success` do escuro). O par da web é o `.badge-outline`.
     const letra = tone === "neutral" ? t.color.secondaryForeground : acento;
     const corDoTexto = emphasis === "solid" ? (cheio ? cheio[1] : t.color.background)
-        : emphasis === "outline" ? misturaOpaca(letra, t.color.foreground, 0.8) : letra;
+        // Menos o primário (ADR-0073, "A", 18/10/2026): a letra é o próprio acento, a mesma do suave (o amarelo no escuro; o
+        // azul no claro, desde a ADR-0076) — misturado ao texto, o amarelo virava mostarda só nesta peça. O nativo não tem
+        // marca (`data-brand`), então vale sempre.
+        : emphasis === "outline" && tone !== "primary" ? misturaOpaca(letra, t.color.foreground, 0.8) : letra;
     const numero = count != null ? formatarContagem(count, max) : undefined;
     const miolo = anchor ? (numero ?? badgeContent) : (numero ?? children);
     // Ponto puro: `dot` sem nada para mostrar. Aí o selo não tem conteúdo e ganha medida própria.
@@ -176,6 +179,10 @@ export function Badge({ tone = "neutral", emphasis = "soft", size = "md", dot, c
     const escondido = invisible || (count === 0 && !showZero) || (miolo == null && !dot);
     return _jsxs(View, { style: s.ancora, ...rest, children: [children, !escondido && selo] });
 }
+/** `Chip` é outro nome do `Badge` (GAR-20, 19/10/2026): o nome que a referência dá à mesma peça. Igual em tudo. */
+export function Chip(props) {
+    return _jsx(Badge, { ...props });
+}
 const CATEGORIAS = new Set(["red", "orange", "green", "teal", "cyan", "blue", "violet", "pink"]);
 const ehCategoria = (tom) => CATEGORIAS.has(tom);
 /**

package/dist/escolha.js

@@ -45,7 +45,7 @@ const folha = criarFolha((t) => ({
         backgroundColor: t.color.controlSelected },
     alcaDeitada: { width: t.size.space7, height: t.size.space5 },
     alcaEmPe: { width: t.size.space5, height: t.size.space7 },
-    bolinha: { flex: 1, ...canto(t.size.radiusFull), backgroundColor: t.color.controlSelectedForeground,
+    bolinha: { flex: 1, ...canto(t.size.radiusFull), backgroundColor: t.color.primaryMark,
         boxShadow: [...t.shadowLayers.shadowSm] },
     // ── OTPField ────────────────────────────────────────────────────────────────────────────────
     // A referência: casas de 44 × 48 com 8 entre elas. A altura é a do campo (`touchControlHMd`, a

package/dist/estilos.d.ts

@@ -103,8 +103,10 @@ export declare const acentoDoTom: (t: AureaTokens, tom: TomDeCor) => string;
 export declare const letraDoToken: (t: AureaTokens, token: string) => string | undefined;
 /**
  * O FUNDO CHEIO de um tom de estado e a letra em cima dele — o par do botão cheio (ADR-0061, 0.27.0):
- * o selo cheio é o botão cheio do mesmo tom. `primary` e `neutral` não têm o par: `undefined`, e
- * quem chama enche com o acento, como antes.
+ * o selo cheio é o botão cheio do mesmo tom. O `primary` enche com o PRIMÁRIO (o amarelo) e escreve com a
+ * letra do botão amarelo (`primaryForeground`, a tinta cinza-escura). Até a ADR-0076 enchia com o acento,
+ * que era o próprio amarelo nos dois temas; desde ela o acento do claro é o azul, e a tinta cinza no azul
+ * mediria 1,99:1. O `neutral` não tem o par: `undefined`, e quem chama enche com o acento, como antes.
  */
 export declare const preenchimentoDoTom: (t: AureaTokens, tom: TomDeCor) => [string, string] | undefined;
 /** O fundo SUAVE de um tom (`--<tom>-bg`). `primary` e `neutral` não têm token: `undefined`. */

package/dist/estilos.js

@@ -131,14 +131,17 @@ const PAR_DE_LETRA = {
 export const letraDoToken = (t, token) => (PAR_DE_LETRA[token] ? t.color[PAR_DE_LETRA[token]] : undefined) ?? t.color[token];
 /**
  * O FUNDO CHEIO de um tom de estado e a letra em cima dele — o par do botão cheio (ADR-0061, 0.27.0):
- * o selo cheio é o botão cheio do mesmo tom. `primary` e `neutral` não têm o par: `undefined`, e
- * quem chama enche com o acento, como antes.
+ * o selo cheio é o botão cheio do mesmo tom. O `primary` enche com o PRIMÁRIO (o amarelo) e escreve com a
+ * letra do botão amarelo (`primaryForeground`, a tinta cinza-escura). Até a ADR-0076 enchia com o acento,
+ * que era o próprio amarelo nos dois temas; desde ela o acento do claro é o azul, e a tinta cinza no azul
+ * mediria 1,99:1. O `neutral` não tem o par: `undefined`, e quem chama enche com o acento, como antes.
  */
-export const preenchimentoDoTom = (t, tom) => tom === "success" ? [t.color.success, t.color.successForeground]
-    : tom === "warning" ? [t.color.warning, t.color.warningForeground]
-        : tom === "info" ? [t.color.info, t.color.infoForeground]
-            : tom === "danger" ? [t.color.destructive, t.color.destructiveForeground]
-                : undefined;
+export const preenchimentoDoTom = (t, tom) => tom === "primary" ? [t.color.primary, t.color.primaryForeground]
+    : tom === "success" ? [t.color.success, t.color.successForeground]
+        : tom === "warning" ? [t.color.warning, t.color.warningForeground]
+            : tom === "info" ? [t.color.info, t.color.infoForeground]
+                : tom === "danger" ? [t.color.destructive, t.color.destructiveForeground]
+                    : undefined;
 /** O fundo SUAVE de um tom (`--<tom>-bg`). `primary` e `neutral` não têm token: `undefined`. */
 export const fundoDoTom = (t, tom) => tom === "info" ? t.color.infoBg
     : tom === "success" ? t.color.successBg

package/dist/index.d.ts

@@ -16,8 +16,8 @@ export { Button, IconButton, LinkButton, ThemeToggle, CloseButton } from "./acti
 export type { ButtonProps, IconButtonProps, LinkButtonProps, ThemeToggleProps, CloseButtonProps, AureaButtonAppearance, AureaButtonSize, AureaButtonTone, AureaShareData, } from "./actions.js";
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";
 export type { SpinnerProps, SkeletonProps, ProgressProps, AlertProps, EmptyStateProps, DataStateProps, AureaSpinnerSize, AureaAlertVariant, AureaDataStateValue, AureaProgressTone, } from "./feedback.js";
-export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.js";
-export type { BadgeProps, StatusProps, AvatarProps, KPIProps, AureaKPIDirection, AureaKPITone, AureaKPIVariant, AureaBadgeAnchor, AureaBadgeCategory, AureaBadgeEmphasis, AureaBadgeFit, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
+export { Badge, Chip, Status, Avatar, KPI, formatarContagem } from "./display.js";
+export type { BadgeProps, ChipProps, StatusProps, AvatarProps, KPIProps, AureaKPIDirection, AureaKPITone, AureaKPIVariant, AureaBadgeAnchor, AureaBadgeCategory, AureaBadgeEmphasis, AureaBadgeFit, AureaBadgeSize, AureaBadgeTone, AureaStatusVariant, AureaAvatarSize, } from "./display.js";
 export { useAureaStrings } from "./theme.js";
 export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from "./strings.js";
 export type { AureaStrings, AureaUniversalState } from "./strings.js";

package/dist/index.js

@@ -40,7 +40,7 @@ export { Stack, Cluster, Grid, Card, Separator } from "./layout.js";
 export { Button, IconButton, LinkButton, ThemeToggle, CloseButton } from "./actions.js";
 // ── Lote 2 — o painel, que é só leitura ────────────────────────────────────────────────────
 export { Spinner, Skeleton, Progress, Alert, EmptyState, DataState, ICONE_DA_VARIANTE } from "./feedback.js";
-export { Badge, Status, Avatar, KPI, formatarContagem } from "./display.js";
+export { Badge, Chip, Status, Avatar, KPI, formatarContagem } from "./display.js";
 // As frases visíveis, e o hook que as lê. A tabela é do tamanho do que o alvo nativo desenha —
 // ver o cabeçalho de `strings.ts`, que escreve por que ela NÃO é a da web.
 export { useAureaStrings } from "./theme.js";

package/dist/inputs.d.ts

@@ -387,7 +387,7 @@ export declare function SegmentedControl({ items, value, onChange, label, disabl
 /**
  * O indicador da opção escolhida, nas listas do `Select` e do `Combobox` (0.32.0): o da referência
  * — a caixa de 20 com o `check` de 16 — e o mesmo glifo da coluna `.combobox-check` da web. A cor
- * é a do destaque que se lê como ícone nos dois temas (`primaryEmphasis`, ADR-0054). Sai do
+ * é a do destaque (`primaryEmphasis`): o amarelo no escuro e, desde a ADR-0076, o azul no claro. Sai do
  * arquivo, não do pacote — e é função, não componente, para não contar como peça nova. ⚠ Pede o
  * `check` no registro de ícones do app; sem ele, o aviso de desenvolvimento do `Icon` diz o import.
  */

package/dist/inputs.js

@@ -398,10 +398,10 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
                         ...canto(papel === "radio" ? t.size.radiusFull : t.size.radiusXs) },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: "transparent" },
                 ], children: checked && (papel === "radio"
-                    // O ponto do rádio é da cor de primeiro plano da seleção, sobre a marca já pintada.
+                    // O ponto do rádio é branco, sobre a marca já pintada (decisão do Victor, 17/10/2026).
                     // 0.32.0: 10, o ponto da referência e o do `RadioGroup` (`space2 + space05`); era 8.
                     ? _jsx(View, { style: { width: t.size.space2 + t.size.space05, height: t.size.space2 + t.size.space05,
-                            ...canto(t.size.radiusFull), backgroundColor: t.color.controlSelectedForeground } })
+                            ...canto(t.size.radiusFull), backgroundColor: t.color.controlSelectedDot } })
                     // O visto. Era desenhado com DUAS BORDAS de um retângulo girado; sem linha (16/10/2026), ele é
                     // um glifo, o mesmo da web (a máscara do `.checkbox` no `aurea.css`), sobre o `react-native-svg`
                     // que o pacote já usa — sem depender do registro de ícones do app.
@@ -447,7 +447,7 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
             escolhido && { backgroundColor: erro ? perigo : t.color.controlSelected,
                 borderColor: "transparent" },
         ], children: escolhido && _jsx(View, { style: { width: ponto, height: ponto, ...canto(t.size.radiusFull),
-                backgroundColor: t.color.controlSelectedForeground } }) }, "marca"));
+                backgroundColor: t.color.controlSelectedDot } }) }, "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"));
@@ -550,7 +550,7 @@ export function Switch({ label, description, checked, onChange, disabled, size,
                 ], children: _jsx(Animated.View, { style: [
                         s.polegar,
                         { width: larguraDoPolegar, height: alturaDoPolegar,
-                            backgroundColor: checked ? t.color.controlSelectedForeground : t.color.mutedForeground,
+                            backgroundColor: checked ? t.color.primaryMark : t.color.mutedForeground,
                             transform: [{ translateX: pos.interpolate({ inputRange: [0, 1], outputRange: [0, curso] }) }] },
                     ] }) }), temTexto && (_jsxs(View, { style: { flex: 1 }, children: [typeof label === "string" ? _jsx(Text, { size: "sm", children: label }) : label, description != null && (typeof description === "string"
                         ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description)] }))] }));
@@ -599,7 +599,7 @@ export function SegmentedControl({ items, value, onChange, label, disabled, just
 /**
  * O indicador da opção escolhida, nas listas do `Select` e do `Combobox` (0.32.0): o da referência
  * — a caixa de 20 com o `check` de 16 — e o mesmo glifo da coluna `.combobox-check` da web. A cor
- * é a do destaque que se lê como ícone nos dois temas (`primaryEmphasis`, ADR-0054). Sai do
+ * é a do destaque (`primaryEmphasis`): o amarelo no escuro e, desde a ADR-0076, o azul no claro. Sai do
  * arquivo, não do pacote — e é função, não componente, para não contar como peça nova. ⚠ Pede o
  * `check` no registro de ícones do app; sem ele, o aviso de desenvolvimento do `Icon` diz o import.
  */

package/dist/navigation.js

@@ -355,12 +355,13 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
             const ativo = it.id === current;
             const corDoTexto = !ativo ? t.color.mutedForeground
                 : indicator === "none" ? t.color.primaryEmphasis
-                    : indicator === "circle-bold" || indicator === "expand" ? t.color.primaryForeground
+                    : indicator === "circle-bold" || indicator === "expand" ? t.color.primaryMark
                         : indicator === "subtle" || indicator === "pill" ? t.color.primaryEmphasis
                             : redondo ? t.color.primaryEmphasis
                                 : t.color.foreground;
-            // Na `capsule` o ícone está SOBRE o amarelo e o rótulo não: cada um tem a sua cor.
-            const corDoIcone = ativo && capsula ? t.color.primaryForeground : corDoTexto;
+            // Na `capsule` o ícone está SOBRE o amarelo e o rótulo não: cada um tem a sua cor. Sobre o
+            // amarelo, a marca marrom (`primaryMark`), e não a tinta escura (decisão do Victor, 17/10/2026).
+            const corDoIcone = ativo && capsula ? t.color.primaryMark : corDoTexto;
             // No `expand` o nome só aparece no escolhido; nos outros ele vira o nome do item para o
             // leitor de tela (o texto simples) ou fica na árvore sem ocupar lugar (o que não é texto).
             const nomeVisivel = !expande || ativo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Phosphor sobre react-native-svg.",
   "keywords": [
     "aurea",
@@ -55,7 +55,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.35.0"
+    "@aurea-uds/tokens": "^0.37.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",