Popover

1'use client';
2/* eslint-disable eslint-frontend-rules/top-level-const-snake */
3 
4import * as PopoverPrimitive from '@radix-ui/react-popover';
5import { ComponentProps } from 'react';
6 
7import { cn } from '@/lib/utils';
8 
9const Popover = PopoverPrimitive.Root;
10const PopoverTrigger = PopoverPrimitive.Trigger;
11const PopoverAnchor = PopoverPrimitive.Anchor;
12const PopoverClose = PopoverPrimitive.Close;
13 
14/**
15 * Popover content panel.
16 * UX4G: max-width 276px, border 1px neutral-200, border-radius 0.5rem,
17 * box-shadow 0 0.5rem 1rem rgba(0,0,0,0.15), header/body padding 1rem.
18 */
19function PopoverContent({
20  className,
21  align = 'center',
22  sideOffset = 4,
23  ...props
24}: ComponentProps<typeof PopoverPrimitive.Content>) {
25  return (
26    <PopoverPrimitive.Portal>
27      <PopoverPrimitive.Content
28        align={align}
29        sideOffset={sideOffset}
30        className={cn(
31          'bg-neutral-0 text-neutral z-50 w-72 rounded-lg border border-neutral-200 p-4 shadow-lg outline-none',
32          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
33          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
34          className,
35        )}
36        {...props}
37      />
38    </PopoverPrimitive.Portal>
39  );
40}
41 
42export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };