@softize/opus 30.0.0 → 31.1.0

package/src/ui/components/patterns/structural-header.tsx

@@ -1,9 +1,9 @@
 /**
- * Cabeçalho estrutural (interno): a anatomia que Page, Surface, Dialog, Drawer e Pane
+ * Cabeçalho estrutural (interno): a anatomia que Page, Surface, Dialog e Drawer
  * compartilham. O nome público `SurfaceHeader` pertence à família Surface (ADR 0045).
  *
  * Um título, metadata opcional e uma região de ações que vai para o extremo oposto
- * em larguras amplas e empilha abaixo do contexto nas estreitas. Cada família escolhe quais slots
+ * da linha. Cada família escolhe quais slots
  * expõe; layout, validação e classes vivem aqui, uma vez.
  */
 
@@ -16,7 +16,9 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { structuralTitleClasses } from "./surface-anatomy.ts";
 import { cn } from "../../lib/cn.ts";
+import { TabsHeaderContext } from "../primitives/tabs.tsx";
 
 /** Metadados contextuais, separados da orientação textual e da linha de ações. */
 export const structuralMetaClasses =
@@ -30,10 +32,10 @@ export const structuralHeaderClasses: Record<
   { title: string; description: string; count: string; actions: string }
 > = {
   page: {
-    title: "text-3xl font-semibold tracking-tight",
+    title: structuralTitleClasses,
     description: "mt-1 truncate text-sm text-muted-foreground",
     count: "font-mono text-base text-muted-foreground/60",
-    actions: "flex w-auto shrink-0 items-center gap-4",
+    actions: "flex w-auto shrink-0 items-center gap-2",
   },
   section: {
     title: "text-sm font-semibold",
@@ -73,6 +75,8 @@ export interface StructuralHeaderProps extends HTMLAttributes<HTMLDivElement> {
   titleRequired?: boolean;
   /** Classes da linha `inline` — as famílias com anatomia própria trazem a sua (ADR 0023). */
   rowClassName?: string;
+  /** Lista de abas sob o título; o Tabs ancestral governa seleção e painéis. */
+  tabs?: ReactNode;
   /** Nó interno acrescentado ao fim da linha, depois das ações (o botão de fechar). */
   trailing?: ReactNode;
   /**
@@ -108,12 +112,18 @@ export function StructuralHeader({
   titleRequired = true,
   rowClassName,
   trailing,
+  tabs,
   allowFreeContent = false,
   invalidMessage,
   className,
   children,
   ...props
 }: StructuralHeaderProps): ReactElement {
+  const hasTabs = tabs !== undefined && tabs !== null && tabs !== false;
+
+  if (hasTabs && Root === "legend") {
+    throw new Error("SurfaceHeader de fieldset não aceita abas.");
+  }
   const Wrapper = Root === "legend" ? "span" : "div";
   const nodes = flatten(children).filter(
     (node) => typeof node !== "string" || node.trim() !== "",
@@ -281,8 +291,7 @@ export function StructuralHeader({
       {inlineContext === null &&
         leadingPlacement === "inline" &&
         leading.length > 0 && (
-          // `min-w-0` aqui é o que deixa a trilha do PageNavigation ceder e truncar; sem ele o
-          // wrapper assume o min-content do breadcrumb e a compressão toda cai sobre o título.
+          // A região de navegação pode ceder espaço sem comprimir o título além do container.
           <Wrapper
             data-slot={`${slot}-navigation`}
             className={cn("flex min-w-0 items-center", !heading && "flex-1")}
@@ -367,7 +376,8 @@ export function StructuralHeader({
     <Root
       data-slot={`${slot}-header`}
       className={cn(
-        metas.length === 0 &&
+        !hasTabs &&
+          metas.length === 0 &&
           contentClassName === undefined &&
           leadingPlacement !== "inline" &&
           leading.length === 0 &&
@@ -377,6 +387,7 @@ export function StructuralHeader({
             heading ? "justify-between" : "justify-end",
           ),
         className,
+        hasTabs && "block border-b pb-0",
       )}
       {...props}
     >
@@ -390,31 +401,11 @@ export function StructuralHeader({
           {withMeta}
         </Wrapper>
       )}
+      {hasTabs && (
+        <div data-slot={`${slot}-header-tabs`} className="mt-4 min-w-0">
+          <TabsHeaderContext.Provider value>{tabs}</TabsHeaderContext.Provider>
+        </div>
+      )}
     </Root>
   );
 }
-
-/** A intro visível abre o corpo; wrappers opacos são verificados quando materializam seus slots. */
-export function validateSurfaceIntro(
-  children: ReactNode,
-  intro: ElementType,
-  name: string,
-): void {
-  const flatten = (nodes: ReactNode): ReactNode[] =>
-    Children.toArray(nodes).flatMap((node) =>
-      isValidElement(node) && node.type === Fragment
-        ? flatten((node.props as { children?: ReactNode }).children)
-        : [node],
-    );
-  const nodes = flatten(children).filter(
-    (node) => typeof node !== "string" || node.trim() !== "",
-  );
-  const indexes = nodes.flatMap((node, index) =>
-    isValidElement(node) && node.type === intro ? [index] : [],
-  );
-  if (indexes.length > 1 || (indexes.length === 1 && indexes[0] !== 0)) {
-    throw new Error(
-      `${name} aceita uma única intro como primeiro bloco do corpo.`,
-    );
-  }
-}

package/src/ui/components/patterns/surface-anatomy.ts

@@ -1,43 +1,7 @@
-/**
- * Anatomia de superfície (interno): as medidas que Surface, Dialog e Drawer
- * compartilham — ADRs 0023, 0045 e 0047.
- *
- * Aqui mora o que antes era escrito seis vezes: recuo de cada região, ritmo vertical,
- * escala do título, posição das ações e a regra dos divisores. As famílias públicas
- * consomem estas tabelas; nenhuma reescreve as classes.
- *
- * Dois layouts, e cada um é um pacote indivisível:
- *
- * - `continuous` — sem divisores. O ritmo separa: o header se aproxima do corpo e a
- *   última região — seja ela o header, o body ou o footer — fecha o espaço de baixo com
- *   o mesmo respiro do topo. É a superfície de leitura.
- * - `sectioned` — regiões simétricas, com divisor entre as que forem adjacentes. É o
- *   modal, o drawer e o painel.
- *
- * O recuo lateral é o mesmo nas três regiões da mesma superfície; é isso que a suíte
- * transversal verifica.
- */
-
-import {
-  createContext,
-  createElement,
-  useContext,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { FillBoundary } from "./fill-region.ts";
-
+/** Anatomia única de Page, Surface, Dialog e Drawer — ADR 0060. */
 export type SurfaceFamily = "surface" | "dialog" | "drawer" | "page";
-export type SurfaceLayout = "continuous" | "sectioned";
 export type SurfaceRegion = "header" | "body" | "footer";
 
-/**
- * Divisores: a região desenha a própria linha quando existe uma vizinha do outro lado.
- * Um header sozinho não fecha nada; um footer que é a única região também não.
- *
- * O header suprime a própria linha quando o vizinho imediato é um footer — os dois
- * juntos desenhariam duas bordas encostadas, uma sobre a outra.
- */
 const headerDivider = [
   "[&:not(:last-child)]:border-b",
   "[&:not(:last-child)]:border-border",
@@ -49,238 +13,84 @@ const headerDivider = [
 const footerDivider =
   "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-border";
 
-interface RegionAnatomy {
-  header: string;
-  body: string;
-  footer: string;
-}
-
 interface FamilyAnatomy {
-  /** Recuo e ritmo por layout. O recuo lateral é comum às três regiões. */
-  regions: Record<SurfaceLayout, RegionAnatomy>;
-  /** Escala visual do título. O nível semântico do heading é escolhido à parte. */
-  title: Record<SurfaceLayout, string>;
-  /** Descrição no header, quando a família a oferece (ADR 0059 inclui subheadings opcionais em modais). */
+  title: string;
   description: string;
-  /** Espaço entre mídia, título e ações na linha do header. */
   headerGap: string;
-  /** Altura mínima da linha, equivalente ao controle padrão da família. */
-  headerMinHeight: string;
-  /** Faixa do rodapé no layout seccionado, quando a família declara uma. */
   footerBand: string;
 }
 
-/**
- * O recuo seccionado de Dialog e Drawer: 1rem, a densidade das superfícies de operação.
- * O header é comum à família; corpos e rodapés conservam o ritmo de cada superfície.
- */
-const structuralHeaderPadding = "p-4";
-const structuralHeaderMinHeight = "min-h-8";
+export const structuralTitleClasses = "text-lg font-semibold leading-tight";
 
-const sectionedRegions: RegionAnatomy = {
-  header: structuralHeaderPadding,
-  body: "p-4",
-  footer: "p-4",
-};
-
-/**
- * Ritmo entre blocos diretos do conteúdo; relações internas pertencem a um wrapper filho.
- * Os blocos não encolhem: o body é quem rola quando a família tem altura limitada.
- */
 export const structuralBodyRhythm = "flex flex-col gap-4 *:shrink-0";
 export const structuralRegionSpacing = "space-y-4";
 export const structuralRegionGap = "gap-4";
 
 export const surfaceAnatomy: Record<SurfaceFamily, FamilyAnatomy> = {
   page: {
-    regions: {
-      continuous: {
-        header: structuralHeaderPadding,
-        body: "px-8 pt-0 pb-0 [[data-slot=page-body]:first-child>&]:pt-4",
-        footer: "px-8 py-4",
-      },
-      sectioned: {
-        header: sectionedRegions.header,
-        body: "px-8 pt-4 pb-0 [[data-slot=page-body]:has(+[data-slot=page-footer])>&]:pb-4",
-        footer: "px-8 py-4",
-      },
-    },
-    title: {
-      continuous: "text-2xl font-semibold",
-      sectioned: "text-2xl font-semibold",
-    },
+    title: structuralTitleClasses,
     description: "text-sm text-muted-foreground",
     headerGap: "gap-4",
-    headerMinHeight: structuralHeaderMinHeight,
     footerBand: "bg-muted/30",
   },
-  // Medidas da Surface delimitada (com moldura ou elevação). Sem delimitação, as regiões
-  // não recebem recuo: a superfície flui alinhada ao hospedeiro (ADR 0045).
   surface: {
-    regions: {
-      // No contínuo, a região anterior fornece o intervalo; a primeira abre o recuo.
-      continuous: {
-        header: structuralHeaderPadding,
-        body: "px-4 pt-0 pb-4 [&:first-child]:pt-4",
-        footer: "px-4 pt-0 pb-4 [&:first-child]:pt-4",
-      },
-      sectioned: {
-        header: structuralHeaderPadding,
-        body: "p-4",
-        footer: "p-4",
-      },
-    },
-    // Uma escala só: o nível 1 troca a apresentação inteira (ADR 0038), nunca o layout.
-    title: {
-      continuous: "text-sm font-semibold",
-      sectioned: "text-sm font-semibold",
-    },
+    title: "text-sm font-semibold",
     description: "mt-0.5 text-xs text-muted-foreground",
     headerGap: "gap-2",
-    headerMinHeight: structuralHeaderMinHeight,
     footerBand: "",
   },
   dialog: {
-    regions: {
-      continuous: {
-        header: structuralHeaderPadding,
-        body: "px-4 pt-0 pb-4 [&:first-child]:pt-4",
-        footer: "px-4 pt-0 pb-4 [&:first-child]:pt-4",
-      },
-      sectioned: sectionedRegions,
-    },
-    title: {
-      continuous: "text-lg font-semibold leading-none",
-      sectioned: "text-lg font-semibold leading-none",
-    },
+    title: structuralTitleClasses,
     description: "text-sm text-muted-foreground",
     headerGap: "gap-4",
-    headerMinHeight: structuralHeaderMinHeight,
     footerBand: "bg-muted/20 dark:bg-input/20",
   },
   drawer: {
-    regions: {
-      continuous: {
-        header: structuralHeaderPadding,
-        body: "px-4 pt-0 pb-4 [&:first-child]:pt-4",
-        footer: "px-4 pt-0 pb-4 [&:first-child]:pt-4",
-      },
-      sectioned: sectionedRegions,
-    },
-    title: {
-      continuous: "text-lg font-semibold leading-none",
-      sectioned: "text-lg font-semibold leading-none",
-    },
+    title: structuralTitleClasses,
     description: "text-sm text-muted-foreground",
     headerGap: "gap-4",
-    headerMinHeight: structuralHeaderMinHeight,
     footerBand: "bg-muted/20 dark:bg-input/20",
   },
 };
 
-/** Classes da região, já com o divisor que o layout deriva da vizinhança. */
+/** Recuo da região e divisor automático quando existe uma região vizinha. */
 export function surfaceRegionClasses(
   family: SurfaceFamily,
-  layout: SurfaceLayout,
   region: SurfaceRegion,
-  { flush = false }: { flush?: boolean } = {},
+  {
+    flush = false,
+    bounded = true,
+  }: { flush?: boolean; bounded?: boolean } = {},
 ): string {
-  const anatomy = surfaceAnatomy[family];
-  const base =
-    region === "body" && flush
-      ? structuralBodyRhythm
-      : anatomy.regions[layout][region];
-  const regionClasses =
-    region === "body" && !flush ? `${base} ${structuralBodyRhythm}` : base;
-  if (layout !== "sectioned") return regionClasses;
-  if (region === "header") return `${regionClasses} ${headerDivider}`;
-  if (region === "footer")
-    return [regionClasses, footerDivider, anatomy.footerBand]
-      .filter(Boolean)
-      .join(" ");
-  return regionClasses;
+  const padding = bounded && !(region === "body" && flush) ? "p-4" : "";
+  return [
+    padding,
+    region === "body" && structuralBodyRhythm,
+    bounded && region === "header" && headerDivider,
+    bounded && region === "footer" && footerDivider,
+    region === "footer" && bounded && surfaceAnatomy[family].footerBand,
+  ]
+    .filter(Boolean)
+    .join(" ");
 }
 
-/** Escala visual do título — o nível do heading vem da composição, nunca daqui. */
-export function surfaceTitleClasses(
-  family: SurfaceFamily,
-  layout: SurfaceLayout,
-): string {
-  return surfaceAnatomy[family].title[layout];
+export function surfaceTitleClasses(family: SurfaceFamily): string {
+  return surfaceAnatomy[family].title;
 }
 
 export function surfaceDescriptionClasses(family: SurfaceFamily): string {
   return surfaceAnatomy[family].description;
 }
 
-/**
- * A linha do header: mídia, heading que absorve a folga, ações no extremo oposto.
- *
- * `flex-1` mantém o heading como região elástica e as ações no extremo oposto.
- */
+/** Reserva a altura de um botão normal também quando o header não possui ações. */
 export function surfaceHeaderRowClasses(family: SurfaceFamily): string {
-  return `flex min-w-0 flex-1 items-center ${surfaceAnatomy[family].headerGap} ${surfaceAnatomy[family].headerMinHeight}`;
+  return `flex min-w-0 flex-1 items-center ${surfaceAnatomy[family].headerGap} min-h-9`;
 }
 
-/** Ações do header e do footer: fora do fluxo de compressão, na escala densa. */
 export const surfaceActionsClasses = "flex shrink-0 items-center gap-2";
 
-/**
- * A `legend` de uma Surface `fieldset` delimitada (ADR 0045).
- *
- * - `notch`: moldura contínua. A legend nativa ocupa a borda, afastada do canto pelo
- *   mesmo recuo lateral das regiões; a região seguinte recebe o intervalo que a legend
- *   não tem como declarar.
- * - `band`: a legend é a faixa do header dentro da superfície. Uma legend só ocupa a
- *   largura inteira fora do fluxo de borda, e a região seguinte precisa limpar o float.
- */
+/** A legend delimitada ocupa uma faixa inteira; a próxima região limpa o float. */
 export const surfaceLegendClasses = {
-  notch: "ml-2 w-auto px-2",
-  afterNotch: "pt-4",
   band: "float-left w-full",
   afterBand: "clear-left",
 } as const;
-
-/**
- * O layout é do root e chega aos slots por contexto — ADR 0023. Slot não recebe
- * `layout`: o divisor depende de quem está do outro lado, então a decisão precisa valer
- * para a superfície inteira.
- *
- * O default por família preserva o que ela já entregava antes desta ADR.
- */
-const SurfaceLayoutContext = createContext<SurfaceLayout | null>(null);
-
-/**
- * Publica o layout da superfície para os slots. A superfície também interrompe a
- * propagação de `layout="fill"` da página (ADR 0024): a altura do seu corpo é decisão dela,
- * inclusive quando um portal a renderiza dentro de uma página `fill`.
- */
-export function SurfaceLayoutProvider({
-  value,
-  children,
-}: {
-  value: SurfaceLayout;
-  children?: ReactNode;
-}): ReactElement {
-  return createElement(
-    SurfaceLayoutContext.Provider,
-    { value },
-    createElement(FillBoundary, null, children),
-  );
-}
-
-const familyDefaultLayout: Record<SurfaceFamily, SurfaceLayout> = {
-  page: "sectioned",
-  surface: "continuous",
-  dialog: "sectioned",
-  drawer: "sectioned",
-};
-
-/** O layout vigente: o declarado pelo root da superfície, ou o default da família. */
-export function useSurfaceLayout(family: SurfaceFamily): SurfaceLayout {
-  return useContext(SurfaceLayoutContext) ?? familyDefaultLayout[family];
-}
-
-export function defaultSurfaceLayout(family: SurfaceFamily): SurfaceLayout {
-  return familyDefaultLayout[family];
-}

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

@@ -7,7 +7,6 @@
  *
  *   framed     borda, raio e recorte;
  *   elevation  fundo próprio (`raised`) ou o fundo de quem hospeda (`none`);
- *   layout     ritmo contínuo ou faixas com divisores derivados.
  *
  * Três formas de compor produzem a mesma anatomia:
  *
@@ -52,7 +51,6 @@ import {
   surfaceRegionClasses,
   structuralRegionSpacing,
   surfaceTitleClasses,
-  type SurfaceLayout,
 } from "./surface-anatomy.ts";
 
 export type SurfaceElement = "div" | "section" | "article" | "fieldset";
@@ -64,7 +62,6 @@ interface SurfaceContextValue {
   /** Tem moldura ou elevação: as regiões carregam o recuo. */
   bounded: boolean;
   framed: boolean;
-  layout: SurfaceLayout;
   level: HeadingLevel;
   titleId: string;
   variant: "page" | "section";
@@ -84,11 +81,9 @@ function requiredContext<T>(
 }
 
 /** Como a `legend` de um fieldset delimitado se relaciona com a moldura. */
-function legendPlacement(
-  surface: SurfaceContextValue,
-): "notch" | "band" | null {
+function legendPlacement(surface: SurfaceContextValue): "band" | null {
   if (surface.element !== "fieldset" || !surface.bounded) return null;
-  return surface.framed && surface.layout === "continuous" ? "notch" : "band";
+  return "band";
 }
 
 interface SurfaceBaseProps {
@@ -99,8 +94,6 @@ interface SurfaceBaseProps {
    * o fundo de quem hospeda.
    */
   elevation?: SurfaceElevation;
-  /** Anatomia da superfície inteira: `continuous` (default) ou `sectioned`. */
-  layout?: SurfaceLayout;
   className?: string;
   children?: ReactNode;
 }
@@ -203,7 +196,6 @@ export function Surface({
   asChild = false,
   framed = false,
   elevation = "none",
-  layout = "continuous",
   level = 2,
   title,
   media,
@@ -224,11 +216,6 @@ export function Surface({
   const element: SurfaceElement | null = asChild ? null : (as ?? "div");
   const raised = elevation === "raised";
   const bounded = framed || raised;
-  if (layout === "sectioned" && !bounded) {
-    throw new Error(
-      'Surface layout="sectioned" exige framed ou elevation="raised".',
-    );
-  }
 
   const shorthand = title !== undefined;
   if (
@@ -299,7 +286,6 @@ export function Surface({
     element,
     bounded,
     framed,
-    layout,
     level,
     titleId: resolvedTitleId,
     variant,
@@ -342,13 +328,12 @@ export function Surface({
       data-as={element ?? undefined}
       data-framed={framed}
       data-elevation={elevation}
-      data-layout={layout}
       {...(link ? fill.attributes : {})}
       aria-labelledby={named ? resolvedTitleId : undefined}
       className={cn(
         framed && "rounded-xl border border-border",
         // O divisor e o conteúdo sem recuo encostam na borda: o raio precisa recortar.
-        framed && layout === "sectioned" && "overflow-hidden",
+        framed && "overflow-hidden",
         framed && "has-[>[data-flush=true]]:overflow-hidden",
         raised &&
           "bg-card text-card-foreground [--surface-background:var(--card)]",
@@ -375,7 +360,13 @@ export function Surface({
   );
 }
 
-export type SurfaceHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "title">;
+export type SurfaceHeaderProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> & {
+  /** TabsList abaixo do título; indisponível em fieldset. */
+  tabs?: ReactNode;
+};
 
 const legendInvalidMessage =
   "SurfaceHeader de fieldset aceita somente SurfaceMedia e SurfaceTitle; contador, descrição, metadados e ações ficam fora da legenda.";
@@ -420,9 +411,9 @@ export function SurfaceHeader({
         rowClassName={surfaceHeaderRowClasses("surface")}
         {...(legend ? { invalidMessage: legendInvalidMessage } : {})}
         className={cn(
-          surface.bounded &&
-            placement !== "notch" &&
-            surfaceRegionClasses("surface", surface.layout, "header"),
+          surfaceRegionClasses("surface", "header", {
+            bounded: surface.bounded,
+          }),
           placement !== null && surfaceLegendClasses[placement],
           className,
         )}
@@ -479,7 +470,7 @@ export function SurfaceTitle({
   );
   const legend = surface.element === "fieldset";
   const Heading = legend ? "span" : headingTags[surface.level];
-  usePageHeadingPresence(!legend && surface.level === 1);
+  usePageHeadingPresence(!legend && surface.level === 1, "surface");
   return (
     <Heading
       id={id ?? surface.titleId}
@@ -487,7 +478,7 @@ export function SurfaceTitle({
       className={cn(
         surface.variant === "page"
           ? structuralHeaderClasses.page.title
-          : surfaceTitleClasses("surface", surface.layout),
+          : surfaceTitleClasses("surface"),
         className,
       )}
       {...props}
@@ -605,10 +596,10 @@ export function SurfaceBody({
       data-flush={flush ? "true" : undefined}
       {...fill.attributes}
       className={cn(
-        surfaceRegionClasses("surface", surface.layout, "body", {
-          flush: !surface.bounded || flush,
+        surfaceRegionClasses("surface", "body", {
+          bounded: surface.bounded,
+          flush,
         }),
-        placement === "notch" && surfaceLegendClasses.afterNotch,
         placement === "band" && surfaceLegendClasses.afterBand,
         fill.filling && fillRegionClassName,
         className,
@@ -636,8 +627,7 @@ export function SurfaceFooter({
       data-slot="surface-footer"
       className={cn(
         "flex items-center justify-end gap-2",
-        surface.bounded &&
-          surfaceRegionClasses("surface", surface.layout, "footer"),
+        surfaceRegionClasses("surface", "footer", { bounded: surface.bounded }),
         placement === "band" && surfaceLegendClasses.afterBand,
         className,
       )}

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

@@ -52,6 +52,8 @@ export interface ActionTriggerProps<TInput, TData> {
   input: TInput;
   /** Texto do botão. Default usa action.label. */
   label?: string;
+  /** Nome acessível completo quando o texto visível é abreviado. */
+  "aria-label"?: string;
   /** Contexto visual. Por padrão, ações destrutivas usam `danger`. */
   context?: ButtonProps["context"];
   /** Tratamento visual do Button. */
@@ -70,6 +72,8 @@ export interface ActionTriggerProps<TInput, TData> {
     actionLabel?: string;
     cancelLabel?: string;
   };
+  /** Mensagem de sucesso desta ocorrência; substitui a mensagem do contrato. */
+  successMessage?: string;
   /** Callback adicional pós-sucesso (cache já foi invalidado). */
   onSuccess?: (data: TData) => void;
   /** Notifica o renderer que coordena bloqueio entre várias actions. */
@@ -87,12 +91,14 @@ export function ActionTrigger<TInput, TData>({
   action,
   input,
   label,
+  "aria-label": ariaLabel,
   context,
   variant,
   size,
   disabled = false,
   confirm: confirmProp,
   onSuccess,
+  successMessage,
   onLoadingChange,
   icon,
   itemLabel,
@@ -102,7 +108,9 @@ export function ActionTrigger<TInput, TData>({
   const [open, setOpen] = useState(false);
   const { trigger, isLoading } = useTriggerAction(action, {
     onSuccess: (data) => {
-      toast.success(msgText(action.messages?.success, "Concluído"));
+      toast.success(
+        successMessage ?? msgText(action.messages?.success, "Concluído"),
+      );
       onSuccess?.(data);
       setOpen(false);
     },
@@ -184,7 +192,7 @@ export function ActionTrigger<TInput, TData>({
         size={size ?? (icon !== undefined ? "icon-xs" : "default")}
         busy={isLoading}
         disabled={disabled}
-        aria-label={icon !== undefined ? buttonLabel : undefined}
+        aria-label={ariaLabel ?? (icon !== undefined ? buttonLabel : undefined)}
         onClick={(e) => {
           e.stopPropagation();
           onClick();