Popover

1import * as React from 'react';
2 
3import {
4  Popover as PopoverPrimitive,
5  PopoverTrigger as PopoverTriggerPrimitive,
6  PopoverPositioner as PopoverPositionerPrimitive,
7  PopoverPopup as PopoverPopupPrimitive,
8  PopoverPortal as PopoverPortalPrimitive,
9  PopoverClose as PopoverClosePrimitive,
10  PopoverBackdrop as PopoverBackdropPrimitive,
11  PopoverTitle as PopoverTitlePrimitive,
12  PopoverDescription as PopoverDescriptionPrimitive,
13  type PopoverProps as PopoverPrimitiveProps,
14  type PopoverTriggerProps as PopoverTriggerPrimitiveProps,
15  type PopoverPositionerProps as PopoverPositionerPrimitiveProps,
16  type PopoverPopupProps as PopoverPopupPrimitiveProps,
17  type PopoverCloseProps as PopoverClosePrimitiveProps,
18  type PopoverBackdropProps as PopoverBackdropPrimitiveProps,
19  type PopoverTitleProps as PopoverTitlePrimitiveProps,
20  type PopoverDescriptionProps as PopoverDescriptionPrimitiveProps,
21} from '@/components/animate-ui/primitives/base/popover';
22import { cn } from '@/lib/utils';
23 
24type PopoverProps = PopoverPrimitiveProps;
25 
26function Popover(props: PopoverProps) {
27  return <PopoverPrimitive {...props} />;
28}
29 
30type PopoverTriggerProps = PopoverTriggerPrimitiveProps;
31 
32function PopoverTrigger(props: PopoverTriggerProps) {
33  return <PopoverTriggerPrimitive {...props} />;
34}
35 
36type PopoverPanelProps = PopoverPositionerPrimitiveProps &
37  PopoverPopupPrimitiveProps;
38 
39function PopoverPanel({
40  className,
41  align = 'center',
42  sideOffset = 4,
43  initialFocus,
44  finalFocus,
45  style,
46  children,
47  ...props
48}: PopoverPanelProps) {
49  return (
50    <PopoverPortalPrimitive>
51      <PopoverPositionerPrimitive
52        align={align}
53        sideOffset={sideOffset}
54        className="z-50"
55        {...props}
56      >
57        <PopoverPopupPrimitive
58          initialFocus={initialFocus}
59          finalFocus={finalFocus}
60          className={cn(
61            'bg-popover text-popover-foreground w-72 rounded-md border p-4 shadow-md outline-hidden origin-(--transform-origin)',
62            className,
63          )}
64          style={style}
65        >
66          {children}
67        </PopoverPopupPrimitive>
68      </PopoverPositionerPrimitive>
69    </PopoverPortalPrimitive>
70  );
71}
72 
73type PopoverCloseProps = PopoverClosePrimitiveProps;
74 
75function PopoverClose(props: PopoverCloseProps) {
76  return <PopoverClosePrimitive {...props} />;
77}
78 
79type PopoverBackdropProps = PopoverBackdropPrimitiveProps;
80 
81function PopoverBackdrop(props: PopoverBackdropProps) {
82  return <PopoverBackdropPrimitive {...props} />;
83}
84// … truncated