Aurora Popover

1"use client"
2 
3import * as React from "react"
4import * as PopoverPrimitive from "@radix-ui/react-popover"
5import { cn } from "@/lib/utils"
6import { usePortalContainer } from "@/registry/aurora/lib/portal-container"
7 
8export type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>
9export type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content>
10 
11function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
12  return <PopoverPrimitive.Root data-slot="popover" {...props} />
13}
14 
15function PopoverTrigger(props: PopoverTriggerProps) {
16  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
17}
18 
19function PopoverContent({
20  ref,
21  className,
22  align = "start",
23  sideOffset = 8,
24  style,
25  ...props
26}: PopoverContentProps & {
27  ref?: React.Ref<React.ComponentRef<typeof PopoverPrimitive.Content>>
28}) {
29  const portalContainer = usePortalContainer()
30 
31  return (
32    <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
33      <PopoverPrimitive.Content
34        ref={ref}
35        data-slot="popover-content"
36        align={align}
37        sideOffset={sideOffset}
38        className={cn(
39          "z-50 w-72 origin-(--radix-popover-content-transform-origin) overflow-hidden rounded-[var(--aurora-radius-2)] border p-4 outline-none",
40          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
41          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
42          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
43          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
44          className
45        )}
46        style={{
47          background: "var(--aurora-panel-strong)",
48          borderColor: "var(--aurora-border-strong)",
49          boxShadow: "var(--aurora-shadow-strong), var(--aurora-highlight-strong)",
50          color: "var(--aurora-text-primary)",
51          ...style,
52        }}
53        {...props}
54      />
55    </PopoverPrimitive.Portal>
56  )
57}
58 
59function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
60  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
61}
62 
63function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
64  return (
65    <div
66      data-slot="popover-header"
67      className={cn("flex flex-col gap-1.5", className)}
68      {...props}
69    />
70  )
71}
72 
73// … truncated