alert-dialog

1import * as React from "react"
2import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
3 
4import { cn } from "@/lib/utils"
5 
6function AlertDialog({
7	...props
8}: React.ComponentProps<typeof BaseAlertDialog.Root>) {
9	return <BaseAlertDialog.Root data-slot="alert-dialog" {...props} />
10}
11 
12function AlertDialogTrigger({
13	...props
14}: React.ComponentProps<typeof BaseAlertDialog.Trigger>) {
15	return <BaseAlertDialog.Trigger data-slot="alert-dialog-trigger" {...props} />
16}
17 
18function AlertDialogPortal({
19	...props
20}: React.ComponentProps<typeof BaseAlertDialog.Portal>) {
21	return <BaseAlertDialog.Portal data-slot="alert-dialog-portal" {...props} />
22}
23 
24function AlertDialogClose({
25	...props
26}: React.ComponentProps<typeof BaseAlertDialog.Close>) {
27	return <BaseAlertDialog.Close data-slot="alert-dialog-close" {...props} />
28}
29 
30function AlertDialogOverlay({
31	className,
32	...props
33}: React.ComponentProps<typeof BaseAlertDialog.Backdrop>) {
34	return (
35		<BaseAlertDialog.Backdrop
36			data-slot="alert-dialog-overlay"
37			className={cn(
38				"fixed inset-0 bg-black/50 transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0",
39				className
40			)}
41			{...props}
42		/>
43	)
44}
45 
46function AlertDialogContent({
47	className,
48	children,
49	...props
50}: React.ComponentProps<typeof BaseAlertDialog.Popup>) {
51	return (
52		<AlertDialogPortal>
53			<AlertDialogOverlay />
54			<BaseAlertDialog.Popup
55				data-slot="alert-dialog-content"
56				className={cn(
57					"bg-popover text-popover-foreground fixed top-[100vh] left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-full gap-4 rounded-lg border p-6 shadow-lg transition-all duration-200 outline-none data-ending-style:translate-y-full data-ending-style:opacity-0 data-starting-style:translate-y-full data-starting-style:opacity-0 max-sm:rounded-b-none sm:top-[50%] sm:w-[32rem] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:scale-[calc(1-0.1*var(--nested-dialogs))] data-ending-style:sm:translate-y-[-50%] data-ending-style:sm:scale-95 data-starting-style:sm:translate-y-[-50%] data-starting-style:sm:scale-95",
58					className
59				)}
60				{...props}
61			>
62				{children}
63			</BaseAlertDialog.Popup>
64		</AlertDialogPortal>
65	)
66}
67 
68function AlertDialogHeader({
69	className,
70	...props
71}: React.HTMLAttributes<HTMLDivElement>) {
72	return (
73		<div
74			data-slot="alert-dialog-header"
75			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
76			{...props}
77		/>
78	)
79}
80 
81function AlertDialogFooter({
82	className,
83	...props
84// … truncated