@aurea-uds/react 0.62.0 → 0.63.0

package/README.md

@@ -1,68 +1,68 @@
 # @aurea-uds/react
 
-Os componentes React do **Aurea Universal Design System**.
+The React components of the **Aurea Universal Design System**.
 
 ```bash
 pnpm add @aurea-uds/react @aurea-uds/core @aurea-uds/fonts @aurea-uds/icons
 ```
 
-## Uso
+## Usage
 
-Carregue as fontes **antes** da folha de estilo — o core não embute fonte nenhuma.
+Load the fonts **before** the stylesheet — the core does not embed any font.
 
 ```js
 import "@aurea-uds/fonts/css";
 import "@aurea-uds/core/css";
-import {AureaProvider, Button, ptBR} from "@aurea-uds/react";
+import {AureaProvider, Button} from "@aurea-uds/react";
 
 export default () => (
-  <AureaProvider spriteUrl="/aurea-icons.svg" strings={ptBR}>
-    <Button variant="primary">Enviar</Button>
+  <AureaProvider spriteUrl="/aurea-icons.svg">
+    <Button variant="primary">Send</Button>
   </AureaProvider>
 );
 ```
 
-`spriteUrl` aponta para o arquivo do `@aurea-uds/icons` — copie-o para onde o seu app serve
-arquivos estáticos. É configuração, então mora no provider, e não em cada componente que desenha
-um ícone. As frases padrão são em inglês; `strings={ptBR}` as troca pelas em português.
+`spriteUrl` points to the file from `@aurea-uds/icons` — copy it to where your app serves static files.
+It is configuration, so it lives on the provider, not on each component that draws an icon. The default
+strings are in English; `strings={ptBR}` swaps them for the Portuguese ones.
 
-## Importar por categoria
+## Import by category
 
-O entry point principal funciona, mas cada categoria é também um entry point próprio, para você levar uma
-parte do sistema sem o resto:
+The main entry point works, but each category is also an entry point of its own, so you can take one
+part of the system without the rest:
 
 ```js
 import {Button} from "@aurea-uds/react/actions";
 ```
 
-Seis módulos trazem uma engine opcional e por isso ficam **fora do entry point principal** — importar um
-`Button` nunca pode puxar uma dependência que você não instalou:
+Six modules bring an optional engine and therefore stay **out of the main entry point** — importing a
+`Button` must never pull in a dependency you did not install:
 
-| Importe | Exige que você instale |
+| Import | Requires you to install |
 |---|---|
-| `@aurea-uds/react/code-editor` | `codemirror` e os pacotes `@codemirror/*` |
+| `@aurea-uds/react/code-editor` | `codemirror` and the `@codemirror/*` packages |
 | `@aurea-uds/react/data-grid` | `@tanstack/react-table` |
 | `@aurea-uds/react/qrcode` | `qr` |
 | `@aurea-uds/react/calendar` | `react-day-picker` |
 | `@aurea-uds/react/chart` | `recharts` |
 | `@aurea-uds/react/graph` | `@xyflow/react` |
 
-### O mapa (`DependencyGraph`) e as três peças opcionais dele
+### The graph (`DependencyGraph`) and its three optional pieces
 
-Cada uma só é carregada quando a função dela é pedida. Sem ela, o mapa avisa uma vez no console e
-segue sem a função — não quebra a tela.
+Each one is loaded only when its feature is requested. Without it, the graph warns once in the console
+and carries on without the feature — it does not break the screen.
 
-| Para | Instale |
+| For | Install |
 |---|---|
-| arrumar em camadas, em árvore ou em círculo (`layout="layered"`, `"tree"`, `"radial"`) | `elkjs` |
-| a linha que desvia de um nó depois de arrumar à mão | `@tisoap/react-flow-smart-edge` |
-| a foto do mapa (`toPng()`, `toSvg()`) | `modern-screenshot` |
+| layered, tree or circular layout (`layout="layered"`, `"tree"`, `"radial"`) | `elkjs` |
+| the edge that routes around a node after manual arranging | `@tisoap/react-flow-smart-edge` |
+| an image of the graph (`toPng()`, `toSvg()`) | `modern-screenshot` |
 
-**O arrumador fora da tela principal (`layoutWorker`).** Num mapa grande, a arrumação pode prender a
-tela por alguns segundos. O mapa aceita um trabalhador (Web Worker) que o app cria — cada empacotador
-cria trabalhador do seu jeito, e por isso quem entrega é o app. A Aurea publica o trabalhador por um
-caminho dela, `@aurea-uds/react/graph-worker`, que traz o do `elkjs` (o peer opcional) junto — o app
-não importa o motor por fora. No Vite:
+**Layout off the main thread (`layoutWorker`).** On a large graph, the layout can freeze the screen for a
+few seconds. The graph accepts a Web Worker that the app creates — every bundler creates workers its own
+way, so the app is the one that supplies it. Aurea publishes the worker on its own entry point,
+`@aurea-uds/react/graph-worker`, which brings the `elkjs` worker (the optional peer) along — the app does
+not import the engine separately. In Vite:
 
 ```js
 import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
@@ -70,42 +70,42 @@ import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
 <DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />
 ```
 
-Em qualquer outro empacotador, o jeito que sempre funciona: copie `node_modules/elkjs/lib/elk-worker.min.js`
-para a pasta pública do app e passe `layoutWorker={() => new Worker("/elk-worker.min.js")}`.
+In any other bundler, the way that always works: copy `node_modules/elkjs/lib/elk-worker.min.js` to the
+app's public folder and pass `layoutWorker={() => new Worker("/elk-worker.min.js")}`.
 
 ## Hooks
 
-Quatro são públicos, e eles são a parte da API que **não tem página no catálogo** — o catálogo
-documenta componentes, e hook não é componente. Enquanto isso não mudar, é aqui que eles estão
-escritos.
+Four are public, and they are the part of the API that **has no page in the catalog** — the catalog
+documents components, and a hook is not a component. Until that changes, this is where they are written
+down.
 
 ```js
 import {AureaProvider, useToast} from "@aurea-uds/react";
 
 function BotaoSalvar() {
-  const toast = useToast();                                  // dentro do AureaProvider
+  const toast = useToast();                                  // inside AureaProvider
   return <Button onClick={() => toast.add({
-    title: "Salvo",
-    description: "Dois arquivos enviados.",
+    title: "Saved",
+    description: "Two files uploaded.",
     type: "success",                                         // info | success | warning | danger
-  })}>Salvar</Button>;
+  })}>Save</Button>;
 }
 ```
 
-A pilha se desenha sozinha: o `AureaProvider` já monta o viewport dos toasts, então não há
-`<Toaster/>` para posicionar nem um segundo provider para instalar.
+The stack draws itself: `AureaProvider` already mounts the toast viewport, so there is no `<Toaster/>` to
+place and no second provider to install.
 
-| Hook | O que entrega |
+| Hook | What it returns |
 |---|---|
-| `useToast()` | `add({title, description, type})`, mais `close(id)` e a lista viva. A fila é a do Base UI |
-| `useAureaTheme()` | lê e muda **os dois** eixos no `<html>`: `theme` (`dark`/`light`) e `density`. `theme` é `null` no servidor — não desenhe o que depende do tema até ele deixar de ser |
-| `useAureaStrings()` | o dicionário de frases, somado ao que você passou ao provider |
-| `useSpriteUrl()` | de onde o sprite de ícones está sendo carregado |
+| `useToast()` | `add({title, description, type})`, plus `close(id)` and the live list. The queue is Base UI's |
+| `useAureaTheme()` | reads and changes **both** axes on `<html>`: `theme` (`dark`/`light`) and `density`. `theme` is `null` on the server — do not render what depends on the theme until it stops being `null` |
+| `useAureaStrings()` | the string dictionary, merged with what you passed to the provider |
+| `useSpriteUrl()` | where the icon sprite is being loaded from |
 
-## Requisitos
+## Requirements
 
-React 19 ou mais novo. No React 19 `ref` é prop comum, e os tipos dependem disso.
+React 19 or newer. In React 19 `ref` is a regular prop, and the types depend on that.
 
-## Licença
+## License
 
 Apache-2.0.

package/dist/graph.js

@@ -88,6 +88,9 @@ const ESCALA_MINIMA = 0.1;
 // do texto comum, e é ele que entra. Mais os 2 × 4px do fundo do rótulo (padrão do motor) e uma
 // folga de 16px de cada lado para a linha aparecer antes e depois dele. Nunca encolhe abaixo de
 // `VAO_X`: grafo sem rótulo sai idêntico ao de antes.
+// ⚠ A MEDIDA É DA FONTE DE ANTES (anotado em 09/11/2026): a IBM Plex Sans saiu na 0.13.0, e a fonte do texto é a
+// Inter desde a 0.39.0 (ADR-0077). O 0,6 não foi medido de novo com ela — trocar o número muda o arranjo do mapa,
+// e isso é mudança de aparência, com imagem antes.
 const FONTE_DO_ROTULO = 13, GLIFO_DO_ROTULO = 0.6, FUNDO_X = 8, FOLGA_X = 32;
 const vaoEntreColunas = (edges) => Math.max(VAO_X, ...edges.map(e => e.label ? Math.ceil(e.label.length * FONTE_DO_ROTULO * GLIFO_DO_ROTULO) + FUNDO_X + FOLGA_X : 0));
 const medidasDoNo = (texto) => texto === "lg"

package/dist/inputs-client.d.ts

@@ -316,7 +316,7 @@ export declare function OTPField({ length, value, defaultValue, onValueChange, m
     variant?: "primary" | "secondary";
 }): React.JSX.Element;
 export type SegmentedControlSelectedStyle = "current" | "neutral" | "contrast" | "brand" | "ring" | "dot" | "emphasis";
-export declare function SegmentedControl({ items, value, onChange, label, fullWidth, size, selectedStyle, wrap, orientation }: {
+export declare function SegmentedControl({ items, value, onChange, label, fullWidth, size, selectedStyle, wrap, orientation, className }: {
     items: Array<{
         value: string;
         label: ReactNode;
@@ -331,6 +331,7 @@ export declare function SegmentedControl({ items, value, onChange, label, fullWi
     selectedStyle?: SegmentedControlSelectedStyle;
     wrap?: boolean;
     orientation?: "horizontal" | "vertical";
+    className?: string;
 }): React.JSX.Element;
 export interface ComboboxOption {
     value: string;

package/dist/inputs-client.js

@@ -732,13 +732,13 @@ export function OTPField({ length, value, defaultValue, onValueChange, mask, dis
 }
 // O SITE B (aprovado pela bancada em 01/11/2026, os itens 3 e 8): `items[].icon` (o escolhido troca sozinho para a forma
 // cheia), `size="2xl"` (segmento de 48), `wrap` (quebra linha, o trilho com canto 22) e `orientation="vertical"` (em pé).
-export function SegmentedControl({ items, value, onChange, label, fullWidth, size = "md", selectedStyle, wrap, orientation = "horizontal" }) {
+export function SegmentedControl({ items, value, onChange, label, fullWidth, size = "md", selectedStyle, wrap, orientation = "horizontal", className }) {
     const s = useAureaStrings();
     // S-04 (05/11/2026): o escolhido DESLIZA de um segmento ao outro, em vez de pular (`useDeslize`, no `internal`). Só na
     // escolha: com `href` a troca é de página, e a página nova já nasce com o escolhido no lugar.
     const fila = React.useRef(null);
     useDeslize(fila, ".active", value);
-    const classe = cx("segmented", fullWidth && "segmented-full", size === "sm" && "segmented-sm", size === "lg" && "segmented-lg", size === "xl" && "segmented-xl", size === "2xl" && "segmented-2xl", wrap && orientation !== "vertical" && "segmented-wrap", orientation === "vertical" && "segmented-vertical");
+    const classe = cx("segmented", fullWidth && "segmented-full", size === "sm" && "segmented-sm", size === "lg" && "segmented-lg", size === "xl" && "segmented-xl", size === "2xl" && "segmented-2xl", wrap && orientation !== "vertical" && "segmented-wrap", orientation === "vertical" && "segmented-vertical", className);
     const miolo = (i) => i.icon ? _jsxs(_Fragment, { children: [_jsx(Icon, { name: i.icon, weight: i.value === value ? "fill" : "regular" }), i.label] }) : i.label;
     if (items.length > 0 && items.every(i => i.href != null))
         return _jsx("nav", { className: classe, "data-segment-style": selectedStyle, "aria-label": label ?? s.optionsLabel, children: items.map(i => _jsx("a", { href: i.href, className: i.value === value ? "active" : undefined, "aria-current": i.value === value ? "page" : undefined, children: miolo(i) }, i.value)) });

package/dist/markup.d.ts

@@ -465,10 +465,12 @@ export declare function AspectRatio({ ratio, className, style, ...props }: HTMLA
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, RefAttributes<HTMLAnchorElement> {
     /** Abre noutra aba e mostra a seta. */
     external?: boolean;
+    /** O aviso que o leitor de tela ouve num link `external`. Padrão: "(opens in a new tab)". */
+    externalLabel?: string;
     /** Não navega: sai sem `href` e com `aria-disabled`. */
     disabled?: boolean;
 }
-export declare function Link({ external, disabled, href, target, rel, className, children, ...props }: LinkProps): React.JSX.Element;
+export declare function Link({ external, externalLabel, disabled, href, target, rel, className, children, ...props }: LinkProps): React.JSX.Element;
 export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
 export interface ColorSwatchProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     /** Qualquer cor do CSS: `#f0c200`, `oklch(…)`, `var(--primary)`. */

package/dist/markup.js

@@ -311,8 +311,9 @@ export function InputGroupAddon({ side = "start", layout = "inline", className,
 // escreve o `padding-top: 56.25%` de 2015, ou esquece o `min-width: 0` que impede a caixa de
 // estourar dentro de um grid.
 export function AspectRatio({ ratio = 1, className, style, ...props }) { return _jsx("div", { className: cx("aspect-ratio", className), style: { aspectRatio: ratio, ...style }, ...props }); }
-export function Link({ external, disabled, href, target, rel, className, children, ...props }) {
-    return _jsxs("a", { className: cx("link", className), href: disabled ? undefined : href, "aria-disabled": disabled || undefined, target: external ? target ?? "_blank" : target, rel: external ? rel ?? "noopener noreferrer" : rel, ...props, children: [children, external && _jsx("span", { className: "link-external", "aria-hidden": "true" })] });
+const AVISO_DE_NOVA_ABA = "(opens in a new tab)";
+export function Link({ external, externalLabel, disabled, href, target, rel, className, children, ...props }) {
+    return _jsxs("a", { className: cx("link", className), href: disabled ? undefined : href, "aria-disabled": disabled || undefined, target: external ? target ?? "_blank" : target, rel: external ? rel ?? "noopener noreferrer" : rel, ...props, children: [children, external && _jsx("span", { className: "link-external", "aria-hidden": "true" }), external && _jsx("span", { className: "sr-only", children: " " + (externalLabel ?? AVISO_DE_NOVA_ABA) })] });
 }
 // Transparente quando o texto diz alfa abaixo de 1 (hex de 4 ou 8 dígitos, `rgba()`, `hsla()`…). Cor de token ou
 // `oklch()` a marcação não lê: fica sem xadrez.

package/dist/system.js

@@ -60,7 +60,12 @@ export function AureaProvider({ children, strings, direction = "ltr", spriteUrl
     // GAR-14: os avisos presos a um botão vivem num gerenciador do MÓDULO (ver `avisosAncorados`), então
     // só o provedor de FORA monta o hospedeiro deles — com dois, cada aviso apareceria duas vezes.
     const deFora = !React.useContext(DentroDoProviderContext);
-    return _jsx(DentroDoProviderContext.Provider, { value: true, children: _jsx(StringsContext.Provider, { value: value, children: _jsx(SpriteContext.Provider, { value: spriteUrl, children: _jsx(PortalContext.Provider, { value: portalContainer, children: _jsx(ThemeContext.Provider, { value: tema, children: _jsx(DensityContext.Provider, { value: dens, children: _jsx(DirectionProvider, { direction: direction, children: _jsx(BaseToast.Provider, { timeout: TEMPO_DO_AVISO, children: _jsxs(BaseTooltip.Provider, { children: [children, _jsx(AureaToastViewport, { placement: toastPlacement }), deFora && _jsx(BaseToast.Provider, { toastManager: avisosAncorados, children: _jsx(AvisosAncorados, {}) })] }) }) }) }) }) }) }) }) });
+    // 2-C (a), 0.63.0: a REGIÃO DE AVISOS também é só do provedor de fora. Com um provedor dentro de outro, cada um montava
+    // a sua — duas regiões "Notifications" na página (o `landmark-unique` do axe). O de dentro não abre gerenciador nem
+    // região: o `useToast()` dele cai no gerenciador de fora, e o aviso aparece na pilha de fora (o `toastPlacement` do de
+    // dentro não vale).
+    const miolo = _jsxs(BaseTooltip.Provider, { children: [children, deFora && _jsx(AureaToastViewport, { placement: toastPlacement }), deFora && _jsx(BaseToast.Provider, { toastManager: avisosAncorados, children: _jsx(AvisosAncorados, {}) })] });
+    return _jsx(DentroDoProviderContext.Provider, { value: true, children: _jsx(StringsContext.Provider, { value: value, children: _jsx(SpriteContext.Provider, { value: spriteUrl, children: _jsx(PortalContext.Provider, { value: portalContainer, children: _jsx(ThemeContext.Provider, { value: tema, children: _jsx(DensityContext.Provider, { value: dens, children: _jsx(DirectionProvider, { direction: direction, children: deFora ? _jsx(BaseToast.Provider, { timeout: TEMPO_DO_AVISO, children: miolo }) : miolo }) }) }) }) }) }) });
 }
 // O esquema do sistema, para a preferência `"system"`. Sem `matchMedia` (servidor, jsdom), claro.
 const ESQUEMA_ESCURO = "(prefers-color-scheme: dark)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",