"use client";
import * as React from "react";
import * as D from "@radix-ui/react-dialog";
import { AnimatePresence, motion } from "motion/react";
import { XIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const DialogCtx = React.createContext(false);

/** Same API as Radix Dialog. Tracks open state so content can animate out before unmounting. */
export function Dialog({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof D.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <DialogCtx.Provider value={current}>
      <D.Root
        open={current}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </DialogCtx.Provider>
  );
}
export const DialogTrigger = D.Trigger;
export const DialogClose = D.Close;

export function DialogContent({ className, children, ...p }: React.ComponentProps<typeof D.Content>) {
  const open = React.useContext(DialogCtx);
  return (
    <AnimatePresence>
      {open && (
        <D.Portal forceMount>
          <D.Overlay asChild forceMount>
            <motion.div
              className="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            />
          </D.Overlay>
          <div className="pointer-events-none fixed inset-0 z-50 grid place-items-center p-4">
            <D.Content asChild forceMount {...p}>
              <motion.div
                className={cn(
                  "pointer-events-auto relative w-full max-w-md rounded-xl bg-surface p-6 text-on-surface shadow-clay",
                  className
                )}
                initial={{ opacity: 0, scale: 0.8, y: 30, rotate: -2 }}
                animate={{ opacity: 1, scale: 1, y: 0, rotate: 0 }}
                exit={{ opacity: 0, scale: 0.9, y: 16, transition: { duration: 0.15 } }}
                transition={springs.bouncy}
              >
                {children}
                <D.Close
                  className="absolute right-4 top-4 grid size-8 cursor-pointer place-items-center rounded-full bg-surface-sunken font-bold shadow-clay-sm transition-transform hover:rotate-90 hover:bg-background"
                  aria-label="Close"
                >
                  <XIcon weight="bold" className="size-4" aria-hidden />
                </D.Close>
              </motion.div>
            </D.Content>
          </div>
        </D.Portal>
      )}
    </AnimatePresence>
  );
}
export function DialogTitle({ className, ...p }: React.ComponentProps<typeof D.Title>) {
  return <D.Title className={cn("text-xl font-extrabold", className)} {...p} />;
}
export function DialogDescription({ className, ...p }: React.ComponentProps<typeof D.Description>) {
  return <D.Description className={cn("mt-1 text-sm text-on-surface-muted", className)} {...p} />;
}
Installation
