Alert-dialog

1"use client";
2 
3import * as React from "react";
4import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/default/button/button";
7import {
8  elevatedSurface,
9  type SurfaceLevel,
10} from "@/registry/default/lib/elevated";
11import {
12  ScrollArea,
13  type ScrollAreaProps,
14} from "@/registry/default/scroll-area/scroll-area";
15 
16import { HugeiconsIcon } from "@hugeicons/react";
17import { Cancel01Icon } from "@hugeicons/core-free-icons";
18const AlertDialog = BaseAlertDialog.Root;
19 
20const createAlertDialogHandle = BaseAlertDialog.createHandle;
21 
22function AlertDialogPortal({ ...props }: BaseAlertDialog.Portal.Props) {
23  return <BaseAlertDialog.Portal data-slot="alert-dialog-portal" {...props} />;
24}
25 
26function AlertDialogTrigger({ ...props }: BaseAlertDialog.Trigger.Props) {
27  return (
28    <BaseAlertDialog.Trigger data-slot="alert-dialog-trigger" {...props} />
29  );
30}
31 
32function AlertDialogClose({ ...props }: BaseAlertDialog.Close.Props) {
33  return <BaseAlertDialog.Close data-slot="alert-dialog-close" {...props} />;
34}
35 
36function AlertDialogBackdrop({
37  className,
38  ...props
39}: BaseAlertDialog.Backdrop.Props) {
40  return (
41    <BaseAlertDialog.Backdrop
42      className={cn(
43        "ease-out-expo fixed inset-0 min-h-dvh bg-black/40 transition-all duration-200 supports-[-webkit-touch-callout:none]:absolute",
44        "backdrop-blur-sm data-ending-style:opacity-0 data-starting-style:opacity-0",
45        className,
46      )}
47      {...props}
48    />
49  );
50}
51 
52function AlertDialogViewport({
53  className,
54  ...props
55}: BaseAlertDialog.Viewport.Props) {
56  return (
57    <BaseAlertDialog.Viewport
58      data-slot="alert-dialog-viewport"
59      className={cn(
60        "fixed inset-0 flex items-center justify-center overflow-hidden px-4 py-6",
61        className,
62      )}
63      {...props}
64    />
65  );
66}
67 
68function AlertDialogContent({
69  className,
70  children,
71  showCloseButton = false,
72  variant = "default",
73  level = 5,
74  shadowLevel = 5,
75  ...props
76}: BaseAlertDialog.Popup.Props & {
77  showCloseButton?: boolean;
78  variant?: "default" | "inset";
79  /** Surface elevation level for the dialog bg (1-8). Defaults to 5. Bump to 7 for a critical/destructive confirmation that needs extra gravity. */
80  level?: SurfaceLevel;
81  /** Shadow weight (1-8). Pinned to 5 by default. */
82  shadowLevel?: SurfaceLevel;
83}) {
84  return (
85    <AlertDialogPortal>
86      <AlertDialogBackdrop />
87      <AlertDialogViewport>
88// … truncated