dialog

1"use client"
2 
3import * as React from "react"
4import { Dialog as BaseDialog } from "@base-ui/react"
5import { XIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function Dialog({ ...props }: React.ComponentProps<typeof BaseDialog.Root>) {
10	return <BaseDialog.Root data-slot="dialog" {...props} />
11}
12 
13function DialogPortal({
14	...props
15}: React.ComponentProps<typeof BaseDialog.Portal>) {
16	return <BaseDialog.Portal data-slot="dialog-portal" {...props} />
17}
18 
19function DialogTrigger({
20	...props
21}: React.ComponentProps<typeof BaseDialog.Trigger>) {
22	return <BaseDialog.Trigger data-slot="dialog-trigger" {...props} />
23}
24 
25function DialogClose({
26	...props
27}: React.ComponentProps<typeof BaseDialog.Close>) {
28	return <BaseDialog.Close data-slot="dialog-close" {...props} />
29}
30 
31function DialogOverlay({
32	className,
33	...props
34}: React.ComponentProps<typeof BaseDialog.Backdrop>) {
35	return (
36		<BaseDialog.Backdrop
37			data-slot="dialog-overlay"
38			className={cn(
39				"fixed inset-0 bg-black/50 transition-all duration-200 [&[data-ending-style]]:opacity-0 [&[data-starting-style]]:opacity-0",
40				className
41			)}
42			{...props}
43		/>
44	)
45}
46 
47function DialogContent({
48	className,
49	children,
50	showCloseButton = true,
51	...props
52}: React.ComponentProps<typeof BaseDialog.Popup> & {
53	showCloseButton?: boolean
54}) {
55	return (
56		<DialogPortal data-slot="dialog-portal">
57			<DialogOverlay />
58			<BaseDialog.Popup
59				data-slot="dialog-content"
60				className={cn(
61					"bg-popover text-popover-foreground fixed top-[100vh] left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-full gap-4 rounded-lg border p-6 shadow-lg transition-all duration-200 outline-none data-ending-style:translate-y-full data-ending-style:opacity-0 data-starting-style:translate-y-full data-starting-style:opacity-0 max-sm:rounded-b-none sm:top-[50%] sm:w-[32rem] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:scale-[calc(1-0.1*var(--nested-dialogs))] data-ending-style:sm:translate-y-[-50%] data-ending-style:sm:scale-95 data-starting-style:sm:translate-y-[-50%] data-starting-style:sm:scale-95",
62					className
63				)}
64				{...props}
65			>
66				{children}
67				{showCloseButton && (
68					<DialogClose className="ring-offset-popover focus:ring-ring text-muted-foreground absolute top-4 right-4 rounded-xs opacity-50 transition-opacity hover:opacity-100 focus:ring-[3px] focus:ring-offset-2 focus:outline-hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
69						<XIcon />
70// … truncated