3d:T14f7,

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

const Demo = () => (
  <Popover>
    <PopoverTrigger render={<Button variant="secondary" />}>
      Popover
    </PopoverTrigger>
    <PopoverContent>
      <PopoverTitle>Saved</PopoverTitle>
      <PopoverDescription>
        Screens you save show up here across devices.
      </PopoverDescription>
    </PopoverContent>
  </Popover>
)

export default Demo

3a:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3d"}}],"$L3e"]}] 3f:T4b09,

"use client"

import { Popover as PopoverPrimitive } from "@base-ui/react/popover"

import { cn } from "@/lib/utils"

const Popover = (props: PopoverPrimitive.Root.Props) => (
  <PopoverPrimitive.Root data-slot="popover" {...props} />
)

const PopoverTrigger = (props: PopoverPrimitive.Trigger.Props) => (
  <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
)

const PopoverClose = (props: PopoverPrimitive.Close.Props) => (
  <PopoverPrimitive.Close data-slot="popover-close" {...props} />
)

const PopoverContent = ({
  className,
  sideOffset = 8,
  align = "center",
  ...props
}: PopoverPrimitive.Popup.Props &
  Pick<PopoverPrimitive.Positioner.Props, "sideOffset" | "align">) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Positioner
      sideOffset={sideOffset}
      align={align}
      className="z-50 outline-none"
    >
      <PopoverPrimitive.Popup
        data-slot="popover-content"
        className={cn(
          "flex w-240 origin-(--transform-origin) flex-col gap-8 rounded-20 bg-glass-background-primary p-16 text-glass-text-primary shadow-glass backdrop-glass transition-[opacity,scale] duration-300 ease-spring outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-out data-starting-style:scale-90 data-starting-style:opacity-0 motion-reduce:transition-none",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Positioner>
  </PopoverPrimitive.Portal>
)

const PopoverTitle = ({
  className,
  ...props
}: PopoverPrimitive.Title.Props) => (
  <PopoverPrimitive.Title
    data-slot="popover-title"
    className={cn("text-body-bold", className)}
    {...props}
  />
)

const PopoverDescription = ({
  className,
  ...props
}: PopoverPrimitive.Description.Props) => (
  <PopoverPrimitive.Description
    data-slot="popover-description"
    className={cn("text-compact text-glass-text-secondary", className)}
    {...props}
  />
)

export {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
}

3c:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3f"}}],"$L40"]}]

Installation

Usage