@softize/opus 16.0.0 → 17.0.0

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

@@ -1,80 +1,111 @@
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
-import { XIcon } from 'lucide-react'
-import { cn } from '../../lib/cn.ts'
-import { focusRing } from './control.ts'
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { XIcon } from "lucide-react";
+import { cn } from "../../lib/cn.ts";
+import { Button } from "./button.tsx";
 
-export type DialogMode = 'default' | 'alert'
+export type DialogMode = "default" | "alert";
 
 interface DialogContextValue {
-  mode: DialogMode
-  onResult?: (result: string) => void
+  mode: DialogMode;
+  onResult?: (result: string) => void;
 }
 
 const DialogContext = React.createContext<DialogContextValue>({
-  mode: 'default',
-})
+  mode: "default",
+});
+
+interface DialogContentContextValue {
+  showCloseButton: boolean;
+  closeDisabled: boolean;
+}
+
+const DialogContentContext = React.createContext<DialogContentContextValue>({
+  showCloseButton: false,
+  closeDisabled: false,
+});
 
 function useDialogContext(): DialogContextValue {
-  return React.useContext(DialogContext)
+  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
+  mode?: DialogMode;
   /** Recebe o `result` do `DialogClose` acionado. */
-  onResult?: (result: string) => void
+  onResult?: (result: string) => void;
 }
 
-export function Dialog({ mode = 'default', onResult, modal, ...props }: DialogProps) {
-  const context = React.useMemo(() => ({ mode, onResult }), [mode, onResult])
+export function Dialog({
+  mode = "default",
+  onResult,
+  modal,
+  ...props
+}: DialogProps) {
+  const context = React.useMemo(() => ({ mode, onResult }), [mode, onResult]);
 
   return (
     <DialogContext.Provider value={context}>
-      {mode === 'alert' ? (
+      {mode === "alert" ? (
         <AlertDialogPrimitive.Root data-slot="dialog" {...props} />
       ) : (
         <DialogPrimitive.Root data-slot="dialog" modal={modal} {...props} />
       )}
     </DialogContext.Provider>
-  )
+  );
 }
 
-export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  const { mode } = useDialogContext()
-  return mode === 'alert' ? (
+export function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  const { mode } = useDialogContext();
+  return mode === "alert" ? (
     <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
   ) : (
     <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-  )
+  );
 }
 
-export function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  const { mode } = useDialogContext()
-  return mode === 'alert' ? (
+export function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  const { mode } = useDialogContext();
+  return mode === "alert" ? (
     <AlertDialogPrimitive.Portal data-slot="dialog-portal" {...props} />
   ) : (
     <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-  )
+  );
 }
 
-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
+  initialFocus?: boolean;
   /** Resposta entregue a `Dialog.onResult` antes do fechamento. */
-  result?: string
+  result?: string;
 }
 
-export function DialogClose({ initialFocus = false, result, onClick, ...props }: DialogCloseProps) {
-  const root = useDialogContext()
+export function DialogClose({
+  initialFocus = false,
+  result,
+  onClick,
+  ...props
+}: DialogCloseProps) {
+  const root = useDialogContext();
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-    onClick?.(event)
-    if (!event.defaultPrevented && result !== undefined) root.onResult?.(result)
-  }
+    onClick?.(event);
+    if (!event.defaultPrevented && result !== undefined)
+      root.onResult?.(result);
+  };
 
-  if (root.mode === 'alert') {
-    const ClosePrimitive = initialFocus ? AlertDialogPrimitive.Cancel : AlertDialogPrimitive.Action
+  if (root.mode === "alert") {
+    const ClosePrimitive = initialFocus
+      ? AlertDialogPrimitive.Cancel
+      : AlertDialogPrimitive.Action;
     return (
       <ClosePrimitive
         data-slot="dialog-close"
@@ -82,7 +113,7 @@ export function DialogClose({ initialFocus = false, result, onClick, ...props }:
         onClick={handleClick}
         {...props}
       />
-    )
+    );
   }
 
   return (
@@ -92,53 +123,85 @@ export function DialogClose({ initialFocus = false, result, onClick, ...props }:
       onClick={handleClick}
       {...props}
     />
-  )
+  );
 }
 
 /** Véu compartilhado por Dialog e Drawer: mesmo escurecimento, desfoque e animação. */
 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'
+  "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>) {
-  const { mode } = useDialogContext()
-  const overlay = cn(overlayClasses, className)
-  return mode === 'alert' ? (
-    <AlertDialogPrimitive.Overlay data-slot="dialog-overlay" className={overlay} {...props} />
+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}
+    />
   ) : (
-    <DialogPrimitive.Overlay data-slot="dialog-overlay" className={overlay} {...props} />
-  )
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={overlay}
+      {...props}
+    />
+  );
+}
+
+function DialogCloseButton({ disabled = false }: { disabled?: boolean }) {
+  return (
+    <DialogPrimitive.Close data-slot="dialog-close" asChild>
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        disabled={disabled}
+        aria-label="Fechar"
+      >
+        <XIcon aria-hidden />
+      </Button>
+    </DialogPrimitive.Close>
+  );
 }
 
 export function DialogContent({
   className,
   children,
   showCloseButton,
-  'aria-describedby': ariaDescribedBy,
+  closeDisabled = false,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  /** Mostra o “X” no modo padrão. O modo `alert` exige uma resposta identificável. */
-  showCloseButton?: boolean
+  /** Mostra a ação “Fechar” no modo padrão. O modo `alert` exige uma resposta identificável. */
+  showCloseButton?: boolean;
+  /** Mantém a ação visível, mas impede fechar enquanto a superfície está bloqueada. */
+  closeDisabled?: boolean;
 }) {
-  const { mode } = useDialogContext()
-  const showClose = showCloseButton ?? mode !== 'alert'
+  const { mode } = useDialogContext();
+  const showClose = showCloseButton ?? mode !== "alert";
   const contentClasses =
-    'fixed left-[50%] top-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-clip rounded-xl border border-border bg-background text-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95'
+    "fixed left-[50%] top-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-clip rounded-xl border border-border bg-background text-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
 
-  if (mode === 'alert') {
+  if (mode === "alert") {
     return (
       <DialogPortal>
         <DialogOverlay />
         <AlertDialogPrimitive.Content
           data-slot="dialog-content"
           data-mode="alert"
-          className={cn(contentClasses, 'grid max-w-xs gap-4 p-6', className)}
+          className={cn(contentClasses, "grid max-w-xs gap-4 p-6", className)}
           aria-describedby={ariaDescribedBy}
           {...props}
         >
-          {children}
+          <DialogContentContext.Provider value={{ showCloseButton: false, closeDisabled: true }}>
+            {children}
+          </DialogContentContext.Provider>
         </AlertDialogPrimitive.Content>
       </DialogPortal>
-    )
+    );
   }
 
   return (
@@ -147,45 +210,50 @@ 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}
-        {showClose && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className={cn(
-              "absolute right-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              focusRing,
-            )}
-          >
-            <XIcon />
-            <span className="sr-only">Fechar</span>
-          </DialogPrimitive.Close>
-        )}
+        <DialogContentContext.Provider value={{ showCloseButton: showClose, closeDisabled }}>
+          {children}
+        </DialogContentContext.Provider>
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
-export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  const { mode } = useDialogContext()
+export function DialogHeader({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { mode } = useDialogContext();
+  const { showCloseButton, closeDisabled } = React.useContext(DialogContentContext);
   return (
     <div
       data-slot="dialog-header"
       className={cn(
-        mode === 'alert'
-          ? 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]'
-          : 'flex shrink-0 flex-col gap-2 border-b p-5 text-center sm:text-left [&:has(+[data-slot=dialog-footer])]:border-b-0',
+        mode === "alert"
+          ? "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]"
+          : "flex shrink-0 items-center gap-4 border-b p-5 text-left [&:has(+[data-slot=dialog-footer])]:border-b-0",
         className,
       )}
       {...props}
-    />
-  )
+    >
+      {children}
+      {mode !== "alert" && showCloseButton && <DialogCloseButton disabled={closeDisabled} />}
+    </div>
+  );
 }
 
-export function DialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-media"
@@ -195,49 +263,64 @@ export function DialogMedia({ className, ...props }: React.ComponentProps<'div'>
       )}
       {...props}
     />
-  )
+  );
 }
 
-export function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
-  const { mode } = useDialogContext()
+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'>) {
-  const { mode } = useDialogContext()
+export function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { mode } = useDialogContext();
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        mode === 'alert'
-          ? 'grid grid-cols-2 gap-2 [&>*:only-child]:col-span-full'
-          : 'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
+        mode === "alert"
+          ? "grid grid-cols-2 gap-2 [&>*:only-child]:col-span-full"
+          : "flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  const { mode } = useDialogContext()
-  return mode === 'alert' ? (
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  const { mode } = useDialogContext();
+  return mode === "alert" ? (
     <AlertDialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg font-semibold', className)}
+      className={cn("text-lg font-semibold", className)}
       {...props}
     />
   ) : (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg font-semibold leading-none', className)}
+      className={cn(
+        "min-w-0 flex-1 text-lg font-semibold leading-none",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }

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

@@ -3,22 +3,40 @@ import { XIcon } from "lucide-react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
-import { focusRing } from "./control.ts";
+import { Button } from "./button.tsx";
 import { overlayClasses } from "./dialog.tsx";
 
-function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+interface DrawerContentContextValue {
+  showCloseButton: boolean;
+  closeDisabled: boolean;
+}
+
+const DrawerContentContext = React.createContext<DrawerContentContextValue>({
+  showCloseButton: false,
+  closeDisabled: false,
+});
+
+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} />;
 }
 
@@ -35,16 +53,34 @@ function DrawerOverlay({
   );
 }
 
+function DrawerCloseButton({ disabled = false }: { disabled?: boolean }) {
+  return (
+    <DrawerPrimitive.Close data-slot="drawer-close" asChild>
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        disabled={disabled}
+        aria-label="Fechar"
+      >
+        <XIcon aria-hidden />
+      </Button>
+    </DrawerPrimitive.Close>
+  );
+}
+
 function DrawerContent({
   className,
   children,
   side = "right",
   showCloseButton = true,
+  closeDisabled = false,
   "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
+  closeDisabled?: boolean;
 }) {
   return (
     <DrawerPortal>
@@ -66,30 +102,29 @@ function DrawerContent({
         aria-describedby={ariaDescribedBy}
         {...props}
       >
-        {children}
-        {showCloseButton && (
-          <DrawerPrimitive.Close
-            className={cn(
-              "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary",
-              focusRing,
-            )}
-          >
-            <XIcon className="size-4" />
-            <span className="sr-only">Fechar</span>
-          </DrawerPrimitive.Close>
-        )}
+        <DrawerContentContext.Provider value={{ showCloseButton, closeDisabled }}>
+          {children}
+        </DrawerContentContext.Provider>
       </DrawerPrimitive.Content>
     </DrawerPortal>
   );
 }
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DrawerHeader({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { showCloseButton, closeDisabled } = React.useContext(DrawerContentContext);
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex shrink-0 flex-col gap-2 border-b p-5", className)}
+      className={cn("flex shrink-0 items-center gap-4 border-b p-5", className)}
       {...props}
-    />
+    >
+      {children}
+      {showCloseButton && <DrawerCloseButton disabled={closeDisabled} />}
+    </div>
   );
 }
 
@@ -116,11 +151,17 @@ 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"
-      className={cn("text-lg font-semibold leading-none text-foreground", className)}
+      className={cn(
+        "min-w-0 flex-1 text-lg font-semibold leading-none text-foreground",
+        className,
+      )}
       {...props}
     />
   );

package/src/ui/docs/content/command.md

@@ -23,7 +23,9 @@ do Select pesquisável; para uma escolha em formulário, use Select.
 
 ## Palette modal (CommandDialog)
 
-O Command embrulhado em um Dialog, com header sr-only para a11y. O atalho ⌘K (keydown no app) só troca o open — o conteúdo é o mesmo do inline.
+O Command embrulhado em um Dialog mantém um header compacto com título e close. A descrição
+permanece disponível para tecnologias assistivas. O atalho ⌘K (keydown no app) só troca o open —
+o conteúdo é o mesmo do inline.
 
 ```tsx preview
 const [open, setOpen] = useState(false)

package/src/ui/docs/content/content.md

@@ -23,7 +23,7 @@ render(
 Use os slots quando o header precisar de composição própria. A árvore aceita exatamente um
 `ContentHeader` e um `ContentBody` como filhos diretos. O header exige um `ContentTitle` e aceita
 uma descrição, um contador (`ContentMeta`) e uma região de ações. O contador é próprio de
-`Content`; `PageHeader` reconhece somente título, descrição e ações.
+`Content`; `PageHeader` reconhece somente navegação, título e ações.
 
 ```tsx preview col
 render(

package/src/ui/docs/content/dialog.md

@@ -264,18 +264,18 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Ence
 
 ## Propriedades de DialogContent
 
-| Propriedade       | Tipo        | Padrão | Descrição                                                                                                |
-| ----------------- | ----------- | ------ | -------------------------------------------------------------------------------------------------------- |
-| `showCloseButton` | `boolean`   | `true` | No modo padrão, exibe o botão de fechamento no canto; o modo de alerta exige uma resposta identificável. |
-| `className`       | `string`    |        | Ajusta a superfície.                                                                                     |
-| `children`        | `ReactNode` |        | Cabeçalho, corpo, rodapé ou conteúdo próprio.                                                            |
+| Propriedade       | Tipo        | Padrão | Descrição                                                                                                 |
+| ----------------- | ----------- | ------ | --------------------------------------------------------------------------------------------------------- |
+| `showCloseButton` | `boolean`   | `true` | No modo padrão, inclui a ação de fechamento no header; o modo de alerta exige uma resposta identificável. |
+| `className`       | `string`    |        | Ajusta a superfície.                                                                                      |
+| `children`        | `ReactNode` |        | Cabeçalho, corpo, rodapé ou conteúdo próprio.                                                             |
 
 ## Propriedades de DialogHeader
 
-| Propriedade | Tipo        | Padrão | Descrição                |
-| ----------- | ----------- | ------ | ------------------------ |
-| `className` | `string`    |        | Ajusta a faixa superior. |
-| `children`  | `ReactNode` |        | Título e mídia opcional. |
+| Propriedade | Tipo        | Padrão | Descrição                                                  |
+| ----------- | ----------- | ------ | ---------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta a faixa superior.                                   |
+| `children`  | `ReactNode` |        | Título e ações opcionais; o close padrão entra por último. |
 
 ## Propriedades de DialogBody
 

package/src/ui/docs/content/drawer.md

@@ -60,10 +60,10 @@ mesmo alinhamento horizontal entre título, conteúdo e ações.
 
 ## Propriedades de DrawerContent
 
-| Propriedade       | Tipo                                     | Padrão    | Descrição                                                                        |
-| ----------------- | ---------------------------------------- | --------- | -------------------------------------------------------------------------------- |
-| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece.                                                  |
-| `showCloseButton` | `boolean`                                | `true`    | Exibe o botão de fechamento. Desative quando o painel exigir uma ação explícita. |
+| Propriedade       | Tipo                                     | Padrão    | Descrição                                                                                  |
+| ----------------- | ---------------------------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece.                                                            |
+| `showCloseButton` | `boolean`                                | `true`    | Inclui a ação de fechamento no header. Desative quando o painel exigir uma ação explícita. |
 
 ## Propriedades de DrawerBody