{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "description": "A sheet of panel stock lifted off the page on the shared light, with a folded tab at its trigger. It lifts toward you and settles; Escape or a click outside puts it down and returns focus.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/popover.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\nimport { cn } from \"cn\"\n\n/** A trigger and the sheet it lifts. */\nfunction Popover(props: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\n/** Opens the sheet. Renders a button; pass `render` to use your own. */\nfunction PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\ntype PopoverContentProps = PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"collisionPadding\"> & {\n    /** Leave out the folded tab, e.g. when the sheet hangs off a wide toolbar. */\n    tab?: boolean\n  }\n\n/**\n * The sheet: panel stock lifted off the page on the shared light, with a\n * folded tab at the trigger. It lifts toward you and settles.\n */\nfunction PopoverContent({\n  className,\n  children,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 10,\n  alignOffset = 0,\n  collisionPadding = 8,\n  tab = true,\n  ...props\n}: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        collisionPadding={collisionPadding}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"popover-sheet relative flex w-(--popover-width) max-w-(--available-width) origin-(--transform-origin) flex-col gap-3 rounded-(--bevel-radius-md) p-4 text-sm outline-none\",\n            \"transition-[translate,scale,opacity] duration-(--bevel-duration-move) ease-(--bevel-ease-spring) motion-reduce:transition-none\",\n            \"data-starting-style:scale-(--popover-lift-scale) data-starting-style:opacity-0\",\n            \"data-ending-style:scale-(--popover-lift-scale) data-ending-style:opacity-0 data-ending-style:duration-(--bevel-duration-small) data-ending-style:ease-(--bevel-ease-out)\",\n            \"data-[side=bottom]:data-starting-style:-translate-y-(--popover-lift) data-[side=top]:data-starting-style:translate-y-(--popover-lift)\",\n            \"data-[side=left]:data-starting-style:translate-x-(--popover-lift) data-[side=right]:data-starting-style:-translate-x-(--popover-lift)\",\n            \"focus-visible:ring-2 focus-visible:ring-(--bevel-pen-blue)/50\",\n            \"forced-colors:border forced-colors:border-[CanvasText]\",\n            className\n          )}\n          {...props}\n        >\n          {tab && <PopoverPrimitive.Arrow data-slot=\"popover-tab\" aria-hidden className=\"absolute\" />}\n          {children}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\n/** Title and description, with room on the right for a close button. */\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 has-data-[slot=popover-close]:pr-8\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Names the sheet for screen readers. */\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm leading-tight font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-sm text-(--popover-sheet-muted)\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Closes the sheet. With no children, a small × in the top corner, labelled \"Close\". */\nfunction PopoverClose({ className, children, ...props }: PopoverPrimitive.Close.Props) {\n  const corner = children === undefined\n  return (\n    <PopoverPrimitive.Close\n      data-slot=\"popover-close\"\n      aria-label={corner ? \"Close\" : undefined}\n      className={cn(\n        corner &&\n          \"absolute top-3 right-3 inline-flex size-6 items-center justify-center rounded-(--bevel-radius-xs) text-(--popover-sheet-muted) outline-none hover:text-(--popover-sheet-foreground) focus-visible:ring-2 focus-visible:ring-(--bevel-pen-blue)/50\",\n        className\n      )}\n      {...props}\n    >\n      {corner ? (\n        <svg aria-hidden viewBox=\"0 0 16 16\" className=\"size-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\">\n          <path d=\"M4 4l8 8M12 4l-8 8\" />\n        </svg>\n      ) : (\n        children\n      )}\n    </PopoverPrimitive.Close>\n  )\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, PopoverClose }\nexport type { PopoverContentProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--popover-sheet": "oklch(0.985 0.005 85)",
      "--popover-sheet-foreground": "oklch(0.26 0.015 260)",
      "--popover-sheet-muted": "oklch(0.5 0.015 260)",
      "--popover-fold": "oklch(0.9 0.008 85)",
      "--popover-crease": "oklch(0 0 0 / 0.14)",
      "--popover-rim": "oklch(0 0 0 / 0.1)",
      "--popover-depth": "inset 0 1px 0 var(--bevel-highlight-strong), 0 0 0 1px var(--popover-rim), 0 2px 3px var(--bevel-cast), 0 14px 28px -10px var(--bevel-cast)",
      "--popover-width": "20rem",
      "--popover-lift": "0.375rem",
      "--popover-lift-scale": "0.97",
      "--popover-tab": "0.875rem"
    },
    ".dark": {
      "--popover-sheet": "oklch(0.29 0.008 260)",
      "--popover-sheet-foreground": "oklch(0.95 0.005 90)",
      "--popover-sheet-muted": "oklch(0.72 0.01 260)",
      "--popover-fold": "oklch(0.24 0.008 260)",
      "--popover-crease": "oklch(0 0 0 / 0.35)",
      "--popover-rim": "oklch(1 0 0 / 0.08)"
    },
    "@utility popover-sheet": {
      "background-color": "var(--popover-sheet)",
      "background-image": "linear-gradient(to bottom, var(--bevel-highlight), transparent 30%)",
      "box-shadow": "var(--popover-depth)",
      "color": "var(--popover-sheet-foreground)"
    },
    "[data-slot=\"popover-tab\"]": {
      "width": "var(--popover-tab)",
      "height": "var(--popover-tab)",
      "background-image": "linear-gradient( 135deg, var(--popover-fold) calc(50% - 1px), var(--popover-crease) calc(50% - 1px) 50%, transparent 50% )"
    },
    "[data-slot=\"popover-tab\"][data-side=\"bottom\"]": {
      "top": "calc(var(--popover-tab) / -2)",
      "rotate": "45deg"
    },
    "[data-slot=\"popover-tab\"][data-side=\"top\"]": {
      "bottom": "calc(var(--popover-tab) / -2)",
      "rotate": "225deg"
    },
    "[data-slot=\"popover-tab\"][data-side=\"left\"]": {
      "right": "calc(var(--popover-tab) / -2)",
      "rotate": "135deg"
    },
    "[data-slot=\"popover-tab\"][data-side=\"right\"]": {
      "left": "calc(var(--popover-tab) / -2)",
      "rotate": "-45deg"
    }
  },
  "categories": [
    "essentials"
  ],
  "type": "registry:ui"
}