@neynar/ui 0.4.0 → 0.5.0

package/src/components/ui/alert-dialog.tsx

@@ -1,373 +1,43 @@
 import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
 
 import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 
-/**
- * Props for AlertDialog (Documentation only - NOT used in component implementation)
- *
- * Controls the overall state and behavior of the alert dialog. Alert dialogs are
- * specifically designed for critical confirmations that require user attention
- * and cannot be dismissed by clicking outside.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogDocsProps = {
-  /** Whether the dialog is open by default (uncontrolled mode) @default undefined */
-  defaultOpen?: boolean;
-  /** Whether the dialog is open (controlled mode) @default undefined */
-  open?: boolean;
-  /** Callback fired when the open state changes @param open - The new open state */
-  onOpenChange?: (open: boolean) => void;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Root>;
-
-/**
- * Props for AlertDialogTrigger (Documentation only - NOT used in component implementation)
- *
- * The element that opens the alert dialog when activated. Usually a button,
- * but can be any interactive element through composition.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogTriggerDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Trigger>;
-
-/**
- * Props for AlertDialogPortal (Documentation only - NOT used in component implementation)
- *
- * Controls where the dialog content is rendered in the DOM tree.
- * Used internally by AlertDialogContent.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogPortalDocsProps = {
-  /** Force mount the component even when not open @default undefined */
-  forceMount?: boolean;
-  /** Container element to portal into @default document.body */
-  container?: HTMLElement;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Portal>;
-
-/**
- * Props for AlertDialogOverlay (Documentation only - NOT used in component implementation)
- *
- * The semi-transparent backdrop that prevents interaction with background content.
- * Includes fade animations and proper z-index stacking.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogOverlayDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-  /** Force mount the component even when not open @default undefined */
-  forceMount?: boolean;
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Overlay>;
-
-/**
- * Props for AlertDialogContent (Documentation only - NOT used in component implementation)
- *
- * The main container for alert dialog content. Automatically handles portal
- * rendering, overlay backdrop, and focus management.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogContentDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-  /** Force mount the component even when not open @default undefined */
-  forceMount?: boolean;
-  /** Callback fired when focus moves to the trigger after opening @param event - Focus event */
-  onOpenAutoFocus?: (event: Event) => void;
-  /** Callback fired when focus moves to the trigger after closing @param event - Focus event */
-  onCloseAutoFocus?: (event: Event) => void;
-  /** Callback fired when Escape key is pressed @param event - Keyboard event */
-  onEscapeKeyDown?: (event: KeyboardEvent) => void;
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Content>;
-
-/**
- * Props for AlertDialogHeader (Documentation only - NOT used in component implementation)
- *
- * Container for the dialog title and description with consistent spacing
- * and responsive alignment.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogHeaderDocsProps = {
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Props for AlertDialogFooter (Documentation only - NOT used in component implementation)
- *
- * Container for action buttons with responsive layout. Uses reverse column
- * layout on mobile (cancel on top) and row layout on larger screens.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogFooterDocsProps = {
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Props for AlertDialogTitle (Documentation only - NOT used in component implementation)
- *
- * The main heading that describes what the alert dialog is asking.
- * Provides proper ARIA labeling for accessibility.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogTitleDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Title>;
-
-/**
- * Props for AlertDialogDescription (Documentation only - NOT used in component implementation)
- *
- * Additional context and explanation for the alert dialog action.
- * Provides proper ARIA description for accessibility.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogDescriptionDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Description>;
-
-/**
- * Props for AlertDialogAction (Documentation only - NOT used in component implementation)
- *
- * The primary action button that confirms or executes the alerted action.
- * Receives focus automatically when dialog opens. Styled with button variants.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogActionDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-  /** Additional CSS classes for styling (useful for destructive actions) */
-  className?: string;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Action>;
-
-/**
- * Props for AlertDialogCancel (Documentation only - NOT used in component implementation)
- *
- * The cancel button that dismisses the dialog without performing the action.
- * Styled as outline variant by default to de-emphasize compared to action.
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type AlertDialogCancelDocsProps = {
-  /** Render as child element, merging props and behavior @default false */
-  asChild?: boolean;
-  /** Additional CSS classes for styling */
-  className?: string;
-} & React.ComponentProps<typeof AlertDialogPrimitive.Cancel>;
+type AlertDialogProps = AlertDialogPrimitive.Root.Props;
 
-/**
- * Alert dialog component for critical confirmations and destructive actions
- *
- * A specialized modal dialog built on Radix UI Alert Dialog primitives that interrupts
- * users with important information requiring immediate acknowledgment or decision.
- * Unlike regular dialogs, alert dialogs cannot be dismissed by clicking outside and
- * focus the action button by default for critical decisions.
- *
- * Based on the WAI-ARIA Alert Dialog design pattern, this component is specifically
- * designed for destructive actions, confirmations, or critical warnings that need
- * immediate attention before the user can continue.
- *
- * @example
- * ```tsx
- * // Basic destructive confirmation
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button variant="destructive">Delete Account</Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
- *       <AlertDialogDescription>
- *         This action cannot be undone. This will permanently delete
- *         your account and remove your data from our servers.
- *       </AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel>Cancel</AlertDialogCancel>
- *       <AlertDialogAction>Delete Account</AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- *
- * @example
- * ```tsx
- * // Simple confirmation
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button variant="outline">Sign Out</Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Sign Out</AlertDialogTitle>
- *       <AlertDialogDescription>
- *         Are you sure you want to sign out of your account?
- *       </AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel>Cancel</AlertDialogCancel>
- *       <AlertDialogAction>Sign Out</AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- *
- * @accessibility
- * - Follows WAI-ARIA Alert Dialog design pattern
- * - Focus is trapped within the dialog when open
- * - Cannot be dismissed by clicking outside (intentional for alerts)
- * - Escape key closes the dialog (unless preventDefault is called)
- * - Proper ARIA roles and attributes for screen readers
- * - Focus returns to trigger element when closed
- * - Action button receives initial focus by default
- * - Supports keyboard navigation between focusable elements
- *
- * @see {@link https://ui.shadcn.com/docs/components/alert-dialog} shadcn/ui Alert Dialog docs
- * @see {@link https://www.radix-ui.com/primitives/docs/components/alert-dialog} Radix UI Alert Dialog
- * @see {@link Dialog} For general modal content that can be dismissed
- * @see {@link Sheet} For side panel overlays
- * @since 1.0.0
- */
-/**
- * Root component of the alert dialog
- *
- * Provides the context and state management for the entire alert dialog.
- * Controls the open/closed state and manages focus behavior. Alert dialogs
- * are specifically designed for critical actions that require user attention
- * and cannot be dismissed by clicking outside.
- *
- * @param defaultOpen - Whether the dialog is open initially (uncontrolled)
- * @param open - Whether the dialog is open (controlled)
- * @param onOpenChange - Callback when open state changes
- * @param props - All other props forwarded to Radix AlertDialog.Root
- *
- * @example
- * ```tsx
- * // Uncontrolled
- * <AlertDialog defaultOpen={false}>
- *   // dialog content
- * </AlertDialog>
- *
- * // Controlled
- * <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
- *   // dialog content
- * </AlertDialog>
- * ```
- */
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+/** Root container for alert dialog. Manages open state and accessibility. */
+function AlertDialog({ ...props }: AlertDialogProps) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-/**
- * Trigger element that opens the alert dialog
- *
- * The element that opens the alert dialog when activated. Usually a button,
- * but can be any interactive element through composition. When opened, the dialog
- * will trap focus and require user interaction before continuing.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param props - All other props forwarded to Radix AlertDialog.Trigger
- *
- * @example
- * ```tsx
- * // Direct usage
- * <AlertDialogTrigger>
- *   Delete Account
- * </AlertDialogTrigger>
- *
- * // Composition with Button component
- * <AlertDialogTrigger asChild>
- *   <Button variant="destructive">Delete Account</Button>
- * </AlertDialogTrigger>
- *
- * // Composition with custom element
- * <AlertDialogTrigger asChild>
- *   <button className="custom-trigger">Custom Trigger</button>
- * </AlertDialogTrigger>
- * ```
- */
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props;
+
+/** Button that opens the alert dialog. Use `render` prop to customize. */
+function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps) {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
   );
 }
 
-/**
- * Portal component for rendering dialog outside normal DOM tree
- *
- * Renders the alert dialog content into a portal, typically at the end of the document body.
- * This ensures the dialog appears above other content and is properly accessible.
- * Usually not used directly - AlertDialogContent includes this automatically.
- *
- * @param forceMount - Force mount the component even when dialog is closed
- * @param container - Container element to portal into (defaults to document.body)
- * @param props - All other props forwarded to Radix AlertDialog.Portal
- *
- * @example
- * ```tsx
- * // Custom portal container
- * <AlertDialogPortal container={customContainer}>
- *   <AlertDialogOverlay />
- *   <AlertDialogPrimitive.Content>
- *     // content
- *   </AlertDialogPrimitive.Content>
- * </AlertDialogPortal>
- * ```
- */
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+type AlertDialogPortalProps = AlertDialogPrimitive.Portal.Props;
+
+/** Portal container for alert dialog content and overlay. */
+function AlertDialogPortal({ ...props }: AlertDialogPortalProps) {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
   );
 }
 
-/**
- * Overlay backdrop behind the alert dialog
- *
- * A semi-transparent backdrop that covers the entire viewport when the dialog is open.
- * Provides visual separation and prevents interaction with background content.
- * Includes smooth fade in/out animations and proper z-index stacking.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param forceMount - Force mount the component even when dialog is closed
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to Radix AlertDialog.Overlay
- *
- * @example
- * ```tsx
- * // Custom overlay styling
- * <AlertDialogOverlay className="bg-black/80" />
- *
- * // Force mounted overlay
- * <AlertDialogOverlay forceMount className="custom-backdrop" />
- * ```
- */
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay> & {
-  className?: string;
-}) {
+type AlertDialogOverlayProps = AlertDialogPrimitive.Backdrop.Props;
+
+/** Semi-transparent backdrop overlay with frosted glass effect. */
+function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
   return (
-    <AlertDialogPrimitive.Overlay
+    <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
         className,
       )}
       {...props}
@@ -375,71 +45,28 @@ function AlertDialogOverlay({
   );
 }
 
+type AlertDialogContentProps = AlertDialogPrimitive.Popup.Props & {
+  /** Dialog size variant. @default "default" */
+  size?: "default" | "sm";
+};
+
 /**
- * Main content container for the alert dialog
- *
- * The primary container that holds all alert dialog content. Automatically includes
- * the portal and overlay, and provides default styling with responsive design.
- * Centered on screen with smooth fade and zoom animations. Manages focus trapping
- * and keyboard navigation automatically.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param forceMount - Force mount the component even when dialog is closed
- * @param onOpenAutoFocus - Callback when dialog opens and focus moves to content
- * @param onCloseAutoFocus - Callback when dialog closes and focus returns to trigger
- * @param onEscapeKeyDown - Callback when Escape key is pressed (can preventDefault)
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to Radix AlertDialog.Content
- *
- * @example
- * ```tsx
- * // Basic usage
- * <AlertDialogContent>
- *   <AlertDialogHeader>
- *     <AlertDialogTitle>Confirm Action</AlertDialogTitle>
- *     <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
- *   </AlertDialogHeader>
- *   <AlertDialogFooter>
- *     <AlertDialogCancel>Cancel</AlertDialogCancel>
- *     <AlertDialogAction>Continue</AlertDialogAction>
- *   </AlertDialogFooter>
- * </AlertDialogContent>
- *
- * // Custom focus handling
- * <AlertDialogContent
- *   onOpenAutoFocus={(e) => {
- *     e.preventDefault();
- *     customFocusTarget.focus();
- *   }}
- *   onEscapeKeyDown={(e) => {
- *     if (hasUnsavedChanges) {
- *       e.preventDefault();
- *       showUnsavedWarning();
- *     }
- *   }}
- * >
- *   // content
- * </AlertDialogContent>
- *
- * // Custom styling
- * <AlertDialogContent className="max-w-md">
- *   // smaller dialog
- * </AlertDialogContent>
- * ```
+ * Alert dialog content with automatic portal and backdrop.
+ * Centered, animated popup with two size variants.
  */
 function AlertDialogContent({
   className,
+  size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
-  className?: string;
-}) {
+}: AlertDialogContentProps) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
+      <AlertDialogPrimitive.Popup
         data-slot="alert-dialog-content"
+        data-size={size}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-border gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
           className,
         )}
         {...props}
@@ -448,85 +75,31 @@ function AlertDialogContent({
   );
 }
 
-/**
- * Header section of the alert dialog
- *
- * Contains the title and description of the alert dialog. Provides consistent
- * spacing and alignment, with responsive text alignment (centered on mobile,
- * left-aligned on larger screens). Should contain AlertDialogTitle and
- * optionally AlertDialogDescription for proper accessibility.
- *
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to the underlying div element
- *
- * @example
- * ```tsx
- * <AlertDialogHeader>
- *   <AlertDialogTitle>Delete Account</AlertDialogTitle>
- *   <AlertDialogDescription>
- *     This will permanently delete your account and all associated data.
- *     This action cannot be undone.
- *   </AlertDialogDescription>
- * </AlertDialogHeader>
- *
- * // Custom styling
- * <AlertDialogHeader className="text-left">
- *   <AlertDialogTitle>Custom Header</AlertDialogTitle>
- * </AlertDialogHeader>
- * ```
- */
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+type AlertDialogHeaderProps = React.ComponentProps<"div">;
+
+/** Header section for title, description, and optional media icon. */
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
       {...props}
     />
   );
 }
 
-/**
- * Footer section of the alert dialog
- *
- * Contains the action buttons (cancel and confirm). Uses responsive layout
- * with stacked buttons on mobile (cancel on top) and horizontal layout
- * on larger screens (cancel on left, action on right). Should contain
- * AlertDialogCancel and AlertDialogAction for proper UX.
- *
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to the underlying div element
- *
- * @example
- * ```tsx
- * <AlertDialogFooter>
- *   <AlertDialogCancel>Cancel</AlertDialogCancel>
- *   <AlertDialogAction>Delete Account</AlertDialogAction>
- * </AlertDialogFooter>
- *
- * // Custom button order
- * <AlertDialogFooter className="flex-row">
- *   <AlertDialogAction>Continue</AlertDialogAction>
- *   <AlertDialogCancel>Go Back</AlertDialogCancel>
- * </AlertDialogFooter>
- *
- * // Single action footer
- * <AlertDialogFooter>
- *   <AlertDialogAction>I Understand</AlertDialogAction>
- * </AlertDialogFooter>
- * ```
- */
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+type AlertDialogFooterProps = React.ComponentProps<"div">;
+
+/** Footer section for action and cancel buttons. */
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
   return (
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}
@@ -534,194 +107,89 @@ function AlertDialogFooter({
   );
 }
 
-/**
- * Title heading of the alert dialog
- *
- * The main heading that describes the alert or action being confirmed.
- * Automatically provides proper ARIA labeling for screen readers via
- * aria-labelledby. Should be concise and clearly state what the dialog is asking.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to Radix AlertDialog.Title
- *
- * @example
- * ```tsx
- * // Standard titles
- * <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
- * <AlertDialogTitle>Delete Account</AlertDialogTitle>
- * <AlertDialogTitle>Confirm Sign Out</AlertDialogTitle>
- *
- * // Custom styling
- * <AlertDialogTitle className="text-red-600 text-xl">
- *   Destructive Action
- * </AlertDialogTitle>
- *
- * // Composition with custom element
- * <AlertDialogTitle asChild>
- *   <h1 className="custom-title">Custom Title Element</h1>
- * </AlertDialogTitle>
- * ```
- */
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title> & {
-  className?: string;
-}) {
+type AlertDialogMediaProps = React.ComponentProps<"div">;
+
+/** Optional visual indicator icon container. Commonly used for warnings or errors. */
+function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogTitleProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Title
+>;
+
+/** Alert dialog title. Automatically announced by screen readers. */
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
+      className={cn(
+        "text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
       {...props}
     />
   );
 }
 
-/**
- * Description text of the alert dialog
- *
- * Provides additional context and explanation for the alert or action.
- * Should clearly explain the consequences of the action being confirmed.
- * Automatically provides proper ARIA description via aria-describedby for
- * screen readers. Can be omitted if aria-describedby is provided to Content.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to Radix AlertDialog.Description
- *
- * @example
- * ```tsx
- * // Standard descriptions
- * <AlertDialogDescription>
- *   This action cannot be undone. This will permanently delete your
- *   account and remove your data from our servers.
- * </AlertDialogDescription>
- *
- * <AlertDialogDescription>
- *   You will be signed out of all devices and will need to sign in again
- *   to access your account.
- * </AlertDialogDescription>
- *
- * // Custom styling
- * <AlertDialogDescription className="text-center text-lg">
- *   Are you sure you want to continue?
- * </AlertDialogDescription>
- *
- * // Composition with custom element
- * <AlertDialogDescription asChild>
- *   <p className="custom-description">
- *     Custom description element
- *   </p>
- * </AlertDialogDescription>
- * ```
- */
+type AlertDialogDescriptionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Description
+>;
+
+/** Alert dialog description text. Supports links with automatic styling. */
 function AlertDialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description> & {
-  className?: string;
-}) {
+}: AlertDialogDescriptionProps) {
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        className,
+      )}
       {...props}
     />
   );
 }
 
-/**
- * Primary action button of the alert dialog
- *
- * The button that confirms or executes the action being alerted about.
- * Automatically receives focus when the dialog opens (unless overridden).
- * Styled using buttonVariants() by default, but can be customized for
- * destructive actions. Closes the dialog when clicked.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param className - Additional CSS classes (useful for destructive styling)
- * @param props - All other props forwarded to Radix AlertDialog.Action
- *
- * @example
- * ```tsx
- * // Default action (primary button style)
- * <AlertDialogAction>Continue</AlertDialogAction>
- * <AlertDialogAction>Save Changes</AlertDialogAction>
- *
- * // Destructive action with red styling
- * <AlertDialogAction className={buttonVariants({ variant: "destructive" })}>
- *   Delete Account
- * </AlertDialogAction>
- *
- * // Custom styled action
- * <AlertDialogAction className="bg-green-600 hover:bg-green-700">
- *   Confirm Action
- * </AlertDialogAction>
- *
- * // Composition with custom button
- * <AlertDialogAction asChild>
- *   <Button variant="destructive" size="lg">
- *     Delete Forever
- *   </Button>
- * </AlertDialogAction>
- * ```
- */
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
-  className?: string;
-}) {
+type AlertDialogActionProps = React.ComponentProps<typeof Button>;
+
+/** Primary action button. Inherits all Button variants. */
+function AlertDialogAction({ className, ...props }: AlertDialogActionProps) {
   return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
       {...props}
     />
   );
 }
 
-/**
- * Cancel button of the alert dialog
- *
- * The button that dismisses the dialog without performing the action.
- * Styled using outline variant by default to de-emphasize compared to
- * the primary action. Closes the dialog when clicked without triggering
- * the main action.
- *
- * @param asChild - Render as child element, merging props and behavior
- * @param className - Additional CSS classes for custom styling
- * @param props - All other props forwarded to Radix AlertDialog.Cancel
- *
- * @example
- * ```tsx
- * // Standard cancel buttons
- * <AlertDialogCancel>Cancel</AlertDialogCancel>
- * <AlertDialogCancel>No, keep it</AlertDialogCancel>
- * <AlertDialogCancel>Go Back</AlertDialogCancel>
- *
- * // Custom styled cancel
- * <AlertDialogCancel className="text-red-600">
- *   Don't Delete
- * </AlertDialogCancel>
- *
- * // Composition with custom button
- * <AlertDialogCancel asChild>
- *   <Button variant="ghost" size="sm">
- *     Maybe Later
- *   </Button>
- * </AlertDialogCancel>
- * ```
- */
+type AlertDialogCancelProps = AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
+
+/** Cancel button that closes the alert dialog. Defaults to outline variant. */
 function AlertDialogCancel({
   className,
+  variant = "outline",
+  size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & {
-  className?: string;
-}) {
+}: AlertDialogCancelProps) {
   return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
       {...props}
     />
   );
@@ -729,14 +197,27 @@ function AlertDialogCancel({
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogPortalProps,
+  type AlertDialogOverlayProps,
+  type AlertDialogContentProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogMediaProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogActionProps,
+  type AlertDialogCancelProps,
 };