// @design-system: overlays/AlertDialog
// Registered at /design-system#alertdialog-overlay - Phase 3 (Agent 3E) will render the gallery.
import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
import { cn } from '@/lib/cn';
// ─── Root + Trigger ────────────────────────────────────────────────────────
/** Root alert-dialog controller. */
export const AlertDialog = RadixAlertDialog.Root;
/** Trigger element. */
export const AlertDialogTrigger = RadixAlertDialog.Trigger;
/** Portal wrapper (internal use — not exported). */
const AlertDialogPortal = RadixAlertDialog.Portal;
// ─── Overlay ──────────────────────────────────────────────────────────────
/** Props for AlertDialogOverlay (internal use — not exported). */
type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
typeof RadixAlertDialog.Overlay
>;
/** Backdrop overlay (internal use — not exported). */
function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
return (
);
}
// ─── Content ──────────────────────────────────────────────────────────────
/** Props for AlertDialogContent */
export type AlertDialogContentProps = React.ComponentPropsWithoutRef<
typeof RadixAlertDialog.Content
>;
/** Alert dialog panel - for destructive confirmations. */
export function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {
return (
{children}
);
}
// ─── Sub-components ────────────────────────────────────────────────────────
/** Props for AlertDialogHeader */
export type AlertDialogHeaderProps = React.HTMLAttributes;
/** Header for alert dialog. */
export function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
return ;
}
/** Props for AlertDialogFooter */
export type AlertDialogFooterProps = React.HTMLAttributes;
/** Footer for alert dialog action buttons. */
export function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
return ;
}
/** Props for AlertDialogTitle */
export type AlertDialogTitleProps = React.ComponentPropsWithoutRef;
/** Alert dialog title - required. */
export function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
return (
);
}
/** Props for AlertDialogDescription */
export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
typeof RadixAlertDialog.Description
>;
/** Alert dialog description. */
export function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps) {
return (
);
}
/** Props for AlertDialogAction */
export type AlertDialogActionProps = React.ComponentPropsWithoutRef;
/** Confirm action button - typically destructive. */
export function AlertDialogAction({ className, ...props }: AlertDialogActionProps) {
return (
);
}
/** Props for AlertDialogCancel */
export type AlertDialogCancelProps = React.ComponentPropsWithoutRef;
/** Cancel button - closes without action. */
export function AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {
return (
);
}