{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:ui",
  "title": "Popover",
  "description": "A small floating panel anchored to a button, for extra controls or details. Does not block the page.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/popover.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: popover. Managed by BlankUI. Read popover.md before editing.\nimport type { ComponentProps } from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A small floating panel anchored to a trigger, for extra controls or details. It does not block the page.\n *\n * @example\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button variant=\"outline\">Share</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <Stack gap={3}>...</Stack>\n *   </PopoverContent>\n * </Popover>\n */\nexport function Popover(props: ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\n/** Opens the popover. Use `asChild` with a Button. */\nexport function PopoverTrigger(props: ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/** Positions the popover against an element other than the trigger. */\nexport function PopoverAnchor(props: ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\n/** The floating panel. Use `align` and `side` to position it. */\nexport function PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 6,\n  ...props\n}: ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 rounded-md border bg-surface-raised p-4 text-foreground shadow-md outline-none motion-safe:data-[state=open]:animate-scale-in\",\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n"
    },
    {
      "path": "ui/popover.md",
      "type": "registry:ui",
      "content": "---\nname: popover\ntitle: Popover\ndescription: A small floating panel anchored to a button, for extra controls or details. Does not block the page.\ncategory: overlay\nwhenToUse:\n  - A few extra controls next to a button, like share settings or a date picker.\n  - Details that appear on click and can be dismissed by clicking away.\nwhenNotToUse:\n  - when: Only a short text hint.\n    use: tooltip\n  - when: A task that needs the user's full attention.\n    use: dialog\n  - when: Picking one option from a list.\n    use: select\nrelated: [tooltip, dialog, select]\nrequiredParts: [Popover, PopoverTrigger, PopoverContent]\nantiPatterns:\n  - avoid: \"An absolutely positioned div toggled with useState\"\n    instead: \"<Popover> handles position, focus and closing\"\n  - avoid: \"Interactive content in a Tooltip\"\n    instead: \"<Popover>\"\n---\n\n# Popover\n\n## Import\n\n```tsx\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\n```\n\n## Example\n\n```tsx\n<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Share</Button>\n  </PopoverTrigger>\n  <PopoverContent align=\"end\">\n    <Stack gap={3}>\n      <Field label=\"Link\">\n        <Input readOnly value={url} />\n      </Field>\n      <Button size=\"sm\" onClick={copy}>\n        Copy link\n      </Button>\n    </Stack>\n  </PopoverContent>\n</Popover>\n```\n\n`PopoverContent` takes `side` (`top | right | bottom | left`) and `align` (`start | center | end`).\n"
    }
  ],
  "docs": "Read components/ui/popover.md before using Popover. Docs: https://blank.vageshwar.dev/docs/popover",
  "meta": {
    "category": "overlay",
    "requiredParts": [
      "Popover",
      "PopoverTrigger",
      "PopoverContent"
    ],
    "related": [
      "tooltip",
      "dialog",
      "select"
    ]
  }
}