banhaten 0.4.0 → 0.5.0

package/registry/components/popover.tsx

@@ -1,338 +1,338 @@
-"use client"
-
-import * as React from "react"
-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"
-
-const POPOVER_COLLISION_PADDING_PX = 8
-const popoverOffsetPixels: Record<PopoverOffset, number> = {
-  tight: 4,
-  default: 8,
-  loose: 16,
-}
-
-const popoverContentVariants = cva(
-  [
-    "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=open]:animate-in data-[state=closed]:animate-out",
-  ],
-  {
-    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<typeof PopoverPrimitive.Anchor>
-type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
-  openOnFocus?: boolean
-}
-type PopoverContentProps = Omit<
-  React.ComponentProps<typeof PopoverPrimitive.Content>,
-  "align" | "collisionPadding" | "forceMount" | "side" | "sideOffset"
-> &
-  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
-}
-
-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,
-    onPointerLeave,
-    open,
-    openOnHover = false,
-    ...props
-  },
-  ref
-) {
-  const rootRef = React.useRef<HTMLDivElement | null>(null)
-  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
-
-  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
-  }
-
-  return (
-    <PopoverPrimitive.Root
-      modal={modal}
-      open={resolvedOpen}
-      onOpenChange={setOpen}
-    >
-      <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>
-  )
-})
-
-const PopoverAnchor = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Anchor>,
-  PopoverAnchorProps
->(function PopoverAnchor({ className, ...props }, ref) {
-  return (
-    <PopoverPrimitive.Anchor
-      className={cn("relative inline-flex max-w-full", className)}
-      data-slot="popover-anchor"
-      ref={ref}
-      {...props}
-    />
-  )
-})
-
-const PopoverTrigger = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Trigger>,
-  PopoverTriggerProps
->(function PopoverTrigger(
-  { className, onFocus, onKeyDown, openOnFocus = false, ...props },
-  ref
-) {
-  const context = React.useContext(PopoverOpenContext)
-
-  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)
-        }
-      }}
-      onKeyDown={(event) => {
-        onKeyDown?.(event)
-        if (event.key === "ArrowDown" && !event.defaultPrevented && !props.disabled) {
-          event.preventDefault()
-          context?.setOpen(true)
-        }
-      }}
-      {...props}
-    />
-  )
-})
-
-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 (
-    <PopoverPrimitive.Portal forceMount={forceMount ? true : undefined}>
-      <PopoverPrimitive.Content
-        align={align}
-        avoidCollisions={avoidCollisions}
-        collisionPadding={collisionPadding}
-        data-slot="popover-content"
-        dir={props.dir ?? context?.direction}
-        forceMount={forceMount ? true : undefined}
-        ref={ref}
-        role={role}
-        side={side}
-        sideOffset={popoverOffsetPixels[offset ?? "default"]}
-        className={cn(popoverContentVariants({ offset, size }), className)}
-        {...props}
-      >
-        {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}
-      </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} />
-}
-
-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", type, ...props },
-    ref
-  ) {
-    return (
-      <PopoverPrimitive.Close
-        aria-label={label}
-        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
-        )}
-        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="var(--bh-icon-stroke-200)" />}
-      </PopoverPrimitive.Close>
-    )
-  }
-)
-
-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,
-}
+"use client"
+
+import * as React from "react"
+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"
+
+const POPOVER_COLLISION_PADDING_PX = 8
+const popoverOffsetPixels: Record<PopoverOffset, number> = {
+  tight: 4,
+  default: 8,
+  loose: 16,
+}
+
+const popoverContentVariants = cva(
+  [
+    "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(--elevation-popover)] outline-none",
+    "font-[var(--bh-font-family)] tracking-[var(--bh-text-base-letter-spacing)]",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  ],
+  {
+    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<typeof PopoverPrimitive.Anchor>
+type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+  openOnFocus?: boolean
+}
+type PopoverContentProps = Omit<
+  React.ComponentProps<typeof PopoverPrimitive.Content>,
+  "align" | "collisionPadding" | "forceMount" | "side" | "sideOffset"
+> &
+  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
+}
+
+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,
+    onPointerLeave,
+    open,
+    openOnHover = false,
+    ...props
+  },
+  ref
+) {
+  const rootRef = React.useRef<HTMLDivElement | null>(null)
+  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
+
+  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
+  }
+
+  return (
+    <PopoverPrimitive.Root
+      modal={modal}
+      open={resolvedOpen}
+      onOpenChange={setOpen}
+    >
+      <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>
+  )
+})
+
+const PopoverAnchor = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Anchor>,
+  PopoverAnchorProps
+>(function PopoverAnchor({ className, ...props }, ref) {
+  return (
+    <PopoverPrimitive.Anchor
+      className={cn("relative inline-flex max-w-full", className)}
+      data-slot="popover-anchor"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  PopoverTriggerProps
+>(function PopoverTrigger(
+  { className, onFocus, onKeyDown, openOnFocus = false, ...props },
+  ref
+) {
+  const context = React.useContext(PopoverOpenContext)
+
+  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(--elevation-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)
+        }
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event)
+        if (event.key === "ArrowDown" && !event.defaultPrevented && !props.disabled) {
+          event.preventDefault()
+          context?.setOpen(true)
+        }
+      }}
+      {...props}
+    />
+  )
+})
+
+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 (
+    <PopoverPrimitive.Portal forceMount={forceMount ? true : undefined}>
+      <PopoverPrimitive.Content
+        align={align}
+        avoidCollisions={avoidCollisions}
+        collisionPadding={collisionPadding}
+        data-slot="popover-content"
+        dir={props.dir ?? context?.direction}
+        forceMount={forceMount ? true : undefined}
+        ref={ref}
+        role={role}
+        side={side}
+        sideOffset={popoverOffsetPixels[offset ?? "default"]}
+        className={cn(popoverContentVariants({ offset, size }), className)}
+        {...props}
+      >
+        {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}
+      </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} />
+}
+
+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", type, ...props },
+    ref
+  ) {
+    return (
+      <PopoverPrimitive.Close
+        aria-label={label}
+        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(--elevation-button-focus)]",
+          className
+        )}
+        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="var(--bh-icon-stroke-200)" />}
+      </PopoverPrimitive.Close>
+    )
+  }
+)
+
+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,
+}