@aurea-uds/native 0.19.1 → 0.23.0

package/dist/inputs.d.ts

@@ -108,8 +108,8 @@ export interface InputProps extends Omit<TextInputProps, "style" | "editable" |
      * Normaliza o texto **quando o foco sai** — placa, documento, telefone.
      *
      * ⚠ **A Aurea entrega o MOMENTO, não o formato**, e isso é a [ADR-0024] inteira: formatar
-     * enquanto se digita é o defeito que o USWDS publicou com reprovação WCAG registrada e que o
-     * MUI abandonou na v6. O formato é conhecimento de DOMÍNIO — a Aurea não sabe o que é um
+     * enquanto se digita é o defeito que um design system público publicou com reprovação WCAG registrada e que uma
+     * das bibliotecas de referência abandonou. O formato é conhecimento de DOMÍNIO — a Aurea não sabe o que é um
      * documento válido em lugar nenhum, e uma tabela de formatos por país dentro de uma biblioteca
      * de interface envelhece sem ninguém perceber.
      *
@@ -156,7 +156,7 @@ interface ControleProps {
     testID?: string;
     /**
      * Onde a marca fica na altura do texto — E5, 25/09/2026. `center` (o padrão) põe a marca no meio
-     * do bloco, como o HeroUI Native (`radio.css` e `control-field.css`: `align-items: center`).
+     * do bloco, como a referência (`align-items: center` no rádio e no campo de controle dela).
      * `start` a põe no meio da PRIMEIRA linha, para rótulo longo, de várias linhas.
      */
     align?: "center" | "start";
@@ -252,26 +252,38 @@ export declare function Checkbox(p: CheckboxProps): React.JSX.Element;
  * estado do app — quem sabe qual está escolhido é o `useState` da tela, e `checked` sai dele.
  */
 export declare function Radio(p: RadioProps): React.JSX.Element;
-/** De que lado da linha a marca fica: `end` (padrão, como o exemplo do HeroUI) ou `start`. */
+/** De que lado da linha a marca fica: `end` (padrão, como o exemplo da referência) ou `start`. */
 export type AureaRadioIndicatorPlacement = "start" | "end";
+/**
+ * O jeito dos itens (CHK-01, 06/10/2026): `list` (padrão) é a linha de sempre; `card` faz de cada
+ * item um CARTÃO inteiro tocável — o cartão de escolha.
+ */
+export type AureaRadioGroupVariant = "list" | "card";
 export interface RadioGroupProps extends ViewProps {
     /** O valor do item escolhido. Controlado: quem guarda é a tela. */
     value?: string;
     onValueChange?: (value: string) => void;
     /** Desliga o grupo inteiro. */
     disabled?: boolean;
-    /** Pinta o grupo de erro (marca e rótulo na cor de perigo), como o `isInvalid` do HeroUI. */
+    /** Pinta o grupo de erro (marca e rótulo na cor de perigo), como o estado inválido da referência. */
     invalid?: boolean;
     /** O nome do grupo para quem usa leitor de tela ("Forma de entrega"). */
     label?: string;
-    /** `vertical` (padrão) ou `horizontal`, como o HeroUI. */
+    /** `vertical` (padrão) ou `horizontal`, como a referência. */
     orientation?: "vertical" | "horizontal";
     /**
-     * De que lado fica a marca, em todos os itens: `end` (padrão) ou `start`. O HeroUI decide isso
+     * De que lado fica a marca, em todos os itens: `end` (padrão) ou `start`. A referência decide isso
      * pela ORDEM dos filhos do item (`<Radio />` antes ou depois do texto); aqui o texto é prop, então
-     * o lado vira uma lista fechada de duas opções, com o nome que o HeroUI usa para posição.
+     * o lado vira uma lista fechada de duas opções, com o nome que a referência usa para posição.
      */
     indicatorPlacement?: AureaRadioIndicatorPlacement;
+    /**
+     * `card` faz de cada item um cartão de escolha (CHK-01, 06/10/2026): o cartão INTEIRO é a opção,
+     * com o papel de rádio para o leitor de tela. A pele é a do `Card` — o cartão comum, e o cartão
+     * escolhido (`variant="selected"`) no item marcado. É como a referência monta essa peça (o exemplo
+     * de `RadioGroup.Item` com uma superfície dentro); outra referência tem uma peça própria para isso.
+     */
+    variant?: AureaRadioGroupVariant;
     children?: React.ReactNode;
 }
 export interface RadioGroupItemProps extends Omit<PressableProps, "children" | "style" | "disabled"> {
@@ -286,19 +298,26 @@ export interface RadioGroupItemProps extends Omit<PressableProps, "children" | "
     /** 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
+     * Um ícone antes do texto (R-19, 01/10/2026). A referência não tem esta prop: no `RadioGroup.Item`
+     * dela 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; a referência 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;
+    /**
+     * Conteúdo a mais, embaixo da descrição (CHK-01) — no cartão de escolha, o preço e a lista do
+     * que o plano inclui. É texto para LER: o item inteiro já é o alvo do toque, e um botão aqui
+     * dentro sumiria para o VoiceOver (a regra do `check 43`). O leitor de tela lê o `label` e a
+     * `description`; o que este conteúdo diz de essencial vai no `accessibilityLabel` do item.
+     */
+    children?: React.ReactNode;
     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, icon, style, accessibilityLabel, ...rest }: RadioGroupItemProps): React.JSX.Element;
+declare function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation, indicatorPlacement, variant, style, children, ...rest }: RadioGroupProps): React.JSX.Element;
+declare function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, icon, style, accessibilityLabel, children, ...rest }: RadioGroupItemProps): React.JSX.Element;
 /**
- * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` do HeroUI Native.
+ * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` da referência.
  *
  *     <RadioGroup label="Forma de entrega" value={entrega} onValueChange={setEntrega}>
  *       <RadioGroup.Item value="normal" label="Normal" description="Em 5 a 7 dias úteis" />
@@ -307,7 +326,7 @@ declare function ItemDoGrupoDeRadio({ value, label, description, disabled, inval
  *     </RadioGroup>
  *
  * Os filhos são livres: entre os itens cabe um `Separator`, e o grupo inteiro cabe num `Card`,
- * como no exemplo do HeroUI. Tocar no item já escolhido não muda nada. Com
+ * como no exemplo da referência. Tocar no item já escolhido não muda nada. Com
  * `indicatorPlacement="start"` a marca vai para o início da linha.
  */
 export declare const RadioGroup: typeof RaizDoGrupoDeRadio & {
@@ -328,7 +347,7 @@ export interface SwitchProps extends ControleProps {
  * O interruptor.
  *
  * ⚠ **NÃO é o `Switch` do React Native**, pela mesma razão que o `Spinner` não é o
- * `ActivityIndicator`: aquele desenha o interruptor do Material no Android e o do iOS no iOS —
+ * `ActivityIndicator`: aquele desenha o interruptor do sistema no Android e o do iOS no iOS —
  * duas aparências que o `CLAUDE.md` proíbe em voz alta. As medidas aqui são as do CSS: trilho de
  * `altura × 7/6` por `altura × 2/3`, polegar com 3 de folga.
  *
@@ -348,6 +367,12 @@ export interface SegmentedControlProps extends ViewProps {
     disabled?: boolean;
     /** Onde o controle fica quando cabe na linha: `start` (padrão), `center` ou `end` (E3). */
     justify?: AureaFilaJustify;
+    /**
+     * Ocupa a linha inteira, repartindo a sobra entre os segmentos — como na referência (A5,
+     * 06/10/2026). Nenhum segmento fica menor que o rótulo: quando as opções não cabem, o controle
+     * rola, como sem a prop. Com `fullWidth`, o `justify` não tem efeito.
+     */
+    fullWidth?: boolean;
 }
 /**
  * Um de poucos, lado a lado.
@@ -357,7 +382,7 @@ export interface SegmentedControlProps extends ViewProps {
  * há teclado aqui**, então o que resta é o que já se faz à mão: papel de grupo de rádio, um
  * `radio` por segmento, e o estado `selected` em quem está escolhido.
  */
-export declare function SegmentedControl({ items, value, onChange, label, disabled, justify, style, ...rest }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ items, value, onChange, label, disabled, justify, fullWidth, style, ...rest }: SegmentedControlProps): React.JSX.Element;
 export interface SelectProps {
     items: Array<{
         value: string;

package/dist/inputs.js

@@ -39,7 +39,7 @@ 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 { criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
+import { canto, cantosDeCima, criarFolha, estadoAcessivel, fioDoEscolhido, peleDoCartao, peleDoCartaoEscolhido } from "./estilos.js";
 import { FilaRolante } from "./rolagem.js";
 import { IconButton } from "./actions.js";
 import { Icon } from "./icon.js";
@@ -59,12 +59,12 @@ const folha = criarFolha((t) => ({
     caixa: {
         width: "100%", minWidth: 0,
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
-        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+        ...canto(t.size.radiusControl), backgroundColor: t.color.fieldBg,
         color: t.color.foreground,
     },
     // O `.textarea` é o único da família com raio LG em vez do de controle: uma caixa alta em
     // pílula viraria uma cápsula, e o CSS já decidiu isso (`aurea.css:694`).
-    areaDeTexto: { minHeight: 104, paddingVertical: t.size.space3, borderRadius: t.size.radiusLg },
+    areaDeTexto: { minHeight: 104, paddingVertical: t.size.space3, ...canto(t.size.radiusLg) },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
     desabilitado: { opacity: t.size.opacityDisabled },
     // O GRUPO é a mesma caixa do campo virada em LINHA, e os números são os mesmos: mesma borda,
@@ -73,7 +73,7 @@ const folha = criarFolha((t) => ({
     grupo: {
         flexDirection: "row", alignItems: "center", width: "100%", minWidth: 0,
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
-        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+        ...canto(t.size.radiusControl), backgroundColor: t.color.fieldBg,
         gap: t.size.space1,
     },
     // Dentro do grupo o campo perde a caixa e vira só o texto — a borda passou a ser do grupo.
@@ -87,20 +87,38 @@ const folha = criarFolha((t) => ({
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
         backgroundColor: t.color.fieldBg,
     },
-    // E5: a marca no MEIO da altura do texto, como o HeroUI Native. Era `flex-start` com um
+    // E5: a marca no MEIO da altura do texto, como a referência. Era `flex-start` com um
     // `marginTop: 1` fixo, e a bolinha ficava presa no topo do rótulo.
     linhaDeControle: { flexDirection: "row", alignItems: "center", gap: 9 },
+    // CHK-01: o item do `RadioGroup variant="card"` — a pele do `Card` (`estilos.ts`), com a marca
+    // no alto, na linha do título.
+    itemCartao: { ...peleDoCartao(t), alignItems: "flex-start" },
+    itemCartaoEscolhido: peleDoCartaoEscolhido(t),
     linhaNoTopo: { alignItems: "flex-start" },
-    trilho: { borderRadius: t.size.radiusFull, backgroundColor: t.color.muted,
+    trilho: { ...canto(t.size.radiusFull), backgroundColor: t.color.muted,
         borderWidth: t.size.borderWidth, borderColor: t.color.border, justifyContent: "center" },
-    polegar: { position: "absolute", left: 3, borderRadius: t.size.radiusFull },
+    polegar: { position: "absolute", left: 3, ...canto(t.size.radiusFull) },
     segmentada: {
         flexDirection: "row", alignSelf: "flex-start", gap: 3, padding: 3,
-        minHeight: t.size.controlHMd, borderRadius: t.size.radiusControl,
+        minHeight: t.size.controlHMd, ...canto(t.size.radiusControl),
         backgroundColor: t.color.muted, borderWidth: t.size.borderWidth, borderColor: "transparent",
     },
-    segmento: { flex: 1, alignItems: "center", justifyContent: "center",
-        paddingHorizontal: 14, borderRadius: t.size.radiusControl },
+    // 🔴 A5 (06/10/2026): ERA `flex: 1`, E NO NAVEGADOR ISSO QUEBRAVA O RÓTULO EM DUAS LINHAS.
+    // O `react-native-web` passa `flex: 1` cru para o CSS, que é `1 1 0%`: a largura do texto é
+    // repartida em partes IGUAIS, e o rótulo maior não cabe na parte dele ("3.000 km" com 77). No
+    // aparelho não quebrava — medido no Yoga oficial, com e sem `flex: 1`, o segmento fica do
+    // tamanho do texto —, mas lá o `flex` também não fazia nada: a cápsula ficava com 245 de 343.
+    // Agora o segmento é do tamanho do rótulo, como a aba do `Tabs` e o `.segmented button` da web.
+    // Ocupar a linha é pedido explícito: `fullWidth`, abaixo.
+    segmento: { alignItems: "center", justifyContent: "center",
+        paddingHorizontal: 14, ...canto(t.size.radiusControl) },
+    // `fullWidth`: o segmento CRESCE a partir do rótulo (base `auto`) e nunca encolhe abaixo dele.
+    // É como o grupo de botões alternáveis da referência ocupa a linha, com uma diferença declarada: lá é
+    // `flex: 1`, e o CSS segura o mínimo do texto sozinho (`min-width: auto`). O Yoga não tem esse
+    // mínimo, e base zero repartiria igual de novo — o defeito acima. Com base `auto`, os segmentos
+    // ficam de larguras parecidas, não iguais. Simulado no Yoga: 343 de 343, sem quebrar.
+    segmentoCheio: { flexGrow: 1, flexShrink: 0, flexBasis: "auto" },
+    segmentadaCheia: { flexGrow: 1 },
     segmentoAtivo: { backgroundColor: t.color.secondary },
     // 🔴 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.
@@ -112,7 +130,8 @@ const folha = criarFolha((t) => ({
     fundoDeToque: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
     lista: {
         maxHeight: "60%", paddingVertical: t.size.space2,
-        borderTopLeftRadius: t.size.radiusCard, borderTopRightRadius: t.size.radiusCard,
+        // HER-03 (ADR-0058): a folha que sobe de baixo tem 32, como a `BottomSheet`.
+        ...cantosDeCima(t.size.radiusSheet),
         backgroundColor: t.color.popover, borderWidth: t.size.borderWidth, borderColor: t.color.border,
     },
     opcao: { minHeight: t.size.controlHLg, justifyContent: "center",
@@ -346,12 +365,12 @@ function ControleMarcado({ papel, label, description, checked, onChange, disable
         accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : campo?.label), accessibilityHint: typeof description === "string" ? description : campo?.hint, style: [s.linhaDeControle, align === "start" && s.linhaNoTopo, inativo && s.desabilitado, style], children: [_jsx(View, { style: [
                     s.marcaBase, noTopo,
                     { width: lado, height: lado,
-                        borderRadius: papel === "radio" ? t.size.radiusFull : 5 },
+                        ...canto(papel === "radio" ? t.size.radiusFull : 5) },
                     checked && { backgroundColor: t.color.controlSelected, borderColor: t.color.controlSelected },
                 ], children: checked && (papel === "radio"
                     // O ponto do rádio é 8×8 e da cor SELECIONADA, não da cor de primeiro plano — no CSS
                     // ele é `background: var(--control-selected)` sobre a marca já pintada.
-                    ? _jsx(View, { style: { width: 8, height: 8, borderRadius: t.size.radiusFull,
+                    ? _jsx(View, { style: { width: 8, height: 8, ...canto(t.size.radiusFull),
                             backgroundColor: t.color.controlSelectedForeground } })
                     // O visto da web é desenhado com DUAS BORDAS de um retângulo 8×4 girado −45°. Isso
                     // atravessa inteiro: `transform: rotate` e `borderLeftWidth`/`borderBottomWidth`
@@ -375,12 +394,12 @@ export function Checkbox(p) { return _jsx(ControleMarcado, { ...p, papel: "check
  */
 export function Radio(p) { return _jsx(ControleMarcado, { ...p, papel: "radio" }); }
 const GrupoDeRadio = React.createContext(null);
-function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation = "vertical", indicatorPlacement, style, children, ...rest }) {
+function RaizDoGrupoDeRadio({ value, onValueChange, disabled, invalid, label, orientation = "vertical", indicatorPlacement, variant = "list", style, children, ...rest }) {
     const t = useAureaTokens();
-    const contexto = React.useMemo(() => ({ value, onValueChange, disabled, invalid, indicatorPlacement }), [value, onValueChange, disabled, invalid, indicatorPlacement]);
+    const contexto = React.useMemo(() => ({ value, onValueChange, disabled, invalid, indicatorPlacement, variant }), [value, onValueChange, disabled, invalid, indicatorPlacement, variant]);
     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, icon, style, accessibilityLabel, ...rest }) {
+function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indicatorPlacement, icon, style, accessibilityLabel, children, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const grupo = React.useContext(GrupoDeRadio);
@@ -393,16 +412,17 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
     const marca = t.size.space6;
     const ponto = t.size.space2 + t.size.space05;
     const noInicio = (indicatorPlacement ?? grupo?.indicatorPlacement ?? "end") === "start";
-    const texto = (label != null || description != null) && (_jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [typeof label === "string"
+    const cartao = grupo?.variant === "card";
+    const texto = (label != null || description != null || children != 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: "xs", tone: "muted", children: description }) : description)] }, "texto"));
+                ? _jsx(Text, { size: "xs", tone: "muted", children: description }) : description), children != null && _jsx(View, { style: { marginTop: t.size.space3 }, children: children })] }, "texto"));
     const marcaDesenhada = (_jsx(View, { style: [
             s.marcaBase,
-            { width: marca, height: marca, borderRadius: t.size.radiusFull },
+            { width: marca, height: marca, ...canto(t.size.radiusFull) },
             erro && { borderColor: perigo, backgroundColor: "transparent" },
             escolhido && { backgroundColor: erro ? perigo : t.color.controlSelected,
                 borderColor: erro ? perigo : t.color.controlSelected },
-        ], children: escolhido && _jsx(View, { style: { width: ponto, height: ponto, borderRadius: t.size.radiusFull,
+        ], children: escolhido && _jsx(View, { style: { width: ponto, height: ponto, ...canto(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.
@@ -410,11 +430,18 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
     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 },
+            // CHK-01: no cartão a marca sobe para a altura do título (o cartão pode ser alto — preço,
+            // lista —, e uma marca no meio dele não diz de quem é). A pele é a do `Card`, e ela existe
+            // DESDE A MONTAGEM, com fundo e borda: escolher só troca as cores. É a regra que a `0.19.1`
+            // pagou no Android — caixa que ganha a pintura depois de montada perde o raio.
+            cartao && s.itemCartao,
+            cartao && escolhido && s.itemCartaoEscolhido,
+            cartao && erro && { borderColor: perigo },
             inativo && s.desabilitado, style,
         ], ...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.
+ * Um conjunto de opções em que só uma fica escolhida — o `RadioGroup` da referência.
  *
  *     <RadioGroup label="Forma de entrega" value={entrega} onValueChange={setEntrega}>
  *       <RadioGroup.Item value="normal" label="Normal" description="Em 5 a 7 dias úteis" />
@@ -423,7 +450,7 @@ function ItemDoGrupoDeRadio({ value, label, description, disabled, invalid, indi
  *     </RadioGroup>
  *
  * Os filhos são livres: entre os itens cabe um `Separator`, e o grupo inteiro cabe num `Card`,
- * como no exemplo do HeroUI. Tocar no item já escolhido não muda nada. Com
+ * como no exemplo da referência. Tocar no item já escolhido não muda nada. Com
  * `indicatorPlacement="start"` a marca vai para o início da linha.
  */
 export const RadioGroup = Object.assign(RaizDoGrupoDeRadio, { Item: ItemDoGrupoDeRadio });
@@ -431,7 +458,7 @@ export const RadioGroup = Object.assign(RaizDoGrupoDeRadio, { Item: ItemDoGrupoD
  * O interruptor.
  *
  * ⚠ **NÃO é o `Switch` do React Native**, pela mesma razão que o `Spinner` não é o
- * `ActivityIndicator`: aquele desenha o interruptor do Material no Android e o do iOS no iOS —
+ * `ActivityIndicator`: aquele desenha o interruptor do sistema no Android e o do iOS no iOS —
  * duas aparências que o `CLAUDE.md` proíbe em voz alta. As medidas aqui são as do CSS: trilho de
  * `altura × 7/6` por `altura × 2/3`, polegar com 3 de folga.
  *
@@ -505,14 +532,14 @@ export function Switch({ label, description, checked, onChange, disabled, size,
  * há teclado aqui**, então o que resta é o que já se faz à mão: papel de grupo de rádio, um
  * `radio` por segmento, e o estado `selected` em quem está escolhido.
  */
-export function SegmentedControl({ items, value, onChange, label, disabled, justify, style, ...rest }) {
+export function SegmentedControl({ items, value, onChange, label, disabled, justify, fullWidth, style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const campo = useCampo();
     const inativo = disabled ?? campo?.disabled;
-    return (_jsx(FilaRolante, { justify: justify, children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, inativo && s.desabilitado, style], ...rest, children: items.map((it) => {
+    return (_jsx(FilaRolante, { justify: justify, fill: fullWidth, children: _jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label ?? campo?.label, style: [s.segmentada, fullWidth && s.segmentadaCheia, 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", ...estadoAcessivel({ checked: ativo, disabled: !!inativo }), accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, ativo && s.segmentoAtivo], children: [typeof it.label === "string"
+                return (_jsxs(Pressable, { onPress: inativo ? undefined : () => onChange?.(it.value), disabled: inativo, accessibilityRole: "radio", ...estadoAcessivel({ checked: ativo, disabled: !!inativo }), accessibilityLabel: typeof it.label === "string" ? it.label : undefined, style: [s.segmento, fullWidth && s.segmentoCheio, 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

package/dist/layout.d.ts

@@ -6,7 +6,7 @@ export interface StackProps extends ViewProps {
     children?: React.ReactNode;
     /**
      * Eixo cruzado (o horizontal). Padrão `stretch`: os filhos ocupam a largura, como sempre e como
-     * na web. E2, 25/09/2026: desde que o `Button` passou a obedecer o pai (como no HeroUI Native e
+     * na web. E2, 25/09/2026: desde que o `Button` passou a obedecer o pai (como na referência e
      * na web), é aqui que se diz "botão do tamanho do texto" (`start`) ou "no meio" (`center`).
      */
     align?: AureaStackAlign;
@@ -158,8 +158,8 @@ export type CardProps = CardDaMarca | CardComum | CardTocavel;
  * 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.
+ * do app. ⚠ **O exemplo da biblioteca de referência faz exatamente isso** (uma superfície tocável em
+ * volta de um `Card` com `Button` dentro) — é 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;

package/dist/layout.js

@@ -17,7 +17,7 @@ import { Pressable, StyleSheet, View } from "react-native";
 // `@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, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
+import { criarFolha, peleDoCartao, peleDoCartaoEscolhido, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
 import { Text } from "./text.js";
 import { useAureaTokens, SobreAMarca } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -39,19 +39,14 @@ const folha = criarFolha((t) => ({
     // O raio 22 e a sombra vêm de token, e os dois são identidade declarada INTOCÁVEL no CLAUDE.md.
     // `boxShadow` é do RN 0.76+, e a Etapa 2 mediu que ele é 1:1 com o CSS — inclusive `spread`,
     // que o par `shadowRadius`/`elevation` perdia. Provado em aparelho no smoke do Lote 0.
-    cardBase: {
-        borderRadius: t.size.radiusCard,
-        padding: t.size.cardPad,
-        backgroundColor: t.color.card,
-        borderWidth: t.size.borderWidth,
-        borderColor: t.color.border,
-    },
+    // A pele mora em `estilos.ts` desde 06/10/2026: o cartão de escolha (CHK-01) usa a mesma.
+    cardBase: peleDoCartao(t),
     card_base: {},
     card_raised: { boxShadow: [t.shadow.shadowLg] },
     card_interactive: { borderColor: t.color.borderStrong },
     // `inset` recessa em vez de flutuar — é o painel DENTRO de um card, e a ficha da web diz isso.
     card_inset: { backgroundColor: t.color.surfaceInset, borderColor: "transparent" },
-    card_selected: { borderColor: t.color.primaryOutline, backgroundColor: t.color.surface2 },
+    card_selected: peleDoCartaoEscolhido(t),
     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).
@@ -195,8 +190,8 @@ export function Separator({ orientation = "horizontal", label, style, ...rest })
  * 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.
+ * do app. ⚠ **O exemplo da biblioteca de referência faz exatamente isso** (uma superfície tocável em
+ * volta de um `Card` com `Button` dentro) — é 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, style, ...rest }) {

package/dist/midia.js

@@ -38,7 +38,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //                     e serve ao mesmo caso real: o consumidor que já usa `expo-image`.
 import * as React from "react";
 import { Image as ImageRN, Pressable, View, } from "react-native";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Grid } from "./layout.js";
 import { Dialog } from "./overlays.js";
@@ -51,12 +51,12 @@ const folha = criarFolha((t) => ({
     // mais numa lista que já rola.
     imagem: {
         width: "100%",
-        borderRadius: t.size.radiusLg,
+        ...canto(t.size.radiusLg),
         backgroundColor: t.color.surface3 ?? t.color.muted,
     },
     contain: { backgroundColor: "transparent" },
     quebrada: { alignItems: "center", justifyContent: "center" },
-    ladrilho: { gap: t.size.space1, padding: t.size.space1, borderRadius: t.size.radiusLg },
+    ladrilho: { gap: t.size.space1, padding: t.size.space1, ...canto(t.size.radiusLg) },
     ladrilhoEscolhido: { backgroundColor: t.color.secondary },
 }));
 /** `"16/9"`, `"4:3"` ou o número que o RN quer. Devolve `undefined` quando não dá para ler. */

package/dist/moldura.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from "react-native";
-import { acentoDoTom, comOpacidade, fundoDoTom } from "./estilos.js";
+import { canto, 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 }) {
@@ -9,7 +9,7 @@ export function IconeEmMoldura({ icon, moldura, glifo, tone = "neutral", sobre }
         : 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 redondo = { width: moldura, height: moldura, ...canto(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/navigation.d.ts

@@ -103,21 +103,27 @@ export interface BottomNavProps extends ViewProps {
  * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
 export declare function BottomNav({ items, current, variant, indicator, width, label, style, ...rest }: BottomNavProps): React.JSX.Element;
-export type AureaTopbarVariant = "floating" | "flush" | "pill";
+export type AureaHeaderVariant = "floating" | "flush" | "pill";
 /** O recuo dos lados da `flush`: `bar` (20, o de sempre), `page` (16, o da `Screen`) ou `none`. */
-export type AureaTopbarInset = "bar" | "page" | "none";
-export interface TopbarProps extends ViewProps {
-    variant?: AureaTopbarVariant;
+export type AureaHeaderInset = "bar" | "page" | "none";
+/** @deprecated Nome antigo do `AureaHeaderVariant` (07/10/2026). Continua valendo. */
+export type AureaTopbarVariant = AureaHeaderVariant;
+/** @deprecated Nome antigo do `AureaHeaderInset` (07/10/2026). Continua valendo. */
+export type AureaTopbarInset = AureaHeaderInset;
+export interface HeaderProps extends ViewProps {
+    variant?: AureaHeaderVariant;
     /**
      * Só na `flush` — R-02, 24/09/2026. Por padrão a barra recua 20 dos lados e a `Screen` recua 16,
      * então o título fica 4 para dentro do conteúdo. `page` alinha os dois; `none` serve para a
      * barra que já vai dentro de um conteúdo com recuo. As outras duas variantes são caixas com
      * margem própria e ignoram esta prop.
      */
-    inset?: AureaTopbarInset;
+    inset?: AureaHeaderInset;
     brand?: React.ReactNode;
     children?: React.ReactNode;
 }
+/** @deprecated Nome antigo do `HeaderProps` (07/10/2026). Continua valendo. */
+export type TopbarProps = HeaderProps;
 /**
  * A barra de cima.
  *
@@ -126,7 +132,7 @@ export interface TopbarProps extends ViewProps {
  *
  * ```tsx
  * <Screen padded={false}>
- *   <Topbar brand={<Text weight={700}>Aurea</Text>} />
+ *   <Header brand={<Text weight={700}>Aurea</Text>} />
  *   <ScrollView>…</ScrollView>
  * </Screen>
  * ```
@@ -135,7 +141,9 @@ export interface TopbarProps extends ViewProps {
  * e **não há landmarks no RN**. Um papel inventado diria uma coisa errada; a barra fica sem papel,
  * e quem nomeia a tela é o conteúdo dela.
  */
-export declare function Topbar({ variant, inset, brand, children, style, ...rest }: TopbarProps): React.JSX.Element;
+export declare function Header({ variant, inset, brand, children, style, ...rest }: HeaderProps): React.JSX.Element;
+/** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). Continua funcionando, igual; use `Header`. */
+export declare function Topbar(props: HeaderProps): React.JSX.Element;
 /** Um sinal da linha (AN-04): fixada, silenciada. O `label` não aparece; é o que o leitor de tela lê. */
 export interface AureaNavListIndicator {
     icon: AureaIcon;
@@ -216,15 +224,25 @@ export interface TabsProps extends ViewProps {
     /** 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):
+     * O jeito da fila, com os nomes da referência (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;
+    /**
+     * O painel (C9 e MNT-05, 06/10/2026):
+     * - `card` (padrão): um cartão `inset`, como sempre — o conteúdo entra o recheio do cartão.
+     * - `plain`: sem caixa. O conteúdo começa na mesma linha do que está fora do `Tabs`, como o
+     *   painel da referência. É o caso de um conteúdo que já é cartão, tabela ou lista: dentro de um
+     *   painel-cartão, vira caixa dentro de caixa.
+     */
+    panel?: AureaTabsPanel;
 }
-/** Os dois jeitos da fila de abas, com os nomes do `Tabs` do HeroUI Native. */
+/** Os dois jeitos da fila de abas, com os nomes do `Tabs` da referência. */
 export type AureaTabsVariant = "primary" | "secondary";
+/** O painel do `Tabs`: cartão (padrão) ou sem caixa. O mesmo nome na web. */
+export type AureaTabsPanel = "card" | "plain";
 /**
  * As abas DENTRO da tela — trocar o painel, não trocar de página.
  *
@@ -237,7 +255,7 @@ export type AureaTabsVariant = "primary" | "secondary";
  *
  * ⚠ **A fila ROLA na horizontal, e a web não rola — divergência deliberada, com fonte.** A
  * referência máxima de desenho deste projeto tem estados de rolagem na lista de abas
- * (`left-scroll`, `right-scroll`, `left-right-scroll` no inventário), e num telefone de 360dp
+ * (rolagem à esquerda, à direita e dos dois lados, no inventário), e num telefone de 360dp
  * quatro rótulos já não cabem. Espremer todas seria a outra saída, e ela apaga o rótulo — que é
  * o defeito que o app mediu no `SegmentedControl`. **A cápsula, o respiro e o raio continuam
  * sendo os do CSS**; o que muda é o transbordo.
@@ -258,4 +276,4 @@ export type AureaTabsVariant = "primary" | "secondary";
  * 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, variant, style, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, onChange, label, justify, variant, panel, style, ...rest }: TabsProps): React.JSX.Element;