@aurea-uds/react 0.1.0

package/dist/data-grid.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+// SUBPATH PRÓPRIO (ver ./qrcode): é o único componente que precisa do @tanstack/react-table,
+// que é peer OPCIONAL. Table, DataList, KPI e Timeline ficam em /data-display sem essa conta.
+import React from "react";
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from "@tanstack/react-table";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+import { SearchField } from "./inputs.js";
+import { Pagination } from "./navigation.js";
+// DataGrid (Fase 4): TanStack Table v8 (8.21.3) headless + pele Aurea — sort,
+// filtro global, paginação e seleção por checkbox. v8 porque o v9 ainda é beta
+// (07/2026; decisão no ROADMAP). A pele reusa .table-wrap/th/td; o estado é
+// interno (não controlado — controlar de fora só quando houver demanda real).
+// A11y: aria-sort fica SÓ no th ordenado (padrão APG) e o cabeçalho ordenável é
+// um <button> de verdade; a linha selecionada usa data-selected apenas para
+// estilo — aria-selected é inválido em role=table, o estado acessível é o
+// próprio checkbox. A paginação reusa o componente Pagination.
+function GridCheck({ label, indeterminate, ...props }) {
+    return _jsxs("label", { className: "checkbox", children: [_jsx("input", { type: "checkbox", ref: el => { if (el)
+                    el.indeterminate = !!indeterminate; }, ...props }), _jsx("span", { className: "control-mark" }), _jsx("span", { className: "sr-only", children: label })] });
+}
+export function DataGrid({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className }) {
+    const s = useAureaStrings();
+    const [sorting, setSorting] = React.useState([]);
+    const [globalFilter, setGlobalFilter] = React.useState("");
+    const [rowSelection, setRowSelection] = React.useState({});
+    // Sem getRowId a seleção do TanStack é por ÍNDICE: trocar/reordenar data faria o
+    // checkbox "seguir" a posição e marcar OUTRO registro (auditoria 18/07/2026,
+    // ALTO 3). Sem id estável a seleção não sobrevive à mudança de dados — limpa.
+    // Com getRowId ela persiste corretamente; prefira passá-lo quando selectable.
+    const prevData = React.useRef(data);
+    React.useEffect(() => {
+        if (prevData.current === data)
+            return;
+        prevData.current = data;
+        if (!getRowId && Object.keys(rowSelection).length) {
+            setRowSelection({});
+            onSelectionChange?.([]);
+        }
+    }, [data]);
+    const allColumns = React.useMemo(() => selectable ? [{
+            id: "select", enableSorting: false,
+            header: ({ table }) => _jsx(GridCheck, { label: s.dataGridSelectAll, checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() }),
+            cell: ({ row }) => _jsx(GridCheck, { label: s.dataGridSelectRow, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler() }),
+        }, ...columns] : columns, [selectable, columns, s]);
+    const table = useReactTable({
+        data, columns: allColumns, getRowId,
+        state: { sorting, globalFilter, rowSelection },
+        onSortingChange: setSorting,
+        onGlobalFilterChange: setGlobalFilter,
+        // emite as linhas ORIGINAIS já aqui (não em effect): getPreFilteredRowModel
+        // ignora filtro/página, então a seleção sobrevive a ambos.
+        onRowSelectionChange: updater => {
+            const next = typeof updater === "function" ? updater(rowSelection) : updater;
+            setRowSelection(next);
+            onSelectionChange?.(table.getPreFilteredRowModel().flatRows.filter(r => next[r.id]).map(r => r.original));
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        enableRowSelection: !!selectable,
+        ...(pageSize ? { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageSize } } } : {}),
+    });
+    const rows = table.getRowModel().rows;
+    const sortIcon = (dir) => dir === "asc" ? "chevron--sort--up" : dir === "desc" ? "chevron--sort--down" : "chevron--sort";
+    return _jsxs("div", { className: cx("datagrid", className), children: [filterable && _jsx(SearchField, { value: globalFilter, onChange: e => setGlobalFilter(e.target.value), placeholder: s.dataGridFilter, "aria-label": s.dataGridFilter }), _jsx("div", { className: "table-wrap", role: "region", "aria-label": label ?? s.tableLabel, tabIndex: 0, children: _jsxs("table", { children: [_jsx("thead", { children: table.getHeaderGroups().map(hg => _jsx("tr", { children: hg.headers.map(h => {
+                                    const dir = h.column.getIsSorted();
+                                    return _jsx("th", { colSpan: h.colSpan, className: h.column.id === "select" ? "datagrid-selcol" : undefined, "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : undefined, children: h.isPlaceholder ? null : h.column.getCanSort()
+                                            ? _jsxs("button", { type: "button", className: "datagrid-sort", onClick: h.column.getToggleSortingHandler(), children: [flexRender(h.column.columnDef.header, h.getContext()), _jsx(Icon, { name: sortIcon(dir), size: "sm", className: "datagrid-sort-icon" })] })
+                                            : flexRender(h.column.columnDef.header, h.getContext()) }, h.id);
+                                }) }, hg.id)) }), _jsx("tbody", { children: rows.length ? rows.map(row => _jsx("tr", { "data-selected": row.getIsSelected() || undefined, children: row.getVisibleCells().map(cell => _jsx("td", { className: cell.column.id === "select" ? "datagrid-selcol" : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id))
+                                : _jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "datagrid-empty", children: s.dataGridEmpty }) }) })] }) }), pageSize != null && table.getPageCount() > 1 && _jsx(Pagination, { page: table.getState().pagination.pageIndex + 1, total: table.getPageCount(), onPageChange: p => table.setPageIndex(p - 1) })] });
+}

package/dist/disclosure.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export declare function Accordion({ items }: {
+    items: Array<{
+        id: string;
+        title: ReactNode;
+        content: ReactNode;
+    }>;
+}): import("react").JSX.Element;

package/dist/disclosure.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Accordion({ items }) { return _jsx("div", { className: "accordion", children: items.map(i => _jsxs("details", { children: [_jsx("summary", { children: i.title }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) }); }

package/dist/feedback.d.ts

@@ -0,0 +1,53 @@
+import React, { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type IconName } from "./system.js";
+import { type OverlaySide } from "./overlays.js";
+export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review";
+export declare function Badge({ variant, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant;
+}): React.JSX.Element;
+export type StatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "running" | "success" | "warning" | "danger" | "info";
+export declare function Status({ variant, children, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
+    variant?: StatusVariant;
+}): React.JSX.Element;
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+export declare function Alert({ variant, title, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    variant?: AlertVariant;
+    title?: ReactNode;
+}): React.JSX.Element;
+export type BannerVariant = AlertVariant;
+export declare function Banner({ variant, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    variant?: BannerVariant;
+    title?: ReactNode;
+    icon?: IconName;
+    onDismiss?: () => void;
+}): React.JSX.Element;
+export declare function Progress({ value, label }: {
+    value: number;
+    label?: string;
+}): React.JSX.Element;
+export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function EmptyState({ icon, title, titleAs: TitleTag, description, action }: {
+    icon?: IconName;
+    title: ReactNode;
+    titleAs?: "h2" | "h3" | "h4" | "p";
+    description?: ReactNode;
+    action?: ReactNode;
+}): React.JSX.Element;
+export interface NotificationItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    icon?: IconName;
+    read?: boolean;
+    group?: string;
+    onClick?: () => void;
+}
+export declare function NotificationCenter({ items, onItemClick, onMarkAllRead, label, icon, side }: {
+    items: NotificationItem[];
+    onItemClick?: (item: NotificationItem) => void;
+    onMarkAllRead?: () => void;
+    label?: string;
+    icon?: IconName;
+    side?: OverlaySide;
+}): React.JSX.Element;

package/dist/feedback.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import React from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+import { Button, IconButton } from "./actions.js";
+export function Badge({ variant = "neutral", className, ...props }) { return _jsx("span", { className: cx("badge", variant !== "neutral" && `badge-${variant}`, className), ...props }); }
+// Status (DIRECTION §3.6): condição OPERACIONAL — ponto + rótulo. Não é Badge: Badge é
+// metadado curto num pill; Status diz em que estado a coisa está. Reusa o .status-dot que
+// já existia solto. A variante colore só o PONTO (currentColor); o rótulo fica legível em
+// --foreground. Cor não é o único sinal — quem diz o estado é o texto (WCAG 1.4.1); o
+// ponto é decorativo e sai do leitor de tela. ponytail: rótulo é do consumidor (sem i18n
+// nova) — a variante é só a cor.
+export function Status({ variant = "neutral", children, className, ...props }) { return _jsxs("span", { className: cx("status", variant !== "neutral" && `status-${variant}`, className), ...props, children: [_jsx("i", { className: "status-dot", "aria-hidden": "true" }), _jsx("span", { className: "status-label", children: children })] }); }
+export function Alert({ variant = "info", title, children, className, ...props }) { return _jsxs("div", { className: cx("alert", `alert-${variant}`, className), role: variant === "danger" ? "alert" : "status", ...props, children: [title && _jsx("strong", { children: title }), children] }); }
+export function Banner({ variant = "info", title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("banner", `banner-${variant}`, className), role: variant === "danger" ? "alert" : "status", ...props, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
+export function Progress({ value, label }) { return _jsx("div", { children: _jsx("div", { className: "progress", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: _jsx("span", { style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }) }); }
+export function Skeleton({ className, ...props }) { return _jsx("div", { className: cx("skeleton", className), "aria-hidden": "true", ...props }); }
+// titleAs: o nível do título é do DOCUMENTO, não do componente. Fixo em h3, um empty state
+// no alto de uma página vira h1→h3 e a hierarquia quebra (axe heading-order). Default h3
+// para não mexer em quem já consome; quem sabe o contexto passa o nível certo.
+export function EmptyState({ icon = "document--blank", title, titleAs: TitleTag = "h3", description, action }) { return _jsxs("div", { className: "empty-state", children: [_jsx(Icon, { name: icon, size: "xl" }), _jsx(TitleTag, { className: "empty-title", children: title }), description && _jsx("p", { className: "muted", children: description }), action] }); }
+function groupNotifications(items) {
+    const out = [];
+    for (const it of items) {
+        const last = out[out.length - 1];
+        if (last && last.label === it.group)
+            last.items.push(it);
+        else
+            out.push({ label: it.group, items: [it] });
+    }
+    return out;
+}
+export function NotificationCenter({ items, onItemClick, onMarkAllRead, label, icon = "notification", side = "bottom" }) {
+    const s = useAureaStrings();
+    const title = label ?? s.notificationsLabel;
+    const unread = items.filter(i => !i.read).length;
+    const groups = groupNotifications(items);
+    const baseId = React.useId();
+    const seen = React.useRef(undefined);
+    const [announce, setAnnounce] = React.useState("");
+    React.useEffect(() => {
+        const ids = new Set(items.map(i => i.id));
+        if (seen.current === undefined) {
+            seen.current = ids;
+            return;
+        }
+        const fresh = items.filter(i => !seen.current.has(i.id)).length;
+        seen.current = ids;
+        // Texto idêntico duas vezes seguidas não muta o DOM e o leitor silencia a 2ª
+        // chegada (auditoria 18/07/2026, MÉDIO 4). Um NBSP alternado no fim força a
+        // mutação sem mudar o que se ouve.
+        if (fresh)
+            setAnnounce(prev => { const text = `${fresh} ${s.notificationNew}`; return prev === text ? text + " " : text; });
+    }, [items, s.notificationNew]);
+    const renderRow = (it) => {
+        const body = _jsxs(_Fragment, { children: [_jsx("span", { className: "notification-dot", "aria-hidden": "true" }), _jsxs("span", { className: "notification-item-title", children: [it.icon && _jsx(Icon, { name: it.icon, size: "sm" }), !it.read && _jsxs("span", { className: "sr-only", children: [s.notificationUnread, " "] }), it.title] }), it.time && _jsx("span", { className: "notification-time", children: it.time }), it.description && _jsx("span", { className: "notification-item-desc", children: it.description })] });
+        return it.onClick || onItemClick
+            ? _jsx("button", { type: "button", className: "notification-item", "data-read": it.read || undefined, onClick: () => { it.onClick?.(); onItemClick?.(it); }, children: body })
+            : _jsx("div", { className: "notification-item", "data-read": it.read || undefined, children: body });
+    };
+    return _jsxs(BasePopover.Root, { children: [_jsxs("span", { className: "notification-trigger", children: [_jsx(BasePopover.Trigger, { render: _jsx(IconButton, { variant: "ghost", icon: icon, label: unread ? `${title} (${unread})` : title }) }), unread > 0 && _jsx("span", { className: "notification-count", "aria-hidden": "true", children: unread > 99 ? "99+" : unread })] }), _jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover notification-panel", "aria-label": title, children: [_jsxs("div", { className: "notification-head", children: [_jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), unread > 0 && onMarkAllRead && _jsx(Button, { variant: "ghost", size: "sm", onClick: onMarkAllRead, children: s.notificationMarkAll })] }), items.length
+                                ? _jsx("div", { className: "notification-list", children: groups.map((g, gi) => {
+                                        const gid = baseId + gi;
+                                        return _jsxs(React.Fragment, { children: [g.label && _jsx("p", { className: "notification-group-label", id: gid, children: g.label }), _jsx("ul", { className: "notification-sublist", "aria-labelledby": g.label ? gid : undefined, children: g.items.map(it => _jsx("li", { children: renderRow(it) }, it.id)) })] }, gi);
+                                    }) })
+                                : _jsx("p", { className: "notification-empty", children: s.notificationEmpty })] }) }) }), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
+}

package/dist/file-input.d.ts

@@ -0,0 +1,25 @@
+import React, { type ReactNode } from "react";
+export interface FileRejection {
+    file: File;
+    reason: string;
+}
+export interface UploadContext {
+    signal: AbortSignal;
+    onProgress: (fraction: number) => void;
+}
+export type UploadFn = (file: File, ctx: UploadContext) => Promise<void>;
+export declare function matchesAccept(file: {
+    name: string;
+    type: string;
+}, accept?: string): boolean;
+export declare function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className }: {
+    accept?: string;
+    maxSize?: number;
+    multiple?: boolean;
+    onFilesChange?: (files: File[]) => void;
+    upload?: UploadFn;
+    label?: ReactNode;
+    hint?: ReactNode;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/file-input.js

@@ -0,0 +1,106 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import React from "react";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+import { IconButton } from "./actions.js";
+// matchesAccept espelha o algoritmo do atributo accept do HTML: extensão (.json),
+// grupo de tipo (image/*) ou MIME exato (application/json). accept vazio = tudo.
+export function matchesAccept(file, accept) {
+    const tokens = (accept ?? "").split(",").map(t => t.trim().toLowerCase()).filter(Boolean);
+    if (!tokens.length)
+        return true;
+    const name = file.name.toLowerCase(), type = file.type.toLowerCase();
+    return tokens.some(t => t.startsWith(".") ? name.endsWith(t) : t.endsWith("/*") ? type.startsWith(t.slice(0, -1)) : type === t);
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ["KB", "MB", "GB"];
+    let n = bytes / 1024, i = 0;
+    while (n >= 1024 && i < units.length - 1) {
+        n /= 1024;
+        i++;
+    }
+    return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
+}
+export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className }) {
+    const s = useAureaStrings();
+    const autoId = React.useId();
+    const inputId = id ?? autoId;
+    const nextId = React.useRef(0);
+    const [files, setFiles] = React.useState([]);
+    const [rejected, setRejected] = React.useState([]);
+    const [announce, setAnnounce] = React.useState("");
+    const [dragging, setDragging] = React.useState(false);
+    const controllers = React.useRef(new Map());
+    // Desmontar aborta tudo em voo — sem isso requisições e closures sobrevivem à
+    // tela (auditoria 18/07/2026, MÉDIO 5). Concorrência/agenda é do consumidor: o
+    // transporte é dele (UploadFn); o componente dispara um upload() por arquivo aceito.
+    React.useEffect(() => { const map = controllers.current; return () => map.forEach(c => c.abort()); }, []);
+    const emit = (next) => { setFiles(next); onFilesChange?.(next.map(f => f.file)); };
+    const patch = (fid, p) => setFiles(prev => prev.map(e => e.id === fid ? { ...e, ...p } : e));
+    const abortId = (fid) => controllers.current.get(fid)?.abort();
+    // Cada arquivo envia por conta própria (promessa independente + catch por arquivo):
+    // erro ou cancelamento de um não derruba a fila. Cancelar = abort() no controller;
+    // no catch, signal.aborted distingue "cancelado" de "falhou" seja qual for o erro
+    // que o consumidor lançou. patch é setState funcional → seguro sob closures velhas.
+    const startUpload = (fid, file) => {
+        if (!upload)
+            return;
+        const c = new AbortController();
+        controllers.current.set(fid, c);
+        patch(fid, { status: "uploading", progress: 0 });
+        (async () => {
+            try {
+                await upload(file, { signal: c.signal, onProgress: f => patch(fid, { progress: Math.max(0, Math.min(1, f)) }) });
+                patch(fid, { status: "done", progress: 1 });
+                setAnnounce(`${s.uploadComplete}: ${file.name}`);
+            }
+            catch {
+                const st = c.signal.aborted ? "canceled" : "error";
+                patch(fid, { status: st });
+                setAnnounce(`${st === "canceled" ? s.uploadCanceled : s.uploadError}: ${file.name}`);
+            }
+            finally {
+                controllers.current.delete(fid);
+            }
+        })();
+    };
+    const add = (list) => {
+        if (!list || !list.length)
+            return;
+        const ok = [], bad = [];
+        for (const file of Array.from(list)) {
+            const reason = !matchesAccept(file, accept) ? s.fileWrongType : (maxSize != null && file.size > maxSize) ? s.fileTooLarge : null;
+            if (reason)
+                bad.push({ file, reason });
+            else
+                ok.push({ id: nextId.current++, file });
+        }
+        // multiple acumula; single substitui (input nativo já entrega 1 arquivo).
+        // só emite se algo passou — drop 100% rejeitado não mexe na lista atual.
+        const added = multiple ? ok : ok.slice(-1);
+        if (added.length) {
+            if (!multiple)
+                files.forEach(f => abortId(f.id)); // single troca o arquivo: aborta o envio anterior
+            emit(multiple ? [...files, ...added] : added);
+            added.forEach(e => startUpload(e.id, e.file));
+        }
+        setRejected(bad);
+        setAnnounce([ok.length && `${s.fileAdded}: ${ok.map(f => f.file.name).join(", ")}`, ...bad.map(b => `${b.reason}: ${b.file.name}`)].filter(Boolean).join(". "));
+    };
+    const remove = (rid) => { const f = files.find(x => x.id === rid); abortId(rid); emit(files.filter(x => x.id !== rid)); setAnnounce(f ? `${s.fileRemoved}: ${f.file.name}` : ""); };
+    return _jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs("label", { className: "dropzone", "data-dragging": dragging || undefined, onDragOver: e => { e.preventDefault(); setDragging(true); }, onDragLeave: e => { if (!e.currentTarget.contains(e.relatedTarget))
+                    setDragging(false); }, onDrop: e => { e.preventDefault(); setDragging(false); add(e.dataTransfer.files); }, children: [_jsx("input", { id: inputId, type: "file", className: "sr-only", accept: accept, multiple: multiple, onChange: e => { add(e.target.files); e.target.value = ""; } }), _jsx(Icon, { name: "cloud--upload", size: "xl", className: "dropzone-icon" }), _jsx("strong", { children: s.fileDropPrompt }), hint && _jsx("span", { className: "dropzone-hint", children: hint })] }), files.length > 0 && _jsx("ul", { className: "file-list", children: files.map(({ id, file, status, progress = 0 }) => {
+                    // A barra reusa .progress + .file-progress (largura fixa em classe); só o
+                    // preenchimento (width %) fica inline, por ser data-driven. Erro reusa
+                    // .field-error. Como .file-progress não é usada nos docs, adicioná-la ao core
+                    // não muda pixel de screenshot nenhum (auditoria 18/07, M14: CSS não usado
+                    // pelos docs não altera baseline — a justificativa antiga estava invertida).
+                    const pct = Math.round(progress * 100);
+                    return _jsxs("li", { className: "file-item", children: [_jsx(Icon, { name: "document" }), _jsx("span", { className: "file-name", children: file.name }), status === "uploading" ? _jsxs(_Fragment, { children: [_jsx("div", { className: "progress file-progress", role: "progressbar", "aria-label": `${s.uploadSending} ${file.name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: _jsx("span", { style: { width: `${pct}%` } }) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.uploadCancel} ${file.name}`, onClick: () => abortId(id) })] }) : (status === "error" || status === "canceled") ? _jsxs(_Fragment, { children: [_jsx("span", { className: "field-error", children: status === "error" ? s.uploadError : s.uploadCanceled }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "restart", label: `${s.uploadRetry} ${file.name}`, onClick: () => startUpload(id, file) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${file.name}`, onClick: () => remove(id) })] }) : _jsxs(_Fragment, { children: [status === "done" && _jsx(Icon, { name: "checkmark--filled" }), _jsx("span", { className: "file-size", children: formatSize(file.size) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${file.name}`, onClick: () => remove(id) })] })] }, id);
+                }) }), rejected.map((r, n) => _jsxs("span", { className: "field-error", children: [r.reason, ": ", r.file.name] }, n)), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
+}

package/dist/identity.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export declare function Avatar({ src, alt, fallback, size, className }: {
+    src?: string;
+    alt?: string;
+    fallback?: ReactNode;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/identity.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./internal.js";
+export function Avatar({ src, alt = "", fallback, size = 40, className }) { return _jsx("span", { className: cx("avatar", className), style: { width: size, height: size }, children: src ? _jsx("img", { src: src, alt: alt }) : fallback }); }

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { cx, defaultStrings, ptBR, useAureaStrings, defaultSpriteUrl, useSpriteUrl, type AureaStrings } from "./internal.js";
+export * from "./system.js";
+export * from "./actions.js";
+export * from "./feedback.js";
+export * from "./inputs.js";
+export * from "./navigation.js";
+export * from "./layout.js";
+export * from "./data-display.js";
+export * from "./identity.js";
+export * from "./disclosure.js";
+export * from "./overlays.js";
+export * from "./media.js";
+export * from "./communication.js";
+export * from "./code.js";

package/dist/index.js

@@ -0,0 +1,30 @@
+// @aurea-uds/react — a entrada principal.
+//
+// Fase 9 (achado A5). Antes: UM arquivo de 970 linhas, UM ponto de entrada, e oito dependências
+// de runtime — das quais seis serviam o CodeEditor, uma o DataGrid e uma o QRCode. Quem
+// instalava a biblioteca para usar um Button baixava um editor de código inteiro.
+//
+// Agora cada categoria do registry é um módulo, e cada módulo é um subpath. Este arquivo é a
+// porta de sempre: `import {Button} from "@aurea-uds/react"` continua funcionando e traz tudo
+// que não custa dependência.
+//
+// TRÊS COMPONENTES NÃO ENTRAM AQUI, e é o ponto da fase:
+//   CodeEditor  → "@aurea-uds/react/code-editor"  (CodeMirror, 6 peers opcionais)
+//   DataGrid    → "@aurea-uds/react/data-grid"    (@tanstack/react-table)
+//   QRCode      → "@aurea-uds/react/qrcode"       (qr)
+// Se estivessem neste barril, importar um Button carregaria os três — e a dependência opcional
+// que não estivesse instalada quebraria a importação. O peso é real, então a fronteira é real.
+export { cx, defaultStrings, ptBR, useAureaStrings, defaultSpriteUrl, useSpriteUrl } from "./internal.js";
+export * from "./system.js";
+export * from "./actions.js";
+export * from "./feedback.js";
+export * from "./inputs.js";
+export * from "./navigation.js";
+export * from "./layout.js";
+export * from "./data-display.js";
+export * from "./identity.js";
+export * from "./disclosure.js";
+export * from "./overlays.js";
+export * from "./media.js";
+export * from "./communication.js";
+export * from "./code.js";

package/dist/inputs.d.ts

@@ -0,0 +1,65 @@
+import React, { type HTMLAttributes, type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type IconName } from "./system.js";
+export { FileInput, matchesAccept, type FileRejection, type UploadContext, type UploadFn } from "./file-input.js";
+export interface FieldProps extends HTMLAttributes<HTMLLabelElement>, RefAttributes<HTMLLabelElement> {
+    label: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    htmlFor?: string;
+}
+export declare function Field({ label, hint, error, children, className, id, ...props }: FieldProps): React.JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement> & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<HTMLSelectElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement> & RefAttributes<HTMLTextAreaElement>, "ref"> & RefAttributes<HTMLTextAreaElement>>;
+export declare function SearchField({ icon, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    icon?: IconName;
+}): React.JSX.Element;
+export declare function Checkbox({ label, labelHidden, description, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    label: ReactNode;
+    labelHidden?: boolean;
+    description?: ReactNode;
+}): React.JSX.Element;
+export declare function Radio({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    label: ReactNode;
+}): React.JSX.Element;
+export declare function Switch({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    label: ReactNode;
+}): React.JSX.Element;
+export declare function Range(props: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>): React.JSX.Element;
+export declare function SegmentedControl({ items, value, onChange, label }: {
+    items: Array<{
+        value: string;
+        label: ReactNode;
+    }>;
+    value: string;
+    onChange: (v: string) => void;
+    label?: string;
+}): React.JSX.Element;
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export declare function Combobox({ items, value, onValueChange, placeholder, label, id, className }: {
+    items: ComboboxOption[];
+    value?: ComboboxOption | null;
+    onValueChange?: (v: ComboboxOption | null) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;
+export interface ComboboxOptGroup {
+    label: string;
+    items: ComboboxOption[];
+}
+export declare function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, id, className }: {
+    items: ComboboxOption[] | ComboboxOptGroup[];
+    value?: ComboboxOption[];
+    onValueChange?: (v: ComboboxOption[]) => void;
+    onInputChange?: (query: string) => void;
+    loading?: boolean;
+    placeholder?: string;
+    label?: ReactNode;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/inputs.js

@@ -0,0 +1,61 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import React, { forwardRef } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+import { IconButton } from "./actions.js";
+// FileInput mora em arquivo próprio (132 linhas — upload real, aborto, progresso) e é público
+// por aqui: a categoria dele é Inputs.
+export { FileInput, matchesAccept } from "./file-input.js";
+// hint e error entram como DESCRIÇÃO (aria-describedby) e não como parte do nome. Medido em
+// 30/07/2026: por estarem dentro do <label>, o nome acessível do campo virava "E-mail Usamos
+// para entrar Endereço inválido" — tudo grudado — e nada dizia ao leitor de tela que o valor
+// era inválido. Nome é o que o campo É; hint e erro são sobre o valor.
+// O controle vem como children, então a ligação é feita clonando-o: é a única forma de pôr
+// aria-describedby/aria-invalid no elemento certo sem obrigar o consumidor a repetir ids.
+export function Field({ label, hint, error, children, className, id, ...props }) {
+    const auto = React.useId();
+    const base = id ?? auto;
+    const idHint = hint ? `${base}-hint` : undefined;
+    const idErro = error ? `${base}-error` : undefined;
+    const descrito = [idHint, idErro].filter(Boolean).join(" ") || undefined;
+    const controle = React.isValidElement(children)
+        ? React.cloneElement(children, {
+            "aria-describedby": [children.props["aria-describedby"], descrito].filter(Boolean).join(" ") || undefined,
+            "aria-invalid": error ? true : children.props["aria-invalid"],
+        })
+        : children;
+    return _jsxs("label", { className: cx("field", className), id: id, ...props, children: [_jsxs("span", { className: "label", children: [label, hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controle, error && _jsx("span", { className: "field-error", id: idErro, children: error })] });
+}
+export const Input = forwardRef(function Input({ className, ...props }, ref) { return _jsx("input", { ref: ref, className: cx("input", className), ...props }); });
+export const Select = forwardRef(function Select({ className, ...props }, ref) { return _jsx("select", { ref: ref, className: cx("select", className), ...props }); });
+export const Textarea = forwardRef(function Textarea({ className, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", className), ...props }); });
+export function SearchField({ icon = "search", className, ...props }) { return _jsxs("div", { className: cx("input-wrap", className), children: [_jsx(Icon, { name: icon }), _jsx(Input, { type: "search", ...props })] }); }
+// labelHidden: coluna de seleção de tabela precisa do rótulo POR LINHA para o leitor de
+// tela ("Select Analyst"), mas mostrá-lo engorda a coluna. O rótulo continua no DOM, só
+// sai da tela (.sr-only) — nunca trocar por aria-label solto num <label> visível vazio.
+export function Checkbox({ label, labelHidden, description, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: "control-mark" }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
+export function Radio({ label, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: "control-mark" }), label] }); }
+export function Switch({ label, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: "switch-track" }), _jsx("span", { children: label })] }); }
+export function Range(props) { return _jsx("input", { className: cx("range", props.className), type: "range", ...props }); }
+export function SegmentedControl({ items, value, onChange, label }) { const s = useAureaStrings(); return _jsx("div", { className: "segmented", role: "group", "aria-label": label ?? s.optionsLabel, children: items.map(i => _jsx("button", { className: i.value === value ? "active" : undefined, "aria-pressed": i.value === value, onClick: () => onChange(i.value), children: i.label }, i.value)) }); }
+export function Combobox({ items, value, onValueChange, placeholder, label, id, className }) {
+    const s = useAureaStrings();
+    const autoId = React.useId();
+    const inputId = id ?? autoId;
+    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: "input" }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value) })] }) }) })] });
+}
+const isGrouped = (items) => items.length > 0 && "items" in items[0];
+export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, id, className }) {
+    const s = useAureaStrings();
+    const autoId = React.useId();
+    const inputId = id ?? autoId;
+    const renderItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
+    return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, filter: onInputChange ? null : undefined, onInputValueChange: onInputChange ? ((v, d) => { if (d.reason !== "item-press")
+            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input" })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: isGrouped(items)
+                                    ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderItem })] }, group.label)
+                                    : renderItem })] }) }) })] });
+}

package/dist/internal.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes, type RefAttributes } from "react";
+export declare const cx: (...v: Array<string | false | null | undefined>) => string;
+export interface AureaStrings {
+    close: string;
+    paginationLabel: string;
+    previous: string;
+    next: string;
+    breadcrumbLabel: string;
+    tabsLabel: string;
+    optionsLabel: string;
+    tableLabel: string;
+    commandLabel: string;
+    commandPlaceholder: string;
+    dismissNotification: string;
+    toolbarLabel: string;
+    comboboxEmpty: string;
+    comboboxClear: string;
+    comboboxOpen: string;
+    comboboxRemove: string;
+    comboboxLoading: string;
+    fileDropPrompt: string;
+    fileAdded: string;
+    fileRemoved: string;
+    fileRemove: string;
+    fileTooLarge: string;
+    fileWrongType: string;
+    treeLabel: string;
+    notificationsLabel: string;
+    notificationMarkAll: string;
+    notificationEmpty: string;
+    notificationUnread: string;
+    notificationNew: string;
+    dataGridFilter: string;
+    dataGridEmpty: string;
+    dataGridSelectAll: string;
+    dataGridSelectRow: string;
+    mediaPlayer: string;
+    mediaPlay: string;
+    mediaPause: string;
+    mediaMute: string;
+    mediaUnmute: string;
+    mediaSeek: string;
+    mediaVolume: string;
+    mediaCaptionsShow: string;
+    mediaCaptionsHide: string;
+    mediaSkipBack: string;
+    mediaSkipForward: string;
+    mediaFullscreenEnter: string;
+    mediaFullscreenExit: string;
+    uploadSending: string;
+    uploadCancel: string;
+    uploadRetry: string;
+    uploadError: string;
+    uploadCanceled: string;
+    uploadComplete: string;
+    codeEditor: string;
+    chatLabel: string;
+    chatMessage: string;
+    chatSend: string;
+    qrCode: string;
+    copyCode: string;
+    tocLabel: string;
+    navigationToggle: string;
+}
+export declare const defaultStrings: AureaStrings;
+export declare const ptBR: AureaStrings;
+export declare const StringsContext: import("react").Context<AureaStrings>;
+export declare const useAureaStrings: () => AureaStrings;
+export declare const defaultSpriteUrl = "/aurea-icons.svg";
+export declare const SpriteContext: import("react").Context<string>;
+export declare const useSpriteUrl: () => string;
+export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): import("react").JSX.Element;