{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"0n-pop-bubble","type":"registry:block","title":"Pop Bubble","description":"Anchored floating panel for inline detail. Pre-composed Popover wrapper with positioning + raw-mode flag for edge-to-edge content like calendars.","dependencies":[],"registryDependencies":["popover"],"files":[{"path":"components/0n/pop-bubble.tsx","type":"registry:block","target":"components/0n/pop-bubble.tsx","content":"'use client'\n\n/**\n * 0n Pop Bubble — anchored floating panel built on shadcn Popover.\n * Pass any rich content; foundation for date pickers, color pickers,\n * info tooltips, mini-forms, and inline detail views.\n *\n * Install:\n *   npx shadcn@latest add https://0nmcp.com/r/0n-pop-bubble.json\n *\n * Use:\n *   <PopBubble trigger={<Button>Pick a day</Button>}>\n *     <Calendar mode=\"single\" />\n *   </PopBubble>\n */\n\nimport { useState, type ReactNode } from 'react'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\n\nexport interface PopBubbleProps {\n  trigger: ReactNode\n  children: ReactNode\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  align?: 'start' | 'center' | 'end'\n  /** When true, content has no padding so a Calendar/ColorPicker can be edge-to-edge. */\n  raw?: boolean\n  open?: boolean\n  onOpenChange?: (next: boolean) => void\n}\n\nexport function PopBubble({\n  trigger,\n  children,\n  side = 'bottom',\n  align = 'center',\n  raw,\n  open,\n  onOpenChange,\n}: PopBubbleProps) {\n  const [internal, setInternal] = useState(false)\n  const isOpen = open ?? internal\n  const setOpen = (v: boolean) => {\n    if (open === undefined) setInternal(v)\n    onOpenChange?.(v)\n  }\n\n  return (\n    <Popover open={isOpen} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent side={side} align={align} className={raw ? 'p-0' : undefined}>\n        {children}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"}]}