Popover (Base UI)

1"use client";
2 
3import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4import { motion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const controlCornerClassName =
10  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
11 
12const surfaceCornerClassName =
13  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]";
14 
15const popoverThemeClassName =
16  "[--po-surface:#ffffff] [--po-foreground:#111111] [--po-border:#e3e7ec] [--po-ring:rgba(17,17,17,0.16)] dark:[--po-surface:#111111] dark:[--po-foreground:#f6f3ec] dark:[--po-border:#2b2a25] dark:[--po-ring:rgba(246,243,236,0.18)]";
17 
18const popoverPanelClassName = cn(
19  surfaceCornerClassName,
20  "z-50 w-72 transform-gpu border border-[color:var(--po-border)] bg-[color:var(--po-surface)] p-4 text-[color:var(--po-foreground)] shadow-none outline-none"
21);
22 
23const popoverTriggerClassName = cn(
24  controlCornerClassName,
25  "inline-flex min-h-11 min-w-11 touch-manipulation items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--po-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--po-surface)]"
26);
27 
28type Side = "top" | "right" | "bottom" | "left";
29type Align = "start" | "center" | "end";
30type CollisionPadding = React.ComponentPropsWithoutRef<
31  typeof PopoverPrimitive.Positioner
32>["collisionPadding"];
33 
34type PopoverContextValue = {
35  actionsRef: React.RefObject<PopoverPrimitive.Root.Actions | null>;
36  open: boolean;
37  contentId: string;
38  triggerId: string;
39  getAnchorNode: () => HTMLElement | null;
40  setAnchorNode: (node: HTMLElement | null) => void;
41  setTriggerNode: (node: HTMLElement | null) => void;
42};
43 
44type PopoverTriggerElementProps = React.HTMLAttributes<HTMLElement> & {
45  className?: string;
46};
47 
48type PopoverTriggerChildElement = React.ReactElement<
49  PopoverTriggerElementProps & React.RefAttributes<HTMLElement>
50>;
51 
52type PopoverAnchorElementProps = React.HTMLAttributes<HTMLElement> & {
53  className?: string;
54};
55 
56type PopoverAnchorChildElement = React.ReactElement<
57  PopoverAnchorElementProps & React.RefAttributes<HTMLElement>
58>;
59 
60type PopupRenderProps = React.HTMLAttributes<HTMLDivElement> & {
61  children?: React.ReactNode;
62  className?: string;
63  ref?: React.Ref<HTMLDivElement>;
64  style?: React.CSSProperties;
65};
66 
67// … truncated