@aurea-uds/react 0.49.1 → 0.51.0

package/dist/layout-client.d.ts

@@ -3,7 +3,7 @@ import { type Orientation, type Responsive } from "./pure.js";
 import { type IconButtonProps } from "./actions.js";
 import { type HeaderVariant, type HeaderTab, type SidebarVariant, type SidebarScrollbar, type SidebarEntry, type SidebarCollapsible, type SidebarIndicator } from "./navigation.js";
 declare function AppShellSidebarToggle(props: Omit<IconButtonProps, "icon" | "label" | "onClick" | "variant">): React.JSX.Element;
-export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, layout, sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle, sidebarShortcut, sidebarIndicator, sidebarPanel, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, layout, sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle, sidebarShortcut, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation?: ReactNode;
     navItems?: SidebarEntry[];
@@ -30,6 +30,10 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     topbarTabsLabel?: string;
     /** A ponta da linha das áreas (o `tabsEnd` do `Header`): a chave Web | Native da documentação. */
     topbarTabsEnd?: ReactNode;
+    /** A PONTA DA BARRA DE CIMA (MNT-37): o que fica na outra ponta, longe da marca e do `topbar` — a chave de tema, a
+     *  conta, o sino. É o `actions` do `Header`. No `layout="sidebar"` a barra do conteúdo passa a existir também quando o app
+     *  passa só isto; no `"docs"`, o botão da gaveta continua o último, depois delas. */
+    topbarActions?: ReactNode;
     /** 0.32.0: a barra de rolagem da lateral da esquerda — o `scrollbar` da `Sidebar`. Padrão `hover` (clara, só com o
      *  ponteiro em cima); `visible` é a barra sempre à vista. */
     sidebarScrollbar?: SidebarScrollbar;
@@ -60,6 +64,8 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     /** 4-F e 4-G: a trilha das seções com o painel (o `panel` da `Sidebar`) — os itens do primeiro nível de `navItems` viram
      *  seções. `docked`: o painel ao lado (recolher esconde o painel); `overlay`: o painel abre por cima. */
     sidebarPanel?: "docked" | "overlay";
+    /** A lateral de contraste (MNT-36): o `contrast` da `Sidebar` — escura nas duas telas. */
+    sidebarContrast?: boolean;
     /** AN-01: começa recolhida, sem controlar. A escolha vale até a janela cruzar 1280. */
     defaultSidebarCollapsed?: boolean;
     /** AN-01: avisa cada troca — pelo botão, ou pela largura cruzando 1280. Guardar a preferência é do app. */

package/dist/layout-client.js

@@ -166,7 +166,7 @@ function ProvedorDaLateral({ ligado, children, ...p }) {
     return ligado ? _jsx(Sidebar.Provider, { id: SHELL_NAV_ID, ...p, children: children }) : _jsx(_Fragment, { children: children });
 }
 function AppShellSidebarToggle(props) { return _jsx(Sidebar.Toggle, { ...props }); }
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, layout = "app", sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle = "edge", sidebarShortcut = true, sidebarIndicator, sidebarPanel, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, layout = "app", sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle = "edge", sidebarShortcut = true, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
     const s = useAureaStrings();
     const docs = layout === "docs", lateral = layout === "sidebar";
     useGavetaFechaNoDesktop(docs);
@@ -223,9 +223,9 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     // No arranjo, o topo é o pequeno (`size="sm"`), e o botão também: com o tamanho de sempre ele ficava 4 maior que os
     // vizinhos e fora da linha deles (medido a 375, sem toque; com toque, todos sobem para 44).
     const botaoDaGaveta = _jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID, ...(docs ? { size: "sm" } : {}) });
-    return _jsx("div", { className: cx("app-shell", layout === "docs" && "app-shell-docs", lateral && "app-shell-lateral", !lateral && topbarVariant === "flush" && "app-shell-flush", recolhe && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: _jsxs(ProvedorDaLateral, { ligado: recolhe, collapsed: efetiva, onCollapsedChange: definir, collapsible: forma, shortcut: sidebarShortcut, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), !lateral && _jsxs(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, tabsEnd: topbarTabsEnd, ...(docs ? { maxWidth: "docs", size: "sm" } : {}), brand: docs ? brand : _jsxs(_Fragment, { children: [botaoDaGaveta, brand] }), children: [topbar, docs && botaoDaGaveta] }), recolhe && !lateral && sidebarToggle !== "none" && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, collapsible: forma, indicator: sidebarIndicator, panel: sidebarPanel, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, header: lateral ? brand : undefined, footer: sidebarFooter, children: navigation }), docs && aside != null && _jsx("div", { className: "docs-toc-bar", children: _jsxs("button", { type: "button", className: "docs-toc-toggle", popoverTarget: SHELL_TOC_ID, children: [_jsx(Icon, { name: "list-bullets" }), _jsx("span", { className: "docs-toc-current", "data-toc-current": "", children: asideLabel ?? s.tocLabel }), _jsx(Icon, { name: "caret-down" })] }) }), lateral
-                    ? _jsxs("div", { className: "app-shell-column", children: [topbar != null
-                                ? _jsx(Header, { variant: "flush", size: "sm", divider: topbarDivider, brand: _jsxs(_Fragment, { children: [botaoDaGaveta, sidebarToggle !== "none" && _jsx(AppShellSidebarToggle, {})] }), children: topbar })
+    return _jsx("div", { className: cx("app-shell", layout === "docs" && "app-shell-docs", lateral && "app-shell-lateral", !lateral && topbarVariant === "flush" && "app-shell-flush", recolhe && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: _jsxs(ProvedorDaLateral, { ligado: recolhe, collapsed: efetiva, onCollapsedChange: definir, collapsible: forma, shortcut: sidebarShortcut, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), !lateral && _jsxs(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, tabsEnd: topbarTabsEnd, ...(docs ? { maxWidth: "docs", size: "sm" } : {}), brand: docs ? brand : _jsxs(_Fragment, { children: [botaoDaGaveta, brand] }), actions: topbarActions != null ? _jsxs(_Fragment, { children: [topbarActions, docs && botaoDaGaveta] }) : undefined, children: [topbar, docs && topbarActions == null && botaoDaGaveta] }), recolhe && !lateral && sidebarToggle !== "none" && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, collapsible: forma, indicator: sidebarIndicator, panel: sidebarPanel, contrast: sidebarContrast, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, header: lateral ? brand : undefined, footer: sidebarFooter, children: navigation }), docs && aside != null && _jsx("div", { className: "docs-toc-bar", children: _jsxs("button", { type: "button", className: "docs-toc-toggle", popoverTarget: SHELL_TOC_ID, children: [_jsx(Icon, { name: "list-bullets" }), _jsx("span", { className: "docs-toc-current", "data-toc-current": "", children: asideLabel ?? s.tocLabel }), _jsx(Icon, { name: "caret-down" })] }) }), lateral
+                    ? _jsxs("div", { className: "app-shell-column", children: [topbar != null || topbarActions != null
+                                ? _jsx(Header, { variant: "flush", size: "sm", divider: topbarDivider, brand: _jsxs(_Fragment, { children: [botaoDaGaveta, sidebarToggle !== "none" && _jsx(AppShellSidebarToggle, {})] }), actions: topbarActions, children: topbar })
                                 : _jsxs("div", { className: "app-shell-narrow-bar", children: [botaoDaGaveta, brand] }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children })] })
                     : _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children }), aside != null && _jsx(Sidebar, { placement: "right", variant: asideVariant ?? sidebarVariant, className: "app-shell-aside", "aria-label": asideLabel ?? s.tocLabel, ...(docs ? { id: SHELL_TOC_ID, popover: "auto", onToggle: focoDaGaveta } : {}), children: aside })] }) });
 }

package/dist/navigation-client.d.ts

@@ -145,7 +145,7 @@ declare function SidebarProvider({ collapsed, defaultCollapsed, onCollapsedChang
 declare function SidebarToggle({ variant, className, onClick, ...props }: Omit<IconButtonProps, "icon" | "label" | "variant" | "children"> & {
     variant?: "icon" | "item";
 }): React.JSX.Element | null;
-export declare function Sidebar({ items, current, collapsed, collapsible, indicator, panel, variant, placement, scrollbar, label, header, footer, children, className, onClick, id, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+export declare function Sidebar({ items, current, collapsed, collapsible, indicator, panel, contrast, variant, placement, scrollbar, label, header, footer, children, className, onClick, id, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     items?: SidebarEntry[];
     current?: string;
     collapsed?: boolean;
@@ -161,6 +161,9 @@ export declare function Sidebar({ items, current, collapsed, collapsible, indica
     /** A trilha das seções com o painel (4-F e 4-G): os itens do primeiro nível viram seções, e a lista da seção mora num
      *  painel — `docked`, ao lado da trilha (recolher esconde só o painel), ou `overlay`, por cima, ao lado do ícone. */
     panel?: "docked" | "overlay";
+    /** A lateral de contraste (MNT-36): escura nas duas telas. Leva o tema escuro por dentro, como o `Card variant="contrast"`;
+     *  numa página clara, o fundo é o cartão do escuro; numa página escura, mais escuro que a página. */
+    contrast?: boolean;
     /** O topo fixo (4-C): a marca do app (`Sidebar.Brand`), a busca. Não rola com a lista. */
     header?: ReactNode;
     /** O pé fixo (4-C): a pessoa e o sair (`Sidebar.User`), a lista curta (`Sidebar.Nav`), o cartão de destaque. Não rola com a lista. */

package/dist/navigation-client.js

@@ -371,7 +371,7 @@ function SidebarSectionFlyout({ sec, ctx }) {
     const tituloId = ctx.baseId + sec.id + "-titulo";
     return _jsxs(BasePopover.Root, { children: [_jsx(Tooltip, { content: sec.label, side: "right", children: _jsxs(BasePopover.Trigger, { render: _jsx("button", { type: "button", className: "sidebar-item", "aria-current": atual ? "true" : undefined }), children: [sec.avatar ? _jsx(Avatar, { src: sec.avatar.src, fallback: sec.avatar.fallback, className: "sidebar-avatar" }) : sec.icon && _jsx(Icon, { name: sec.icon, weight: atual ? "fill" : undefined }), _jsx("span", { className: "sidebar-label sr-only", children: sec.label })] }) }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { className: "positioner", side: "right", align: "start", sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover sidebar-flyout", "aria-labelledby": tituloId, children: [_jsx("p", { id: tituloId, className: "sidebar-panel-title", children: sec.label }), _jsx("nav", { className: "sidebar-nav", "aria-labelledby": tituloId, children: sidebarList(sec.items ?? [], { ...ctx, collapsed: false }) })] }) }) })] });
 }
-export function Sidebar({ items, current, collapsed, collapsible, indicator = "brand", panel, variant = "floating", placement = "left", scrollbar = "hover", label, header, footer, children, className, onClick, id, ...props }) {
+export function Sidebar({ items, current, collapsed, collapsible, indicator = "brand", panel, contrast = false, variant = "floating", placement = "left", scrollbar = "hover", label, header, footer, children, className, onClick, id, ...props }) {
     const s = useAureaStrings();
     const baseId = React.useId();
     // Dentro de um provedor, a lateral segue o estado dele; a prop escrita ganha (quem escreveu as duas quis a prop).
@@ -392,9 +392,9 @@ export function Sidebar({ items, current, collapsed, collapsible, indicator = "b
                         ? _jsx(SidebarSectionFlyout, { sec: sec, ctx: ctxTrilha })
                         : _jsx(SidebarSectionButton, { sec: sec, ctx: ctxTrilha, aberta: sec.id === secao?.id, painelId: painelId, recolhida: recolhida, onEscolher: () => { setEscolhida(sec.id); if (recolhida)
                                 estado?.setCollapsed(false); } }) }, sec.id)) }) });
-        return _jsxs("aside", { id: id ?? estado?.id, className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, `sidebar-panel-${panel}`, recolhida && "sidebar-collapsed", indicator !== "brand" && `sidebar-indicator-${indicator}`, placement === "right" && "sidebar-right", scrollbar === "visible" && "sidebar-scrollbar-visible", className), "data-placement": placement, onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: [_jsx("div", { className: "sidebar-rail-box", children: _jsxs(SidebarContext.Provider, { value: naTrilha, children: [header != null && _jsx("div", { className: "sidebar-header", children: header }), _jsxs("div", { className: "sidebar-body", children: [trilha, children] }), footer != null && _jsx("div", { className: "sidebar-footer", children: footer })] }) }), panel === "docked" && secao && _jsxs("div", { className: "sidebar-panel", id: painelId, hidden: recolhida, children: [_jsx("p", { className: "sidebar-panel-title", id: painelId + "-titulo", children: secao.label }), _jsx("nav", { className: "sidebar-nav", "aria-labelledby": painelId + "-titulo", children: sidebarList(secao.items ?? [], { baseId, current, collapsed: false }) })] })] });
+        return _jsxs("aside", { id: id ?? estado?.id, className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, `sidebar-panel-${panel}`, contrast && "sidebar-contrast", recolhida && "sidebar-collapsed", indicator !== "brand" && `sidebar-indicator-${indicator}`, placement === "right" && "sidebar-right", scrollbar === "visible" && "sidebar-scrollbar-visible", className), "data-placement": placement, ...(contrast ? { "data-theme": "dark" } : null), onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: [_jsx("div", { className: "sidebar-rail-box", children: _jsxs(SidebarContext.Provider, { value: naTrilha, children: [header != null && _jsx("div", { className: "sidebar-header", children: header }), _jsxs("div", { className: "sidebar-body", children: [trilha, children] }), footer != null && _jsx("div", { className: "sidebar-footer", children: footer })] }) }), panel === "docked" && secao && _jsxs("div", { className: "sidebar-panel", id: painelId, hidden: recolhida, children: [_jsx("p", { className: "sidebar-panel-title", id: painelId + "-titulo", children: secao.label }), _jsx("nav", { className: "sidebar-nav", "aria-labelledby": painelId + "-titulo", children: sidebarList(secao.items ?? [], { baseId, current, collapsed: false }) })] })] });
     }
-    return _jsx("aside", { id: id ?? estado?.id, className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, recolhida && "sidebar-collapsed", forma !== "icon" && `sidebar-collapse-${forma}`, indicator !== "brand" && `sidebar-indicator-${indicator}`, placement === "right" && "sidebar-right", scrollbar === "visible" && "sidebar-scrollbar-visible", partes && "sidebar-with-parts", className), "data-placement": placement, onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: _jsx(SidebarContext.Provider, { value: contexto, children: partes
+    return _jsx("aside", { id: id ?? estado?.id, className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, contrast && "sidebar-contrast", recolhida && "sidebar-collapsed", forma !== "icon" && `sidebar-collapse-${forma}`, indicator !== "brand" && `sidebar-indicator-${indicator}`, placement === "right" && "sidebar-right", scrollbar === "visible" && "sidebar-scrollbar-visible", partes && "sidebar-with-parts", className), "data-placement": placement, ...(contrast ? { "data-theme": "dark" } : null), onClick: e => { onClick?.(e); fecharGavetaAoEscolher(e); }, ...props, children: _jsx(SidebarContext.Provider, { value: contexto, children: partes
                 ? _jsxs(_Fragment, { children: [header != null && _jsx("div", { className: "sidebar-header", children: header }), _jsxs("div", { className: "sidebar-body", children: [lista, children] }), footer != null && _jsx("div", { className: "sidebar-footer", children: footer })] })
                 : _jsxs(_Fragment, { children: [lista, children] }) }) });
 }

package/package.json

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