Alert Dialog (Tailwind)

1"use client";
2 
3import { AlertDialog } from "@base-ui/react/alert-dialog";
4import type React from "react";
5import { cn } from "@/lib/utils";
6 
7function AlertDialogRoot({ ...props }: AlertDialog.Root.Props) {
8  return <AlertDialog.Root {...props} />;
9}
10 
11function AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props) {
12  return <AlertDialog.Trigger data-slot="alert-dialog-trigger" nativeButton {...props} />;
13}
14 
15const AlertDialogPortal = AlertDialog.Portal;
16 
17function AlertDialogBackdrop({ className, ...props }: AlertDialog.Backdrop.Props) {
18  return (
19    <AlertDialog.Backdrop
20      className={cn(
21        "fixed inset-0 z-[var(--dialog-z)] bg-[var(--dialog-overlay)] transition-opacity duration-150",
22        "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
23        className
24      )}
25      data-slot="alert-dialog-backdrop"
26      {...props}
27    />
28  );
29}
30 
31const popupStyles = cn(
32  "fixed top-1/2 left-1/2 z-[101] grid max-h-[85vh] w-full max-w-[32rem] overflow-y-auto",
33  "gap-4 rounded-[var(--radius)] border-none p-6",
34  "shadow-[0_0_0_1px_oklch(from_var(--border)_l_c_h_/_0.5),var(--shadow-border-stack)]",
35  "-translate-x-1/2 -translate-y-1/2 bg-[var(--mix-card-5-bg)]",
36  "transition-all duration-150",
37  "data-[starting-style]:-translate-x-1/2 data-[starting-style]:-translate-y-1/2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
38  "data-[ending-style]:-translate-x-1/2 data-[ending-style]:-translate-y-1/2 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
39  "max-sm:-translate-y-1/2 max-sm:top-1/2 max-sm:right-4 max-sm:left-4 max-sm:w-[calc(100vw-2rem)] max-sm:max-w-none max-sm:translate-x-0",
40  "max-sm:data-[starting-style]:-translate-y-1/2 max-sm:data-[starting-style]:scale-90 max-sm:data-[starting-style]:opacity-0",
41  "max-sm:data-[ending-style]:-translate-y-1/2 max-sm:data-[ending-style]:scale-90 max-sm:data-[ending-style]:opacity-0"
42);
43 
44function AlertDialogPopup({ className, children, ...props }: AlertDialog.Popup.Props) {
45  return (
46    <AlertDialogPortal>
47      <AlertDialog.Popup className={cn(popupStyles, className)} data-slot="alert-dialog-popup" {...props}>
48        {children}
49      </AlertDialog.Popup>
50    </AlertDialogPortal>
51  );
52}
53 
54function AlertDialogContent({ className, children, ...props }: AlertDialog.Popup.Props) {
55  return (
56    <AlertDialogPortal>
57      <AlertDialogBackdrop />
58      <AlertDialog.Popup className={cn(popupStyles, className)} data-slot="alert-dialog-popup" {...props}>
59// … truncated