Alert Dialog

1"use client";
2 
3import { AlertDialog } from "@base-ui/react/alert-dialog";
4import type React from "react";
5import { cn } from "@/lib/utils";
6import styles from "./alert-dialog.module.css";
7 
8function AlertDialogRoot({ ...props }: AlertDialog.Root.Props) {
9  return <AlertDialog.Root {...props} />;
10}
11 
12function AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props) {
13  return <AlertDialog.Trigger data-slot="alert-dialog-trigger" nativeButton {...props} />;
14}
15 
16const AlertDialogPortal = AlertDialog.Portal;
17 
18function AlertDialogBackdrop({ className, ...props }: AlertDialog.Backdrop.Props) {
19  return (
20    <AlertDialog.Backdrop className={cn(styles.overlay, className)} data-slot="alert-dialog-backdrop" {...props} />
21  );
22}
23 
24function AlertDialogPopup({ className, children, ...props }: AlertDialog.Popup.Props) {
25  return (
26    <AlertDialogPortal>
27      <AlertDialog.Popup className={cn(styles.content, className)} data-slot="alert-dialog-popup" {...props}>
28        {children}
29      </AlertDialog.Popup>
30    </AlertDialogPortal>
31  );
32}
33 
34function AlertDialogContent({ className, children, ...props }: AlertDialog.Popup.Props) {
35  return (
36    <AlertDialogPortal>
37      <AlertDialogBackdrop />
38      <AlertDialog.Popup className={cn(styles.content, className)} data-slot="alert-dialog-popup" {...props}>
39        {children}
40      </AlertDialog.Popup>
41    </AlertDialogPortal>
42  );
43}
44 
45function AlertDialogTitle({ className, ...props }: AlertDialog.Title.Props) {
46  return <AlertDialog.Title className={cn(styles.title, className)} data-slot="alert-dialog-title" {...props} />;
47}
48 
49function AlertDialogDescription({ className, ...props }: AlertDialog.Description.Props) {
50  return (
51    <AlertDialog.Description
52      className={cn(styles.description, className)}
53      data-slot="alert-dialog-description"
54      {...props}
55    />
56  );
57}
58 
59function AlertDialogClose({ ...props }: AlertDialog.Close.Props) {
60  return <AlertDialog.Close data-slot="alert-dialog-close" nativeButton {...props} />;
61}
62 
63const AlertDialogOverlay = AlertDialogBackdrop;
64 
65function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
66  return <div className={cn(styles.header, className)} data-slot="alert-dialog-header" {...props} />;
67}
68 
69function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
70  return <div className={cn(styles.footer, className)} data-slot="alert-dialog-footer" {...props} />;
71}
72 
73export {
74  AlertDialogRoot as AlertDialog,
75  AlertDialogClose,
76// … truncated