@softize/opus 15.2.2 → 16.1.0

package/src/ui/components/primitives/button-group.tsx

@@ -1,71 +1,80 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import { Separator } from './separator.tsx'
+import { cn } from "../../lib/cn.ts";
+import { Separator } from "./separator.tsx";
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
-        horizontal: '',
-        vertical: 'flex-col',
+        horizontal: "",
+        vertical: "flex-col",
       },
       mode: {
-        connected: '',
-        spaced: 'gap-1',
+        connected: "",
+        spaced: "gap-1",
       },
       shape: {
-        default: '',
-        pill: 'rounded-full',
+        default: "",
+        pill: "rounded-full",
+      },
+      distribution: {
+        content: "",
+        equal:
+          "w-full flex-col-reverse gap-2 sm:flex-row [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
       },
     },
     compoundVariants: [
       {
-        orientation: 'horizontal',
-        mode: 'connected',
+        orientation: "horizontal",
+        mode: "connected",
         className:
-          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
       },
       {
-        orientation: 'vertical',
-        mode: 'connected',
+        orientation: "vertical",
+        mode: "connected",
         className:
-          '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+          "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
       },
       {
-        orientation: 'horizontal',
-        mode: 'connected',
-        shape: 'pill',
-        className: '[&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-l-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-r-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-l-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-r-full',
+        orientation: "horizontal",
+        mode: "connected",
+        shape: "pill",
+        className:
+          "[&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-l-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-r-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-l-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-r-full",
       },
       {
-        orientation: 'vertical',
-        mode: 'connected',
-        shape: 'pill',
-        className: '[&>*:first-child]:rounded-t-full [&>*:last-child]:rounded-b-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-t-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-b-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-t-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-b-full',
+        orientation: "vertical",
+        mode: "connected",
+        shape: "pill",
+        className:
+          "[&>*:first-child]:rounded-t-full [&>*:last-child]:rounded-b-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-t-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-b-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-t-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-b-full",
       },
       {
-        mode: 'spaced',
-        shape: 'pill',
+        mode: "spaced",
+        shape: "pill",
         className:
-          '[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full',
+          "[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full",
       },
     ],
     defaultVariants: {
       orientation: "horizontal",
-      mode: 'connected',
+      mode: "connected",
       shape: "default",
+      distribution: "content",
     },
-  }
-)
+  },
+);
 
 function ButtonGroup({
   className,
   orientation,
   mode,
   shape,
+  distribution,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
   return (
@@ -75,17 +84,18 @@ function ButtonGroup({
       data-orientation={orientation}
       data-mode={mode}
       data-shape={shape}
+      data-distribution={distribution}
       className={cn(
-        buttonGroupVariants({ orientation, mode, shape }),
-        mode !== 'spaced' &&
-          (orientation === 'vertical'
-            ? '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-t-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-t-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-b-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-t-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-t-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-b-none'
-            : '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-l-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-l-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-r-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-l-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-l-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-r-none'),
+        buttonGroupVariants({ orientation, mode, shape, distribution }),
+        mode !== "spaced" &&
+          (orientation === "vertical"
+            ? "[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-t-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-t-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-b-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-t-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-t-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-b-none"
+            : "[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-l-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-l-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-r-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-l-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-l-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-r-none"),
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupText({
@@ -93,19 +103,19 @@ function ButtonGroupText({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  asChild?: boolean
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : "div"
+  const Comp = asChild ? Slot.Root : "div";
 
   return (
     <Comp
       className={cn(
         "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupSeparator({
@@ -119,11 +129,11 @@ function ButtonGroupSeparator({
       orientation={orientation}
       className={cn(
         "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -131,4 +141,4 @@ export {
   ButtonGroupSeparator,
   ButtonGroupText,
   buttonGroupVariants,
-}
+};

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}
-    />
-  )
-}