Popover

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { Popover as PopoverPrimitive } from "radix-ui";
5import * as React from "react";
6 
7import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9 
10/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
11const popoverContentVariants = cva(
12  "z-50 w-72 rounded-xl p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
13  {
14    variants: {
15      variant: {
16        default: "bg-popover text-popover-foreground border",
17        glass: "text-foreground",
18      },
19    },
20    defaultVariants: {
21      variant: "glass",
22    },
23  },
24);
25 
26/* Role: bordered + veiled adaptive glass. */
27const ROLE = {
28  border: true,
29  veil: true,
30};
31 
32const Popover = PopoverPrimitive.Root;
33 
34const PopoverTrigger = PopoverPrimitive.Trigger;
35 
36const PopoverAnchor = PopoverPrimitive.Anchor;
37 
38const PopoverContent = React.forwardRef<
39  React.ElementRef<typeof PopoverPrimitive.Content>,
40  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & VariantProps<typeof popoverContentVariants> & MaterialAxisProps
41>(({ className, align = "center", sideOffset = 4, variant = "glass", ...props }, ref) => {
42  const [axes, rest] = splitAxisProps(props);
43  const m = materialSurface(variant === "default" ? null : ROLE, axes);
44 
45  return (
46    <PopoverPrimitive.Portal>
47      <PopoverPrimitive.Content
48        ref={ref}
49        data-slot="popover-content"
50        data-material={m?.["data-material"]}
51        align={align}
52        sideOffset={sideOffset}
53        className={cn(
54          m?.className,
55          popoverContentVariants({
56            variant,
57          }),
58          className,
59        )}
60        {...rest}
61      />
62    </PopoverPrimitive.Portal>
63  );
64});
65PopoverContent.displayName = PopoverPrimitive.Content.displayName;
66 
67const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
68  <div data-slot="popover-header" className={cn("flex flex-col gap-1 text-sm", className)} {...props} />
69);
70PopoverHeader.displayName = "PopoverHeader";
71 
72// … truncated