"use client";
import * as React from "react";
import * as P from "@radix-ui/react-popover";
import { AnimatePresence, motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const PopoverCtx = React.createContext(false);

/** Same API as Radix Popover. Tracks open state so content can animate out. */
export function Popover({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof P.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <PopoverCtx.Provider value={current}>
      <P.Root
        open={current}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </PopoverCtx.Provider>
  );
}
export const PopoverTrigger = P.Trigger;
export const PopoverAnchor = P.Anchor;
export const PopoverClose = P.Close;

export function PopoverContent({ className, children, align = "center", sideOffset = 8, ...p }: React.ComponentProps<typeof P.Content>) {
  const open = React.useContext(PopoverCtx);
  return (
    <AnimatePresence>
      {open && (
        <P.Portal forceMount>
          <P.Content asChild forceMount align={align} sideOffset={sideOffset} {...p}>
            <motion.div
              className={cn("z-50 w-72 rounded-xl bg-surface p-4 text-on-surface shadow-clay outline-none", className)}
              style={{ transformOrigin: "var(--radix-popover-content-transform-origin)" }}
              initial={{ opacity: 0, scale: 0.9, y: 6 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.12 } }}
              transition={springs.bouncy}
            >
              {children}
            </motion.div>
          </P.Content>
        </P.Portal>
      )}
    </AnimatePresence>
  );
}
Installation
