@softize/opus 12.9.0 → 12.11.0

package/src/ui/components/patterns/sidebar.tsx

@@ -1,160 +1,434 @@
-import { createContext, useContext, type HTMLAttributes, type ReactNode } from 'react'
-import { ChevronRight } from 'lucide-react'
-import { useOverflowing } from '../../lib/overflow.ts'
-import { cn } from '../../lib/cn.ts'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip.tsx'
+import {
+  createContext,
+  useContext,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { ChevronRight } from "lucide-react";
+import { useOverflowing } from "../../lib/overflow.ts";
+import { cn } from "../../lib/cn.ts";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../primitives/tooltip.tsx";
 
-interface SidebarContextValue { collapsed: boolean }
-const SidebarContext = createContext<SidebarContextValue | null>(null)
+interface SidebarContextValue {
+  collapsed: boolean;
+}
+const SidebarContext = createContext<SidebarContextValue | null>(null);
 
 /** Estado da Sidebar mais próxima. Uso interno por navegações que se adaptam ao colapso. */
 export function useSidebarCollapsed(): boolean {
-  return useContext(SidebarContext)?.collapsed ?? false
+  return useContext(SidebarContext)?.collapsed ?? false;
 }
 
 export interface SidebarProps {
-  collapsed?: boolean
+  collapsed?: boolean;
   /** Desliga a borda quando o Split já desenha a divisória. */
-  divider?: boolean
-  className?: string
-  children: ReactNode
+  divider?: boolean;
+  className?: string;
+  children: ReactNode;
 }
 
 /** Moldura composicional de uma barra lateral; o Split decide a posição, Sidebar o chrome. */
-export function Sidebar({ collapsed = false, divider = true, className, children }: SidebarProps): React.ReactElement {
+export function Sidebar({
+  collapsed = false,
+  divider = true,
+  className,
+  children,
+}: SidebarProps): React.ReactElement {
   return (
     <SidebarContext.Provider value={{ collapsed }}>
-      <aside data-slot="sidebar" data-collapsed={String(collapsed)} className={cn('group/sidebar flex h-full min-h-0 shrink-0 flex-col transition-[width] duration-200 ease-out', divider && 'border-r border-border', collapsed ? 'w-14' : 'w-64', className)}>
+      <aside
+        data-slot="sidebar"
+        data-collapsed={String(collapsed)}
+        className={cn(
+          "group/sidebar flex h-full min-h-0 shrink-0 flex-col transition-[width] duration-200 ease-out",
+          divider && "border-r border-border",
+          collapsed ? "w-14" : "w-64",
+          className,
+        )}
+      >
         {children}
       </aside>
     </SidebarContext.Provider>
-  )
+  );
 }
 
 /** Faixa fixa no topo de um pane — marca, contexto ou ações locais. */
-export function PaneHeader({ className, children }: { className?: string; children: ReactNode }): React.ReactElement {
-  return <div data-slot="pane-header" className={cn('shrink-0 border-b border-border', className)}>{children}</div>
+export function PaneHeader({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <div
+      data-slot="pane-header"
+      className={cn("shrink-0 border-b border-border", className)}
+    >
+      {children}
+    </div>
+  );
 }
 
 /** Região rolável que ocupa o espaço restante de um pane. */
-export function PaneContent({ className, children }: { className?: string; children: ReactNode }): React.ReactElement {
-  return <div data-slot="pane-content" className={cn('min-h-0 flex-1 overflow-y-auto', className)}>{children}</div>
+export function PaneBody({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <div
+      data-slot="pane-body"
+      className={cn("min-h-0 flex-1 overflow-y-auto", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** @deprecated Use PaneBody. Mantido durante a versão 12 para migração gradual. */
+export function PaneContent({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <div
+      data-slot="pane-content"
+      className={cn("min-h-0 flex-1 overflow-y-auto", className)}
+    >
+      {children}
+    </div>
+  );
 }
 
 /** Faixa fixa no rodapé de um pane para ações persistentes. */
-export function PaneFooter({ className, children }: { className?: string; children: ReactNode }): React.ReactElement {
-  return <div data-slot="pane-footer" className={cn('shrink-0 border-t border-border p-2', className)}>{children}</div>
+export function PaneFooter({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <div
+      data-slot="pane-footer"
+      className={cn("shrink-0 border-t border-border p-2", className)}
+    >
+      {children}
+    </div>
+  );
 }
 
 export interface SidebarItemProps {
-  label: string
-  icon?: ReactNode
-  badge?: ReactNode
-  active?: boolean
-  disabled?: boolean
+  label: string;
+  icon?: ReactNode;
+  badge?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
   /** Controles irmãos do alvo de navegação (ex.: menu de ações). */
-  actions?: ReactNode
+  actions?: ReactNode;
   /** Presente quando a linha desdobra filhos; o controle fica fora do botão principal. */
-  onToggle?: () => void
-  expanded?: boolean
+  onToggle?: () => void;
+  expanded?: boolean;
   /** Posição indicada durante drag-and-drop; bordas inserem, centro recebe dentro. */
-  dropPosition?: 'before' | 'inside' | 'after'
+  dropPosition?: "before" | "inside" | "after";
   /** Props de drag-and-drop aplicadas à linha, sem acoplar a um driver. */
-  dragProps?: HTMLAttributes<HTMLDivElement>
+  dragProps?: HTMLAttributes<HTMLDivElement>;
   /** Complemento do tooltip no rail recolhido. */
-  tooltipHint?: ReactNode
-  className?: string
-  onClick: () => void
+  tooltipHint?: ReactNode;
+  className?: string;
+  onClick: () => void;
 }
 
 /** Linha única de navegação: o alvo principal e seus controles são irmãos, nunca botões aninhados. */
-export function SidebarItem({ label, icon, badge, active = false, disabled = false, actions, onToggle, expanded = false, dropPosition, dragProps, tooltipHint, className, onClick }: SidebarItemProps): React.ReactElement {
-  const collapsed = useSidebarCollapsed()
-  const hasActions = actions !== undefined && actions !== null
+export function SidebarItem({
+  label,
+  icon,
+  badge,
+  active = false,
+  disabled = false,
+  actions,
+  onToggle,
+  expanded = false,
+  dropPosition,
+  dragProps,
+  tooltipHint,
+  className,
+  onClick,
+}: SidebarItemProps): React.ReactElement {
+  const collapsed = useSidebarCollapsed();
+  const hasActions = actions !== undefined && actions !== null;
   // O rótulo cortado esmaece em vez de terminar em reticências; a medição do transbordo
   // mantém a máscara fora do rótulo que cabe inteiro na linha.
-  const { ref: labelRef, overflowing: labelCut } = useOverflowing<HTMLSpanElement>(label)
+  const { ref: labelRef, overflowing: labelCut } =
+    useOverflowing<HTMLSpanElement>(label);
   if (collapsed) {
     const button = (
-      <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('mx-auto grid size-9 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40', 'outline-none focus-visible:ring-2 focus-visible:ring-ring/50', active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60')}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-current={active ? "page" : undefined}
+        onClick={onClick}
+        className={cn(
+          "mx-auto grid size-9 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+          active
+            ? "bg-muted font-medium text-foreground"
+            : "text-foreground/80 hover:bg-muted/60",
+        )}
+      >
         {icon}
       </button>
-    )
+    );
     // `className` vai no MESMO elemento nos dois modos — a linha —, senão a prop mudaria de alvo
     // conforme o rail estivesse recolhido, e o consumidor não teria como saber o que estilizou.
-    return <div data-slot="sidebar-item" className={className} {...dragProps}><Tooltip><TooltipTrigger asChild>{button}</TooltipTrigger><TooltipContent side="right">{label}{tooltipHint}</TooltipContent></Tooltip></div>
+    return (
+      <div data-slot="sidebar-item" className={className} {...dragProps}>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent side="right">
+            {label}
+            {tooltipHint}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    );
   }
 
   return (
-    <div data-slot="sidebar-item" className={cn('group/sidebar-item relative flex items-center rounded-md transition-colors', disabled ? 'text-muted-foreground/50 opacity-40' : 'hover:bg-muted/60', active && 'bg-muted', dropPosition === 'inside' && 'bg-primary/5 ring-2 ring-inset ring-primary/60', className)} {...dragProps}>
-      {(dropPosition === 'before' || dropPosition === 'after') && <span data-slot="sidebar-item-drop-indicator" className={cn('pointer-events-none absolute inset-x-1 z-20 h-0.5 rounded-full bg-primary before:absolute before:-left-1 before:top-1/2 before:size-2 before:-translate-y-1/2 before:rounded-full before:border-2 before:border-primary before:bg-background', dropPosition === 'before' ? '-top-px' : '-bottom-px')} />}
+    <div
+      data-slot="sidebar-item"
+      className={cn(
+        "group/sidebar-item relative flex items-center rounded-md transition-colors",
+        disabled ? "text-muted-foreground/50 opacity-40" : "hover:bg-muted/60",
+        active && "bg-muted",
+        dropPosition === "inside" &&
+          "bg-primary/5 ring-2 ring-inset ring-primary/60",
+        className,
+      )}
+      {...dragProps}
+    >
+      {(dropPosition === "before" || dropPosition === "after") && (
+        <span
+          data-slot="sidebar-item-drop-indicator"
+          className={cn(
+            "pointer-events-none absolute inset-x-1 z-20 h-0.5 rounded-full bg-primary before:absolute before:-left-1 before:top-1/2 before:size-2 before:-translate-y-1/2 before:rounded-full before:border-2 before:border-primary before:bg-background",
+            dropPosition === "before" ? "-top-px" : "-bottom-px",
+          )}
+        />
+      )}
       {(icon !== undefined || onToggle !== undefined) && (
-        <span data-slot="sidebar-item-leading" className="pointer-events-none absolute left-2.5 top-1/2 z-10 grid size-4 -translate-y-1/2 place-items-center">
+        <span
+          data-slot="sidebar-item-leading"
+          className="pointer-events-none absolute left-2.5 top-1/2 z-10 grid size-4 -translate-y-1/2 place-items-center"
+        >
           {/* Sem ícone, o chevron não se esconde: ele é o único ocupante do lugar. */}
-          {icon !== undefined && <span className={cn('absolute inset-0 flex items-center justify-center transition-opacity', onToggle !== undefined && 'group-hover/sidebar-item:opacity-0 group-has-[[data-slot=sidebar-item-toggle]:focus-visible]/sidebar-item:opacity-0')}>{icon}</span>}
+          {icon !== undefined && (
+            <span
+              className={cn(
+                "absolute inset-0 flex items-center justify-center transition-opacity",
+                onToggle !== undefined &&
+                  "group-hover/sidebar-item:opacity-0 group-has-[[data-slot=sidebar-item-toggle]:focus-visible]/sidebar-item:opacity-0",
+              )}
+            >
+              {icon}
+            </span>
+          )}
           {onToggle !== undefined && (
-            <button type="button" data-slot="sidebar-item-toggle" onClick={onToggle} aria-label={expanded ? `Fechar ${label}` : `Abrir ${label}`} aria-expanded={expanded} className={cn('absolute inset-0 grid place-items-center rounded-sm text-muted-foreground transition-[color,opacity] outline-none hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50', icon === undefined ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0 group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100')}>
-              <ChevronRight className={cn('size-3 transition-transform', expanded && 'rotate-90')} />
+            <button
+              type="button"
+              data-slot="sidebar-item-toggle"
+              onClick={onToggle}
+              aria-label={expanded ? `Fechar ${label}` : `Abrir ${label}`}
+              aria-expanded={expanded}
+              className={cn(
+                "absolute inset-0 grid place-items-center rounded-sm text-muted-foreground transition-[color,opacity] outline-none hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50",
+                icon === undefined
+                  ? "pointer-events-auto opacity-100"
+                  : "pointer-events-none opacity-0 group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100",
+              )}
+            >
+              <ChevronRight
+                className={cn(
+                  "size-3 transition-transform",
+                  expanded && "rotate-90",
+                )}
+              />
             </button>
           )}
         </span>
       )}
-      <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm disabled:pointer-events-none', 'outline-none focus-visible:ring-2 focus-visible:ring-ring/50', disabled ? 'text-muted-foreground/50' : active ? 'font-medium text-foreground' : 'text-foreground/80')}>
-        {(icon !== undefined || onToggle !== undefined) && <span data-slot="sidebar-item-leading-space" aria-hidden className="size-4 shrink-0" />}
-        <span ref={labelRef} data-slot="sidebar-item-label" className={cn('min-w-0 flex-1 overflow-hidden whitespace-nowrap group-has-[[data-slot=dot]]/sidebar-item:mr-[1.1875rem]', labelCut && 'truncate-fade')}>{label}</span>
-        {badge !== undefined && <span data-slot="sidebar-item-badge" className={cn('shrink-0 transition-opacity has-[[data-slot=dot]]:absolute has-[[data-slot=dot]]:right-1 has-[[data-slot=dot]]:top-1/2 has-[[data-slot=dot]]:z-10 has-[[data-slot=dot]]:grid has-[[data-slot=dot]]:size-6 has-[[data-slot=dot]]:-translate-y-1/2 has-[[data-slot=dot]]:place-items-center', hasActions && 'group-hover/sidebar-item:has-[[data-slot=dot]]:opacity-0')}>{badge}</span>}
+      <button
+        type="button"
+        disabled={disabled}
+        aria-current={active ? "page" : undefined}
+        onClick={onClick}
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm disabled:pointer-events-none",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+          disabled
+            ? "text-muted-foreground/50"
+            : active
+              ? "font-medium text-foreground"
+              : "text-foreground/80",
+        )}
+      >
+        {(icon !== undefined || onToggle !== undefined) && (
+          <span
+            data-slot="sidebar-item-leading-space"
+            aria-hidden
+            className="size-4 shrink-0"
+          />
+        )}
+        <span
+          ref={labelRef}
+          data-slot="sidebar-item-label"
+          className={cn(
+            "min-w-0 flex-1 overflow-hidden whitespace-nowrap group-has-[[data-slot=dot]]/sidebar-item:mr-[1.1875rem]",
+            labelCut && "truncate-fade",
+          )}
+        >
+          {label}
+        </span>
+        {badge !== undefined && (
+          <span
+            data-slot="sidebar-item-badge"
+            className={cn(
+              "shrink-0 transition-opacity has-[[data-slot=dot]]:absolute has-[[data-slot=dot]]:right-1 has-[[data-slot=dot]]:top-1/2 has-[[data-slot=dot]]:z-10 has-[[data-slot=dot]]:grid has-[[data-slot=dot]]:size-6 has-[[data-slot=dot]]:-translate-y-1/2 has-[[data-slot=dot]]:place-items-center",
+              hasActions &&
+                "group-hover/sidebar-item:has-[[data-slot=dot]]:opacity-0",
+            )}
+          >
+            {badge}
+          </span>
+        )}
       </button>
-      {hasActions && <div data-slot="sidebar-item-actions" className="pointer-events-none absolute right-1 top-1/2 z-10 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100 has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:opacity-100 has-[[data-state=open]]:pointer-events-auto has-[[data-state=open]]:opacity-100 [&_button]:grid [&_button]:size-6 [&_button]:place-items-center [&_button]:p-0 [&_svg]:size-3.5">{actions}</div>}
+      {hasActions && (
+        <div
+          data-slot="sidebar-item-actions"
+          className="pointer-events-none absolute right-1 top-1/2 z-10 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100 has-[:focus-visible]:pointer-events-auto has-[:focus-visible]:opacity-100 has-[[data-state=open]]:pointer-events-auto has-[[data-state=open]]:opacity-100 [&_button]:grid [&_button]:size-6 [&_button]:place-items-center [&_button]:p-0 [&_svg]:size-3.5"
+        >
+          {actions}
+        </div>
+      )}
     </div>
-  )
+  );
 }
 
 export interface SidebarNavGroup {
-  label?: string
-  items?: SidebarNavItem[]
-  subgroups?: SidebarNavSubgroup[]
+  label?: string;
+  items?: SidebarNavItem[];
+  subgroups?: SidebarNavSubgroup[];
 }
 
-export type SidebarNavItem = Omit<SidebarItemProps, 'active' | 'onClick'> & { id: string }
+export type SidebarNavItem = Omit<SidebarItemProps, "active" | "onClick"> & {
+  id: string;
+};
 
 export interface SidebarNavSubgroup {
-  label?: string
-  items: SidebarNavItem[]
+  label?: string;
+  items: SidebarNavItem[];
 }
 
-const titled = (label?: string): boolean => (label ?? '').trim() !== ''
-const subFilled = (subgroup: SidebarNavSubgroup): boolean => subgroup.items.length > 0
+const titled = (label?: string): boolean => (label ?? "").trim() !== "";
+const subFilled = (subgroup: SidebarNavSubgroup): boolean =>
+  subgroup.items.length > 0;
 const groupFilled = (group: SidebarNavGroup): boolean =>
-  (group.items?.length ?? 0) > 0 || (group.subgroups?.some(subFilled) ?? false)
+  (group.items?.length ?? 0) > 0 || (group.subgroups?.some(subFilled) ?? false);
 
 /** Rótulo discreto de um grupo de navegação, compartilhado por listas e árvores. */
-export function SidebarGroupLabel({ className, children }: { className?: string; children: ReactNode }): React.ReactElement {
-  return <div data-slot="sidebar-group-label" className={cn('px-2.5 pb-1 text-sm font-medium text-muted-foreground/70', className)}>{children}</div>
+export function SidebarGroupLabel({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <div
+      data-slot="sidebar-group-label"
+      className={cn(
+        "px-2.5 pb-1 text-sm font-medium text-muted-foreground/70",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
 }
 
 /** Navegação controlada para Sidebar. Header/footer continuam slots explícitos do pai. */
-export function SidebarNav({ groups, activeId, onSelect, navLabel = 'Navegação', className }: { groups: SidebarNavGroup[]; activeId?: string; onSelect: (id: string) => void; navLabel?: string; className?: string }): React.ReactElement {
-  const collapsed = useSidebarCollapsed()
-  const renderItem = (item: SidebarNavItem, nested = false): React.ReactElement => (
+export function SidebarNav({
+  groups,
+  activeId,
+  onSelect,
+  navLabel = "Navegação",
+  className,
+}: {
+  groups: SidebarNavGroup[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  navLabel?: string;
+  className?: string;
+}): React.ReactElement {
+  const collapsed = useSidebarCollapsed();
+  const renderItem = (
+    item: SidebarNavItem,
+    nested = false,
+  ): React.ReactElement => (
     <SidebarItem
       key={item.id}
       {...item}
-      className={cn(nested && !collapsed && 'pl-6', item.className)}
+      className={cn(nested && !collapsed && "pl-6", item.className)}
       active={item.id === activeId}
       onClick={() => onSelect(item.id)}
     />
-  )
+  );
   const body = (
-    <nav aria-label={navLabel} data-slot="sidebar-nav" className={cn('space-y-4 p-2', className)}>
-      {groups.map((group, gi) => !groupFilled(group) ? null : <div key={gi} className="space-y-0.5">
-        {!collapsed && titled(group.label) && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
-        {group.items?.map((item) => renderItem(item))}
-        {group.subgroups?.map((subgroup, si) => !subFilled(subgroup) ? null : <div key={si} className="space-y-0.5">
-          {!collapsed && titled(subgroup.label) && <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[0.6875rem] font-medium text-muted-foreground/50">{subgroup.label}</div>}
-          {subgroup.items.map((item) => renderItem(item, titled(subgroup.label)))}
-        </div>)}
-      </div>)}
+    <nav
+      aria-label={navLabel}
+      data-slot="sidebar-nav"
+      className={cn("space-y-4 p-2", className)}
+    >
+      {groups.map((group, gi) =>
+        !groupFilled(group) ? null : (
+          <div key={gi} className="space-y-0.5">
+            {!collapsed && titled(group.label) && (
+              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+            )}
+            {group.items?.map((item) => renderItem(item))}
+            {group.subgroups?.map((subgroup, si) =>
+              !subFilled(subgroup) ? null : (
+                <div key={si} className="space-y-0.5">
+                  {!collapsed && titled(subgroup.label) && (
+                    <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[0.6875rem] font-medium text-muted-foreground/50">
+                      {subgroup.label}
+                    </div>
+                  )}
+                  {subgroup.items.map((item) =>
+                    renderItem(item, titled(subgroup.label)),
+                  )}
+                </div>
+              ),
+            )}
+          </div>
+        ),
+      )}
     </nav>
-  )
-  return collapsed ? <TooltipProvider delayDuration={200}>{body}</TooltipProvider> : body
+  );
+  return collapsed ? (
+    <TooltipProvider delayDuration={200}>{body}</TooltipProvider>
+  ) : (
+    body
+  );
 }

package/src/ui/components/patterns/trigger.tsx

@@ -16,7 +16,7 @@ import type { SimpleContract } from '../../../core/index.ts'
 import { useTriggerAction } from '../../drivers/react.tsx'
 import { toast } from '../primitives/sonner.tsx'
 import { cn } from '../../lib/cn.ts'
-import { Button } from '../primitives/button.tsx'
+import { Button, type ButtonProps } from '../primitives/button.tsx'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
 import {
   AlertDialog,
@@ -43,9 +43,10 @@ export interface ActionTriggerProps<TInput, TData> {
   input: TInput
   /** Texto do botão. Default usa action.label. */
   label?: string
-  /** Variante visual do Button. Default: 'default' (ou 'destructive' se o
-   *  action.confirm declarar destructive). */
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  /** Contexto visual. Por padrão, ações destrutivas usam `danger`. */
+  context?: ButtonProps['context']
+  /** Tratamento visual do Button. */
+  variant?: ButtonProps['variant']
   /** Tamanho do botão. */
   size?: 'default' | 'sm' | 'lg' | 'icon'
   /** Desabilita o botão independente de loading. */
@@ -83,6 +84,7 @@ export function ActionTrigger<TInput, TData>({
   action,
   input,
   label,
+  context,
   variant,
   size = 'default',
   disabled = false,
@@ -123,8 +125,10 @@ export function ActionTrigger<TInput, TData>({
   const destructive = spec?.destructive === true
   // Com ícone o botão é chrome do item: fica ghost, e o vermelho aparece no hover — uma
   // lixeira sólida vermelha em cada linha seria um campo minado visual.
-  const triggerVariant = variant ?? (icon !== undefined ? 'ghost' : destructive ? 'destructive' : 'default')
-  const confirmVariant = destructive ? 'destructive' : (variant ?? 'default')
+  const triggerContext = context ?? (destructive ? 'danger' : icon !== undefined ? 'neutral' : 'primary')
+  const triggerVariant = variant ?? (icon !== undefined ? 'ghost' : 'solid')
+  const confirmContext = destructive ? 'danger' : (context ?? 'primary')
+  const confirmVariant = variant ?? 'solid'
 
   const fire = () => {
     void trigger(input)
@@ -136,6 +140,7 @@ export function ActionTrigger<TInput, TData>({
   const renderButton = (onClick: () => void): React.ReactElement => {
     const button = (
       <Button
+        context={triggerContext}
         variant={triggerVariant}
         size={icon !== undefined ? 'icon' : size}
         busy={isLoading}
@@ -147,7 +152,6 @@ export function ActionTrigger<TInput, TData>({
         }}
         className={cn(
           icon !== undefined && 'size-7 shrink-0 text-muted-foreground/60',
-          icon !== undefined && destructive && 'hover:bg-destructive/10 hover:text-destructive',
           className,
         )}
         data-action={action.name}
@@ -183,10 +187,10 @@ export function ActionTrigger<TInput, TData>({
             )}
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <Button variant="ghost" onClick={() => setOpen(false)} disabled={isLoading}>
+            <Button context="neutral" variant="ghost" onClick={() => setOpen(false)} disabled={isLoading}>
               {confirm.cancelLabel ?? 'Cancelar'}
             </Button>
-            <Button variant={confirmVariant} busy={isLoading} onClick={fire}>
+            <Button context={confirmContext} variant={confirmVariant} busy={isLoading} onClick={fire}>
               {confirm.actionLabel ?? buttonLabel}
             </Button>
           </AlertDialogFooter>

package/src/ui/components/patterns/view.tsx

@@ -9,6 +9,7 @@
 import type { ReactNode } from 'react'
 import type { ViewAction } from '../../../core/index.ts'
 import { useViewAction } from '../../drivers/react.tsx'
+import { Alert } from '../primitives/alert.tsx'
 import { Skeleton } from '../primitives/skeleton.tsx'
 import { Button } from '../primitives/button.tsx'
 
@@ -61,17 +62,12 @@ export function ActionView<TInput, TData>({
       return <div data-action={action.name}>{error(err, refetch)}</div>
     }
     return (
-      <div
-        data-action={action.name}
-        className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm space-y-3"
-      >
-        <div>
-          <strong className="text-destructive">{err.code}</strong>
-          <p className="text-destructive">{err.message}</p>
-        </div>
-        <Button variant="outline" size="sm" onClick={() => void refetch()}>
-          Tentar de novo
-        </Button>
+      <div data-action={action.name}>
+        <Alert context="danger" title={err.code} description={err.message}>
+          <Button variant="outline" size="sm" onClick={() => void refetch()}>
+            Tentar de novo
+          </Button>
+        </Alert>
       </div>
     )
   }

package/src/ui/components/primitives/alert-dialog.tsx

@@ -140,13 +140,14 @@ function AlertDialogMedia({
 
 function AlertDialogAction({
   className,
-  variant = "default",
+  context = "primary",
+  variant = "solid",
   size = "default",
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  Pick<React.ComponentProps<typeof Button>, "context" | "variant" | "size">) {
   return (
-    <Button variant={variant} size={size} asChild>
+    <Button context={context} variant={variant} size={size} asChild>
       <AlertDialogPrimitive.Action
         data-slot="alert-dialog-action"
         className={cn(className)}
@@ -158,13 +159,14 @@ function AlertDialogAction({
 
 function AlertDialogCancel({
   className,
+  context = "neutral",
   variant = "ghost",
   size = "default",
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  Pick<React.ComponentProps<typeof Button>, "context" | "variant" | "size">) {
   return (
-    <Button variant={variant} size={size} asChild>
+    <Button context={context} variant={variant} size={size} asChild>
       <AlertDialogPrimitive.Cancel
         data-slot="alert-dialog-cancel"
         className={cn(className)}