@aurea-uds/native 0.19.1 → 0.22.0

package/dist/navigation.js

@@ -3,7 +3,7 @@ import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAnotarBottomNav } from "./barranav.js";
 import { Avatar, Badge } from "./display.js";
-import { comOpacidade, criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
+import { canto, comOpacidade, criarFolha, estadoAcessivel, fioDoEscolhido } from "./estilos.js";
 import { Icon } from "./icon.js";
 import { Card } from "./layout.js";
 import { FilaRolante } from "./rolagem.js";
@@ -22,7 +22,7 @@ const folha = criarFolha((t) => ({
         marginHorizontal: t.size.space4, marginTop: t.size.space4,
         paddingVertical: t.size.space2, paddingHorizontal: t.size.space4,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
-        borderRadius: t.size.radiusCard, backgroundColor: t.color.card,
+        ...canto(t.size.radiusCard), backgroundColor: t.color.card,
     },
     topo_flush: { paddingVertical: t.size.space2, paddingHorizontal: t.size.space5,
         backgroundColor: t.color.background },
@@ -35,7 +35,7 @@ const folha = criarFolha((t) => ({
         alignSelf: "center", marginTop: t.size.space4, justifyContent: "flex-start",
         gap: t.size.space2, padding: t.size.space2,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
-        borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
+        ...canto(t.size.radiusControl), backgroundColor: t.color.card,
     },
     // ── BottomNav ──────────────────────────────────────────────────────────────────────────────
     // 🔴 `floating` FLUTUA POR CIMA DA TELA, e isto é conserto de 19/09/2026 — a variante prometia
@@ -53,14 +53,14 @@ const folha = criarFolha((t) => ({
         position: "absolute", bottom: 0, zIndex: t.size.zSticky,
         flexDirection: "row", gap: t.size.space1, margin: t.size.space4, padding: t.size.space1,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
-        borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
+        ...canto(t.size.radiusControl), backgroundColor: t.color.card,
         boxShadow: [t.shadow.shadowMd],
     },
     // `edge` encosta na borda: sem margem, sem raio, só a linha de cima — e continua NO FLUXO,
     // porque uma barra encostada que flutuasse esconderia o fim da tela sem nada reservar.
     barra_edge: {
         position: "relative", left: undefined, right: undefined, bottom: undefined, zIndex: undefined,
-        margin: 0, paddingHorizontal: 0, borderRadius: 0, backgroundColor: t.color.background,
+        margin: 0, paddingHorizontal: 0, ...canto(0), backgroundColor: t.color.background,
         borderWidth: 0, borderTopWidth: t.size.borderWidth, boxShadow: undefined,
     },
     // A pílula CHEIA, de uma borda à outra menos a margem — o de sempre. Mora fora da `barra` para
@@ -81,18 +81,18 @@ const folha = criarFolha((t) => ({
         // `space05` e não `space1` — a barra mais baixa (30/09/2026, pedido do Victor, aprovado pela
         // imagem). Com a moldura de 32 e o vão de 4 eram 9 entre o ícone e o rótulo; ver `marca`.
         // O NOME COLADO NO ÍCONE — 03/10/2026, pedido do Victor (*"o texto pode ficar mais próximo do
-        // ícone"*): vão ZERO, como no Telegram, em que o nome começa onde a caixa do ícone acaba. O
+        // ícone"*): vão ZERO, como no app de referência, em que o nome começa onde a caixa do ícone acaba. O
         // `space05` daqui (30/09/2026) somava 2 aos 2 de folga da própria linha do nome; medido na
         // bancada, eram 9 de tinta a tinta no `pill` e 13 no `circle-bold`.
         gap: 0, minHeight: t.size.controlHLg,
-        // 🔴 A ALTURA DO TELEGRAM — 03/10/2026, pedido do Victor: *"ainda acho ele muito largo
-        // comparado a bottomnav como do telegram"*, e "largo" é a grossura. Medido no fonte do
-        // Telegram para Android 12.10.6 (`DialogsActivity.MAIN_TABS_HEIGHT = 56`, `GlassTabView`): a
+        // 🔴 A ALTURA DE REFERÊNCIA — 03/10/2026, pedido do Victor: *"ainda acho ele muito largo
+        // comparado a bottomnav como [a do app de referência]"*, e "largo" é a grossura. Medido no
+        // fonte do app de referência para Android: a
         // pílula tem 56; o botão, 48; o ícone, 24; o nome, 12. A nossa media 73 no `circle-bold`. O
         // recheio de cima e de baixo cai de `space1` para `space05`, e o nome sai em 12 com a
         // entrelinha justa (ver o `Text` do rótulo). Igual na web (`aurea.css`).
         paddingHorizontal: t.size.space1, paddingVertical: t.size.space05,
-        borderRadius: t.size.radiusControl,
+        ...canto(t.size.radiusControl),
     },
     // Com a pílula do tamanho do conteúdo, `flex: 1` MATA as abas: no RN ele é base ZERO, e a soma
     // de zeros é uma pílula de largura zero. Aqui cada aba mede o próprio conteúdo (base `auto`) e
@@ -105,11 +105,11 @@ const folha = criarFolha((t) => ({
     },
     // A CAIXA QUE ANCORA O CONTADOR, e ela existe por um defeito visto em tela: pendurado no ITEM,
     // o número cai no meio do RÓTULO. O `navigation-client.tsx:336` conta a história inteira — o
-    // Victor viu o contador cobrir o nome em 17/08/2026, e a pesquisa (Material 3 e os guias de
-    // barra de abas do iOS) diz o mesmo: canto superior do ÍCONE, nunca sobre o texto.
+    // Victor viu o contador cobrir o nome em 17/08/2026, e a pesquisa (uma referência de mercado e os
+    // guias de barra de abas do iOS) diz o mesmo: canto superior do ÍCONE, nunca sobre o texto.
     marca: { position: "relative", alignItems: "center", justifyContent: "center",
-        width: 32, height: 32, borderRadius: t.size.radiusControl },
-    marcaRedonda: { borderRadius: t.size.radiusFull },
+        width: 32, height: 32, ...canto(t.size.radiusControl) },
+    marcaRedonda: { ...canto(t.size.radiusFull) },
     contador: { position: "absolute", top: -t.size.space05, right: -t.size.space05 },
     // ── A BARRA FICA PARADA QUANDO SE TROCA DE ABA — pedido do Victor, 03/10/2026 ──────────────
     // *"me incomoda o bottom nav todo se mexer [...] quero ele estático, apenas os botões
@@ -128,13 +128,13 @@ const folha = criarFolha((t) => ({
     // (56 × 48).
     disco: {
         alignItems: "center", justifyContent: "center", gap: 0,
-        width: 56, minHeight: t.size.controlHLg, borderRadius: t.size.radiusFull,
+        width: 56, minHeight: t.size.controlHLg, ...canto(t.size.radiusFull),
         paddingHorizontal: t.size.space1, paddingVertical: t.size.space1,
     },
-    // `capsule` (a "A" da bancada, o Material 3 Expressive): a moldura do ícone vira a cápsula de
-    // 56 × 32 do indicador ativo dele — os mesmos `--bottomnav-bold` e `--bottomnav-ring` do
+    // `capsule` (a "A" da bancada, de uma referência de mercado): a moldura do ícone vira a cápsula
+    // de 56 × 32 do indicador ativo dela — os mesmos `--bottomnav-bold` e `--bottomnav-ring` do
     // `aurea.css`, em todos os itens. O rótulo fica embaixo, fora dela.
-    marcaCapsula: { width: 56, height: 32, borderRadius: t.size.radiusFull },
+    marcaCapsula: { width: 56, height: 32, ...canto(t.size.radiusFull) },
     // O contador fica no canto do ÍCONE, e não da cápsula: sem a cápsula pintada (item não
     // escolhido) ele ficaria solto, longe do sino. São os (56 − 32) / 2 a mais para dentro.
     contadorCapsula: { right: (56 - 32) / 2 - t.size.space05 },
@@ -168,7 +168,7 @@ const folha = criarFolha((t) => ({
         flexDirection: "row", alignItems: "center", gap: t.size.space3, width: "100%",
         minHeight: t.size.controlHLg,
         paddingVertical: t.size.space2, paddingHorizontal: t.size.space3,
-        borderRadius: t.size.radiusCard - t.size.space1,
+        ...canto(t.size.radiusCard - t.size.space1),
     },
     // O MIOLO da linha: ícone + texto (+ valor em texto) + seta. Ele é quem toca; o que vem
     // depois dele, na moldura, é IRMÃO — ver o comentário no componente.
@@ -183,7 +183,7 @@ const folha = criarFolha((t) => ({
     // lá — `gap:3px; padding:3px` — e não de mim.
     abas: {
         flexDirection: "row", gap: 3, padding: 3,
-        minHeight: t.size.controlHMd, borderRadius: t.size.radiusControl,
+        minHeight: t.size.controlHMd, ...canto(t.size.radiusControl),
         backgroundColor: t.color.muted,
     },
     // `padding:0 14px` é literal no `.tab` (`aurea.css:1127`). A aba NÃO estica (nada de `flex`):
@@ -194,18 +194,18 @@ const folha = criarFolha((t) => ({
     // silêncio, e o `tsc` só pegou porque são chaves do mesmo objeto.
     abaDeTab: {
         alignItems: "center", justifyContent: "center",
-        paddingHorizontal: 14, borderRadius: t.size.radiusControl,
+        paddingHorizontal: 14, ...canto(t.size.radiusControl),
     },
     abaDeTabAtiva: { backgroundColor: t.color.secondary },
-    // `variant="secondary"` (R-12, 01/10/2026): o `secondary` do HeroUI Native 1.0.10
-    // (`styles/components/tabs.css`), com o fio da casa no lugar do indicador azul deles.
-    //   .tabs__list--variant-secondary  padding 0 · border-bottom 1px, cor da borda
-    //   .tabs__list                     gap `* 1` → space1
-    //   .tabs__trigger                  padding-inline `* 3` → space3 · padding-block `* 1.5`
+    // `variant="secondary"` (R-12, 01/10/2026): a variante secundária da referência,
+    // com o fio da casa no lugar do indicador azul dela.
+    //   fila (secundária)               padding 0 · border-bottom 1px, cor da borda
+    //   fila                            gap de 1 unidade → space1
+    //   aba                             padding-inline de 3 unidades → space3 · padding-block de 1,5
     //                                   → space1 + space05. Rótulo `text-base` + entrelinha 1.5 dá
     //                                   36, que é o `controlHMd`: a altura da fila da cápsula, então
     //                                   trocar de variante não muda a altura da fila.
-    //   .tabs__indicator--variant-secondary  border-bottom 2px na cor de destaque → `fioDoEscolhido`
+    //   indicador (secundária)          border-bottom 2px na cor de destaque → `fioDoEscolhido`
     abasSecundarias: {
         flexDirection: "row", gap: t.size.space1,
         borderBottomWidth: t.size.borderWidth, borderColor: t.color.border,
@@ -221,7 +221,7 @@ const folha = criarFolha((t) => ({
     passo: { flex: 1, alignItems: "center" },
     bolinha: {
         width: 32, height: 32, marginBottom: t.size.space2,
-        alignItems: "center", justifyContent: "center", borderRadius: t.size.radiusFull,
+        alignItems: "center", justifyContent: "center", ...canto(t.size.radiusFull),
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
         backgroundColor: t.color.surface1,
     },
@@ -383,13 +383,14 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
                             : _jsx(Badge, { tone: "danger", emphasis: "solid", size: "xs", dot: true }) }))] }));
             // 🔴 O PESO DO RÓTULO NÃO MUDA COM A ESCOLHA (03/10/2026). Era 500 no escolhido e 400 nos
             // outros, e texto mais grosso é texto mais LARGO: no `content` a barra mudava de largura a
-            // cada toque, em todos os indicadores. Agora é 500 em todos — o "Label medium" do Material
-            // 3, que também deixou de engrossar o escolhido no Expressive pela mesma razão. O que marca
+            // cada toque, em todos os indicadores. Agora é 500 em todos — o rótulo médio de uma
+            // referência de mercado, que também deixou de engrossar o escolhido numa revisão posterior
+            // pela mesma razão. O que marca
             // a escolha é a cor, o ícone cheio e a forma. No `expand` o nome é `sm`: ao lado do ícone,
             // e não embaixo dele.
             const rotulo = typeof it.label === "string"
                 ? (nomeVisivel
-                    // 12 numa linha de 16, o do Telegram — e o `text-xs` da web. Antes era o `xs` do `Text`
+                    // 12 numa linha de 16, o do app de referência — e o `text-xs` da web. Antes era o `xs` do `Text`
                     // nativo, que sobe para 14 (ADR-0050) com linha de 21: era o que mais engrossava a
                     // barra. A linha é o tamanho mais `space1`, como na web: com a entrelinha justa (14,4)
                     // a perna do "j" passava da caixa. No `expand` o nome vai ao lado do ícone, em 14.
@@ -401,7 +402,7 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
                 // `link` e não `tab`: uma aba troca um painel DESTA tela; isto troca de tela.
                 accessibilityRole: "link", accessibilityLabel: !nomeVisivel && typeof it.label === "string" ? it.label : undefined, ...estadoAcessivel({ selected: ativo, disabled: !!it.disabled }), style: [
                     s.aba, justa && s.aba_content,
-                    indicator === "subtle" && { borderRadius: t.size.radiusCard - t.size.space1 },
+                    indicator === "subtle" && { ...canto(t.size.radiusCard - t.size.space1) },
                     ativo && (indicator === "subtle" || indicator === "pill")
                         && { backgroundColor: comOpacidade(t.color.primary, 0.12) },
                     disco && s.aba_disco,
@@ -534,7 +535,7 @@ export function Stepper({ items, label, doneIcon = "check", errorIcon = "x-circl
  *
  * ⚠ **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.
@@ -555,7 +556,7 @@ export function Stepper({ items, label, doneIcon = "check", errorIcon = "x-circl
  * 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 function Tabs({ tabs, value, onChange, label, justify, variant = "primary", style, ...rest }) {
+export function Tabs({ tabs, value, onChange, label, justify, variant = "primary", panel = "card", style, ...rest }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
@@ -570,7 +571,5 @@ export function Tabs({ tabs, value, onChange, label, justify, variant = "primary
                             ], children: [typeof it.label === "string"
                                     ? _jsx(Text, { size: "sm", weight: ativa ? 600 : 400, style: { color: ativa ? t.color.foreground : t.color.mutedForeground }, children: it.label })
                                     : it.label, ativa && secundaria && _jsx(View, { style: s.fioDaAba })] }, it.id));
-                    }) }) }), aberta
-                ? (_jsx(Card, { variant: "inset", accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content }))
-                : null] }));
+                    }) }) }), aberta && panel === "plain" ? (_jsx(View, { accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content })) : aberta ? (_jsx(Card, { variant: "inset", accessibilityLabel: typeof aberta.label === "string" ? aberta.label : undefined, style: s.painel, children: aberta.content })) : null] }));
 }

package/dist/numero.d.ts

@@ -4,8 +4,9 @@ import type { AureaIcon } from "./icon.js";
 import { type AureaFieldSize } from "./inputs.js";
 /**
  * Os tamanhos do `NumberField`: os três do campo e mais o `display` (R-16, 01/10/2026), o número
- * grande de destaque. Nenhuma referência da fila tem esse tamanho (o `NumberField` do HeroUI web
- * só tem `variant`; o telefone dele nem tem a peça; o ReUI também não), então ele é peça nossa —
+ * grande de destaque. Nenhuma referência da fila tem esse tamanho (o `NumberField` da principal,
+ * na web, só tem `variant`; no telefone ela nem tem a peça; a segunda também não), então ele é
+ * peça nossa —
  * e as medidas saem de escalas que JÁ existem, nenhuma nova:
  *   letra    `text3xl` (30) em seminegrito — o título 2 (`h2` do B-02). Escolha do Victor.
  *   altura   `controlHXl` — o degrau seguinte da escala de altura dos controles, que muda com a
@@ -73,7 +74,7 @@ export interface NumberFieldProps {
      * Ocupa a largura disponível em vez de abraçar o conteúdo. Padrão **false**.
      *
      * O padrão segue o `.number-field` da web, que é `inline-flex` (`aurea.css:704`) — e o mesmo
-     * eixo existe na HeroUI (`fullWidth`, medido no inventário). **Ligue para moeda:** o campo em
+     * eixo existe na referência (medido no inventário). **Ligue para moeda:** o campo em
      * repouso tem `--space-16` (64dp), que cabe um contador e não cabe `R$ 1.234,50`.
      */
     fullWidth?: boolean;

package/dist/numero.js

@@ -8,8 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //
 // ── A ADR-0024 ATRAVESSA, E FOI CONFERIDA ANTES DE SE AFIRMAR ISSO ───────────────────────────
 // A decisão da web é *"a Aurea entrega o MOMENTO, não o formato"*: formatar no **blur**, nunca
-// enquanto se digita. As três medições que a sustentam (o `Input mask` do USWDS publicado com
-// reprovação WCAG registrada, o abandono da máscara pelo MUI na v6, a prática de acessibilidade)
+// enquanto se digita. As três medições que a sustentam (a máscara de entrada de um design system público, publicada com
+// reprovação WCAG registrada, o abandono da máscara por uma das bibliotecas de referência, a
+// prática de acessibilidade)
 // são sobre COMPORTAMENTO HUMANO, não sobre plataforma — então elas valem igual aqui, e não há
 // evidência nova que reabra a decisão (`decisions/README.md`).
 //
@@ -47,7 +48,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, TextInput, View } from "react-native";
 import { IconButton } from "./actions.js";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { useCampo } from "./inputs.js";
 import { useAureaStrings, useAureaTokens, usePeleSobreAMarca } from "./theme.js";
 const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg
@@ -63,8 +64,8 @@ const folha = criarFolha((t) => ({
     // divergência do nosso próprio CSS, entregue sem declarar, e ela só apareceu quando houve
     // imagem para olhar.
     //
-    // ⚠ **A saída é o eixo da HeroUI, e não uma invenção minha:** o `number-field` deles publica
-    // `fullWidth: [base, false, group, true]` (`INVENTORY-HEROUI.json`, medido em 22/08/2026).
+    // ⚠ **A saída é o eixo da referência, e não uma invenção minha:** o campo numérico dela publica
+    // um eixo de largura cheia, ligado e desligado (no inventário da referência, medido em 22/08/2026).
     // Esticar ou abraçar é DECISÃO DE USO, então vira prop — com o padrão em abraçar, que é o que
     // o nosso CSS já dizia.
     grupo: { flexDirection: "row", alignItems: "center", gap: t.size.space1,
@@ -76,7 +77,7 @@ const folha = criarFolha((t) => ({
     campo: {
         width: t.size.space16, textAlign: "center",
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
-        borderRadius: t.size.radiusControl, backgroundColor: t.color.fieldBg,
+        ...canto(t.size.radiusControl), backgroundColor: t.color.fieldBg,
         // A mesma correção de Android do `Input` do Lote 4 — ver `inputs.tsx:280-296`.
         paddingVertical: 0, textAlignVertical: "center",
     },
@@ -202,7 +203,7 @@ const prender = (n, min, max) => {
 };
 // O texto que o campo mostra ENQUANTO SE EDITA: o número sem grupo e sem símbolo, com o separador
 // decimal do locale. É o oposto do que se mostra em repouso, e é a decisão da ADR-0024 — editar
-// "R$ 1.234,50" com o cursor no meio é o defeito que o MUI filmou.
+// "R$ 1.234,50" com o cursor no meio é o defeito que uma das bibliotecas de referência filmou.
 const paraEdicao = (n, locale) => {
     if (n == null)
         return "";
@@ -342,9 +343,9 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
         return direcao === 1 ? (max != null && base >= max) : (min != null && base <= min);
     };
     const mostrarBotoes = icons !== false && !readOnly;
-    // 🔴 ACHADO PELA REFERÊNCIA, e não por mim — 12/09/2026. O inventário da HeroUI que já morava
-    // no repositório (`audit/activity-2/INVENTORY-HEROUI.json`, medido em 22/08 sobre
-    // `@heroui/react@3.2.4`) lista os estados do `number-field` deles:
+    // 🔴 ACHADO PELA REFERÊNCIA, e não por mim — 12/09/2026. O inventário da referência que já
+    // morava no repositório (medido em 22/08 sobre o pacote dela) lista os estados
+    // do campo numérico dela:
     //
     //     disabled · focus-visible · FOCUS-WITHIN · hovered · invalid · pressed
     //
@@ -353,10 +354,10 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
     // marca (`busca.tsx:520`). Inconsistência dentro da própria biblioteca, e invisível em teste
     // até alguém comparar com uma referência.
     //
-    // ⚠ **A BORDA vai no CAMPO, e não no grupo — e aqui a Aurea diverge da HeroUI de propósito.**
-    // Lá o `Group` carrega a caixa e o `Input` fica nu dentro dela. Aqui não: o `.number-field-group`
+    // ⚠ **A BORDA vai no CAMPO, e não no grupo — e aqui a Aurea diverge da referência de propósito.**
+    // Lá o grupo carrega a caixa e o campo fica nu dentro dela. Aqui não: o `.number-field-group`
     // do nosso CSS (`aurea.css:705`) é só `inline-flex` + `gap`, e quem tem borda é o `.input`
-    // (`aurea.css:685`), com os dois botões FORA dela. O estado que faltava é o deles; a geometria
+    // (`aurea.css:685`), com os dois botões FORA dela. O estado que faltava é o dela; a geometria
     // continua sendo a nossa.
     const [focado, setFocado] = React.useState(false);
     return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tamDoBotao, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: digitar, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 

package/dist/overlays.js

@@ -58,7 +58,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Animated, Easing, Modal, PanResponder, Pressable, ScrollView, View, } from "react-native";
 import { Button } from "./actions.js";
-import { criarFolha } from "./estilos.js";
+import { canto, cantosDeCima, criarFolha } from "./estilos.js";
 import { IconButton } from "./actions.js";
 import { RecuoDaFolha } from "./screen.js";
 import { Text } from "./text.js";
@@ -74,7 +74,7 @@ const folha = criarFolha((t) => ({
     superficie: {
         width: "100%", maxWidth: 560, padding: 24,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
-        borderRadius: t.size.radiusCard,
+        ...canto(t.size.radiusCard),
         backgroundColor: t.color.popover,
         ...(t.shadow.shadowLg ? { boxShadow: [t.shadow.shadowLg] } : null),
     },
@@ -101,12 +101,15 @@ const folha = criarFolha((t) => ({
         maxHeight: "90%",
         paddingHorizontal: 24, paddingTop: t.size.space2, paddingBottom: 24,
         backgroundColor: t.color.popover,
-        borderTopLeftRadius: t.size.radiusCard, borderTopRightRadius: t.size.radiusCard,
+        // HER-03 (06/10/2026, ADR-0058): 32 e não o 22 de painel — a folha acompanha o canto da tela
+        // do telefone. Decisão do Victor, olhando as duas na bancada. A lista do `Select` e a folha do
+        // `Combobox` sobem do mesmo jeito e levam o mesmo token.
+        ...cantosDeCima(t.size.radiusSheet),
         borderTopWidth: t.size.borderWidth, borderTopColor: t.color.border,
         ...(t.shadow.shadowLg ? { boxShadow: [t.shadow.shadowLg] } : null),
     },
     puxadorArea: { alignItems: "center", paddingVertical: t.size.space2 },
-    puxador: { width: 40, height: 4, borderRadius: 999, backgroundColor: t.color.borderStrong },
+    puxador: { width: 40, height: 4, ...canto(999), backgroundColor: t.color.borderStrong },
 }));
 /** Duração da entrada de painel, em ms. A mesma `.28s` do `.toast` do CSS (aurea.css:1586). */
 const DURACAO = 280;

package/dist/rolagem.d.ts

@@ -11,6 +11,13 @@ export interface FilaRolanteProps {
      * `end`. Quando não cabe, ela rola, e o alinhamento deixa de existir: começa no início.
      */
     justify?: AureaFilaJustify;
+    /**
+     * A fila OCUPA a linha quando cabe (A5, 06/10/2026 — o `fullWidth` do `SegmentedControl`). O
+     * recipiente do conteúdo cresce até a largura do rolador; quem cresce dentro dele é o filho, que
+     * também precisa de `flexGrow`. Quando não cabe, rola, como sempre. Vence o `justify`: cheia,
+     * ela não tem onde ficar.
+     */
+    fill?: boolean;
 }
 /** Onde a fila fica, na linha, quando cabe. O nome é o do `Cluster` (R-09): o eixo da fileira. */
 export type AureaFilaJustify = "start" | "center" | "end";
@@ -20,4 +27,4 @@ export type AureaFilaJustify = "start" | "center" | "end";
  * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
  * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
  */
-export declare function FilaRolante({ children, style, testID, justify }: FilaRolanteProps): React.JSX.Element;
+export declare function FilaRolante({ children, style, testID, justify, fill }: FilaRolanteProps): React.JSX.Element;

package/dist/rolagem.js

@@ -32,7 +32,7 @@ const JUSTIFICAR = { center: "center", end: "flex-end" };
  * O componente fica com a informação em vez de adivinhar: `onLayout` dá a largura visível e
  * `onContentSizeChange` dá a do conteúdo. Com as duas, `transbordou` é uma conta, não um palpite.
  */
-export function FilaRolante({ children, style, testID, justify = "start" }) {
+export function FilaRolante({ children, style, testID, justify = "start", fill }) {
     const [visivel, setVisivel] = React.useState(0);
     const [conteudo, setConteudo] = React.useState(0);
     const transbordou = conteudo > visivel && visivel > 0;
@@ -46,5 +46,6 @@ export function FilaRolante({ children, style, testID, justify = "start" }) {
         // largura do rolador (`flexGrow: 1`) e POSICIONA a cápsula lá dentro. Ela não estica: na
         // fileira, o filho tem a largura dele. Medido pelo app: rolador 335 de largura, fileira 281,
         // encostada à esquerda, e um `Cluster justify="center"` em volta não mudava nada.
-        contentContainerStyle: justify === "start" ? { flexGrow: 0 } : { flexGrow: 1, justifyContent: JUSTIFICAR[justify] }, style: style, children: children }));
+        contentContainerStyle: fill ? { flexGrow: 1 }
+            : justify === "start" ? { flexGrow: 0 } : { flexGrow: 1, justifyContent: JUSTIFICAR[justify] }, style: style, children: children }));
 }

package/dist/screen.js

@@ -146,7 +146,7 @@ function Rodape({ dentroDoRespiro, pegaABorda, respiroDaBarra, children }) {
 // ganhar altura. Nunca ganhava: o recuo ficava em zero e o último item, atrás dos botões do
 // sistema (achado E10 do app).
 //
-// A saída é a do HeroUI Native (`select.tsx`, `useSafeAreaInsets`): o número vem do CONTEXTO
+// A saída é a da referência (`select.tsx`, `useSafeAreaInsets`): o número vem do CONTEXTO
 // do React, que atravessa o `Modal`, e vira um espaço de altura conhecida no fim da folha. Sem
 // `SafeAreaProvider` no app, vale a medida da abertura (`initialWindowMetrics`), que a
 // biblioteca calcula sem provider — e o componente não quebra quem não tem provider.

package/dist/sistema.d.ts

@@ -40,6 +40,11 @@ export type AureaPhoto = {
     uri: string;
     width?: number;
     height?: number;
+    /**
+     * Quando a foto foi TIRADA, lida do EXIF (R-23). Só vem com a prop `exif`, e fica vazia quando
+     * a foto não traz a data — a que passou por um aplicativo de mensagens, por exemplo, perde o EXIF no caminho.
+     */
+    takenAt?: Date;
 };
 export interface PhotoInputProps {
     value?: AureaPhoto[];
@@ -56,6 +61,12 @@ export interface PhotoInputProps {
     offerSettings?: boolean;
     /** Avisado quando a permissão foi negada — o app pode querer contar uma história própria. */
     onPermissionDenied?: () => void;
+    /**
+     * Lê do EXIF a data em que a foto foi tirada e a entrega em `takenAt` (R-23). Desligado por
+     * padrão: ler o EXIF custa (no iPhone, a foto que está no iCloud desce inteira) e o app só
+     * paga quando precisa. Da galeria, é o que põe na ordem certa a foto que sobe dias depois.
+     */
+    exif?: boolean;
     addIcon?: AureaIcon | false;
     removeIcon?: AureaIcon;
     style?: StyleProp<ViewStyle>;
@@ -76,6 +87,8 @@ export interface PhotoInputProps {
  * | **câmera ou galeria?** | câmera, que é o que o plano pede | `source="library"` |
  * | como **remover**? | um `IconButton` no canto de cada miniatura | `removeIcon` |
  * | **quantas** cabem? | uma | `max` |
+ * | **várias de uma vez?** | da galeria, sim, quando cabe mais de uma (R-23) | `max` |
+ * | **a data** em que foi tirada? | não lê: ler o EXIF custa | `exif` → `takenAt` (R-23) |
  *
  * ⚠ **O gatilho some quando o limite é atingido**, em vez de ficar aceso e não fazer nada.
  *
@@ -85,10 +98,10 @@ export interface PhotoInputProps {
  *
  * | | |
  * |---|---|
- * | miniatura | quadrada de 64, a `Image` da `Gallery` (o `Avatar` `lg` do HeroUI) |
+ * | miniatura | quadrada de 64, a `Image` da `Gallery` (o `Avatar` `lg` da referência) |
  * | tocar nela | abre a foto grande, no MESMO zoom da `Gallery` (`FotoAmpliada`) |
  * | o X | com fundo, TODO fora da foto, no canto de cima à direita |
  * | leitor de tela | *"Foto 2 de 3"* (com uma só, *"Foto"*) e *"Abre a foto"*; o X, *"Remover foto 2"* |
  * | inativo | a foto ainda abre (olhar não muda nada); o X não remove |
  */
-export declare function PhotoInput({ value, onChange, max, source, disabled, offerSettings, onPermissionDenied, addIcon, removeIcon, style, testID, }: PhotoInputProps): React.JSX.Element;
+export declare function PhotoInput({ value, onChange, max, source, disabled, offerSettings, onPermissionDenied, exif, addIcon, removeIcon, style, testID, }: PhotoInputProps): React.JSX.Element;

package/dist/sistema.js

@@ -35,7 +35,7 @@ import { Linking, Platform, Pressable, View } from "react-native";
 import RNDateTimePicker, { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
 import * as ImagePicker from "expo-image-picker";
 import { IconButton } from "./actions.js";
-import { criarFolha, estadoAcessivel } from "./estilos.js";
+import { canto, criarFolha, estadoAcessivel } from "./estilos.js";
 import { Alert } from "./feedback.js";
 import { Icon } from "./icon.js";
 import { useCampo } from "./inputs.js";
@@ -46,12 +46,12 @@ const folha = criarFolha((t) => ({
     gatilho: {
         flexDirection: "row", alignItems: "center", justifyContent: "space-between",
         width: "100%", 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 },
-    // R-22 (02/10/2026), a "B" da prancha: miniatura QUADRADA de 64 — o `Avatar` `lg` do HeroUI
-    // Native, e a medida que o botão de pôr foto passou a ter também (era 72, número à mão) — e o X
+    // R-22 (02/10/2026), a "B" da prancha: miniatura QUADRADA de 64 — o `Avatar` `lg` da
+    // referência, e a medida que o botão de pôr foto passou a ter também (era 72, número à mão) — e o X
     // TODO FORA da foto. O X é o `IconButton` `sm` (30) com fundo; a área de toque dele é de 44
     // (`targetMin`), com o desenho no centro, então o deslocamento que põe o canto do DESENHO no
     // canto da foto é (30 + 44) / 2. A grade deixa esse espaço em cima, à direita e entre as linhas,
@@ -65,7 +65,7 @@ const folha = criarFolha((t) => ({
     remover: { position: "absolute", top: -foraDoX(t), right: -foraDoX(t) },
     adicionar: {
         alignItems: "center", justifyContent: "center", gap: t.size.space1,
-        width: t.size.space16, height: t.size.space16, borderRadius: t.size.radiusLg,
+        width: t.size.space16, height: t.size.space16, ...canto(t.size.radiusLg),
         borderWidth: t.size.borderWidth, borderColor: t.color.borderStrong,
         borderStyle: "dashed", backgroundColor: t.color.fieldBg,
     },
@@ -128,6 +128,36 @@ export function DatePicker({ value, onChange, mode = "date", minimumDate, maximu
                     style,
                 ], children: [_jsx(Text, { size: tam === "sm" ? "xs" : tam === "lg" ? "base" : "md", tone: value ? "default" : "subtle", numberOfLines: 1, children: texto }), icon && _jsx(Icon, { name: icon, size: "sm", color: t.color.subtleForeground })] }), mostrarSeletorIOS && (_jsx(RNDateTimePicker, { value: value ?? new Date(), mode: mode, minimumDate: minimumDate, maximumDate: maximumDate, onChange: receber }))] }));
 }
+// R-23 (06/10/2026) · a data em que a foto foi tirada, e NADA MAIS do EXIF.
+//
+// Lido no fonte do `expo-image-picker` 57.0.15: no iPhone o código junta o dicionário `{Exif}` no
+// topo, então `DateTimeOriginal` chega com esse nome nos dois sistemas. O formato do EXIF é
+// "AAAA:MM:DD HH:MM:SS", sem fuso. O iPhone pode mandar `OffsetTimeOriginal` ("-03:00"); a lista
+// de etiquetas do Android não tem fuso, e aí vale a hora local do aparelho — que é a hora em que
+// a pessoa estava, no caso comum de fotografar e lançar no mesmo lugar.
+//
+// ⚠ O EXIF de uma foto da galeria traz também a LOCALIZAÇÃO. Por isso esta função devolve uma
+// data e o EXIF não sai daqui: o app não recebe o que não pediu.
+function dataDaFoto(exif) {
+    const bruto = exif?.DateTimeOriginal ?? exif?.DateTimeDigitized;
+    if (typeof bruto !== "string")
+        return undefined;
+    const m = /^(\d{4}):(\d{2}):(\d{2})[ T](\d{2}):(\d{2}):(\d{2})/.exec(bruto.trim());
+    if (!m)
+        return undefined;
+    const [ano, mes, dia, hora, minuto, segundo] = m.slice(1).map(Number);
+    // "0000:00:00 00:00:00" é como câmera sem relógio escreve "sem data".
+    if (ano === 0 || mes < 1 || mes > 12 || dia < 1 || dia > 31 || hora > 23 || minuto > 59 || segundo > 59) {
+        return undefined;
+    }
+    const fuso = exif?.OffsetTimeOriginal ?? exif?.OffsetTimeDigitized;
+    const f = typeof fuso === "string" ? /^([+-])(\d{2}):(\d{2})$/.exec(fuso.trim()) : null;
+    if (f) {
+        const minutos = (f[1] === "-" ? -1 : 1) * (Number(f[2]) * 60 + Number(f[3]));
+        return new Date(Date.UTC(ano, mes - 1, dia, hora, minuto, segundo) - minutos * 60000);
+    }
+    return new Date(ano, mes - 1, dia, hora, minuto, segundo);
+}
 /**
  * O anexo por foto.
  *
@@ -143,6 +173,8 @@ export function DatePicker({ value, onChange, mode = "date", minimumDate, maximu
  * | **câmera ou galeria?** | câmera, que é o que o plano pede | `source="library"` |
  * | como **remover**? | um `IconButton` no canto de cada miniatura | `removeIcon` |
  * | **quantas** cabem? | uma | `max` |
+ * | **várias de uma vez?** | da galeria, sim, quando cabe mais de uma (R-23) | `max` |
+ * | **a data** em que foi tirada? | não lê: ler o EXIF custa | `exif` → `takenAt` (R-23) |
  *
  * ⚠ **O gatilho some quando o limite é atingido**, em vez de ficar aceso e não fazer nada.
  *
@@ -152,13 +184,13 @@ export function DatePicker({ value, onChange, mode = "date", minimumDate, maximu
  *
  * | | |
  * |---|---|
- * | miniatura | quadrada de 64, a `Image` da `Gallery` (o `Avatar` `lg` do HeroUI) |
+ * | miniatura | quadrada de 64, a `Image` da `Gallery` (o `Avatar` `lg` da referência) |
  * | tocar nela | abre a foto grande, no MESMO zoom da `Gallery` (`FotoAmpliada`) |
  * | o X | com fundo, TODO fora da foto, no canto de cima à direita |
  * | leitor de tela | *"Foto 2 de 3"* (com uma só, *"Foto"*) e *"Abre a foto"*; o X, *"Remover foto 2"* |
  * | inativo | a foto ainda abre (olhar não muda nada); o X não remove |
  */
-export function PhotoInput({ value = [], onChange, max = 1, source = "camera", disabled, offerSettings = true, onPermissionDenied, addIcon = "camera", removeIcon = "x", style, testID, }) {
+export function PhotoInput({ value = [], onChange, max = 1, source = "camera", disabled, offerSettings = true, onPermissionDenied, exif = false, addIcon = "camera", removeIcon = "x", style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
@@ -185,16 +217,27 @@ export function PhotoInput({ value = [], onChange, max = 1, source = "camera", d
                 return;
             }
         }
+        // R-23: da GALERIA, escolhe várias de uma vez quando cabe mais de uma, até o que falta para o
+        // `max`. A câmera tira uma por vez — no sistema, não há outro jeito.
+        const cabem = max - value.length;
         const r = source === "camera"
-            ? await ImagePicker.launchCameraAsync({ quality: 0.7 })
-            : await ImagePicker.launchImageLibraryAsync({ quality: 0.7 });
+            ? await ImagePicker.launchCameraAsync({ quality: 0.7, exif })
+            : await ImagePicker.launchImageLibraryAsync(cabem > 1
+                ? { quality: 0.7, exif, allowsMultipleSelection: true, selectionLimit: cabem }
+                : { quality: 0.7, exif });
         if (r.canceled || !r.assets?.length)
             return;
         const novas = r.assets
-            .slice(0, max - value.length)
-            .map((a) => ({ uri: a.uri, width: a.width, height: a.height }));
+            .slice(0, cabem)
+            .map((a) => {
+            const foto = { uri: a.uri, width: a.width, height: a.height };
+            const quando = exif ? dataDaFoto(a.exif) : undefined;
+            if (quando)
+                foto.takenAt = quando;
+            return foto;
+        });
         onChange?.([...value, ...novas]);
-    }, [source, max, value, onChange, onPermissionDenied]);
+    }, [source, max, value, onChange, onPermissionDenied, exif]);
     return (_jsxs(View, { testID: testID, style: style, children: [negadoDeVez && (_jsx(Alert, { variant: "warning", children: _jsxs(View, { style: { gap: t.size.space2 }, children: [_jsx(Text, { size: "sm", tone: "muted", children: strings.cameraDenied }), offerSettings && (_jsx(Pressable, { onPress: () => Linking.openSettings(), accessibilityRole: "button", accessibilityLabel: strings.openSettings, children: _jsx(Text, { size: "sm", weight: 600, tone: "primary", children: strings.openSettings }) }))] }) })), _jsxs(View, { style: [s.galeria, value.length > 0 && s.comX], children: [value.map((foto, n) => (_jsxs(View, { style: s.miniatura, children: [_jsx(Pressable, { onPress: () => setAberta(n), accessibilityRole: "imagebutton", accessibilityLabel: nomeDa(n), accessibilityHint: strings.photoOpen, children: _jsx(Image, { source: foto.uri, alt: "", ratio: 1 }) }), _jsx(View, { style: s.remover, children: _jsx(IconButton, { appearance: "solid", size: "sm", name: removeIcon, label: `${strings.photoRemove} ${n + 1}`, disabled: inativo, onPress: () => onChange?.(value.filter((_, i) => i !== n)) }) })] }, `${foto.uri}-${n}`))), !cheio && (_jsx(Pressable, { onPress: inativo ? undefined : escolher, disabled: inativo, accessibilityRole: "button", accessibilityLabel: campo?.label ?? strings.photoAdd, ...estadoAcessivel({ disabled: !!inativo }), style: [s.adicionar, inativo && s.desabilitado], children: addIcon && _jsx(Icon, { name: addIcon, size: "lg", color: t.color.subtleForeground }) }))] }), _jsx(FotoAmpliada, { source: fotoAberta?.uri, title: aberta != null ? nomeDa(aberta) : "", alt: aberta != null ? nomeDa(aberta) : "", 
                 // A proporção da foto, quando a câmera a deu: a grande aparece inteira, sem tarja à toa.
                 ratio: fotoAberta?.width && fotoAberta.height ? fotoAberta.width / fotoAberta.height : 1, onClose: () => setAberta(null) })] }));

package/dist/text.d.ts

@@ -10,14 +10,14 @@ export type AureaTextFont = "ui" | "editorial" | "code";
 export type AureaTextTone = "default" | "muted" | "subtle" | "primary" | "link" | "danger" | "success" | "warning" | "info";
 export type AureaTextLeading = "none" | "tight" | "normal" | "relaxed";
 /**
- * O PAPEL do texto — B-02, 25/09/2026, no molde do `Typography` do HeroUI Native 1.0.10. Uma lista
+ * O PAPEL do texto — B-02, 25/09/2026, no molde do componente de tipografia da referência. Uma lista
  * fechada: título 1–6, texto, texto pequeno, texto mínimo e código.
  */
 export type AureaTextType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "body-sm" | "body-xs" | "code";
 export interface TextProps extends TextPropsRN {
     /**
-     * O papel (B-02). Dá tamanho, peso, entrelinha e fonte de uma vez, com os números do HeroUI
-     * Native — os MESMOS da web, sem o degrau a mais do `size`. Uma opção solta passada junto
+     * O papel (B-02). Dá tamanho, peso, entrelinha e fonte de uma vez, com os números da
+     * referência — os MESMOS da web, sem o degrau a mais do `size`. Uma opção solta passada junto
      * (`size`, `weight`…) continua valendo por cima dele.
      */
     type?: AureaTextType;
@@ -49,7 +49,7 @@ export type AureaTypographyAlign = "start" | "center" | "end" | "justify";
 interface AureaTypographyBase extends Omit<TextPropsRN, "children"> {
     color?: AureaTypographyColor;
     weight?: AureaTypographyWeight;
-    /** `start`/`end` viram `left`/`right`, que o React Native já espelha em RTL (nota do HeroUI Native). */
+    /** `start`/`end` viram `left`/`right`, que o React Native já espelha em RTL (nota da referência). */
     align?: AureaTypographyAlign;
     /** Uma linha só, cortada com reticências (`numberOfLines={1}`). */
     truncate?: boolean;
@@ -58,7 +58,7 @@ interface AureaTypographyBase extends Omit<TextPropsRN, "children"> {
 export interface HeadingProps extends AureaTypographyBase {
     type?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
-/** Título. Marca `accessibilityRole="header"` sozinho, como o HeroUI Native. */
+/** Título. Marca `accessibilityRole="header"` sozinho, como a referência. */
 export declare function Heading({ type, accessibilityRole, ...rest }: HeadingProps): React.JSX.Element;
 export interface ParagraphProps extends AureaTypographyBase {
     type?: "body" | "body-sm" | "body-xs";