popover.tsx raw

   1  import * as React from "react";
   2  import { Popover as PopoverPrimitive } from "radix-ui";
   3  
   4  import { cn } from "src/lib/utils";
   5  
   6  function Popover({
   7    ...props
   8  }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   9    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
  10  }
  11  
  12  function PopoverTrigger({
  13    ...props
  14  }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  15    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
  16  }
  17  
  18  function PopoverContent({
  19    className,
  20    align = "center",
  21    sideOffset = 4,
  22    ...props
  23  }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  24    return (
  25      <PopoverPrimitive.Portal>
  26        <PopoverPrimitive.Content
  27          data-slot="popover-content"
  28          align={align}
  29          sideOffset={sideOffset}
  30          className={cn(
  31            "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
  32            className
  33          )}
  34          {...props}
  35        />
  36      </PopoverPrimitive.Portal>
  37    );
  38  }
  39  
  40  function PopoverAnchor({
  41    ...props
  42  }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  43    return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
  44  }
  45  
  46  function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
  47    return (
  48      <div
  49        data-slot="popover-header"
  50        className={cn("flex flex-col gap-1 text-sm", className)}
  51        {...props}
  52      />
  53    );
  54  }
  55  
  56  function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
  57    return (
  58      <div
  59        data-slot="popover-title"
  60        className={cn("font-medium", className)}
  61        {...props}
  62      />
  63    );
  64  }
  65  
  66  function PopoverDescription({
  67    className,
  68    ...props
  69  }: React.ComponentProps<"p">) {
  70    return (
  71      <p
  72        data-slot="popover-description"
  73        className={cn("text-muted-foreground", className)}
  74        {...props}
  75      />
  76    );
  77  }
  78  
  79  export {
  80    Popover,
  81    PopoverTrigger,
  82    PopoverContent,
  83    PopoverAnchor,
  84    PopoverHeader,
  85    PopoverTitle,
  86    PopoverDescription,
  87  };
  88