banhaten 0.1.1 → 0.1.2

package/registry/components/popover.tsx

@@ -0,0 +1,840 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { XIcon } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type PopoverSide = "top" | "right" | "bottom" | "left"
+type PopoverAlign = "start" | "center" | "end"
+type PopoverSize = "sm" | "md" | "lg" | "auto"
+type PopoverOffset = "tight" | "default" | "loose"
+type PopoverArrowSide = "top" | "right" | "bottom" | "left"
+type PopoverCollisionShift = {
+  x: number
+  y: number
+}
+type PopoverResizeObserverConstructor = new (
+  callback: () => void
+) => {
+  disconnect: () => void
+  observe: (target: Element) => void
+}
+
+type PopoverContextValue = {
+  contentId: string
+  modal: boolean
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerId: string
+}
+
+const PopoverContext = React.createContext<PopoverContextValue | null>(null)
+const zeroPopoverCollisionShift: PopoverCollisionShift = { x: 0, y: 0 }
+// Viewport collision padding mirrors --bh-space-md-8.
+const POPOVER_COLLISION_PADDING_PX = 8
+const useSafeLayoutEffect =
+  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
+
+const popoverContentVariants = cva(
+  [
+    "absolute z-[var(--bh-z-popover)] grid max-w-[var(--bh-popover-max-width)] gap-[var(--bh-popover-content-gap)]",
+    "rounded-[var(--bh-popover-radius)] bg-[var(--bh-popover-bg)] p-[var(--bh-popover-padding)]",
+    "text-start text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] outline-none",
+    "font-[var(--bh-font-family)] tracking-[var(--bh-text-base-letter-spacing)]",
+    "data-[state=closed]:pointer-events-none data-[state=closed]:opacity-[var(--bh-opacity-0)]",
+  ],
+  {
+    variants: {
+      offset: {
+        tight: "[--bh-popover-offset:var(--bh-popover-offset-tight)]",
+        default: "[--bh-popover-offset:var(--bh-popover-offset-default)]",
+        loose: "[--bh-popover-offset:var(--bh-popover-offset-loose)]",
+      },
+      size: {
+        sm: "w-[var(--bh-popover-sm-width)]",
+        md: "w-[var(--bh-popover-md-width)]",
+        lg: "w-[var(--bh-popover-lg-width)]",
+        auto: "w-max",
+      },
+    },
+    defaultVariants: {
+      offset: "default",
+      size: "md",
+    },
+  }
+)
+
+type PopoverProps = React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  modal?: boolean
+  onOpenChange?: (open: boolean) => void
+  open?: boolean
+  openOnHover?: boolean
+}
+
+type PopoverAnchorProps = React.ComponentProps<"span"> & {
+  asChild?: boolean
+}
+
+type PopoverTriggerProps = React.ComponentProps<"button"> & {
+  asChild?: boolean
+  openOnFocus?: boolean
+}
+
+type PopoverContentProps = React.ComponentProps<"div"> &
+  VariantProps<typeof popoverContentVariants> & {
+    align?: PopoverAlign
+    avoidCollisions?: boolean
+    collisionPadding?: number
+    forceMount?: boolean
+    showArrow?: boolean
+    side?: PopoverSide
+  }
+
+type PopoverHeaderProps = React.ComponentProps<"div">
+type PopoverBodyProps = React.ComponentProps<"div">
+type PopoverTitleProps = React.ComponentProps<"h3">
+type PopoverDescriptionProps = React.ComponentProps<"p">
+type PopoverFooterProps = React.ComponentProps<"div">
+type PopoverCloseProps = React.ComponentProps<"button"> & {
+  asChild?: boolean
+  label?: string
+}
+
+const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
+  {
+    children,
+    className,
+    defaultOpen = false,
+    modal = false,
+    onOpenChange,
+    onPointerEnter,
+    onPointerLeave,
+    open,
+    openOnHover = false,
+    ...props
+  },
+  ref
+) {
+  const rootRef = React.useRef<HTMLDivElement | null>(null)
+  const contentId = React.useId()
+  const triggerId = React.useId()
+  const [isOpen, setIsOpen] = useControllablePopoverState({
+    defaultOpen,
+    onOpenChange,
+    open,
+  })
+
+  React.useEffect(() => {
+    if (!isOpen) return
+
+    const ownerDocument = rootRef.current?.ownerDocument ?? document
+
+    function handlePointerDown(event: PointerEvent) {
+      const root = rootRef.current
+      if (!root || root.contains(event.target as Node)) return
+      setIsOpen(false)
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setIsOpen(false)
+      }
+    }
+
+    ownerDocument.addEventListener("pointerdown", handlePointerDown)
+    ownerDocument.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown)
+      ownerDocument.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [isOpen, setIsOpen])
+
+  function setRootRef(node: HTMLDivElement | null) {
+    rootRef.current = node
+
+    if (typeof ref === "function") {
+      ref(node)
+    } else if (ref) {
+      ref.current = node
+    }
+  }
+
+  return (
+    <PopoverContext.Provider
+      value={{
+        contentId,
+        modal,
+        open: isOpen,
+        setOpen: setIsOpen,
+        triggerId,
+      }}
+    >
+      <div
+        data-slot="popover"
+        data-state={isOpen ? "open" : "closed"}
+        ref={setRootRef}
+        className={cn("relative inline-flex max-w-full", className)}
+        onPointerEnter={(event) => {
+          onPointerEnter?.(event)
+          if (openOnHover && !event.defaultPrevented) {
+            setIsOpen(true)
+          }
+        }}
+        onPointerLeave={(event) => {
+          onPointerLeave?.(event)
+          if (openOnHover && !event.defaultPrevented) {
+            setIsOpen(false)
+          }
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    </PopoverContext.Provider>
+  )
+})
+
+function PopoverAnchor({
+  asChild = false,
+  className,
+  ...props
+}: PopoverAnchorProps) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="popover-anchor"
+      className={cn("relative inline-flex max-w-full", className)}
+      {...props}
+    />
+  )
+}
+
+const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(
+  function PopoverTrigger(
+    {
+      asChild = false,
+      className,
+      disabled,
+      onClick,
+      onFocus,
+      onKeyDown,
+      openOnFocus = false,
+      type,
+      ...props
+    },
+    ref
+  ) {
+    const context = usePopoverContext("PopoverTrigger")
+    const Comp = asChild ? Slot : "button"
+    const isDisabled = Boolean(disabled)
+
+    return (
+      <Comp
+        aria-controls={context.open ? context.contentId : undefined}
+        aria-expanded={context.open}
+        aria-haspopup="dialog"
+        data-slot="popover-trigger"
+        data-state={context.open ? "open" : "closed"}
+        disabled={isDisabled}
+        id={context.triggerId}
+        ref={ref}
+        type={asChild ? undefined : type || "button"}
+        className={cn(
+          "inline-flex min-w-0 items-center justify-center gap-[var(--bh-popover-trigger-gap)]",
+          "rounded-[var(--bh-control-default)] text-start outline-none transition-[background-color,border-color,box-shadow]",
+          "focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (event.defaultPrevented || isDisabled) return
+          context.setOpen(!context.open)
+        }}
+        onFocus={(event) => {
+          onFocus?.(event)
+          if (openOnFocus && !event.defaultPrevented && !isDisabled) {
+            context.setOpen(true)
+          }
+        }}
+        onKeyDown={(event) => {
+          onKeyDown?.(event)
+          if (event.defaultPrevented || isDisabled) return
+
+          if (event.key === "ArrowDown") {
+            event.preventDefault()
+            context.setOpen(true)
+          }
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(
+    {
+      align = "start",
+      avoidCollisions = true,
+      children,
+      className,
+      collisionPadding = POPOVER_COLLISION_PADDING_PX,
+      forceMount = false,
+      offset,
+      role = "dialog",
+      showArrow = true,
+      side = "bottom",
+      size,
+      style,
+      ...props
+    },
+    ref
+  ) {
+    const context = usePopoverContext("PopoverContent")
+    const isOpen = context.open
+    const contentRef = React.useRef<HTMLDivElement | null>(null)
+    const collisionShiftRef = React.useRef(zeroPopoverCollisionShift)
+    const [collisionShift, setCollisionShift] = React.useState(
+      zeroPopoverCollisionShift
+    )
+
+    function updateCollisionShift(nextShift: PopoverCollisionShift) {
+      collisionShiftRef.current = nextShift
+      setCollisionShift((currentShift) =>
+        isSamePopoverCollisionShift(currentShift, nextShift)
+          ? currentShift
+          : nextShift
+      )
+    }
+
+    function setContentRef(node: HTMLDivElement | null) {
+      contentRef.current = node
+
+      if (typeof ref === "function") {
+        ref(node)
+      } else if (ref) {
+        ref.current = node
+      }
+    }
+
+    useSafeLayoutEffect(() => {
+      if (!isOpen || !avoidCollisions) {
+        updateCollisionShift(zeroPopoverCollisionShift)
+        return
+      }
+
+      const node = contentRef.current
+      if (!node) return
+      const contentNode: HTMLDivElement = node
+
+      const ownerWindow = contentNode.ownerDocument.defaultView
+      if (!ownerWindow) return
+      const contentWindow: Window = ownerWindow
+
+      let animationFrame = 0
+      const resolvedCollisionPadding = Math.max(0, collisionPadding)
+      const requestFrame =
+        typeof contentWindow.requestAnimationFrame === "function"
+          ? contentWindow.requestAnimationFrame.bind(contentWindow)
+          : (callback: FrameRequestCallback) =>
+              contentWindow.setTimeout(
+                () => callback(contentWindow.performance.now()),
+                0
+              )
+      const cancelFrame =
+        typeof contentWindow.cancelAnimationFrame === "function"
+          ? contentWindow.cancelAnimationFrame.bind(contentWindow)
+          : contentWindow.clearTimeout.bind(contentWindow)
+
+      function measureCollisionShift() {
+        animationFrame = 0
+
+        const rect = contentNode.getBoundingClientRect()
+        const currentShift = collisionShiftRef.current
+        const unshiftedRect = {
+          bottom: rect.bottom - currentShift.y,
+          left: rect.left - currentShift.x,
+          right: rect.right - currentShift.x,
+          top: rect.top - currentShift.y,
+        }
+
+        updateCollisionShift(
+          getPopoverCollisionShift({
+            collisionPadding: resolvedCollisionPadding,
+            rect: unshiftedRect,
+            viewportHeight: contentWindow.innerHeight,
+            viewportWidth: contentWindow.innerWidth,
+          })
+        )
+      }
+
+      function queueCollisionShiftMeasure() {
+        if (animationFrame) {
+          cancelFrame(animationFrame)
+        }
+
+        animationFrame = requestFrame(measureCollisionShift)
+      }
+
+      queueCollisionShiftMeasure()
+      contentWindow.addEventListener("resize", queueCollisionShiftMeasure)
+      contentWindow.addEventListener("scroll", queueCollisionShiftMeasure, true)
+
+      const ResizeObserver = (
+        contentWindow as Window & {
+          ResizeObserver?: PopoverResizeObserverConstructor
+        }
+      ).ResizeObserver
+      const resizeObserver = ResizeObserver
+        ? new ResizeObserver(queueCollisionShiftMeasure)
+        : undefined
+      resizeObserver?.observe(contentNode)
+
+      return () => {
+        if (animationFrame) {
+          cancelFrame(animationFrame)
+        }
+
+        contentWindow.removeEventListener("resize", queueCollisionShiftMeasure)
+        contentWindow.removeEventListener("scroll", queueCollisionShiftMeasure, true)
+        resizeObserver?.disconnect()
+      }
+    }, [align, avoidCollisions, collisionPadding, isOpen, offset, side, size])
+
+    if (!forceMount && !isOpen) {
+      return null
+    }
+
+    return (
+      <div
+        aria-modal={context.modal || undefined}
+        data-align={align}
+        data-side={side}
+        data-slot="popover-content"
+        data-state={isOpen ? "open" : "closed"}
+        hidden={!isOpen}
+        id={context.contentId}
+        ref={setContentRef}
+        role={role}
+        style={{
+          ...style,
+          transform: mergePopoverTransforms(
+            getPopoverContentTransform(side, align, collisionShift),
+            style?.transform
+          ),
+        }}
+        className={cn(
+          popoverContentVariants({ offset, size }),
+          popoverPositionClasses[side][align],
+          className
+        )}
+        {...props}
+      >
+        {showArrow ? <PopoverArrow align={align} side={side} /> : null}
+        {children}
+      </div>
+    )
+  }
+)
+
+function PopoverHeader({ className, ...props }: PopoverHeaderProps) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn(
+        "flex min-w-0 items-start justify-between gap-[var(--bh-popover-header-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PopoverBody({ className, ...props }: PopoverBodyProps) {
+  return (
+    <div
+      data-slot="popover-body"
+      className={cn("grid min-w-0 gap-[var(--bh-popover-body-gap)]", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, dir = "auto", ...props }: PopoverTitleProps) {
+  return (
+    <h3
+      data-slot="popover-title"
+      dir={dir}
+      className={cn(
+        "m-0 min-w-0 text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  dir = "auto",
+  ...props
+}: PopoverDescriptionProps) {
+  return (
+    <p
+      data-slot="popover-description"
+      dir={dir}
+      className={cn(
+        "m-0 min-w-0 text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PopoverFooter({ className, ...props }: PopoverFooterProps) {
+  return (
+    <div
+      data-slot="popover-footer"
+      className={cn(
+        "flex min-w-0 flex-wrap items-center justify-end gap-[var(--bh-popover-footer-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(
+  function PopoverClose(
+    {
+      asChild = false,
+      children,
+      className,
+      label = "Close popover",
+      onClick,
+      type,
+      ...props
+    },
+    ref
+  ) {
+    const context = usePopoverContext("PopoverClose")
+    const Comp = asChild ? Slot : "button"
+
+    return (
+      <Comp
+        aria-label={label}
+        data-slot="popover-close"
+        ref={ref}
+        type={asChild ? undefined : type || "button"}
+        className={cn(
+          "inline-flex size-[var(--bh-popover-close-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)]",
+          "border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color]",
+          "hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) {
+            context.setOpen(false)
+          }
+        }}
+        {...props}
+      >
+        {children ?? (
+          <XIcon
+            aria-hidden="true"
+            className="size-[var(--bh-popover-close-icon-size)]"
+            strokeWidth={2}
+          />
+        )}
+      </Comp>
+    )
+  }
+)
+
+function PopoverArrow({
+  align,
+  side,
+}: {
+  align: PopoverAlign
+  side: PopoverSide
+}) {
+  const arrowSide = popoverArrowSideByContentSide[side]
+
+  return (
+    <span
+      aria-hidden="true"
+      data-arrow-side={arrowSide}
+      data-slot="popover-arrow"
+      className={cn(
+        "pointer-events-none absolute z-[var(--bh-z-raised)]",
+        getPopoverArrowPlacement(side, align)
+      )}
+    >
+      <svg
+        className="block h-full w-full overflow-visible"
+        focusable="false"
+        viewBox={popoverArrowShape[arrowSide].viewBox}
+      >
+        <path d={popoverArrowShape[arrowSide].fillPath} fill="var(--bh-popover-bg)" />
+        <path
+          d={popoverArrowShape[arrowSide].strokePath}
+          fill="none"
+          stroke="var(--bh-popover-border)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="var(--bh-border-width-default)"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    </span>
+  )
+}
+
+function usePopoverContext(componentName: string) {
+  const context = React.useContext(PopoverContext)
+
+  if (!context) {
+    throw new Error(`${componentName} must be used within Popover`)
+  }
+
+  return context
+}
+
+function useControllablePopoverState({
+  defaultOpen,
+  onOpenChange,
+  open,
+}: {
+  defaultOpen: boolean
+  onOpenChange?: (open: boolean) => void
+  open?: boolean
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const isControlled = open !== undefined
+  const resolvedOpen = isControlled ? Boolean(open) : uncontrolledOpen
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen)
+      }
+
+      onOpenChange?.(nextOpen)
+    },
+    [isControlled, onOpenChange]
+  )
+
+  return [resolvedOpen, setOpen] as const
+}
+
+function getPopoverArrowPlacement(side: PopoverSide, align: PopoverAlign) {
+  if (side === "bottom" || side === "top") {
+    const edge =
+      side === "bottom"
+        ? "top-[var(--bh-popover-arrow-offset)]"
+        : "bottom-[var(--bh-popover-arrow-offset)]"
+    const size =
+      "h-[calc(var(--bh-popover-arrow-depth)+var(--bh-popover-arrow-overlap))] w-[var(--bh-popover-arrow-width)]"
+
+    if (align === "center") {
+      return `${edge} left-1/2 ${size} -translate-x-1/2`
+    }
+
+    if (align === "end") {
+      return `${edge} ${size} [inset-inline-end:var(--bh-popover-arrow-inline-offset)]`
+    }
+
+    return `${edge} ${size} [inset-inline-start:var(--bh-popover-arrow-inline-offset)]`
+  }
+
+  const edge =
+    side === "right"
+      ? "left-[var(--bh-popover-arrow-offset)]"
+      : "right-[var(--bh-popover-arrow-offset)]"
+  const size =
+    "h-[var(--bh-popover-arrow-width)] w-[calc(var(--bh-popover-arrow-depth)+var(--bh-popover-arrow-overlap))]"
+
+  if (align === "center") {
+    return `${edge} top-1/2 ${size} -translate-y-1/2`
+  }
+
+  if (align === "end") {
+    return `${edge} bottom-[var(--bh-popover-arrow-inline-offset)] ${size}`
+  }
+
+  return `${edge} top-[var(--bh-popover-arrow-inline-offset)] ${size}`
+}
+
+function getPopoverCollisionShift({
+  collisionPadding,
+  rect,
+  viewportHeight,
+  viewportWidth,
+}: {
+  collisionPadding: number
+  rect: Pick<DOMRect, "bottom" | "left" | "right" | "top">
+  viewportHeight: number
+  viewportWidth: number
+}): PopoverCollisionShift {
+  let x = 0
+  let y = 0
+  const minX = collisionPadding
+  const minY = collisionPadding
+  const maxX = viewportWidth - collisionPadding
+  const maxY = viewportHeight - collisionPadding
+
+  if (rect.left < minX) {
+    x = minX - rect.left
+  } else if (rect.right > maxX) {
+    x = maxX - rect.right
+  }
+
+  if (rect.top < minY) {
+    y = minY - rect.top
+  } else if (rect.bottom > maxY) {
+    y = maxY - rect.bottom
+  }
+
+  return { x: Math.round(x), y: Math.round(y) }
+}
+
+function getPopoverContentTransform(
+  side: PopoverSide,
+  align: PopoverAlign,
+  shift: PopoverCollisionShift
+) {
+  const shiftX = formatPopoverTranslateValue(shift.x)
+  const shiftY = formatPopoverTranslateValue(shift.y)
+
+  if ((side === "bottom" || side === "top") && align === "center") {
+    return `translate(${formatPopoverTranslateCalc("-50%", shift.x)}, ${shiftY})`
+  }
+
+  if ((side === "left" || side === "right") && align === "center") {
+    return `translate(${shiftX}, ${formatPopoverTranslateCalc("-50%", shift.y)})`
+  }
+
+  return `translate(${shiftX}, ${shiftY})`
+}
+
+function formatPopoverTranslateValue(value: number) {
+  return `${Math.round(value)}px`
+}
+
+function formatPopoverTranslateCalc(base: string, value: number) {
+  const roundedValue = Math.round(value)
+  if (roundedValue === 0) return base
+
+  return `calc(${base} ${roundedValue < 0 ? "-" : "+"} ${Math.abs(roundedValue)}px)`
+}
+
+function mergePopoverTransforms(
+  contentTransform: string,
+  customTransform: string | undefined
+) {
+  return customTransform
+    ? `${contentTransform} ${customTransform}`
+    : contentTransform
+}
+
+function isSamePopoverCollisionShift(
+  currentShift: PopoverCollisionShift,
+  nextShift: PopoverCollisionShift
+) {
+  return currentShift.x === nextShift.x && currentShift.y === nextShift.y
+}
+
+const popoverPositionClasses: Record<
+  PopoverSide,
+  Record<PopoverAlign, string>
+> = {
+  bottom: {
+    start: "top-[calc(100%+var(--bh-popover-offset))] [inset-inline-start:0]",
+    center: "top-[calc(100%+var(--bh-popover-offset))] left-1/2",
+    end: "top-[calc(100%+var(--bh-popover-offset))] [inset-inline-end:0]",
+  },
+  top: {
+    start: "bottom-[calc(100%+var(--bh-popover-offset))] [inset-inline-start:0]",
+    center: "bottom-[calc(100%+var(--bh-popover-offset))] left-1/2",
+    end: "bottom-[calc(100%+var(--bh-popover-offset))] [inset-inline-end:0]",
+  },
+  right: {
+    start: "left-[calc(100%+var(--bh-popover-offset))] top-0",
+    center: "left-[calc(100%+var(--bh-popover-offset))] top-1/2",
+    end: "bottom-0 left-[calc(100%+var(--bh-popover-offset))]",
+  },
+  left: {
+    start: "right-[calc(100%+var(--bh-popover-offset))] top-0",
+    center: "right-[calc(100%+var(--bh-popover-offset))] top-1/2",
+    end: "bottom-0 right-[calc(100%+var(--bh-popover-offset))]",
+  },
+}
+
+const popoverArrowSideByContentSide: Record<PopoverSide, PopoverArrowSide> = {
+  bottom: "top",
+  left: "right",
+  right: "left",
+  top: "bottom",
+}
+
+const popoverArrowShape = {
+  top: {
+    viewBox: "0 0 12 9",
+    fillPath: "M0 9V8L6 0L12 8V9Z",
+    strokePath: "M0 8L6 0L12 8",
+  },
+  bottom: {
+    viewBox: "0 0 12 9",
+    fillPath: "M0 0H12V1L6 9L0 1Z",
+    strokePath: "M0 1L6 9L12 1",
+  },
+  left: {
+    viewBox: "0 0 9 12",
+    fillPath: "M9 0H8L0 6L8 12H9Z",
+    strokePath: "M8 0L0 6L8 12",
+  },
+  right: {
+    viewBox: "0 0 9 12",
+    fillPath: "M0 0H1L9 6L1 12H0Z",
+    strokePath: "M1 0L9 6L1 12",
+  },
+} as const
+
+const PopoverRoot = Popover
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+  popoverContentVariants,
+}
+export type {
+  PopoverAlign,
+  PopoverAnchorProps,
+  PopoverBodyProps,
+  PopoverCloseProps,
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverFooterProps,
+  PopoverHeaderProps,
+  PopoverOffset,
+  PopoverProps,
+  PopoverSide,
+  PopoverSize,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+}