@softize/opus 15.2.2 → 16.0.0

package/src/ui/components/primitives/command.tsx

@@ -1,26 +1,17 @@
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
 
 import { cn } from '../../lib/cn.ts'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from './dialog.tsx'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './dialog.tsx'
 
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-        className
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        className,
       )}
       {...props}
     />
@@ -28,8 +19,8 @@ function Command({
 }
 
 function CommandDialog({
-  title = "Paleta de comandos",
-  description = "Busque um comando para executar…",
+  title = 'Paleta de comandos',
+  description = 'Busque um comando para executar…',
   children,
   className,
   showCloseButton = true,
@@ -40,15 +31,17 @@ function CommandDialog({
   className?: string
   showCloseButton?: boolean
 }) {
+  const descriptionId = React.useId()
   return (
     <Dialog {...props}>
       <DialogHeader className="sr-only">
         <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
+        <p id={descriptionId}>{description}</p>
       </DialogHeader>
       <DialogContent
-        className={cn("overflow-hidden p-0", className)}
+        className={cn('overflow-hidden p-0', className)}
         showCloseButton={showCloseButton}
+        aria-describedby={descriptionId}
       >
         <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
@@ -58,21 +51,15 @@ function CommandDialog({
   )
 }
 
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
         )}
         {...props}
       />
@@ -80,90 +67,61 @@ function CommandInput({
   )
 }
 
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn(
-        "max-h-[18.75rem] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
+      className={cn('max-h-[18.75rem] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
       {...props}
     />
   )
 }
 
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
 }
 
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-        className
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        className,
       )}
       {...props}
     />
   )
 }
 
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
+      className={cn('-mx-1 h-px bg-border', className)}
       {...props}
     />
   )
 }
 
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
         "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
   )
 }
 
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   )

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

@@ -12,26 +12,22 @@ interface DialogContextValue {
   onResult?: (result: string) => void
 }
 
-const DialogContext = React.createContext<DialogContextValue>({ mode: 'default' })
+const DialogContext = React.createContext<DialogContextValue>({
+  mode: 'default',
+})
 
 function useDialogContext(): DialogContextValue {
   return React.useContext(DialogContext)
 }
 
-export interface DialogProps
-  extends React.ComponentProps<typeof DialogPrimitive.Root> {
+export interface DialogProps extends React.ComponentProps<typeof DialogPrimitive.Root> {
   /** `alert` exige uma resposta explícita e deriva `role="alertdialog"`. */
   mode?: DialogMode
   /** Recebe o `result` do `DialogClose` acionado. */
   onResult?: (result: string) => void
 }
 
-export function Dialog({
-  mode = 'default',
-  onResult,
-  modal,
-  ...props
-}: DialogProps) {
+export function Dialog({ mode = 'default', onResult, modal, ...props }: DialogProps) {
   const context = React.useMemo(() => ({ mode, onResult }), [mode, onResult])
 
   return (
@@ -45,9 +41,7 @@ export function Dialog({
   )
 }
 
-export function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   const { mode } = useDialogContext()
   return mode === 'alert' ? (
     <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
@@ -56,9 +50,7 @@ export function DialogTrigger({
   )
 }
 
-export function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+export function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   const { mode } = useDialogContext()
   return mode === 'alert' ? (
     <AlertDialogPrimitive.Portal data-slot="dialog-portal" {...props} />
@@ -67,20 +59,14 @@ export function DialogPortal({
   )
 }
 
-export interface DialogCloseProps
-  extends React.ComponentProps<typeof DialogPrimitive.Close> {
+export interface DialogCloseProps extends React.ComponentProps<typeof DialogPrimitive.Close> {
   /** No modo `alert`, registra este controle como destino inicial seguro do foco. */
   initialFocus?: boolean
   /** Resposta entregue a `Dialog.onResult` antes do fechamento. */
   result?: string
 }
 
-export function DialogClose({
-  initialFocus = false,
-  result,
-  onClick,
-  ...props
-}: DialogCloseProps) {
+export function DialogClose({ initialFocus = false, result, onClick, ...props }: DialogCloseProps) {
   const root = useDialogContext()
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
     onClick?.(event)
@@ -88,9 +74,7 @@ export function DialogClose({
   }
 
   if (root.mode === 'alert') {
-    const ClosePrimitive = initialFocus
-      ? AlertDialogPrimitive.Cancel
-      : AlertDialogPrimitive.Action
+    const ClosePrimitive = initialFocus ? AlertDialogPrimitive.Cancel : AlertDialogPrimitive.Action
     return (
       <ClosePrimitive
         data-slot="dialog-close"
@@ -115,24 +99,13 @@ export function DialogClose({
 export const overlayClasses =
   'fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0'
 
-export function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+export function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   const { mode } = useDialogContext()
   const overlay = cn(overlayClasses, className)
   return mode === 'alert' ? (
-    <AlertDialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={overlay}
-      {...props}
-    />
+    <AlertDialogPrimitive.Overlay data-slot="dialog-overlay" className={overlay} {...props} />
   ) : (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={overlay}
-      {...props}
-    />
+    <DialogPrimitive.Overlay data-slot="dialog-overlay" className={overlay} {...props} />
   )
 }
 
@@ -140,6 +113,7 @@ export function DialogContent({
   className,
   children,
   showCloseButton,
+  'aria-describedby': ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   /** Mostra o “X” no modo padrão. O modo `alert` exige uma resposta identificável. */
@@ -158,6 +132,7 @@ export function DialogContent({
           data-slot="dialog-content"
           data-mode="alert"
           className={cn(contentClasses, 'grid max-w-xs gap-4 p-6', className)}
+          aria-describedby={ariaDescribedBy}
           {...props}
         >
           {children}
@@ -172,11 +147,8 @@ export function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         data-mode="default"
-        className={cn(
-          contentClasses,
-          'flex max-h-[85vh] flex-col sm:max-w-lg',
-          className,
-        )}
+        className={cn(contentClasses, 'flex max-h-[85vh] flex-col sm:max-w-lg', className)}
+        aria-describedby={ariaDescribedBy}
         {...props}
       >
         {children}
@@ -197,10 +169,7 @@ export function DialogContent({
   )
 }
 
-export function DialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
+export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   const { mode } = useDialogContext()
   return (
     <div
@@ -216,10 +185,7 @@ export function DialogHeader({
   )
 }
 
-export function DialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
+export function DialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-media"
@@ -232,27 +198,18 @@ export function DialogMedia({
   )
 }
 
-export function DialogBody({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
+export function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
   const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-body"
-      className={cn(
-        mode === 'alert' ? 'min-w-0' : 'min-h-0 flex-1 overflow-y-auto p-5',
-        className,
-      )}
+      className={cn(mode === 'alert' ? 'min-w-0' : 'min-h-0 flex-1 overflow-y-auto p-5', className)}
       {...props}
     />
   )
 }
 
-export function DialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
+export function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   const { mode } = useDialogContext()
   return (
     <div
@@ -268,10 +225,7 @@ export function DialogFooter({
   )
 }
 
-export function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+export function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   const { mode } = useDialogContext()
   return mode === 'alert' ? (
     <AlertDialogPrimitive.Title
@@ -287,23 +241,3 @@ export function DialogTitle({
     />
   )
 }
-
-export function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  const { mode } = useDialogContext()
-  return mode === 'alert' ? (
-    <AlertDialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    />
-  ) : (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    />
-  )
-}

package/src/ui/components/primitives/drawer.tsx

@@ -6,27 +6,19 @@ import { cn } from "../../lib/cn.ts";
 import { focusRing } from "./control.ts";
 import { overlayClasses } from "./dialog.tsx";
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
@@ -37,10 +29,7 @@ function DrawerOverlay({
   return (
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
-      className={cn(
-        overlayClasses,
-        className,
-      )}
+      className={cn(overlayClasses, className)}
       {...props}
     />
   );
@@ -51,6 +40,7 @@ function DrawerContent({
   children,
   side = "right",
   showCloseButton = true,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
@@ -73,6 +63,7 @@ function DrawerContent({
             "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className,
         )}
+        aria-describedby={ariaDescribedBy}
         {...props}
       >
         {children}
@@ -125,10 +116,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -138,19 +126,6 @@ function DrawerTitle({
   );
 }
 
-function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  );
-}
-
 export {
   Drawer,
   DrawerTrigger,
@@ -160,5 +135,4 @@ export {
   DrawerBody,
   DrawerFooter,
   DrawerTitle,
-  DrawerDescription,
 };

package/src/ui/docs/content/action-form-dialog.md

@@ -5,28 +5,30 @@ para outra página. O consumidor controla `open`; depois de uma execução bem-s
 fecha o modal. O cabeçalho e o rodapé permanecem visíveis enquanto os campos podem rolar.
 
 ```tsx preview
-const [open, setOpen] = useState(false)
+const [open, setOpen] = useState(false);
 
 render(
   <DocBrowserActionProvider>
-    <Button onClick={() => setOpen(true)}><Plus /> Novo workspace</Button>
+    <Button onClick={() => setOpen(true)}>
+      <Plus /> Novo workspace
+    </Button>
     <ActionFormDialog
       open={open}
       onOpenChange={setOpen}
       title="Novo workspace"
-      description="O workspace agrupa os repositórios e agentes do cliente."
       action={docWorkspaceCreate}
       submitLabel="Criar workspace"
     />
   </DocBrowserActionProvider>,
-)
+);
 ```
 
 ## Propriedades de ActionFormDialog
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `open / onOpenChange` | `boolean / (open: boolean) => void` | | Estado controlado do modal. `onOpenChange(false)` é chamado no sucesso e ao cancelar. |
-| `title / description` | `string` | | Conteúdo do cabeçalho; `description` é opcional. |
-| `submitLabel` | `string` | `'Salvar'` | Resultado da ação principal. Em criação, informe `Criar {recurso}`; em edição, `Salvar alterações`. |
-| `…ActionFormProps` | `action, defaultValues, onSuccess, fieldOptions…` | | Demais propriedades repassadas ao `ActionForm` interno. |
+| Propriedade           | Tipo                                              | Padrão     | Descrição                                                                                           |
+| --------------------- | ------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------- |
+| `open / onOpenChange` | `boolean / (open: boolean) => void`               |            | Estado controlado do modal. `onOpenChange(false)` é chamado no sucesso e ao cancelar.               |
+| `title`               | `string`                                          |            | Nome da tarefa exibido no cabeçalho.                                                                |
+| `intro`               | `ReactNode`                                       |            | Contexto relevante no início do corpo, como texto ou `Alert`.                                       |
+| `submitLabel`         | `string`                                          | `'Salvar'` | Resultado da ação principal. Em criação, informe `Criar {recurso}`; em edição, `Salvar alterações`. |
+| `…ActionFormProps`    | `action, defaultValues, onSuccess, fieldOptions…` |            | Demais propriedades repassadas ao `ActionForm` interno.                                             |

package/src/ui/docs/content/action-list-dialog.md

@@ -6,7 +6,7 @@ outras actions. O consumidor compõe os itens por `children`; o modal mantém os
 ações.
 
 ```tsx preview col
-const [open, setOpen] = useState(false)
+const [open, setOpen] = useState(false);
 
 render(
   <DocBrowserActionProvider>
@@ -17,7 +17,6 @@ render(
       open={open}
       onOpenChange={setOpen}
       title="Workspaces"
-      description="Back-office"
       actions={
         <Button size="sm" variant="outline">
           <Plus /> Workspace
@@ -28,17 +27,22 @@ render(
       {(workspaces) => (
         <div className="space-y-2">
           {workspaces.map((w) => (
-            <div key={w.id} className="flex items-center gap-2 rounded-md border border-border p-3">
+            <div
+              key={w.id}
+              className="flex items-center gap-2 rounded-md border border-border p-3"
+            >
               <span className="text-sm font-semibold">{w.name}</span>
               <DictionaryValue dict={docWorkspaceStatus} value={w.status} />
-              <span className="ml-auto text-xs text-muted-foreground">{w.agents} agentes</span>
+              <span className="ml-auto text-xs text-muted-foreground">
+                {w.agents} agentes
+              </span>
             </div>
           ))}
         </div>
       )}
     </ActionListDialog>
   </DocBrowserActionProvider>,
-)
+);
 ```
 
 ## Estado adicional do consumidor
@@ -59,15 +63,16 @@ corpo do modal.
 
 ## Propriedades de ActionListDialog
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `action / input` | `ListAction / TInput` | | O contrato e os filtros — mudou o input, re-busca; `invalidates` de forms/triggers refaz sozinho. |
-| `open / onOpenChange` | `boolean / (open) => void` | | Controle do modal — de quem orquestra. |
-| `title / description` | `string` | | O DialogHeader fixo (em geral, o que é a lista e de quem). |
-| `children` | `(items, refetch) => ReactNode` | | O layout dos itens (cards/linhas) — os estados já saíram daqui. |
-| `note` | `ReactNode \| (items) => ReactNode` | `"N no total"` | Nota à esquerda da toolbar — o default é derivado dos itens. |
-| `actions` | `ReactNode` | | Ação à direita da toolbar — em geral o botão de criar. |
-| `empty` | `(items) => boolean` | `items.length === 0` | Sobrepõe o vazio derivado. |
-| `loading` | `boolean` | | Carga extra agregada à do fetch (query irmã). |
-| `emptyMessage / errorMessage / retryLabel` | `string` | | Textos dos estados; `retryLabel` nomeia a ação somente com ícone e seu tooltip. |
-| `className` | `string` | `sm:max-w-3xl` | Largura do DialogContent. |
+| Propriedade                                | Tipo                                | Padrão               | Descrição                                                                                         |
+| ------------------------------------------ | ----------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------- |
+| `action / input`                           | `ListAction / TInput`               |                      | O contrato e os filtros — mudou o input, re-busca; `invalidates` de forms/triggers refaz sozinho. |
+| `open / onOpenChange`                      | `boolean / (open) => void`          |                      | Controle do modal — de quem orquestra.                                                            |
+| `title`                                    | `string`                            |                      | Nome da lista exibido no cabeçalho fixo.                                                          |
+| `intro`                                    | `ReactNode`                         |                      | Contexto relevante no início do corpo, como texto ou `Alert`.                                     |
+| `children`                                 | `(items, refetch) => ReactNode`     |                      | O layout dos itens (cards/linhas) — os estados já saíram daqui.                                   |
+| `note`                                     | `ReactNode \| (items) => ReactNode` | `"N no total"`       | Nota à esquerda da toolbar — o default é derivado dos itens.                                      |
+| `actions`                                  | `ReactNode`                         |                      | Ação à direita da toolbar — em geral o botão de criar.                                            |
+| `empty`                                    | `(items) => boolean`                | `items.length === 0` | Sobrepõe o vazio derivado.                                                                        |
+| `loading`                                  | `boolean`                           |                      | Carga extra agregada à do fetch (query irmã).                                                     |
+| `emptyMessage / errorMessage / retryLabel` | `string`                            |                      | Textos dos estados; `retryLabel` nomeia a ação somente com ícone e seu tooltip.                   |
+| `className`                                | `string`                            | `sm:max-w-3xl`       | Largura do DialogContent.                                                                         |