@softize/opus 17.2.0 → 18.0.0

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

@@ -19,8 +19,8 @@
  * de cada tipo (void, `false`, `null`).
  */
 
-import * as React from 'react'
-import type { UiContext } from '../../../core/ui-context.ts'
+import * as React from "react";
+import type { UiContext } from "../../../core/ui-context.ts";
 import {
   Dialog,
   DialogBody,
@@ -30,19 +30,24 @@ import {
   DialogHeader,
   DialogMedia,
   DialogTitle,
-} from '../primitives/dialog.tsx'
-import { Button, type ButtonContext, type ButtonVariant } from '../primitives/button.tsx'
-import { Input } from '../primitives/input.tsx'
+} from "../primitives/dialog.tsx";
+import {
+  Button,
+  type ButtonContext,
+  type ButtonVariant,
+} from "../primitives/button.tsx";
+import { Input } from "../primitives/input.tsx";
+import { ButtonGroup } from "../primitives/button-group.tsx";
 
 /** Campos comuns aos quatro modos imperativos. */
 interface DialogBase {
-  title: React.ReactNode
+  title: React.ReactNode;
   /** Ícone grande acima do título (o quadro do DialogMedia). */
-  media?: React.ReactNode
+  media?: React.ReactNode;
   /** Conteúdo próprio entre a descrição e os botões (lista, detalhe destacado). */
-  body?: React.ReactNode
+  body?: React.ReactNode;
   /** Rótulo do botão que confirma. */
-  action?: string
+  action?: string;
 }
 
 /** `alert` — reconhecimento obrigatório, um botão só. */
@@ -50,276 +55,308 @@ export interface AlertOptions extends DialogBase {}
 
 /** `confirm` — pergunta de sim/não. */
 export interface ConfirmOptions extends DialogBase {
-  cancel?: string
+  cancel?: string;
   /** Contexto do botão de confirmação. */
-  context?: Extract<UiContext, 'primary' | 'danger'>
+  context?: Extract<UiContext, "primary" | "danger">;
 }
 
 /** `prompt` — uma string livre. Form de verdade (campos, contrato) → ActionFormDialog. */
 export interface PromptOptions extends DialogBase {
-  cancel?: string
-  context?: Extract<UiContext, 'primary' | 'danger'>
-  placeholder?: string
-  defaultValue?: string
+  cancel?: string;
+  context?: Extract<UiContext, "primary" | "danger">;
+  placeholder?: string;
+  defaultValue?: string;
 }
 
 export interface DialogChoice<TResult extends string = string> {
   /** Valor devolvido quando esta ação for escolhida. Deve ser único na coleção. */
-  result: TResult
-  label: React.ReactNode
-  context?: ButtonContext
-  variant?: ButtonVariant
-  initialFocus?: boolean
-  disabled?: boolean
+  result: TResult;
+  label: React.ReactNode;
+  context?: ButtonContext;
+  variant?: ButtonVariant;
+  initialFocus?: boolean;
+  disabled?: boolean;
 }
 
 /** `choose` — uma escolha simples entre resultados explícitos. */
-export interface ChooseOptions<TResult extends string = string> extends Omit<DialogBase, 'action'> {
-  actions: readonly DialogChoice<TResult>[]
+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: "alert"; id: number; resolve: () => void } & AlertOptions)
   | ({
-      kind: 'confirm'
-      id: number
-      resolve: (ok: boolean) => void
+      kind: "confirm";
+      id: number;
+      resolve: (ok: boolean) => void;
     } & ConfirmOptions)
   | ({
-      kind: 'prompt'
-      id: number
-      resolve: (value: string | null) => void
+      kind: "prompt";
+      id: number;
+      resolve: (value: string | null) => void;
     } & PromptOptions)
   | ({
-      kind: 'choose'
-      id: number
-      resolve: (result: string | null) => void
-    } & ChooseOptions)
+      kind: "choose";
+      id: number;
+      resolve: (result: string | null) => void;
+    } & ChooseOptions);
 
-let nextId = 0
-let listener: ((p: Pending) => void) | null = null
+let nextId = 0;
+let listener: ((p: Pending) => void) | null = null;
 
 /** Sem `<DialogHost />` montado, LANÇA em vez de deixar a promise pendurada (clique sem
  *  efeito é o pior desfecho de uma interrupção que exige resposta). */
 function requireHost(fn: string): Error | null {
-  if (listener !== null) return null
+  if (listener !== null) return null;
   return new Error(
     `${fn} foi chamado sem <DialogHost /> montado — ponha o host no shell do app (ao lado do <Toaster />).`,
-  )
+  );
 }
 
-function validateChoose<TResult extends string>(options: ChooseOptions<TResult>): Error | null {
+function validateChoose<TResult extends string>(
+  options: ChooseOptions<TResult>,
+): Error | null {
   if (options.actions.length === 0) {
-    return new Error('dialog.choose() exige pelo menos uma ação.')
+    return new Error("dialog.choose() exige pelo menos uma ação.");
   }
-  const focused = options.actions.filter((action) => action.initialFocus === true)
+  const focused = options.actions.filter(
+    (action) => action.initialFocus === true,
+  );
   if (focused.length !== 1) {
-    return new Error('dialog.choose() exige uma única ação com initialFocus.')
+    return new Error("dialog.choose() exige uma única ação com initialFocus.");
   }
   if (focused[0]?.disabled === true) {
-    return new Error('dialog.choose() não permite initialFocus em uma ação desabilitada.')
+    return new Error(
+      "dialog.choose() não permite initialFocus em uma ação desabilitada.",
+    );
   }
-  if (new Set(options.actions.map((action) => action.result)).size !== options.actions.length) {
-    return new Error('dialog.choose() exige resultados únicos.')
+  if (
+    new Set(options.actions.map((action) => action.result)).size !==
+    options.actions.length
+  ) {
+    return new Error("dialog.choose() exige resultados únicos.");
   }
-  return null
+  return null;
 }
 
 export const dialog = {
   /** Avisa e espera o "OK". `Promise<void>` — só reconhecimento, sem decisão. */
   alert(options: AlertOptions): Promise<void> {
-    const err = requireHost('dialog.alert()')
-    if (err !== null) return Promise.reject(err)
+    const err = requireHost("dialog.alert()");
+    if (err !== null) return Promise.reject(err);
     return new Promise<void>((resolve) => {
-      listener?.({ ...options, kind: 'alert', id: nextId++, resolve })
-    })
+      listener?.({ ...options, kind: "alert", id: nextId++, resolve });
+    });
   },
   /** Pergunta sim/não. `Promise<boolean>` — fechar/ESC resolve `false`. */
   confirm(options: ConfirmOptions): Promise<boolean> {
-    const err = requireHost('dialog.confirm()')
-    if (err !== null) return Promise.reject(err)
+    const err = requireHost("dialog.confirm()");
+    if (err !== null) return Promise.reject(err);
     return new Promise<boolean>((resolve) => {
-      listener?.({ ...options, kind: 'confirm', id: nextId++, resolve })
-    })
+      listener?.({ ...options, kind: "confirm", id: nextId++, resolve });
+    });
   },
   /** Pede uma string. `Promise<string | null>` — fechar/ESC/Cancelar resolve `null`. */
   prompt(options: PromptOptions): Promise<string | null> {
-    const err = requireHost('dialog.prompt()')
-    if (err !== null) return Promise.reject(err)
+    const err = requireHost("dialog.prompt()");
+    if (err !== null) return Promise.reject(err);
     return new Promise<string | null>((resolve) => {
-      listener?.({ ...options, kind: 'prompt', id: nextId++, resolve })
-    })
+      listener?.({ ...options, kind: "prompt", id: nextId++, resolve });
+    });
   },
   /** Oferece resultados explícitos. Fechar/ESC sem escolher resolve `null`. */
-  choose<const TResult extends string>(options: ChooseOptions<TResult>): Promise<TResult | null> {
-    const invalid = validateChoose(options)
-    if (invalid !== null) return Promise.reject(invalid)
-    const err = requireHost('dialog.choose()')
-    if (err !== null) return Promise.reject(err)
+  choose<const TResult extends string>(
+    options: ChooseOptions<TResult>,
+  ): Promise<TResult | null> {
+    const invalid = validateChoose(options);
+    if (invalid !== null) return Promise.reject(invalid);
+    const err = requireHost("dialog.choose()");
+    if (err !== null) return Promise.reject(err);
     return new Promise<TResult | null>((resolve) => {
       listener?.({
         ...options,
-        kind: 'choose',
+        kind: "choose",
         id: nextId++,
         resolve: (result) => resolve(result as TResult | null),
-      })
-    })
+      });
+    });
   },
-}
+};
 
 /**
  * O host — um por app, no shell. Enfileira: uma por vez (duas caixas empilhadas seriam
  * ambíguas sobre qual clique respondeu o quê).
  */
 export function DialogHost(): React.ReactElement {
-  const [queue, setQueue] = React.useState<Pending[]>([])
-  const current = queue[0]
-  const [text, setText] = React.useState('')
+  const [queue, setQueue] = React.useState<Pending[]>([]);
+  const current = queue[0];
+  const [text, setText] = React.useState("");
 
   React.useEffect(() => {
-    listener = (p) => setQueue((q) => [...q, p])
+    listener = (p) => setQueue((q) => [...q, p]);
     return () => {
-      listener = null
-    }
-  }, [])
+      listener = null;
+    };
+  }, []);
 
   // Reseta o input quando a pergunta corrente troca (defaultValue do prompt, ou vazio).
   React.useEffect(() => {
-    setText(current !== undefined && current.kind === 'prompt' ? (current.defaultValue ?? '') : '')
-  }, [current?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+    setText(
+      current !== undefined && current.kind === "prompt"
+        ? (current.defaultValue ?? "")
+        : "",
+    );
+  }, [current?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Resolve a pergunta `id` — e SÓ ela. A 2ª chamada pro mesmo id (clique + o fechamento
   // que o Radix dispara em seguida) é inócua: a promise já resolveu e a fila já andou.
   const drop = (id: number, apply: (p: Pending) => void): void => {
     setQueue((q) => {
-      if (q[0]?.id !== id) return q
-      apply(q[0])
-      return q.slice(1)
-    })
-  }
+      if (q[0]?.id !== id) return q;
+      apply(q[0]);
+      return q.slice(1);
+    });
+  };
   // Fechar É responder "não" — o "não" de cada tipo.
   const cancel = (p: Pending): void => {
-    if (p.kind === 'alert') p.resolve()
-    else if (p.kind === 'confirm') p.resolve(false)
-    else if (p.kind === 'prompt') p.resolve(null)
-    else p.resolve(null)
-  }
+    if (p.kind === "alert") p.resolve();
+    else if (p.kind === "confirm") p.resolve(false);
+    else if (p.kind === "prompt") p.resolve(null);
+    else p.resolve(null);
+  };
   const accept = (p: Pending, value: string): void => {
-    if (p.kind === 'alert') p.resolve()
-    else if (p.kind === 'confirm') p.resolve(true)
-    else p.resolve(value)
-  }
+    if (p.kind === "alert") p.resolve();
+    else if (p.kind === "confirm") p.resolve(true);
+    else p.resolve(value);
+  };
 
   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}`
+    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')
+    current !== undefined &&
+    (typeof current.body === "string" || typeof current.body === "number");
 
   return (
     <Dialog
       mode="alert"
       open={current !== undefined}
       onOpenChange={(open) => {
-        if (!open && current !== undefined) drop(current.id, cancel)
+        if (!open && current !== undefined) drop(current.id, cancel);
       }}
     >
       {current !== undefined && (
         <DialogContent
           data-slot="dialog"
           data-kind={current.kind}
-          className={current.kind === 'choose' ? 'max-w-lg' : undefined}
+          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.
           onOpenAutoFocus={
-            current.kind === 'prompt'
+            current.kind === "prompt"
               ? (e) => {
-                  e.preventDefault()
-                  const root = (e.currentTarget as HTMLElement | null) ?? document
-                  const el = root.querySelector<HTMLInputElement>('[data-slot="input"]')
-                  el?.focus()
-                  el?.select()
+                  e.preventDefault();
+                  const root =
+                    (e.currentTarget as HTMLElement | null) ?? document;
+                  const el = root.querySelector<HTMLInputElement>(
+                    '[data-slot="input"]',
+                  );
+                  el?.focus();
+                  el?.select();
                 }
               : undefined
           }
         >
           <DialogHeader>
-            {current.media !== undefined && <DialogMedia>{current.media}</DialogMedia>}
+            {current.media !== undefined && (
+              <DialogMedia>{current.media}</DialogMedia>
+            )}
             <DialogTitle>{current.title}</DialogTitle>
           </DialogHeader>
-          {current.body !== undefined && <DialogBody id={bodyId}>{current.body}</DialogBody>}
-          {current.kind === 'prompt' && (
+          {current.body !== undefined && (
+            <DialogBody id={bodyId}>{current.body}</DialogBody>
+          )}
+          {current.kind === "prompt" && (
             <Input
               value={text}
               placeholder={current.placeholder}
               onChange={(e) => setText(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault()
-                  drop(current.id, (p) => accept(p, text))
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  drop(current.id, (p) => accept(p, text));
                 }
               }}
             />
           )}
-          <DialogFooter
-            className={
-              current.kind === 'choose'
-                ? 'grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]'
-                : undefined
-            }
-          >
-            {current.kind === 'choose' ? (
-              current.actions.map((action, index) => {
-                const primary = index === current.actions.length - 1
-                return (
-                  <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)
-                        })
-                      }
+          <DialogFooter>
+            <ButtonGroup mode="spaced" distribution="equal">
+              {current.kind === "choose" ? (
+                current.actions.map((action, index) => {
+                  const primary = index === current.actions.length - 1;
+                  return (
+                    <DialogClose
+                      key={action.result}
+                      initialFocus={action.initialFocus}
+                      asChild
                     >
-                      {action.label}
-                    </Button>
-                  </DialogClose>
-                )
-              })
-            ) : (
-              <>
-                {current.kind !== 'alert' && (
-                  <DialogClose initialFocus asChild>
+                      <Button
+                        context={
+                          action.context ?? (primary ? "primary" : "neutral")
+                        }
+                        variant={
+                          action.variant ?? (primary ? "solid" : "outline")
+                        }
+                        disabled={action.disabled}
+                        onClick={() =>
+                          drop(current.id, (p) => {
+                            if (p.kind === "choose") p.resolve(action.result);
+                          })
+                        }
+                      >
+                        {action.label}
+                      </Button>
+                    </DialogClose>
+                  );
+                })
+              ) : (
+                <>
+                  {current.kind !== "alert" && (
+                    <DialogClose initialFocus asChild>
+                      <Button
+                        context="neutral"
+                        variant="outline"
+                        onClick={() => drop(current.id, cancel)}
+                      >
+                        {current.cancel ?? "Cancelar"}
+                      </Button>
+                    </DialogClose>
+                  )}
+                  <DialogClose initialFocus={current.kind === "alert"} asChild>
                     <Button
-                      context="neutral"
-                      variant="ghost"
-                      onClick={() => drop(current.id, cancel)}
+                      context={context}
+                      variant="solid"
+                      onClick={() => drop(current.id, (p) => accept(p, text))}
                     >
-                      {current.cancel ?? 'Cancelar'}
+                      {current.action ?? defaultAction}
                     </Button>
                   </DialogClose>
-                )}
-                <DialogClose initialFocus={current.kind === 'alert'} asChild>
-                  <Button
-                    context={context}
-                    variant="solid"
-                    onClick={() => drop(current.id, (p) => accept(p, text))}
-                  >
-                    {current.action ?? defaultAction}
-                  </Button>
-                </DialogClose>
-              </>
-            )}
+                </>
+              )}
+            </ButtonGroup>
           </DialogFooter>
         </DialogContent>
       )}
     </Dialog>
-  )
+  );
 }

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

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../../lib/cn.ts";
+import { usePageHeadingPresence } from "./page-heading-context.tsx";
 import {
   SurfaceHeader,
   surfaceHeaderClasses,
@@ -148,6 +149,7 @@ export type ContentHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "title">;
  * `SurfaceHeader`, a mesma de `PageHeader`: só os nomes dos slots e a hierarquia mudam.
  */
 export function ContentHeader({
+  className,
   children,
   ...props
 }: ContentHeaderProps): ReactElement {
@@ -167,6 +169,11 @@ export function ContentHeader({
           description: ContentDescription,
           actions: ContentActions,
         }}
+        className={cn(
+          content.variant === "page" &&
+            "flex-row items-center justify-start gap-3 sm:flex-row sm:items-center sm:justify-start",
+          className,
+        )}
         {...props}
       >
         {children}
@@ -195,6 +202,7 @@ export function ContentTitle({
     "ContentHeader",
   );
   const Heading = headingTags[context.level];
+  usePageHeadingPresence(context.level === 1);
   return (
     <Heading
       id={id ?? context.titleId}
@@ -217,7 +225,10 @@ export function ContentDescription({
   return (
     <p
       data-slot="content-description"
-      className={cn(surfaceHeaderClasses[context.variant].description, className)}
+      className={cn(
+        surfaceHeaderClasses[context.variant].description,
+        className,
+      )}
       {...props}
     />
   );
@@ -254,7 +265,11 @@ export function ContentActions({
   return (
     <div
       data-slot="content-actions"
-      className={cn(surfaceHeaderClasses[context.variant].actions, className)}
+      className={cn(
+        surfaceHeaderClasses[context.variant].actions,
+        context.variant === "page" && "ml-auto w-auto",
+        className,
+      )}
       {...props}
     />
   );

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

@@ -8,7 +8,7 @@
  * pelo próprio form (fonte única do scroll e da faixa, sem string duplicada).
  */
 
-import { useId, type ReactNode } from 'react'
+import { useId, type ReactNode } from "react";
 import {
   Dialog,
   DialogBody,
@@ -16,35 +16,42 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '../primitives/dialog.tsx'
-import { ActionForm, type ActionFormProps } from './form.tsx'
+} from "../primitives/dialog.tsx";
+import { ActionForm, type ActionFormProps } from "./form.tsx";
+import { ButtonGroup } from "../primitives/button-group.tsx";
 
 export interface ActionFormDialogProps<
   TInput extends Record<string, unknown>,
   TData,
 > extends ActionFormProps<TInput, TData> {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  title: string
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
   /** Conteúdo relevante apresentado antes dos campos, como texto ou Alert. */
-  intro?: ReactNode
+  intro?: ReactNode;
 }
 
-export function ActionFormDialog<TInput extends Record<string, unknown>, TData>({
+export function ActionFormDialog<
+  TInput extends Record<string, unknown>,
+  TData,
+>({
   open,
   onOpenChange,
   title,
   intro,
   onSuccess,
   onCancel,
+  cancelVariant,
   ...rest
 }: ActionFormDialogProps<TInput, TData>) {
-  const introId = useId()
+  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 aria-describedby={intro === undefined ? undefined : introId}>
+      <DialogContent
+        aria-describedby={intro === undefined ? undefined : introId}
+      >
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
@@ -63,14 +70,21 @@ export function ActionFormDialog<TInput extends Record<string, unknown>, TData>(
               {fields}
             </DialogBody>
           )}
-          footer={(actions) => <DialogFooter>{actions}</DialogFooter>}
+          footer={(actions) => (
+            <DialogFooter>
+              <ButtonGroup mode="spaced" distribution="equal">
+                {actions}
+              </ButtonGroup>
+            </DialogFooter>
+          )}
           onSuccess={(d) => {
-            onSuccess?.(d)
-            onOpenChange(false)
+            onSuccess?.(d);
+            onOpenChange(false);
           }}
           onCancel={onCancel ?? (() => onOpenChange(false))}
+          cancelVariant={cancelVariant ?? "outline"}
         />
       </DialogContent>
     </Dialog>
-  )
+  );
 }