"use client"; import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";import { XIcon } from "lucide-react";import { cn } from "~/lib/utils";import { Button } from "~/components/ui/button";import { ScrollArea } from "~/components/ui/scroll-area"; const DialogCreateHandle = DialogPrimitive.createHandle; const Dialog = DialogPrimitive.Root; const DialogPortal = DialogPrimitive.Portal; function DialogTrigger(props: DialogPrimitive.Trigger.Props) {  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;} function DialogClose(props: DialogPrimitive.Close.Props) {  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;} function DialogBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props) {  return (    <DialogPrimitive.Backdrop      forceRender      className={cn(        "fixed inset-0 z-50 bg-background/60 backdrop-blur-xs transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",        className,      )}      data-slot="dialog-backdrop"      {...props}    />  );} function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props) {  return (    <DialogPrimitive.Viewport      className={cn(        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",        className,      )}      data-slot="dialog-viewport"      {...props}    />  );} function DialogPopup({  className,  children,  showCloseButton = true,  bottomStickOnMobile = true,  ...props}: DialogPrimitive.Popup.Props & {  showCloseButton?: boolean;  bottomStickOnMobile?: boolean;}) {  return (    <DialogPortal>      <DialogBackdrop />      <DialogViewport        className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}      >        <DialogPrimitive.Popup          className={cn(            "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",            bottomStickOnMobile &&              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",            className,          )}          data-slot="dialog-popup"          {...props}        >          {children}          {showCloseButton && (            <DialogPrimitive.Close              aria-label="Close"              className="absolute end-2 top-2"              render={<Button size="icon" variant="ghost" />}            >              <XIcon />            </DialogPrimitive.Close>          )}        </DialogPrimitive.Popup>      </DialogViewport>    </DialogPortal>  );} function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      className={cn(        "flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4",        className,      )}      data-slot="dialog-header"      {...props}    />  );} function DialogFooter({  className,  variant = "default",  ...props}: React.ComponentProps<"div"> & {  variant?: "default" | "bare";}) {  return (    <div      className={cn(        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",        variant === "default" && "border-t bg-muted/72 py-4",        variant === "bare" &&          "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6",        className,      )}      data-slot="dialog-footer"      {...props}    />  );} function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {  return (    <DialogPrimitive.Title      className={cn("font-heading font-semibold text-xl leading-none", className)}      data-slot="dialog-title"      {...props}    />  );} function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {  return (    <DialogPrimitive.Description      className={cn("text-muted-foreground text-sm", className)}      data-slot="dialog-description"      {...props}    />  );} function DialogPanel({  className,  scrollFade = true,  ...props}: React.ComponentProps<"div"> & { scrollFade?: boolean }) {  return (    <ScrollArea scrollFade={scrollFade}>      <div        className={cn(          "p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1",          className,        )}        data-slot="dialog-panel"        {...props}      />    </ScrollArea>  );} export {  DialogCreateHandle,  Dialog,  DialogTrigger,  DialogPortal,  DialogClose,  DialogBackdrop,  DialogBackdrop as DialogOverlay,  DialogPopup,  DialogPopup as DialogContent,  DialogHeader,  DialogFooter,  DialogTitle,  DialogDescription,  DialogPanel,  DialogViewport,};