dialog

1'use client';
2 
3import * as React from 'react';
4import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
5 
6import { cn } from '@/registry/lib/utils';
7import { Button } from '@/registry/ui/button';
8import { XIcon } from '@phosphor-icons/react';
9 
10function Dialog({ ...props }: DialogPrimitive.Root.Props) {
11  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
12}
13 
14function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
15  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
16}
17 
18function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
19  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
20}
21 
22function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
23  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
24}
25 
26function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
27  return (
28    <DialogPrimitive.Backdrop
29      data-slot="dialog-overlay"
30      className={cn(
31        'fixed inset-0 isolate z-50 bg-black/80 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
32        className
33      )}
34      {...props}
35    />
36  );
37}
38 
39function DialogContent({
40  className,
41  children,
42  showCloseButton = true,
43  ...props
44}: DialogPrimitive.Popup.Props & {
45  showCloseButton?: boolean;
46}) {
47  return (
48    <DialogPortal>
49      <DialogOverlay />
50      <DialogPrimitive.Popup
51        data-slot="dialog-content"
52        className={cn(
53          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-hidden rounded-lg bg-surface text-sm ring-1 ring-primary/15 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
54          className
55        )}
56        {...props}
57      >
58        {children}
59        {showCloseButton && (
60          <DialogPrimitive.Close
61            data-slot="dialog-close"
62            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
63          >
64            <XIcon />
65            <span className="sr-only">Close</span>
66          </DialogPrimitive.Close>
67        )}
68      </DialogPrimitive.Popup>
69    </DialogPortal>
70  );
71}
72 
73function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
74  return (
75    <div
76      data-slot="dialog-header"
77// … truncated