@aurea-uds/native 0.19.1 → 0.23.0

package/README.md

@@ -212,7 +212,7 @@ leitor anuncia.
 
 | | |
 |---|---|
-| `Switch` | **não é o do React Native** — aquele traz o interruptor do Material. Medidas do CSS |
+| `Switch` | **não é o do React Native** — aquele traz o interruptor de cada sistema. Medidas do CSS |
 | `Select` | não existe `<select>` no RN: é `Modal` + folha que sobe. O papel é `button`, não `combobox` — `combobox` promete um campo em que se digita |
 | `Form` | é só o respiro. Não há `<form>`, `submit` nem validação de plataforma; o erro de cada campo vai no `Field` |
 | `Field` | sem `orientation="horizontal"` — numa tela de 360dp a grade de `12rem` deixa o controle com menos de metade da largura |
@@ -300,8 +300,8 @@ devolve texto.
 
 ⚠ **Formata no BLUR, e só no blur** ([ADR-0024](../../decisions/0024-mascara-de-campo-e-o-momento-nao-o-formato.md)
 e [ADR-0042](../../decisions/0042-o-intl-e-o-formatador-do-nativo-e-a-volta-e-nossa.md)). Enquanto
-o campo tem foco, ele mostra exatamente o que foi digitado. Máscara ao vivo é o defeito que o
-USWDS publicou com reprovação WCAG registrada e que o MUI abandonou na v6.
+o campo tem foco, ele mostra exatamente o que foi digitado. Máscara ao vivo é o defeito que
+outro design system publicou com reprovação WCAG registrada e que uma das bibliotecas de referência abandonou.
 
 ⚠ **`notation: "compact"` é recusado** — quebrado no motor JS do RN nos dois sistemas. Sai aviso em
 `__DEV__` e a opção é ignorada; o resto do formato sobrevive.
@@ -414,7 +414,7 @@ nega. Cada pergunta ficou com um padrão, e **cada padrão tem uma saída**:
 | quantas cabem? | **uma** | `max` |
 | como **olhar** a foto? | tocar na miniatura abre a foto grande, no mesmo zoom da `Gallery` (R-22) | — |
 
-**Desde a `0.15.0` (R-22)**, a miniatura é quadrada de 64 (o `Avatar` `lg` do HeroUI Native), do
+**Desde a `0.15.0` (R-22)**, a miniatura é quadrada de 64 (o `Avatar` `lg` da referência), do
 tamanho do botão de pôr foto. O leitor de tela ouve *"Foto 2 de 3"* e *"Abre a foto"*; o X,
 *"Remover foto 2"*. Com o campo inativo, a foto ainda abre e o X não remove.
 

package/dist/actions.d.ts

@@ -17,19 +17,19 @@ export interface ButtonProps extends Omit<PressableProps, "children" | "style">
     /**
      * Um desenho QUALQUER na frente do texto, para quando a marca não pode ser um ícone nosso.
      *
-     * ⚠ **Ele existe por causa de MARCA REGISTRADA, não por conveniência.** O botão "Entrar com
-     * Google" e o "Entrar com Apple" exigem o desenho oficial de cada um, e nenhum dos dois pode
-     * viver dentro desta biblioteca: o Google proíbe redesenhar e manda usar o arquivo do pacote
-     * dele; a Apple proíbe usar o logo sem licença escrita. **Então a marca entra pelo app**, e o
+     * ⚠ **Ele existe por causa de MARCA REGISTRADA, não por conveniência.** Os botões de entrar com
+     * a conta de outras empresas exigem o desenho oficial de cada uma, e nenhum deles pode
+     * viver dentro desta biblioteca: uma delas proíbe redesenhar e manda usar o arquivo do pacote
+     * dela; outra proíbe usar o logo sem licença escrita. **Então a marca entra pelo app**, e o
      * que a Aurea dá é a cápsula em volta.
      *
-     *     <Button appearance="outline" leading={<RNImage source={logoGoogle} style={{width: 18, height: 18}} />}>
-     *       Entrar com Google
+     *     <Button appearance="outline" leading={<RNImage source={logoDoServico} style={{width: 18, height: 18}} />}>
+     *       Entrar com a conta do serviço
      *     </Button>
      *
      * ⚠ **A cor do texto NÃO atravessa para cá** — o que entra desenha a própria cor, e é assim
-     * que tem de ser: a marca do Google tem cor fixa, e tingi-la seria justamente o que a regra
-     * dele proíbe. Um `leadingIcon` nosso continua herdando a cor do botão.
+     * que tem de ser: a marca da empresa tem cor fixa, e tingi-la seria justamente o que a regra
+     * dela proíbe. Um `leadingIcon` nosso continua herdando a cor do botão.
      */
     leading?: React.ReactNode;
     /** O mesmo, do outro lado. */
@@ -52,7 +52,7 @@ export interface ButtonProps extends Omit<PressableProps, "children" | "style">
 export declare function Button(props: ButtonProps): React.JSX.Element;
 export interface LinkButtonProps extends Omit<ButtonProps, "appearance" | "fullWidth"> {
 }
-/** Botão-texto sem recuo nem caixa, alinhado com o texto em volta. O `LinkButton` do HeroUI. */
+/** Botão-texto sem recuo nem caixa, alinhado com o texto em volta. O `LinkButton` da referência. */
 export declare function LinkButton(props: LinkButtonProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children" | "leadingIcon" | "trailingIcon" | "fullWidth"> {
     name: AureaIcon;
@@ -64,7 +64,7 @@ export interface IconButtonProps extends Omit<ButtonProps, "children" | "leading
  *
  * O raio é o da cápsula (`radiusControl`, 999) num quadrado, e um quadrado com raio 999 é um
  * círculo — o mesmo que o `.btn-icon` do core faz. Decisão do Victor, 25/09/2026 (ADR-0052): era
- * `--radius-md`/`--radius-sm`, e o HeroUI 3.2.6 faz o botão só de ícone redondo.
+ * `--radius-md`/`--radius-sm`, e a referência faz o botão só de ícone redondo.
  *
  * ⚠ **`label` é obrigatório no tipo**, e é a única prop deste pacote que obriga texto. Um ícone
  * sozinho não diz nada a quem não o vê, e deixar isso opcional é o mesmo que deixá-lo vazio.

package/dist/actions.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //                 do Lote 3. Aparência sem consumidor é a ADR-0034 ("ter a variante não é usar").
 import * as React from "react";
 import { Pressable, View } from "react-native";
-import { criarFolha, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, REACAO_AO_TOQUE, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTheme, useAureaTokens, useSobreAMarca } from "./theme.js";
@@ -119,7 +119,7 @@ const folha = criarFolha((t) => ({
     // pinta fundo, borda e raio é a `caixa` interna, com a altura do token. O botão continua com
     // 36 dp de desenho e passa a ter 44 de alvo — e o leitor de tela enxerga os 44, porque o
     // elemento acessível é o `Pressable`, não um retângulo invisível ao lado dele.
-    // E2 (25/09/2026): SEM `alignSelf`. O botão obedece o pai, como no HeroUI Native (`button.css`
+    // E2 (25/09/2026): SEM `alignSelf`. O botão obedece o pai, como na referência (a folha do botão dela
     // não fixa alinhamento) e como o `.btn` da web num `.stack`. Era `alignSelf: "flex-start"`, e ele
     // vencia o `alignItems: "center"` do pai: o botão do `EmptyState` ficava à esquerda com o resto
     // no meio. ⚠ A consequência, decidida pelo Victor: numa coluna sem alinhamento o botão ESTICA,
@@ -128,7 +128,7 @@ const folha = criarFolha((t) => ({
     alvoLargura: { alignSelf: "stretch" },
     caixa: {
         flexDirection: "row", alignItems: "center", justifyContent: "center",
-        borderRadius: t.size.radiusControl, // 999 — pill, identidade INTOCÁVEL
+        ...canto(t.size.radiusControl), // 999 — pill, identidade INTOCÁVEL
         borderWidth: t.size.borderWidth,
     },
     // `.btn:active` e `.btn:disabled` do core — os números moram no `estilos.ts` desde que o
@@ -161,7 +161,7 @@ function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size =
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
         borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
         ...(fullWidth ? { flex: 1 } : null),
-        // `.link-button__root` do HeroUI Native: `height: auto; padding: 0`, e o `.button__root` já
+        // A regra do botão-link da referência: `height: auto; padding: 0`, e a do botão dela já
         // tem `border-width: 0`. A borda transparente de 1 empurraria o texto 1 para dentro.
         ...(semRecuo ? { height: undefined, paddingHorizontal: 0, borderWidth: 0 } : null),
     }), [t, size, appearance, cor.solido, cor.contorno, corDaBorda, fullWidth, semRecuo]);
@@ -170,8 +170,8 @@ function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size =
             s.alvo, fullWidth && s.alvoLargura,
             tocando && s.pressionado, disabled && s.inerte,
         ], ...rest, children: _jsxs(View, { style: [s.caixa, caixa], children: [leading ?? null, leadingIcon ? _jsx(Icon, { name: leadingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, typeof children === "string"
-                    // E1 (25/09/2026): entrelinha NORMAL (1,5), como o rótulo do botão do HeroUI Native
-                    // (`button.css`: `line-height: var(--text-*--line-height)`). Era `none` (1,0), e a letra
+                    // E1 (25/09/2026): entrelinha NORMAL (1,5), como o rótulo do botão da referência
+                    // (a folha do botão dela usa a entrelinha de cada degrau da escala). Era `none` (1,0), e a letra
                     // precisa de 1,3 em para caber inteira — a IBM Plex subia 1,025 e descia 0,275; a
                     // Atkinson Hyperlegible (ADR-0053) sobe 0,984 e desce 0,316, o mesmo 1,3 (medido na
                     // tabela `hhea` dos dois arquivos, 01/10/2026): no Android o RN
@@ -181,7 +181,7 @@ function CorpoDoBotao({ children, appearance = "solid", tone = "neutral", size =
                     ? _jsx(Text, { size: FONTE[size], weight: 500, leading: "normal", style: { color: corDoTexto }, children: children })
                     : children, trailingIcon ? _jsx(Icon, { name: trailingIcon, size: ICONE[size], color: corDoTexto, icons: icons }) : null, trailing ?? null] }) }));
 }
-/** Botão-texto sem recuo nem caixa, alinhado com o texto em volta. O `LinkButton` do HeroUI. */
+/** Botão-texto sem recuo nem caixa, alinhado com o texto em volta. O `LinkButton` da referência. */
 export function LinkButton(props) {
     return _jsx(CorpoDoBotao, { ...props, appearance: "ghost", semRecuo: true });
 }
@@ -190,7 +190,7 @@ export function LinkButton(props) {
  *
  * O raio é o da cápsula (`radiusControl`, 999) num quadrado, e um quadrado com raio 999 é um
  * círculo — o mesmo que o `.btn-icon` do core faz. Decisão do Victor, 25/09/2026 (ADR-0052): era
- * `--radius-md`/`--radius-sm`, e o HeroUI 3.2.6 faz o botão só de ícone redondo.
+ * `--radius-md`/`--radius-sm`, e a referência faz o botão só de ícone redondo.
  *
  * ⚠ **`label` é obrigatório no tipo**, e é a única prop deste pacote que obriga texto. Um ícone
  * sozinho não diz nada a quem não o vê, e deixar isso opcional é o mesmo que deixá-lo vazio.
@@ -209,12 +209,12 @@ function BotaoDeIcone({ name, label, appearance = "ghost", tone = "neutral", siz
     const lado = t.size[ALTURA[size]];
     const caixa = React.useMemo(() => ({
         height: lado, width: lado, paddingHorizontal: 0,
-        borderRadius: t.size.radiusControl,
+        ...canto(t.size.radiusControl),
         backgroundColor: appearance === "solid" ? cor.solido : "transparent",
         borderColor: cor.contorno ?? (appearance === "outline" ? corDaBorda : "transparent"),
     }), [t, lado, size, appearance, cor.solido, cor.contorno, corDaBorda]);
     return (_jsx(Pressable, { disabled: disabled, accessibilityRole: "button", accessibilityLabel: label, ...estadoAcessivel({ disabled: !!disabled, pressed }), style: ({ pressed: tocando }) => [
-            // Largura FIXA, como o só-ícone do HeroUI (`.button--icon-only`: `w-10`): ele nunca estica,
+            // Largura FIXA, como o só-ícone da referência: ele nunca estica,
             // nem numa coluna sem alinhamento. O alvo é o maior entre o desenho e o `targetMin`.
             s.alvo, { width: Math.max(lado, t.size.targetMin), alignItems: "center" },
             tocando && s.pressionado, disabled && s.inerte,

package/dist/arquivo.js

@@ -6,10 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Proposta aprovada pelo Victor em 02/10/2026 (*"3 sim"*).
 //
 // ── AS REFERÊNCIAS ───────────────────────────────────────────────────────────────────────────
-//   HeroUI   não tem: nem o `heroui-native` 1.0.10, nem o `@heroui/styles` 3.2.6 (medido nos pacotes).
-//   ReUI     tem (`reui.io/docs/components/base/file-upload`): `accept`, `maxSize`, `maxFiles`,
-//            `multiple`, `onFilesChange`. Daqui vêm `accept` e `maxSize`, que são também os nomes
-//            do `FileInput` da web. O limite é `max`, e não `maxFiles`: é o nome do `PhotoInput`,
+//   uma      não tem: nem o pacote do nativo dela, nem o da web — medido nos pacotes.
+//   outra    tem: tipos aceitos, tamanho máximo, número máximo de arquivos, vários de uma vez e
+//            o aviso de mudança. Daqui vêm `accept` e `maxSize`, que são também os nomes
+//            do `FileInput` da web. O limite é `max`, e não o nome que ela usa: é o nome do `PhotoInput`,
 //            o irmão que mora ao lado.
 //   web      o `FileInput` do `@aurea-uds/react`: as frases (`fileTooLarge`, `fileWrongType`,
 //            `fileRemove`) e a conta do tamanho (`formatSize`) são as de lá.
@@ -33,7 +33,7 @@ import * as React from "react";
 import { Pressable, View } from "react-native";
 import * as DocumentPicker from "expo-document-picker";
 import { IconButton } from "./actions.js";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { alturaDoTamanho, respiroDoTamanho, useCampo } from "./inputs.js";
 import { Text } from "./text.js";
@@ -44,7 +44,7 @@ const folha = criarFolha((t) => ({
     caixa: {
         flexDirection: "row", alignItems: "center", gap: t.size.space2,
         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,
     },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
     desabilitado: { opacity: t.size.opacityDisabled },

package/dist/busca.d.ts

@@ -7,8 +7,8 @@ export interface AureaComboboxItem {
     value: string;
     label: string;
     /**
-     * Uma segunda linha embaixo do rótulo, apagada ("Pacote de 1 kg") — R-14, 01/10/2026. É o
-     * `Select.ItemDescription` do HeroUI Native 1.0.10 (`styles/components/select.css:117`): letra
+     * Uma segunda linha embaixo do rótulo, apagada ("Pacote de 1 kg") — R-14, 01/10/2026. É a
+     * descrição de item do `Select` da referência (na folha de estilo do `Select` dela): letra
      * `text-sm` (14), cor apagada. A busca continua olhando só o `label`.
      */
     description?: string;

package/dist/busca.js

@@ -69,7 +69,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Animated, Easing, FlatList, Modal, PanResponder, Pressable, TextInput, View, } from "react-native";
 import { IconButton } from "./actions.js";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, cantosDeCima, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Spinner } from "./feedback.js";
 import { Icon } from "./icon.js";
 import { KeyboardAvoiding, useCampo } from "./inputs.js";
@@ -105,7 +105,7 @@ 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,
         flexDirection: "row", alignItems: "center",
     },
     invalido: { borderColor: t.color.danger400 ?? t.color.destructive },
@@ -152,12 +152,13 @@ const folha = criarFolha((t) => ({
     // desenhar vazio.
     lista: {
         maxHeight: "90%",
-        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,
     },
     // O puxador, copiado do `BottomSheet` (`overlays.tsx:111-112`) — mesma medida, mesmo token.
     puxadorArea: { alignItems: "center", paddingVertical: t.size.space2 },
-    puxador: { width: 40, height: 4, borderRadius: t.size.radiusFull,
+    puxador: { width: 40, height: 4, ...canto(t.size.radiusFull),
         backgroundColor: t.color.borderStrong },
     // O campo de digitar, no topo da folha. É o `.input-group` da web (`aurea.css:741`): a borda
     // mora no GRUPO e o campo dentro dele é transparente e sem borda.
@@ -166,7 +167,7 @@ const folha = criarFolha((t) => ({
         margin: t.size.space3,
         paddingHorizontal: t.size.space3,
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
-        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+        ...canto(t.size.radiusControl), backgroundColor: t.color.fieldBg,
     },
     // ⚠ `paddingVertical: 0` e `textAlignVertical: "center"` — a MESMA correção que o `Input` do
     // Lote 4 levou depois do vidro (`inputs.tsx:280-296`): sem elas o Android injeta o padding do

package/dist/chart.js

@@ -54,7 +54,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Pressable, View } from "react-native";
 import Svg, { Circle, G, Line, Path, Rect, Text as SvgText } from "react-native-svg";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 /** A altura padrão, igual ao `--chart-h,220px` do `aurea.css:1329`. */
@@ -70,7 +70,7 @@ const folha = criarFolha((t) => ({
     chave: { flexDirection: "row", alignItems: "center", gap: t.size.space2 },
     amostra: {
         flexGrow: 0, flexShrink: 0,
-        width: 9, height: 9, borderRadius: t.size.radiusSm,
+        width: 9, height: 9, ...canto(t.size.radiusSm),
     },
     valores: { gap: t.size.space1 },
     linhaDeValor: { flexDirection: "row", alignItems: "center", gap: t.size.space2 },

package/dist/data.d.ts

@@ -13,7 +13,7 @@ export type AureaTimelineItem = {
     time?: React.ReactNode;
     /**
      * R-18, 02/10/2026: o glifo numa moldura redonda, no lugar do ponto. Moldura de 40 (o `Avatar`
-     * `sm` do HeroUI Native) e glifo de 20. Basta um item com `icon` para a coluna inteira ter a
+     * `sm` da referência) e glifo de 20. Basta um item com `icon` para a coluna inteira ter a
      * largura da moldura — os itens sem ícone ficam com o ponto, no centro dela.
      */
     icon?: AureaIcon;

package/dist/data.js

@@ -56,7 +56,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //   .table th         :1185           `subtle-foreground`, fundo `surface-2`, textXs, CAIXA ALTA
 import * as React from "react";
 import { FlatList, Pressable, View, useWindowDimensions, } from "react-native";
-import { criarFolha } from "./estilos.js";
+import { canto, criarFolha } from "./estilos.js";
 import { IconeEmMoldura } from "./moldura.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
@@ -73,7 +73,7 @@ const folha = criarFolha((t) => ({
     evento: { flexDirection: "row", alignItems: "flex-start", gap: t.size.space3 },
     ponto: {
         flexGrow: 0, flexShrink: 0,
-        width: t.size.space3, height: t.size.space3, borderRadius: t.size.radiusFull,
+        width: t.size.space3, height: t.size.space3, ...canto(t.size.radiusFull),
         marginTop: t.size.space1, backgroundColor: t.color.primary,
         // O halo do CSS é `box-shadow: 0 0 0 space-05 surface-1`. No RN sombra não faz anel —
         // uma BORDA da cor da superfície faz o mesmo buraco, e cresce o ponto pelo mesmo tanto.
@@ -99,7 +99,7 @@ const folha = criarFolha((t) => ({
     linha: {
         padding: t.size.space3, gap: t.size.space2,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
-        borderRadius: t.size.radiusLg, backgroundColor: t.color.card,
+        ...canto(t.size.radiusLg), backgroundColor: t.color.card,
     },
     linhaTocavel: { minHeight: t.size.targetMin ?? 44 },
     celula: { flexDirection: "row", gap: t.size.space3, alignItems: "flex-start" },

package/dist/display.js

@@ -23,36 +23,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // perderia o cartão, que é metade do que ela é.
 import * as React from "react";
 import { Image, View } from "react-native";
-import { acentoDoTom, criarFolha, fundoDoTom } from "./estilos.js";
+import { canto, acentoDoTom, criarFolha, fundoDoTom } from "./estilos.js";
 import { Card } from "./layout.js";
 import { gravidadeDoEstado } from "./strings.js";
 import { Text } from "./text.js";
 import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
     // ── Badge ──────────────────────────────────────────────────────────────────────────────────
-    // 🔴 AS MEDIDAS SÃO AS DO `Chip` DO HeroUI NATIVE (1.0.10, `chip.css`) — ordem do Victor de
-    // 25/09/2026: "se o HeroUI já tem, vamos usar as deles". Recheio, letra, linha e vão:
+    // 🔴 AS MEDIDAS SÃO AS DO CHIP DA REFERÊNCIA — ordem do Victor de
+    // 25/09/2026: "se [a referência] já tem, vamos usar as [dela]". Recheio, letra, linha e vão:
     //     sm  8 × 2  · letra 12 · linha 16        md  12 × 4 · letra 14 · linha 20
     //     lg  16 × 6 · letra 16 · linha 24        vão 4 entre ponto, texto e adornos
     // Até a 0.10.1 eram `3px 9px` e `gap:6` crus, e o texto saía com entrelinha 1,0: no Android a
-    // perna do g e do p era cortada (a mesma causa do E1 no `Button`). A linha do HeroUI é ≥ 1,33 ×
+    // perna do g e do p era cortada (a mesma causa do E1 no `Button`). A linha da referência é ≥ 1,33 ×
     // a letra, e a letra precisa de 1,3 (a IBM Plex e a Atkinson Hyperlegible da ADR-0053, medidas
     // na tabela `hhea`). O raio continua a cápsula da Aurea (identidade) e a
     // borda continua nossa.
-    // ⚠ O `xs` NÃO existe no HeroUI (é o contador sobre ícone): fica a medida nossa, 16 de altura,
+    // ⚠ O `xs` NÃO existe na referência (é o contador sobre ícone): fica a medida nossa, 16 de altura,
     // agora com letra 12 e linha 16 para caber a letra inteira.
     selo: {
         flexDirection: "row", alignItems: "center", justifyContent: "center", gap: t.size.space1,
         paddingVertical: t.size.space1, paddingHorizontal: t.size.space3,
-        borderWidth: t.size.borderWidth, borderRadius: t.size.radiusControl,
+        borderWidth: t.size.borderWidth, ...canto(t.size.radiusControl),
         backgroundColor: t.color.secondary, borderColor: t.color.border,
     },
     selo_xs: { minHeight: t.size.space4, paddingVertical: 0, paddingHorizontal: t.size.space1, borderWidth: 0 },
     selo_sm: { paddingVertical: t.size.space05, paddingHorizontal: t.size.space2 },
     selo_md: {},
-    // 6 de recheio vertical: no HeroUI é `calc(var(--spacing) * 1.5)`, e `--spacing` é o `space1`.
+    // 6 de recheio vertical: na referência é 1,5 vez a unidade de espaço dela, e essa unidade é o `space1`.
     selo_lg: { paddingVertical: t.size.space1 * 1.5, paddingHorizontal: t.size.space4 },
-    ponto: { width: t.size.space2, height: t.size.space2, borderRadius: t.size.radiusFull },
+    ponto: { width: t.size.space2, height: t.size.space2, ...canto(t.size.radiusFull) },
     // `fit="content"` (R-01): o mesmo `alignSelf` que a âncora abaixo já usa para não esticar.
     justo: { alignSelf: "flex-start" },
     // A âncora é `position:relative` na web; aqui o filho absoluto já se posiciona por ela.
@@ -66,11 +66,11 @@ const folha = criarFolha((t) => ({
     estado: { flexDirection: "row", alignItems: "center", gap: t.size.space2 },
     // O halo é `box-shadow 0 0 0 3px` da cor corrente a 14% (aurea.css:1055). Sem `color-mix` no
     // RN, o mesmo efeito sai com opacidade no próprio anel.
-    pontoDeEstado: { width: 8, height: 8, borderRadius: t.size.radiusFull },
+    pontoDeEstado: { width: 8, height: 8, ...canto(t.size.radiusFull) },
     // ── Avatar ─────────────────────────────────────────────────────────────────────────────────
     avatar: {
         alignItems: "center", justifyContent: "center", overflow: "hidden",
-        borderRadius: t.size.radiusFull, backgroundColor: t.color.surface3,
+        ...canto(t.size.radiusFull), backgroundColor: t.color.surface3,
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
     },
     imagem: { width: "100%", height: "100%" },
@@ -95,8 +95,8 @@ export const formatarContagem = (count, max = 99) => count > max ? `${max}+` : S
  * usa selo com miniatura, e prop sem consumidor é superfície pública para manter de graça. Volta
  * quando houver tela que peça.
  */
-/** A letra e a linha do selo, do `Chip` do HeroUI Native (ver a folha). O token direto, e não o
- *  `size` do `Text`, que no telefone sobe um degrau (ADR-0050) — o HeroUI não sobe no chip. */
+/** A letra e a linha do selo, do chip da referência (ver a folha). O token direto, e não o
+ *  `size` do `Text`, que no telefone sobe um degrau (ADR-0050) — a referência não sobe no chip. */
 const LETRA_DO_SELO = (t, size) => size === "lg" ? { fontSize: t.size.textBase, lineHeight: t.size.space6 }
     : size === "md" ? { fontSize: t.size.textSm, lineHeight: t.size.space5 }
         : { fontSize: t.size.textXs, lineHeight: t.size.space4 };

package/dist/estilos.d.ts

@@ -33,6 +33,50 @@ export declare function criarFolha<T extends NamedStyles<T> | NamedStyles<Record
  * um ícone) não tinha como escrevê-lo sem número à mão. O `check 39` cobra o teste dele.
  */
 export declare const comOpacidade: (cor: string, pct: number) => string;
+/**
+ * 🍎 O CANTO DO iOS — HER-01, 06/10/2026: todo canto arredondado do nativo passa por aqui.
+ *
+ * `borderCurve: "continuous"` é o canto do iPhone: a curva entra no lado aos poucos, em vez de
+ * começar de repente como um quarto de círculo. A referência o põe em 24 peças; a
+ * Aurea, até aqui, em nenhuma. Pela doc do React Native (tipos do 0.87.1), ele só vale no **iOS
+ * 13+**: o Android ignora, e o navegador também — o `react-native-web` 0.21 passa a propriedade
+ * adiante e o CSS não a conhece, sem erro. **No Android do Victor nada muda; no iPhone, muda.**
+ *
+ * ⚠ **Raio escrito fora daqui é defeito.** O `native-canto-continuo.test.tsx` lê o fonte do pacote
+ * e reprova `borderRadius` (ou um dos quatro cantos) escrito à mão — a regra *"quem mais tem esse
+ * problema?"* virando trava, para a próxima peça não nascer com o canto do Android no iPhone.
+ */
+export declare const canto: (raio: number, curva?: "continuous" | "circular") => {
+    readonly borderRadius: number;
+    readonly borderCurve: "circular" | "continuous";
+};
+/** Os dois cantos de CIMA — a folha que sobe de baixo (`BottomSheet`, a lista do `Select`). */
+export declare const cantosDeCima: (raio: number) => {
+    readonly borderTopLeftRadius: number;
+    readonly borderTopRightRadius: number;
+    readonly borderCurve: "continuous";
+};
+/**
+ * A PELE DO CARTÃO — o raio 22, o recheio, o fundo e a borda do `Card`; e a do cartão ESCOLHIDO
+ * (`variant="selected"`): a borda do contorno da marca sobre o fundo `surface2`.
+ *
+ * ⚠ **Moravam dentro do `layout.tsx` e mudaram de casa em 06/10/2026**, quando o cartão de escolha
+ * (CHK-01, `RadioGroup variant="card"`) passou a precisar da mesma pele: um cartão escolhido tem de
+ * parecer o cartão escolhido que o app já usa, e não um parecido. Duas cópias dos números é o
+ * defeito que o `CLAUDE.md` nomeia.
+ */
+export declare const peleDoCartao: (t: AureaTokens) => {
+    borderRadius: number;
+    borderCurve: "circular" | "continuous";
+    padding: number;
+    backgroundColor: string;
+    borderWidth: number;
+    borderColor: string;
+};
+export declare const peleDoCartaoEscolhido: (t: AureaTokens) => {
+    borderColor: string;
+    backgroundColor: string;
+};
 /** O tom de cor com significado — o vocabulário do `Badge` (`AureaBadgeTone`). */
 export type TomDeCor = "neutral" | "primary" | "info" | "success" | "warning" | "danger";
 /**

package/dist/estilos.js

@@ -49,6 +49,39 @@ export function criarFolha(descrever) {
 export const comOpacidade = (cor, pct) => /^#[0-9a-fA-F]{6}$/.test(cor)
     ? cor + Math.round(Math.max(0, Math.min(1, pct)) * 255).toString(16).padStart(2, "0")
     : cor;
+/**
+ * 🍎 O CANTO DO iOS — HER-01, 06/10/2026: todo canto arredondado do nativo passa por aqui.
+ *
+ * `borderCurve: "continuous"` é o canto do iPhone: a curva entra no lado aos poucos, em vez de
+ * começar de repente como um quarto de círculo. A referência o põe em 24 peças; a
+ * Aurea, até aqui, em nenhuma. Pela doc do React Native (tipos do 0.87.1), ele só vale no **iOS
+ * 13+**: o Android ignora, e o navegador também — o `react-native-web` 0.21 passa a propriedade
+ * adiante e o CSS não a conhece, sem erro. **No Android do Victor nada muda; no iPhone, muda.**
+ *
+ * ⚠ **Raio escrito fora daqui é defeito.** O `native-canto-continuo.test.tsx` lê o fonte do pacote
+ * e reprova `borderRadius` (ou um dos quatro cantos) escrito à mão — a regra *"quem mais tem esse
+ * problema?"* virando trava, para a próxima peça não nascer com o canto do Android no iPhone.
+ */
+export const canto = (raio, curva = "continuous") => ({ borderRadius: raio, borderCurve: curva });
+/** Os dois cantos de CIMA — a folha que sobe de baixo (`BottomSheet`, a lista do `Select`). */
+export const cantosDeCima = (raio) => ({ borderTopLeftRadius: raio, borderTopRightRadius: raio, borderCurve: "continuous" });
+/**
+ * A PELE DO CARTÃO — o raio 22, o recheio, o fundo e a borda do `Card`; e a do cartão ESCOLHIDO
+ * (`variant="selected"`): a borda do contorno da marca sobre o fundo `surface2`.
+ *
+ * ⚠ **Moravam dentro do `layout.tsx` e mudaram de casa em 06/10/2026**, quando o cartão de escolha
+ * (CHK-01, `RadioGroup variant="card"`) passou a precisar da mesma pele: um cartão escolhido tem de
+ * parecer o cartão escolhido que o app já usa, e não um parecido. Duas cópias dos números é o
+ * defeito que o `CLAUDE.md` nomeia.
+ */
+export const peleDoCartao = (t) => ({
+    ...canto(t.size.radiusCard),
+    padding: t.size.cardPad,
+    backgroundColor: t.color.card,
+    borderWidth: t.size.borderWidth,
+    borderColor: t.color.border,
+});
+export const peleDoCartaoEscolhido = (t) => ({ borderColor: t.color.primaryOutline, backgroundColor: t.color.surface2 });
 /**
  * A cor FORTE de um tom: o texto do selo, o ícone da moldura.
  *
@@ -86,7 +119,7 @@ export const fundoDoTom = (t, tom) => tom === "info" ? t.color.infoBg
  */
 export const fioDoEscolhido = (t) => ({
     position: "absolute", left: 15, right: 15, bottom: 0, height: 2,
-    borderRadius: t.size.radiusFull, backgroundColor: comOpacidade(t.color.primary, 0.75),
+    ...canto(t.size.radiusFull), backgroundColor: comOpacidade(t.color.primary, 0.75),
 });
 /**
  * A reação ao TOQUE de tudo que é alvo inteiro — hoje o `Button`, o `IconButton` e o `Card` com

package/dist/feedback.d.ts

@@ -54,7 +54,7 @@ export interface ProgressProps {
     value?: number;
     label?: string;
     /**
-     * O texto de apoio, no alto à direita — o `ProgressBar.Output` do HeroUI: velocidade, tempo que
+     * O texto de apoio, no alto à direita — a saída de texto da barra de progresso da referência: velocidade, tempo que
      * falta, bytes. Em texto, ele vai junto no `accessibilityValue`. É texto: a barra é um elemento
      * só para o leitor de tela, e coisa tocável dentro dela some no iPhone (`check 43`).
      */
@@ -70,8 +70,8 @@ export interface ProgressProps {
  * anuncia que existe uma barra e não diz em quanto ela está, que é a única informação que ela tem.
  * Sem total, não há `now` — a barra não finge um 0%.
  *
- * Sem total, um pedaço de 2/5 corre de -100% a 350% da própria largura em 1,5 s, na curva do
- * `ProgressBar` do HeroUI 3.2.6 — os mesmos números da web. Quando a pessoa pede menos movimento
+ * Sem total, um pedaço de 2/5 corre de -100% a 350% da própria largura em 1,5 s, na curva da
+ * barra de progresso da referência — os mesmos números da web. Quando a pessoa pede menos movimento
  * ele não corre: a barra inteira, apagada, e nunca um pedaço parado, que leria como 40% feito.
  */
 export declare function Progress({ value, label, detail, tone, style, testID }: ProgressProps): React.JSX.Element;
@@ -106,7 +106,7 @@ export declare function Alert({ variant, state, title, icon, onDismiss, children
 export interface EmptyStateProps {
     /**
      * O glifo, dentro de uma moldura redonda — R-15, 02/10/2026, escolhida pelo Victor na prancha
-     * (*"1 c"*). Moldura de 64 (o `Avatar` `lg` do HeroUI) e glifo de 32, o de antes. O desenho
+     * (*"1 c"*). Moldura de 64 (o `Avatar` `lg` da referência) e glifo de 32, o de antes. O desenho
      * do próprio app entra aqui também (`icon={Logo}`, R-11).
      */
     icon?: AureaIcon;

package/dist/feedback.js

@@ -22,7 +22,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import { Animated, Easing, View } from "react-native";
 import { IconButton } from "./actions.js";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { IconeEmMoldura } from "./moldura.js";
 import { useReduceMotion, driverNativo } from "./movimento.js";
@@ -32,18 +32,21 @@ import { useAureaStrings, useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
     // ── Spinner ────────────────────────────────────────────────────────────────────────────────
     // Um ANEL, e não o `ActivityIndicator` do React Native. Não é preferência: o `ActivityIndicator`
-    // desenha a rosquinha do Material no Android e a coroa do iOS — duas aparências que não são a
-    // Aurea, e o `CLAUDE.md` proíbe Material como aparência em voz alta. O anel é reprodutível
+    // desenha a rosquinha do sistema no Android e a coroa do iOS — duas aparências que não são a
+    // Aurea, e o `CLAUDE.md` proíbe a primeira como aparência em voz alta. O anel é reprodutível
     // com borda, e `borderRightColor: transparent` existe no RN igual ao CSS.
-    anel: { borderWidth: 2, borderRightColor: "transparent", borderRadius: t.size.radiusFull },
+    // HER-01: a ÚNICA peça com o canto `circular`, declarada. O anel GIRA, e um contorno que não
+    // seja círculo perfeito balança ao girar. A referência também deixa o `Spinner` de
+    // fora das 24 peças com canto contínuo.
+    anel: { borderWidth: 2, borderRightColor: "transparent", ...canto(t.size.radiusFull, "circular") },
     // ── Skeleton ───────────────────────────────────────────────────────────────────────────────
     // O raio 7 é cru no CSS (`aurea.css:1111`) e entra aqui **como está**: inventar um token para
     // ele faria o nativo e a web desenharem cantos diferentes para a mesma peça.
-    esqueleto: { borderRadius: 7, backgroundColor: t.color.surface3 },
+    esqueleto: { ...canto(7), backgroundColor: t.color.surface3 },
     // ── Progress ───────────────────────────────────────────────────────────────────────────────
-    trilho: { height: 8, borderRadius: t.size.radiusFull, backgroundColor: t.color.surface3, overflow: "hidden" },
-    preenchimento: { height: "100%", borderRadius: t.size.radiusFull, backgroundColor: t.color.primary },
-    // AN-07: a caixa com o texto de apoio em cima — a grade do HeroUI, `gap-1` até o trilho, a saída
+    trilho: { height: 8, ...canto(t.size.radiusFull), backgroundColor: t.color.surface3, overflow: "hidden" },
+    preenchimento: { height: "100%", ...canto(t.size.radiusFull), backgroundColor: t.color.primary },
+    // AN-07: a caixa com o texto de apoio em cima — a grade da referência, o vão `space1` até o trilho, a saída
     // à direita em algarismos de largura igual.
     campoProgresso: { gap: t.size.space1 },
     apoioProgresso: { alignSelf: "flex-end" },
@@ -56,7 +59,9 @@ const folha = criarFolha((t) => ({
     alerta: {
         flexDirection: "row", alignItems: "flex-start", gap: t.size.space3,
         paddingVertical: 14, paddingHorizontal: t.size.space4,
-        borderWidth: t.size.borderWidth, borderRadius: t.size.radiusLg,
+        // HER-02 (06/10/2026): era `radiusLg` (16). Painel é 22 na identidade da Aurea (`CLAUDE.md`
+        // §5), como o `Popover`, o `Dialog` e o `Banner`; a referência usa 24 na web e no nativo.
+        borderWidth: t.size.borderWidth, ...canto(t.size.radiusCard),
         backgroundColor: t.color.secondary, borderColor: t.color.border,
     },
     // O GRUPO de leitura: ícone + texto, lidos como uma coisa só. Ele existe porque a moldura
@@ -152,7 +157,7 @@ export function Skeleton({ width, height, radius, style, testID }) {
     return (_jsx(Animated.View, { testID: testID, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [
             s.esqueleto,
             { width: width ?? "100%", height: height ?? t.size.space4 },
-            radius != null && { borderRadius: radius },
+            radius != null && { ...canto(radius) },
             { opacity: opacidade },
             style,
         ] }));
@@ -168,8 +173,8 @@ const COR_DO_TOM = {
  * anuncia que existe uma barra e não diz em quanto ela está, que é a única informação que ela tem.
  * Sem total, não há `now` — a barra não finge um 0%.
  *
- * Sem total, um pedaço de 2/5 corre de -100% a 350% da própria largura em 1,5 s, na curva do
- * `ProgressBar` do HeroUI 3.2.6 — os mesmos números da web. Quando a pessoa pede menos movimento
+ * Sem total, um pedaço de 2/5 corre de -100% a 350% da própria largura em 1,5 s, na curva da
+ * barra de progresso da referência — os mesmos números da web. Quando a pessoa pede menos movimento
  * ele não corre: a barra inteira, apagada, e nunca um pedaço parado, que leria como 40% feito.
  */
 export function Progress({ value, label, detail, tone = "brand", style, testID }) {

package/dist/icon.d.ts

@@ -6,7 +6,7 @@ export type AureaIconComponent = (props: {
 }) => React.ReactElement;
 /**
  * Um ícone: o NOME de um glifo do registro (`"truck"`) ou o próprio DESENHO (`Logo`) — R-11,
- * 02/10/2026. É o jeito do HeroUI: lá nenhuma peça recebe nome de ícone, o app põe o componente
+ * 02/10/2026. É o jeito da referência: lá nenhuma peça recebe nome de ícone, o app põe o componente
  * dele dentro. Aqui os dois valem em toda prop de ícone, e o desenho dispensa registro e
  * `declare module`: o logotipo do app entra como `icon={Logo}`, com o `Logo` de `criarGlifo` ou o
  * `default` de um `icons/*`. Ele recebe o `size` e a `color` que a peça pedir.

package/dist/index.d.ts

@@ -22,10 +22,10 @@ export { useAureaStrings } from "./theme.js";
 export { defaultStrings, ptBR, gravidadeDoEstado, AUREA_UNIVERSAL_STATES } from "./strings.js";
 export type { AureaStrings, AureaUniversalState } from "./strings.js";
 export { useReduceMotion } from "./movimento.js";
-export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
-export type { BottomNavProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaNavListIndicator, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, AureaTabsVariant, } from "./navigation.js";
+export { BottomNav, Header, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
+export type { BottomNavProps, HeaderProps, TopbarProps, NavListProps, StepperProps, AureaNavItem, AureaNavListItem, AureaNavListIndicator, AureaStepItem, AureaStepState, AureaBottomNavVariant, AureaBottomNavIndicator, AureaBottomNavWidth, AureaHeaderVariant, AureaHeaderInset, AureaTopbarVariant, AureaTopbarInset, TabsProps, AureaTabItem, AureaTabsVariant, AureaTabsPanel, } from "./navigation.js";
 export { Field, Label, Input, Textarea, Select, Switch, Checkbox, Radio, RadioGroup, SegmentedControl, Form, KeyboardAvoiding, useCampo, } from "./inputs.js";
-export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, RadioGroupProps, RadioGroupItemProps, AureaRadioIndicatorPlacement, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
+export type { FieldProps, LabelProps, InputProps, TextareaProps, SelectProps, SwitchProps, CheckboxProps, RadioProps, RadioGroupProps, RadioGroupItemProps, AureaRadioIndicatorPlacement, AureaRadioGroupVariant, SegmentedControlProps, FormProps, KeyboardAvoidingProps, AureaFieldSize, } from "./inputs.js";
 export { InputGroup, InputGroupAddon, PasswordField, useGrupoDeCampo } from "./inputs.js";
 export type { InputGroupProps, InputGroupAddonProps, PasswordFieldProps } from "./inputs.js";
 export { Dialog, ConfirmDialog, Drawer, BottomSheet } from "./overlays.js";

package/dist/index.js

@@ -54,7 +54,7 @@ export { useReduceMotion } from "./movimento.js";
 // ⚠ **O `Tabs` entrou em 17/09/2026, e é a única peça daqui que NÃO saiu de um lote** — ele
 // veio do consumidor, que precisava trocar de painel dentro de uma tela e só tinha o
 // `SegmentedControl`, que anuncia "rádio". A fronteira com o `BottomNav` está no JSDoc dele.
-export { BottomNav, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
+export { BottomNav, Header, Topbar, NavList, Stepper, Tabs } from "./navigation.js";
 // ── Lote 4 — os formulários ────────────────────────────────────────────────────────────────
 // ⚠ O `Field` NÃO nomeia o controle por referência, como o `<label for>` da web: ele empurra o
 // nome, a dica e o estado de inválido para o controle por CONTEXTO. É a tradução que decidiu o