banhaten 0.1.2 → 0.2.0

package/registry/components/popover.tsx

@@ -1,48 +1,32 @@
+"use client"
+
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { XIcon } from "lucide-react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
 
 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 popoverOffsetPixels: Record<PopoverOffset, number> = {
+  tight: 4,
+  default: 8,
+  loose: 16,
+}
 
 const popoverContentVariants = cva(
   [
-    "absolute z-[var(--bh-z-popover)] grid max-w-[var(--bh-popover-max-width)] gap-[var(--bh-popover-content-gap)]",
+    "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)]",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
   ],
   {
     variants: {
@@ -73,16 +57,14 @@ type PopoverProps = React.ComponentProps<"div"> & {
   openOnHover?: boolean
 }
 
-type PopoverAnchorProps = React.ComponentProps<"span"> & {
-  asChild?: boolean
-}
-
-type PopoverTriggerProps = React.ComponentProps<"button"> & {
-  asChild?: boolean
+type PopoverAnchorProps = React.ComponentProps<typeof PopoverPrimitive.Anchor>
+type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
   openOnFocus?: boolean
 }
-
-type PopoverContentProps = React.ComponentProps<"div"> &
+type PopoverContentProps = Omit<
+  React.ComponentProps<typeof PopoverPrimitive.Content>,
+  "align" | "collisionPadding" | "forceMount" | "side" | "sideOffset"
+> &
   VariantProps<typeof popoverContentVariants> & {
     align?: PopoverAlign
     avoidCollisions?: boolean
@@ -91,7 +73,6 @@ type PopoverContentProps = React.ComponentProps<"div"> &
     showArrow?: boolean
     side?: PopoverSide
   }
-
 type PopoverHeaderProps = React.ComponentProps<"div">
 type PopoverBodyProps = React.ComponentProps<"div">
 type PopoverTitleProps = React.ComponentProps<"h3">
@@ -102,11 +83,19 @@ type PopoverCloseProps = React.ComponentProps<"button"> & {
   label?: string
 }
 
+type PopoverOpenContextValue = {
+  direction: Direction
+  setOpen: (open: boolean) => void
+}
+
+const PopoverOpenContext = React.createContext<PopoverOpenContextValue | null>(null)
+
 const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
   {
     children,
     className,
     defaultOpen = false,
+    dir,
     modal = false,
     onOpenChange,
     onPointerEnter,
@@ -118,694 +107,203 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
   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)
+  const explicitDirection = dir === "ltr" || dir === "rtl" ? dir : undefined
+  const direction = useResolvedDirection(explicitDirection, rootRef)
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const isControlled = open !== undefined
+  const resolvedOpen = isControlled ? open : uncontrolledOpen
 
-    return () => {
-      ownerDocument.removeEventListener("pointerdown", handlePointerDown)
-      ownerDocument.removeEventListener("keydown", handleKeyDown)
-    }
-  }, [isOpen, setIsOpen])
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) setUncontrolledOpen(nextOpen)
+      onOpenChange?.(nextOpen)
+    },
+    [isControlled, onOpenChange]
+  )
 
   function setRootRef(node: HTMLDivElement | null) {
     rootRef.current = node
-
-    if (typeof ref === "function") {
-      ref(node)
-    } else if (ref) {
-      ref.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,
-      }}
+    <PopoverPrimitive.Root
+      modal={modal}
+      open={resolvedOpen}
+      onOpenChange={setOpen}
     >
-      <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>
+      <PopoverOpenContext.Provider value={{ direction, setOpen }}>
+        <div
+          className={cn("relative inline-flex max-w-full", className)}
+          data-slot="popover"
+          data-state={resolvedOpen ? "open" : "closed"}
+          dir={dir}
+          ref={setRootRef}
+          onPointerEnter={(event) => {
+            onPointerEnter?.(event)
+            if (openOnHover && !event.defaultPrevented) setOpen(true)
+          }}
+          onPointerLeave={(event) => {
+            onPointerLeave?.(event)
+            if (openOnHover && !event.defaultPrevented) setOpen(false)
+          }}
+          {...props}
+        >
+          {children}
+        </div>
+      </PopoverOpenContext.Provider>
+    </PopoverPrimitive.Root>
   )
 })
 
-function PopoverAnchor({
-  asChild = false,
-  className,
-  ...props
-}: PopoverAnchorProps) {
-  const Comp = asChild ? Slot : "span"
-
+const PopoverAnchor = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Anchor>,
+  PopoverAnchorProps
+>(function PopoverAnchor({ className, ...props }, ref) {
   return (
-    <Comp
-      data-slot="popover-anchor"
+    <PopoverPrimitive.Anchor
       className={cn("relative inline-flex max-w-full", className)}
+      data-slot="popover-anchor"
+      ref={ref}
       {...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 PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  PopoverTriggerProps
+>(function PopoverTrigger(
+  { className, onFocus, onKeyDown, openOnFocus = false, ...props },
+  ref
+) {
+  const context = React.useContext(PopoverOpenContext)
 
-      const ResizeObserver = (
-        contentWindow as Window & {
-          ResizeObserver?: PopoverResizeObserverConstructor
+  return (
+    <PopoverPrimitive.Trigger
+      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
+      )}
+      data-slot="popover-trigger"
+      ref={ref}
+      onFocus={(event) => {
+        onFocus?.(event)
+        if (openOnFocus && !event.defaultPrevented && !props.disabled) {
+          context?.setOpen(true)
         }
-      ).ResizeObserver
-      const resizeObserver = ResizeObserver
-        ? new ResizeObserver(queueCollisionShiftMeasure)
-        : undefined
-      resizeObserver?.observe(contentNode)
-
-      return () => {
-        if (animationFrame) {
-          cancelFrame(animationFrame)
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event)
+        if (event.key === "ArrowDown" && !event.defaultPrevented && !props.disabled) {
+          event.preventDefault()
+          context?.setOpen(true)
         }
+      }}
+      {...props}
+    />
+  )
+})
 
-        contentWindow.removeEventListener("resize", queueCollisionShiftMeasure)
-        contentWindow.removeEventListener("scroll", queueCollisionShiftMeasure, true)
-        resizeObserver?.disconnect()
-      }
-    }, [align, avoidCollisions, collisionPadding, isOpen, offset, side, size])
-
-    if (!forceMount && !isOpen) {
-      return null
-    }
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(function PopoverContent(
+  {
+    align = "start",
+    avoidCollisions = true,
+    children,
+    className,
+    collisionPadding = POPOVER_COLLISION_PADDING_PX,
+    forceMount,
+    offset = "default",
+    role = "dialog",
+    showArrow = true,
+    side = "bottom",
+    size,
+    ...props
+  },
+  ref
+) {
+  const context = React.useContext(PopoverOpenContext)
 
-    return (
-      <div
-        aria-modal={context.modal || undefined}
-        data-align={align}
-        data-side={side}
+  return (
+    <PopoverPrimitive.Portal forceMount={forceMount ? true : undefined}>
+      <PopoverPrimitive.Content
+        align={align}
+        avoidCollisions={avoidCollisions}
+        collisionPadding={collisionPadding}
         data-slot="popover-content"
-        data-state={isOpen ? "open" : "closed"}
-        hidden={!isOpen}
-        id={context.contentId}
-        ref={setContentRef}
+        dir={props.dir ?? context?.direction}
+        forceMount={forceMount ? true : undefined}
+        ref={ref}
         role={role}
-        style={{
-          ...style,
-          transform: mergePopoverTransforms(
-            getPopoverContentTransform(side, align, collisionShift),
-            style?.transform
-          ),
-        }}
-        className={cn(
-          popoverContentVariants({ offset, size }),
-          popoverPositionClasses[side][align],
-          className
-        )}
+        side={side}
+        sideOffset={popoverOffsetPixels[offset ?? "default"]}
+        className={cn(popoverContentVariants({ offset, size }), className)}
         {...props}
       >
-        {showArrow ? <PopoverArrow align={align} side={side} /> : null}
+        {showArrow ? (
+          <PopoverPrimitive.Arrow
+            className="h-[var(--bh-popover-arrow-depth)] w-[var(--bh-popover-arrow-width)] fill-[var(--bh-popover-bg)] stroke-[var(--bh-popover-border)]"
+            data-slot="popover-arrow"
+          />
+        ) : null}
         {children}
-      </div>
-    )
-  }
-)
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+})
 
 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}
-    />
-  )
+  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}
-    />
-  )
+  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}
-    />
-  )
+  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 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}
-    />
-  )
+  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
-    },
+    { asChild = false, children, className, label = "Close popover", type, ...props },
     ref
   ) {
-    const context = usePopoverContext("PopoverClose")
-    const Comp = asChild ? Slot : "button"
-
     return (
-      <Comp
+      <PopoverPrimitive.Close
         aria-label={label}
-        data-slot="popover-close"
-        ref={ref}
-        type={asChild ? undefined : type || "button"}
+        asChild={asChild}
         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)
-          }
-        }}
+        data-slot="popover-close"
+        ref={ref}
+        type={asChild ? undefined : type || "button"}
         {...props}
       >
-        {children ?? (
-          <XIcon
-            aria-hidden="true"
-            className="size-[var(--bh-popover-close-icon-size)]"
-            strokeWidth={2}
-          />
-        )}
-      </Comp>
+        {children ?? <XIcon aria-hidden="true" className="size-[var(--bh-popover-close-icon-size)]" strokeWidth="var(--bh-icon-stroke-200)" />}
+      </PopoverPrimitive.Close>
     )
   }
 )
 
-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 {