Popover

1"use client";
2 
3import * as React from "react";
4import * as PopoverPrimitive from "@radix-ui/react-popover";
5 
6import { cn } from "@/lib/utils";
7import {
8  floatingMotion,
9  floatingSurfaceVariants,
10  type FloatingSurfaceProps,
11} from "@/components/ui/recipes";
12 
13const Popover = PopoverPrimitive.Root;
14 
15const PopoverTrigger = PopoverPrimitive.Trigger;
16 
17const PopoverContent = React.forwardRef<
18  React.ElementRef<typeof PopoverPrimitive.Content>,
19  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
20    FloatingSurfaceProps & { padding?: "none" | "sm" | "md" | "lg" }
21>(
22  (
23    {
24      className,
25      align = "center",
26      sideOffset = 6,
27      collisionPadding = 8,
28      surface,
29      radius,
30      padding = "md",
31      style,
32      ...props
33    },
34    ref,
35  ) => (
36    <PopoverPrimitive.Portal>
37      <PopoverPrimitive.Content
38        ref={ref}
39        align={align}
40        sideOffset={sideOffset}
41        collisionPadding={collisionPadding}
42        style={
43          {
44            "--poyraz-floating-transform-origin": "var(--radix-popover-content-transform-origin)",
45            "--poyraz-floating-slide": "var(--poyraz-floating-slide-distance, 0.5rem)",
46            ...style,
47          } as React.CSSProperties
48        }
49        className={cn(
50          floatingSurfaceVariants({ surface, radius }),
51          floatingMotion,
52          "z-50 w-72",
53          padding === "none" && "p-0",
54          padding === "sm" && "p-2",
55          padding === "md" && "p-4",
56          padding === "lg" && "p-6",
57          className,
58        )}
59        {...props}
60      />
61    </PopoverPrimitive.Portal>
62  ),
63);
64PopoverContent.displayName = PopoverPrimitive.Content.displayName;
65 
66export { Popover, PopoverTrigger, PopoverContent };