88 lines
1.7 KiB
TypeScript
88 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { cn } from "cn"
|
|
import {
|
|
DialogTrigger,
|
|
Heading,
|
|
Popover as PopoverPrimitive,
|
|
type DialogTriggerProps,
|
|
type PopoverProps as PopoverPrimitiveProps,
|
|
} from "react-aria-components"
|
|
|
|
function PopoverTrigger({ children, ...props }: DialogTriggerProps) {
|
|
return (
|
|
<DialogTrigger data-slot="popover-trigger" {...props}>
|
|
{children}
|
|
</DialogTrigger>
|
|
)
|
|
}
|
|
|
|
function Popover({
|
|
className,
|
|
placement = "bottom",
|
|
offset = 4,
|
|
crossOffset = 0,
|
|
...props
|
|
}: Omit<PopoverPrimitiveProps, "className"> & {
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<PopoverPrimitive
|
|
data-slot="popover-content"
|
|
placement={placement}
|
|
offset={offset}
|
|
crossOffset={crossOffset}
|
|
className={cn(
|
|
"cn-popover-content-aria z-50 w-72 origin-(--trigger-anchor-point) outline-hidden",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="popover-header"
|
|
className={cn("cn-popover-header", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function PopoverTitle({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof Heading>) {
|
|
return (
|
|
<Heading
|
|
data-slot="popover-title"
|
|
className={cn("cn-popover-title", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function PopoverDescription({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="popover-description"
|
|
className={cn("cn-popover-description", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export {
|
|
Popover,
|
|
PopoverDescription,
|
|
PopoverHeader,
|
|
PopoverTitle,
|
|
PopoverTrigger,
|
|
}
|