Dialog

1import * as React from 'react';
2import { XIcon } from 'lucide-react';
3 
4import {
5  Dialog as DialogPrimitive,
6  DialogPopup as DialogPopupPrimitive,
7  DialogDescription as DialogDescriptionPrimitive,
8  DialogFooter as DialogFooterPrimitive,
9  DialogHeader as DialogHeaderPrimitive,
10  DialogTitle as DialogTitlePrimitive,
11  DialogTrigger as DialogTriggerPrimitive,
12  DialogPortal as DialogPortalPrimitive,
13  DialogBackdrop as DialogBackdropPrimitive,
14  DialogClose as DialogClosePrimitive,
15  type DialogProps as DialogPrimitiveProps,
16  type DialogPopupProps as DialogPopupPrimitiveProps,
17  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
18  type DialogFooterProps as DialogFooterPrimitiveProps,
19  type DialogHeaderProps as DialogHeaderPrimitiveProps,
20  type DialogTitleProps as DialogTitlePrimitiveProps,
21  type DialogTriggerProps as DialogTriggerPrimitiveProps,
22  type DialogBackdropProps as DialogBackdropPrimitiveProps,
23  type DialogCloseProps as DialogClosePrimitiveProps,
24} from '@/components/animate-ui/primitives/base/dialog';
25import { cn } from '@/lib/utils';
26 
27type DialogProps = DialogPrimitiveProps;
28 
29function Dialog(props: DialogProps) {
30  return <DialogPrimitive {...props} />;
31}
32 
33type DialogTriggerProps = DialogTriggerPrimitiveProps;
34 
35function DialogTrigger(props: DialogTriggerProps) {
36  return <DialogTriggerPrimitive {...props} />;
37}
38 
39type DialogCloseProps = DialogClosePrimitiveProps;
40 
41function DialogClose(props: DialogCloseProps) {
42  return <DialogClosePrimitive {...props} />;
43}
44 
45type DialogBackdropProps = DialogBackdropPrimitiveProps;
46 
47function DialogBackdrop({ className, ...props }: DialogBackdropProps) {
48  return (
49    <DialogBackdropPrimitive
50      className={cn('fixed inset-0 z-50 bg-black/50', className)}
51      {...props}
52    />
53  );
54}
55 
56type DialogPopupProps = DialogPopupPrimitiveProps & {
57  showCloseButton?: boolean;
58};
59 
60function DialogPopup({
61  className,
62  children,
63  showCloseButton = true,
64  ...props
65}: DialogPopupProps) {
66  return (
67    <DialogPortalPrimitive>
68      <DialogBackdrop />
69      <DialogPopupPrimitive
70        className={cn(
71          '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',
72          className,
73        )}
74        {...props}
75      >
76        {children}
77        {showCloseButton && (
78// … truncated