Dialog

1"use client";
2 
3import * as React from "react";
4import { Dialog as BaseDialog } from "@base-ui/react/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";
18interface DialogConfigContextValue {
19  modal: boolean | "trap-focus";
20}
21 
22const DialogConfigContext = React.createContext<DialogConfigContextValue>({
23  modal: true,
24});
25 
26function Dialog<Payload>({
27  modal = true,
28  disablePointerDismissal,
29  ...props
30}: BaseDialog.Root.Props<Payload>) {
31  const configValue = React.useMemo(() => ({ modal }), [modal]);
32  return (
33    <DialogConfigContext.Provider value={configValue}>
34      <BaseDialog.Root
35        modal={modal}
36        disablePointerDismissal={disablePointerDismissal ?? modal !== true}
37        {...props}
38      />
39    </DialogConfigContext.Provider>
40  );
41}
42 
43const createDialogHandle = BaseDialog.createHandle;
44 
45function DialogPortal({ ...props }: BaseDialog.Portal.Props) {
46  return <BaseDialog.Portal data-slot="dialog-portal" {...props} />;
47}
48 
49function DialogTrigger({ ...props }: BaseDialog.Trigger.Props) {
50  return <BaseDialog.Trigger data-slot="dialog-trigger" {...props} />;
51}
52 
53function DialogClose({ ...props }: BaseDialog.Close.Props) {
54  return <BaseDialog.Close data-slot="dialog-close" {...props} />;
55}
56 
57function DialogBackdrop({ className, ...props }: BaseDialog.Backdrop.Props) {
58  return (
59    <BaseDialog.Backdrop
60      className={cn(
61        "ease-out-expo fixed inset-0 min-h-dvh bg-black/40 transition-all duration-200 supports-[-webkit-touch-callout:none]:absolute",
62        "backdrop-blur-sm data-ending-style:opacity-0 data-starting-style:opacity-0",
63        className,
64      )}
65      {...props}
66    />
67  );
68}
69 
70function DialogViewport({ className, ...props }: BaseDialog.Viewport.Props) {
71  return (
72    <BaseDialog.Viewport
73      data-slot="dialog-viewport"
74      className={cn(
75        "fixed inset-0 flex flex-col items-center justify-center overflow-hidden px-4 py-6",
76        className,
77      )}
78      {...props}
79    />
80  );
81}
82 
83function DialogContent({
84  className,
85  children,
86  showCloseButton = true,
87  variant = "default",
88  level = 5,
89  shadowLevel = 5,
90  ...props
91}: BaseDialog.Popup.Props & {
92// … truncated