Popover

1"use client";
2 
3import type { ComponentProps } from "react";
4import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
5import { motion, useReducedMotion } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8import { spring } from "@/lib/springs";
9 
10function Popover({ ...props }: PopoverPrimitive.Root.Props) {
11  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
12}
13 
14function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
15  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
16}
17 
18/**
19 * Anchored, non-modal — no backdrop, unlike Dialog. It enters from a small
20 * trigger-facing offset on its resolved side, so collision handling never
21 * breaks the connection between the trigger and its floating surface.
22 */
23function PopoverContent({
24  className,
25  align = "center",
26  alignOffset = 0,
27  side = "bottom",
28  sideOffset = 8,
29  ...props
30}: PopoverPrimitive.Popup.Props &
31  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
32  const reduceMotion = useReducedMotion();
33 
34  return (
35    <PopoverPrimitive.Portal>
36      <PopoverPrimitive.Positioner
37        data-slot="popover-positioner"
38        align={align}
39        alignOffset={alignOffset}
40        side={side}
41        sideOffset={sideOffset}
42        className="z-50"
43      >
44        <PopoverPrimitive.Popup
45          data-slot="popover-content"
46          render={(popupProps, state) => {
47            const exiting = state.transitionStatus === "ending";
48            const triggerOffset = reduceMotion
49              ? { x: 0, y: 0 }
50              : {
51                  x: state.side === "right" ? -4 : state.side === "left" ? 4 : 0,
52                  y: state.side === "bottom" ? -4 : state.side === "top" ? 4 : 0,
53                };
54            return (
55              <motion.div
56                {...(popupProps as Record<string, unknown>)}
57                {...(props as Record<string, unknown>)}
58                className={cn(
59                  "w-72 rounded-lg bg-popover p-3 text-body text-popover-foreground shadow-popover outline-none",
60                  className,
61                )}
62                initial={{ opacity: 0, ...triggerOffset }}
63                animate={{
64                  opacity: exiting ? 0 : 1,
65                  x: exiting ? triggerOffset.x : 0,
66                  y: exiting ? triggerOffset.y : 0,
67                }}
68                transition={exiting ? spring.moderate.exit : spring.moderate.enter}
69// … truncated