@softize/opus 12.10.0 → 13.0.0

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

@@ -1,35 +1,134 @@
 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'
 
-export function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+export type DialogMode = 'default' | 'alert'
+
+interface DialogContextValue {
+  mode: DialogMode
+  onResult?: (result: string) => void
+}
+
+const DialogContext = React.createContext<DialogContextValue>({ mode: 'default' })
+
+function useDialogContext(): DialogContextValue {
+  return React.useContext(DialogContext)
+}
+
+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) {
+  const context = React.useMemo(() => ({ mode, onResult }), [mode, onResult])
+
+  return (
+    <DialogContext.Provider value={context}>
+      {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' ? (
+    <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  ) : (
+    <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  )
 }
 
-export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+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 function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+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({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+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)
+  }
+
+  if (root.mode === 'alert') {
+    const ClosePrimitive = initialFocus
+      ? AlertDialogPrimitive.Cancel
+      : AlertDialogPrimitive.Action
+    return (
+      <ClosePrimitive
+        data-slot="dialog-close"
+        data-initial-focus={initialFocus || undefined}
+        onClick={handleClick}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <DialogPrimitive.Close
+      data-slot="dialog-close"
+      data-initial-focus={initialFocus || undefined}
+      onClick={handleClick}
+      {...props}
+    />
+  )
 }
 
 export function DialogOverlay({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
+  const { mode } = useDialogContext()
+  const overlayClasses = cn(
+    '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',
+    className,
+  )
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={overlayClasses}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={cn(
-        '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',
-        className,
-      )}
+      className={overlayClasses}
       {...props}
     />
   )
@@ -38,29 +137,48 @@ export function DialogOverlay({
 export function DialogContent({
   className,
   children,
-  showCloseButton = true,
+  showCloseButton,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  /** Mostra o "X" de fechar no canto. Desligue pra um modal que exige ação explícita. */
+  /** Mostra o “X” no modo padrão. O modo `alert` exige uma resposta identificável. */
   showCloseButton?: boolean
 }) {
+  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'
+
+  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)}
+          {...props}
+        >
+          {children}
+        </AlertDialogPrimitive.Content>
+      </DialogPortal>
+    )
+  }
+
   return (
     <DialogPortal>
       <DialogOverlay />
-      {/* Superfície elevada: mantemos bg-card (divergência da casa; o shadcn usa bg-background). */}
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-mode="default"
         className={cn(
-          // Superfície PURA: só a casca (bg/raio/sombra) + coluna flex com teto de
-          // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
-          // precisa negar margem pra escapar de um p-6 embutido.
-          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-clip rounded-xl bg-card text-card-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 sm:max-w-lg",
+          contentClasses,
+          'flex max-h-[85vh] flex-col sm:max-w-lg',
           className,
         )}
         {...props}
       >
         {children}
-        {showCloseButton && (
+        {showClose && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
             className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 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"
@@ -74,17 +192,18 @@ export function DialogContent({
   )
 }
 
-export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-header"
-      // Fixo (shrink-0), com divisor embaixo (border-b). p-5: padding igual nos quatro
-      // lados, casando com o body. O :has tira o divisor quando o header é seguido
-      // DIRETO pelo footer (confirm sem body) — senão o border-b dele encostaria no
-      // A compensação coincide com a soma das hairlines; o divisor fica no footer.
       className={cn(
-        '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 flex-col gap-2 border-b p-5 text-center sm:text-left [&:has(+[data-slot=dialog-footer])]:border-b-0',
         className,
       )}
       {...props}
@@ -92,27 +211,51 @@ export function DialogHeader({ className, ...props }: React.ComponentProps<'div'
   )
 }
 
-export function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-media"
+      className={cn(
+        'mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*="size-"])]:size-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogBody({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-body"
-      // O miolo que ROLA: cresce, scrolla e padda a si mesmo. Pra corpo edge-to-edge
-      // (cmdk, iframe de lente) passe `className` zerando o padding.
-      className={cn('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
       data-slot="dialog-footer"
-      // Faixa destacada (divergência da casa, ao estilo do site do shadcn): borda em cima
-      // + fundo muted. Sangra até as bordas sozinha — o content não tem padding, então não
-      // há -mx pra compensar; o recorte do content arredonda o canto de baixo.
       className={cn(
-        '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}
@@ -124,7 +267,14 @@ export function DialogTitle({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn('text-lg font-semibold leading-none', className)}
@@ -137,7 +287,14 @@ export function DialogDescription({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
+  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)}

package/src/ui/components/primitives/dictionary-value.tsx

@@ -6,7 +6,6 @@ import {
   presentDictionaryValue,
   type DictionaryDescriptor,
   type DictPresentation,
-  type DictTone,
 } from '../../../core/index.ts'
 import { cn } from '../../lib/cn.ts'
 import { Badge, type BadgeProps } from './badge.tsx'
@@ -29,7 +28,9 @@ export interface DictionaryValueProps extends Omit<React.ComponentProps<'span'>,
   value: string | null | undefined
   /** Sobrepõe o papel declarado no dicionário SÓ nesta ocorrência. */
   presentation?: DictPresentation
-  /** Sobrepõe a variante do badge (override explícito). Valor fora do dicionário segue texto. */
+  /** Sobrepõe o contexto semântico (override explícito). Valor fora do dicionário segue texto. */
+  context?: BadgeProps['context']
+  /** Sobrepõe o tratamento visual do badge. Valor fora do dicionário segue texto. */
   variant?: BadgeProps['variant']
   /** `false` esconde o ícone declarado; um nó substitui o ícone do catálogo. */
   icon?: boolean | React.ReactNode
@@ -41,22 +42,14 @@ export interface DictionaryValueProps extends Omit<React.ComponentProps<'span'>,
   fallback?: React.ReactNode
 }
 
-const toneVariant: Record<DictTone, NonNullable<BadgeProps['variant']>> = {
-  neutral: 'secondary',
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-}
-
 function isDescriptor(source: DictionaryValueSource): source is DictionaryDescriptor {
   return 'entries' in source && 'keys' in source
 }
 
 /**
  * Renderiza um valor de dicionário com a apresentação que o DICIONÁRIO declarou (ADR 0003):
- * classificação → Badge `outline`; status/estágio → Badge tonal pelo `tone` da entrada
- * (`neutral` sem tom); `plain` ou sem papel → texto. Ícone só quando a entrada declara `icon`
+ * classificação → Badge `neutral + outline`; status/estágio → Badge `context + subtle`
+ * (`neutral` sem contexto); `plain` ou sem papel → texto. Ícone só quando a entrada declara `icon`
  * do catálogo; tooltip só quando `description` acrescenta ao rótulo. O rótulo é sempre texto —
  * cor e ícone nunca comunicam sozinhos. Valor fora do dicionário mostra o código como texto.
  */
@@ -64,6 +57,7 @@ export function DictionaryValue({
   dict,
   value,
   presentation,
+  context,
   variant,
   icon = true,
   icons = iconPickerIcons,
@@ -102,8 +96,8 @@ export function DictionaryValue({
   // dicionário é sempre texto — override não promove código desconhecido a badge.
   const badgeVariant: BadgeProps['variant'] = !resolved.known
     ? undefined
-    : variant ??
-      (resolved.badge === null ? undefined : resolved.badge === 'outline' ? 'outline' : toneVariant[resolved.badge])
+    : variant ?? resolved.variant ?? undefined
+  const badgeContext: BadgeProps['context'] = context ?? resolved.context ?? undefined
 
   const content =
     badgeVariant === undefined ? (
@@ -119,6 +113,7 @@ export function DictionaryValue({
     ) : (
       <Badge
         data-slot="dictionary-value"
+        context={badgeContext}
         variant={badgeVariant}
         className={className}
         {...dataProps}

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

@@ -1,38 +1,91 @@
 import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+
+import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
 
-export const dotVariants = cva('inline-block size-1.5 shrink-0 rounded-full', {
-  variants: {
-    variant: {
-      default: 'bg-primary',
-      secondary: 'bg-muted-foreground/45',
-      destructive: 'bg-destructive',
-      outline: 'border border-border bg-transparent',
-      success: 'bg-emerald-500',
-      warning: 'bg-amber-500',
-      info: 'bg-blue-500',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-})
-
-export interface DotProps extends React.ComponentProps<'span'>, VariantProps<typeof dotVariants> {
+export type DotContext = UiContext
+export type DotVariant = 'solid' | 'outline'
+export type LegacyDotVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'success'
+  | 'warning'
+  | 'info'
+
+interface DotStyleOptions {
+  context?: DotContext | null
+  variant?: DotVariant | LegacyDotVariant | null
+}
+
+const solidClasses: Record<DotContext, string> = {
+  neutral: 'bg-context-neutral-emphasis',
+  primary: 'bg-context-primary',
+  info: 'bg-context-info',
+  success: 'bg-context-success',
+  warning: 'bg-context-warning',
+  danger: 'bg-context-danger',
+}
+
+const outlineClasses: Record<DotContext, string> = {
+  neutral: 'border border-context-neutral-border bg-transparent',
+  primary: 'border border-context-primary bg-transparent',
+  info: 'border border-context-info bg-transparent',
+  success: 'border border-context-success bg-transparent',
+  warning: 'border border-context-warning bg-transparent',
+  danger: 'border border-context-danger bg-transparent',
+}
+
+export function resolveDotStyle({ context, variant }: DotStyleOptions = {}): {
+  context: DotContext
+  variant: DotVariant
+} {
+  const legacy =
+    variant === 'default' ||
+    variant === 'secondary' ||
+    variant === 'destructive' ||
+    variant === 'success' ||
+    variant === 'warning' ||
+    variant === 'info'
+  if (context != null && legacy) {
+    throw new Error('Dot não permite combinar context com uma variante semântica legada.')
+  }
+  if (variant === 'default') return { context: 'primary', variant: 'solid' }
+  if (variant === 'secondary') return { context: 'neutral', variant: 'solid' }
+  if (variant === 'destructive') return { context: 'danger', variant: 'solid' }
+  if (variant === 'success' || variant === 'warning' || variant === 'info') {
+    return { context: variant, variant: 'solid' }
+  }
+  return { context: context ?? 'neutral', variant: variant ?? 'solid' }
+}
+
+export function dotVariants(options: DotStyleOptions = {}): string {
+  const resolved = resolveDotStyle(options)
+  return cn(
+    'inline-block size-1.5 shrink-0 rounded-full',
+    resolved.variant === 'outline'
+      ? outlineClasses[resolved.context]
+      : solidClasses[resolved.context],
+  )
+}
+
+export interface DotProps extends React.ComponentProps<'span'>, DotStyleOptions {
   /** Nome acessível quando a cor comunica estado; sem label, o ponto é decorativo. */
   label?: string
 }
 
 /** Indicador compacto de estado; use Badge quando o texto precisar permanecer visível. */
-export function Dot({ className, variant, label, ...props }: DotProps): React.ReactElement {
+export function Dot({ className, context, variant, label, ...props }: DotProps): React.ReactElement {
+  const resolved = resolveDotStyle({ context, variant })
   return (
     <span
       data-slot="dot"
+      data-context={resolved.context}
+      data-variant={resolved.variant}
       role={label === undefined ? undefined : 'img'}
       aria-label={label}
       aria-hidden={label === undefined ? true : undefined}
-      className={cn(dotVariants({ variant }), className)}
+      className={cn(dotVariants(resolved), className)}
       {...props}
     />
   )

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

@@ -1,29 +1,31 @@
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as DrawerPrimitive } from "radix-ui"
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as DrawerPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
-function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
 function DrawerTrigger({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
 function DrawerClose({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 function DrawerPortal({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
 function DrawerOverlay({
@@ -35,11 +37,11 @@ function DrawerOverlay({
       data-slot="drawer-overlay"
       className={cn(
         "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",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerContent({
@@ -49,8 +51,8 @@ function DrawerContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
 }) {
   return (
     <DrawerPortal>
@@ -58,7 +60,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          "fixed z-50 flex flex-col bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
             "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" &&
@@ -67,7 +69,7 @@ function DrawerContent({
             "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
           side === "bottom" &&
             "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
+          className,
         )}
         {...props}
       >
@@ -80,27 +82,40 @@ function DrawerContent({
         )}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  )
+  );
 }
 
 function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn("flex shrink-0 flex-col gap-2 border-b p-5", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-body"
+      className={cn("min-h-0 flex-1 overflow-y-auto p-5", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      className={cn(
+        "mt-auto 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}
     />
-  )
+  );
 }
 
 function DrawerTitle({
@@ -110,10 +125,10 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("font-semibold text-foreground", className)}
+      className={cn("text-lg font-semibold leading-none text-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerDescription({
@@ -126,7 +141,7 @@ function DrawerDescription({
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -135,7 +150,8 @@ export {
   DrawerClose,
   DrawerContent,
   DrawerHeader,
+  DrawerBody,
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};