Dialog

1"use client";
2 
3import "./dialog.css";
4import { Dialog as BaseDialog } from "@base-ui/react/dialog";
5import React from "react";
6import { cn } from "tailwind-variants";
7 
8import { DialogContext, useDialogContext } from "./dialog.context";
9import { dialogVariants, type DialogVariants } from "./dialog.variants";
10 
11export type DialogProps = DialogVariants & React.ComponentProps<typeof BaseDialog.Root>;
12 
13export const DialogRoot = ({ children, size, ...props }: DialogProps) => {
14  const slots = dialogVariants({ size });
15 
16  return (
17    <DialogContext.Provider value={{ slots }}>
18      <BaseDialog.Root {...props}>{children}</BaseDialog.Root>
19    </DialogContext.Provider>
20  );
21};
22 
23export type DialogTriggerProps = React.ComponentProps<typeof BaseDialog.Trigger> & {
24  render?: React.ReactElement;
25  asChild?: boolean;
26};
27 
28export const DialogTrigger = ({
29  className,
30  children,
31  render,
32  asChild: _asChild,
33  ...props
34}: DialogTriggerProps) => {
35  const { slots } = useDialogContext();
36  const renderElement = render ?? (React.isValidElement(children) ? children : undefined);
37  return (
38    <BaseDialog.Trigger
39      className={cn(slots.trigger(), className)}
40      {...props}
41      {...(renderElement ? { render: renderElement } : { children })}
42    />
43  );
44};
45 
46export type DialogPortalProps = React.ComponentProps<typeof BaseDialog.Portal>;
47 
48export const DialogPortal = (props: DialogPortalProps) => {
49  return <BaseDialog.Portal {...props} />;
50};
51 
52export type DialogBackdropProps = React.ComponentProps<typeof BaseDialog.Backdrop>;
53 
54export const DialogBackdrop = ({ className, ...props }: DialogBackdropProps) => {
55  const { slots } = useDialogContext();
56  return <BaseDialog.Backdrop className={cn(slots.backdrop(), className)} {...props} />;
57};
58 
59export const DialogOverlay = DialogBackdrop;
60export type DialogOverlayProps = DialogBackdropProps;
61 
62export type DialogPopupProps = React.ComponentProps<typeof BaseDialog.Popup>;
63 
64export const DialogPopup = ({ className, ...props }: DialogPopupProps) => {
65  const { slots } = useDialogContext();
66  return <BaseDialog.Popup className={cn(slots.popup(), className)} {...props} />;
67};
68 
69export type DialogTitleProps = React.ComponentProps<typeof BaseDialog.Title>;
70 
71export const DialogTitle = ({ className, ...props }: DialogTitleProps) => {
72  const { slots } = useDialogContext();
73  return <BaseDialog.Title className={cn(slots.title(), className)} {...props} />;
74};
75 
76// … truncated