Popover

1"use client";
2 
3import "./popover.css";
4import { Popover as BasePopover } from "@base-ui/react/popover";
5import React from "react";
6import { cn } from "tailwind-variants";
7 
8import { PopoverContext, usePopoverContext } from "./popover.context";
9import { popoverVariants, type PopoverVariants } from "./popover.variants";
10 
11export type PopoverProps = PopoverVariants & React.ComponentProps<typeof BasePopover.Root>;
12 
13export const PopoverRoot = ({ children, size, ...props }: PopoverProps) => {
14  const slots = popoverVariants({ size });
15 
16  return (
17    <PopoverContext.Provider value={{ slots }}>
18      <BasePopover.Root {...props}>{children}</BasePopover.Root>
19    </PopoverContext.Provider>
20  );
21};
22 
23export type PopoverTriggerProps = React.ComponentProps<typeof BasePopover.Trigger> & {
24  render?: React.ReactElement;
25  asChild?: boolean;
26};
27 
28export const PopoverTrigger = ({
29  className,
30  children,
31  render,
32  asChild: _asChild,
33  ...props
34}: PopoverTriggerProps) => {
35  const { slots } = usePopoverContext();
36  const renderElement = render ?? (React.isValidElement(children) ? children : undefined);
37  return (
38    <BasePopover.Trigger
39      className={cn(slots.trigger(), className)}
40      {...props}
41      {...(renderElement ? { render: renderElement } : { children })}
42    />
43  );
44};
45 
46export type PopoverPortalProps = React.ComponentProps<typeof BasePopover.Portal>;
47 
48export const PopoverPortal = (props: PopoverPortalProps) => {
49  return <BasePopover.Portal {...props} />;
50};
51 
52export type PopoverBackdropProps = React.ComponentProps<typeof BasePopover.Backdrop>;
53 
54export const PopoverBackdrop = ({ className, ...props }: PopoverBackdropProps) => {
55  const { slots } = usePopoverContext();
56  return <BasePopover.Backdrop className={cn(slots.backdrop(), className)} {...props} />;
57};
58 
59export type PopoverPositionerProps = React.ComponentProps<typeof BasePopover.Positioner>;
60 
61export const PopoverPositioner = ({
62  className,
63  sideOffset = 4,
64  ...props
65}: PopoverPositionerProps) => {
66  const { slots } = usePopoverContext();
67  return (
68    <BasePopover.Positioner
69      className={cn(slots.positioner(), className)}
70      sideOffset={sideOffset}
71      {...props}
72    />
73  );
74};
75 
76export type PopoverPopupProps = React.ComponentProps<typeof BasePopover.Popup>;
77 
78export const PopoverPopup = ({ className, ...props }: PopoverPopupProps) => {
79  const { slots } = usePopoverContext();
80  return <BasePopover.Popup className={cn(slots.popup(), className)} {...props} />;
81};
82 
83// … truncated