@softize/opus 15.2.2 → 16.1.0

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

@@ -1,7 +1,7 @@
 /**
  * `dialog` — respostas imperativas (alert · confirm · prompt · choose) em UMA linha.
  *
- *   await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })
+ *   await dialog.alert({ title: 'Sessão expirada', body: 'Você será desconectado.' })
  *   if (await dialog.confirm({ title: 'Excluir a sessão?', context: 'danger' })) …
  *   const nome = await dialog.prompt({ title: 'Nome do snapshot' })
  *
@@ -26,23 +26,17 @@ import {
   DialogBody,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogMedia,
   DialogTitle,
 } from '../primitives/dialog.tsx'
-import {
-  Button,
-  type ButtonContext,
-  type ButtonVariant,
-} from '../primitives/button.tsx'
+import { Button, type ButtonContext, type ButtonVariant } from '../primitives/button.tsx'
 import { Input } from '../primitives/input.tsx'
 
-/** Campos comuns aos três — o corpo (`body`) é o que o texto da `description` não expressa. */
+/** Campos comuns aos quatro modos imperativos. */
 interface DialogBase {
   title: React.ReactNode
-  description?: React.ReactNode
   /** Ícone grande acima do título (o quadro do DialogMedia). */
   media?: React.ReactNode
   /** Conteúdo próprio entre a descrição e os botões (lista, detalhe destacado). */
@@ -80,16 +74,27 @@ export interface DialogChoice<TResult extends string = string> {
 }
 
 /** `choose` — uma escolha simples entre resultados explícitos. */
-export interface ChooseOptions<TResult extends string = string>
-  extends Omit<DialogBase, 'action'> {
+export interface ChooseOptions<TResult extends string = string> extends Omit<DialogBase, 'action'> {
   actions: readonly DialogChoice<TResult>[]
 }
 
 type Pending =
   | ({ kind: 'alert'; id: number; resolve: () => void } & AlertOptions)
-  | ({ kind: 'confirm'; id: number; resolve: (ok: boolean) => void } & ConfirmOptions)
-  | ({ kind: 'prompt'; id: number; resolve: (value: string | null) => void } & PromptOptions)
-  | ({ kind: 'choose'; id: number; resolve: (result: string | null) => void } & ChooseOptions)
+  | ({
+      kind: 'confirm'
+      id: number
+      resolve: (ok: boolean) => void
+    } & ConfirmOptions)
+  | ({
+      kind: 'prompt'
+      id: number
+      resolve: (value: string | null) => void
+    } & PromptOptions)
+  | ({
+      kind: 'choose'
+      id: number
+      resolve: (result: string | null) => void
+    } & ChooseOptions)
 
 let nextId = 0
 let listener: ((p: Pending) => void) | null = null
@@ -205,10 +210,14 @@ export function DialogHost(): React.ReactElement {
     else p.resolve(value)
   }
 
-  const context = current !== undefined && (current.kind === 'confirm' || current.kind === 'prompt')
-    ? current.context ?? 'primary'
-    : 'primary'
+  const context =
+    current !== undefined && (current.kind === 'confirm' || current.kind === 'prompt')
+      ? (current.context ?? 'primary')
+      : 'primary'
   const defaultAction = current?.kind === 'alert' ? 'OK' : 'Confirmar'
+  const bodyId = current === undefined ? undefined : `dialog-body-${current.id}`
+  const bodyDescribesDialog =
+    current !== undefined && (typeof current.body === 'string' || typeof current.body === 'number')
 
   return (
     <Dialog
@@ -223,6 +232,7 @@ export function DialogHost(): React.ReactElement {
           data-slot="dialog"
           data-kind={current.kind}
           className={current.kind === 'choose' ? 'max-w-lg' : undefined}
+          aria-describedby={bodyDescribesDialog ? bodyId : undefined}
           // Prompt: o foco vai pro input, não pro Cancelar (default do Dialog). Via
           // querySelector (não ref) — o Input é function component sem forwardRef, e isto
           // funciona igual em React 18 e 19.
@@ -241,11 +251,8 @@ export function DialogHost(): React.ReactElement {
           <DialogHeader>
             {current.media !== undefined && <DialogMedia>{current.media}</DialogMedia>}
             <DialogTitle>{current.title}</DialogTitle>
-            {current.description !== undefined && (
-              <DialogDescription>{current.description}</DialogDescription>
-            )}
           </DialogHeader>
-          {current.body !== undefined && <DialogBody>{current.body}</DialogBody>}
+          {current.body !== undefined && <DialogBody id={bodyId}>{current.body}</DialogBody>}
           {current.kind === 'prompt' && (
             <Input
               value={text}
@@ -270,18 +277,16 @@ export function DialogHost(): React.ReactElement {
               current.actions.map((action, index) => {
                 const primary = index === current.actions.length - 1
                 return (
-                  <DialogClose
-                    key={action.result}
-                    initialFocus={action.initialFocus}
-                    asChild
-                  >
+                  <DialogClose key={action.result} initialFocus={action.initialFocus} asChild>
                     <Button
                       context={action.context ?? (primary ? 'primary' : 'neutral')}
                       variant={action.variant ?? (primary ? 'solid' : 'ghost')}
                       disabled={action.disabled}
-                      onClick={() => drop(current.id, (p) => {
-                        if (p.kind === 'choose') p.resolve(action.result)
-                      })}
+                      onClick={() =>
+                        drop(current.id, (p) => {
+                          if (p.kind === 'choose') p.resolve(action.result)
+                        })
+                      }
                     >
                       {action.label}
                     </Button>

package/src/ui/components/patterns/form-dialog.tsx

@@ -8,6 +8,7 @@
  * pelo próprio form (fonte única do scroll e da faixa, sem string duplicada).
  */
 
+import { useId, type ReactNode } from 'react'
 import {
   Dialog,
   DialogBody,
@@ -15,42 +16,53 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
 } from '../primitives/dialog.tsx'
 import { ActionForm, type ActionFormProps } from './form.tsx'
 
-export interface ActionFormDialogProps<TInput extends Record<string, unknown>, TData>
-  extends ActionFormProps<TInput, TData> {
+export interface ActionFormDialogProps<
+  TInput extends Record<string, unknown>,
+  TData,
+> extends ActionFormProps<TInput, TData> {
   open: boolean
   onOpenChange: (open: boolean) => void
   title: string
-  description?: string
+  /** Conteúdo relevante apresentado antes dos campos, como texto ou Alert. */
+  intro?: ReactNode
 }
 
 export function ActionFormDialog<TInput extends Record<string, unknown>, TData>({
   open,
   onOpenChange,
   title,
-  description,
+  intro,
   onSuccess,
   onCancel,
   ...rest
 }: ActionFormDialogProps<TInput, TData>) {
+  const introId = useId()
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       {/* Header e rodapé FIXOS, só o CORPO (campos) scrolla — o "X" não rola junto e
           forms longos não estouram a viewport. O content já é coluna flex com teto. */}
-      <DialogContent>
+      <DialogContent aria-describedby={intro === undefined ? undefined : introId}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          {description !== undefined && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
         <ActionForm
           {...rest}
           className="min-h-0 flex-1"
           // Slots injetados: o corpo vira DialogBody (rola), o rodapé vira DialogFooter (a
           // faixa da casa — fonte única). Os botões seguem dentro do <form> do ActionForm.
-          body={(fields) => <DialogBody>{fields}</DialogBody>}
+          body={(fields) => (
+            <DialogBody>
+              {intro !== undefined && (
+                <div id={introId} className="mb-4">
+                  {intro}
+                </div>
+              )}
+              {fields}
+            </DialogBody>
+          )}
           footer={(actions) => <DialogFooter>{actions}</DialogFooter>}
           onSuccess={(d) => {
             onSuccess?.(d)

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

@@ -25,6 +25,7 @@ import {
   isValidElement,
   useEffect,
   useLayoutEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -90,7 +91,6 @@ import {
   DialogBody,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -1106,7 +1106,12 @@ export function ActionFilterBar({
             className="flex flex-wrap items-center gap-1.5"
           >
             {chips.map((chip) => (
-              <Badge key={chip.name} context="neutral" variant="solid" className="gap-1 pr-1">
+              <Badge
+                key={chip.name}
+                context="neutral"
+                variant="solid"
+                className="gap-1 pr-1"
+              >
                 <span className="text-muted-foreground">{chip.label}:</span>{" "}
                 {chip.value}
                 <button
@@ -1193,6 +1198,7 @@ export function ActionList<TInput, TItem>({
   state: controlledState,
   onStateChange,
 }: ActionListProps<TInput, TItem>) {
+  const confirmBodyId = useId();
   // Query-backed (useListAction): busca declarativa por [name, input] E refetch
   // automático quando um form/trigger invalida a action (`invalidates: ['x.list']`).
   // O input efetivo é computado abaixo; o hook re-busca quando ele muda.
@@ -1818,17 +1824,26 @@ export function ActionList<TInput, TItem>({
               if (!o) setConfirming(null);
             }}
           >
-            <DialogContent>
+            <DialogContent
+              aria-describedby={
+                confirming.confirm?.message === undefined
+                  ? undefined
+                  : confirmBodyId
+              }
+            >
               <DialogHeader>
                 <DialogTitle>
                   {confirming.confirm?.title ?? confirming.label}
                 </DialogTitle>
-                {confirming.confirm?.message !== undefined && (
-                  <DialogDescription>
-                    {confirming.confirm.message}
-                  </DialogDescription>
-                )}
               </DialogHeader>
+              {confirming.confirm?.message !== undefined && (
+                <DialogBody
+                  id={confirmBodyId}
+                  className="text-sm text-muted-foreground"
+                >
+                  {confirming.confirm.message}
+                </DialogBody>
+              )}
               <DialogFooter>
                 <DialogClose initialFocus asChild>
                   <Button variant="ghost" size="sm">
@@ -1838,7 +1853,9 @@ export function ActionList<TInput, TItem>({
                 <DialogClose asChild>
                   <Button
                     size="sm"
-                    context={confirming.destructive === true ? "danger" : "primary"}
+                    context={
+                      confirming.destructive === true ? "danger" : "primary"
+                    }
                     variant="solid"
                     onClick={() => {
                       const a = confirming;