Alert Dialog

1import * as React from 'react';
2 
3import {
4  AlertDialog as AlertDialogPrimitive,
5  AlertDialogPopup as AlertDialogPopupPrimitive,
6  AlertDialogDescription as AlertDialogDescriptionPrimitive,
7  AlertDialogFooter as AlertDialogFooterPrimitive,
8  AlertDialogHeader as AlertDialogHeaderPrimitive,
9  AlertDialogTitle as AlertDialogTitlePrimitive,
10  AlertDialogTrigger as AlertDialogTriggerPrimitive,
11  AlertDialogPortal as AlertDialogPortalPrimitive,
12  AlertDialogBackdrop as AlertDialogBackdropPrimitive,
13  AlertDialogClose as AlertDialogClosePrimitive,
14  type AlertDialogProps as AlertDialogPrimitiveProps,
15  type AlertDialogPopupProps as AlertDialogPopupPrimitiveProps,
16  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
17  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,
18  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,
19  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
20  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
21  type AlertDialogBackdropProps as AlertDialogBackdropPrimitiveProps,
22  type AlertDialogCloseProps as AlertDialogClosePrimitiveProps,
23} from '@/components/animate-ui/primitives/base/alert-dialog';
24import { buttonVariants } from '@/components/animate-ui/components/buttons/button';
25import { cn } from '@/lib/utils';
26 
27type AlertDialogProps = AlertDialogPrimitiveProps;
28 
29function AlertDialog(props: AlertDialogProps) {
30  return <AlertDialogPrimitive {...props} />;
31}
32 
33type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
34 
35function AlertDialogTrigger(props: AlertDialogTriggerProps) {
36  return <AlertDialogTriggerPrimitive {...props} />;
37}
38 
39type AlertDialogBackdropProps = AlertDialogBackdropPrimitiveProps;
40 
41function AlertDialogBackdrop({
42  className,
43  ...props
44}: AlertDialogBackdropProps) {
45  return (
46    <AlertDialogBackdropPrimitive
47      className={cn('fixed inset-0 z-50 bg-black/50', className)}
48      {...props}
49    />
50  );
51}
52 
53type AlertDialogPopupProps = AlertDialogPopupPrimitiveProps;
54 
55function AlertDialogPopup({ className, ...props }: AlertDialogPopupProps) {
56  return (
57    <AlertDialogPortalPrimitive>
58      <AlertDialogBackdrop />
59      <AlertDialogPopupPrimitive
60        className={cn(
61          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
62          className,
63        )}
64        {...props}
65      />
66    </AlertDialogPortalPrimitive>
67// … truncated