{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:ui",
  "description": "Animated popover component with form support and smooth transitions",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/ui/popover.tsx",
      "content": "\"use client\"\n\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\"\nimport { X } from \"lucide-react\"\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TRANSITION = {\n  type: \"spring\" as const,\n  bounce: 0.05,\n  duration: 0.3,\n}\n\nfunction useClickOutside(\n  ref: React.RefObject<HTMLElement | null>,\n  handler: () => void\n) {\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        handler()\n      }\n    }\n\n    document.addEventListener(\"mousedown\", handleClickOutside)\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside)\n    }\n  }, [ref, handler])\n}\n\ninterface PopoverContextType {\n  isOpen: boolean\n  openPopover: () => void\n  closePopover: () => void\n  uniqueId: string\n  note: string\n  setNote: (note: string) => void\n}\n\nconst PopoverContext = createContext<PopoverContextType | undefined>(undefined)\n\nfunction usePopover() {\n  const context = useContext(PopoverContext)\n  if (!context) {\n    throw new Error(\"usePopover must be used within a PopoverProvider\")\n  }\n  return context\n}\n\nfunction usePopoverLogic() {\n  const uniqueId = useId()\n  const [isOpen, setIsOpen] = useState(false)\n  const [note, setNote] = useState(\"\")\n\n  const openPopover = () => setIsOpen(true)\n  const closePopover = () => {\n    setIsOpen(false)\n    setNote(\"\")\n  }\n\n  return { isOpen, openPopover, closePopover, uniqueId, note, setNote }\n}\n\ninterface PopoverRootProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function PopoverRoot({ children, className }: PopoverRootProps) {\n  const popoverLogic = usePopoverLogic()\n\n  return (\n    <PopoverContext.Provider value={popoverLogic}>\n      <MotionConfig transition={TRANSITION}>\n        <div\n          className={cn(\n            \"relative isolate flex items-center justify-center\",\n            className\n          )}\n        >\n          {children}\n        </div>\n      </MotionConfig>\n    </PopoverContext.Provider>\n  )\n}\n\ninterface PopoverTriggerProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function PopoverTrigger({ children, className }: PopoverTriggerProps) {\n  const { openPopover, uniqueId } = usePopover()\n\n  return (\n    <motion.button\n      key=\"button\"\n      layoutId={`popover-${uniqueId}`}\n      className={cn(\n        \"flex h-9 items-center border border-zinc-950/10 bg-white px-3 text-zinc-950 dark:border-zinc-50/10 dark:bg-zinc-700 dark:text-zinc-50\",\n        className\n      )}\n      style={{\n        borderRadius: 8,\n      }}\n      onClick={openPopover}\n    >\n      <motion.span layoutId={`popover-label-${uniqueId}`} className=\"text-sm\">\n        {children}\n      </motion.span>\n    </motion.button>\n  )\n}\n\ninterface PopoverContentProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function PopoverContent({ children, className }: PopoverContentProps) {\n  const { isOpen, closePopover, uniqueId } = usePopover()\n  const formContainerRef = useRef<HTMLDivElement>(null)\n\n  useClickOutside(formContainerRef, closePopover)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        closePopover()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [closePopover])\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          ref={formContainerRef}\n          layoutId={`popover-${uniqueId}`}\n          className={cn(\n            \"absolute z-50 h-[200px] w-[364px] overflow-hidden border border-zinc-950/10 bg-white outline-none dark:bg-zinc-700\", // Changed z-90 to z-50\n            className\n          )}\n          style={{\n            borderRadius: 12,\n            top: \"auto\", // Remove any top positioning\n            left: \"auto\", // Remove any left positioning\n            transform: \"none\", // Remove any transform\n          }}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\ninterface PopoverFormProps {\n  children: React.ReactNode\n  onSubmit?: (note: string) => void\n  className?: string\n}\n\nexport function PopoverForm({\n  children,\n  onSubmit,\n  className,\n}: PopoverFormProps) {\n  const { note, closePopover } = usePopover()\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    onSubmit?.(note)\n    closePopover()\n  }\n\n  return (\n    <form\n      className={cn(\"flex h-full flex-col\", className)}\n      onSubmit={handleSubmit}\n    >\n      {children}\n    </form>\n  )\n}\n\ninterface PopoverLabelProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function PopoverLabel({ children, className }: PopoverLabelProps) {\n  const { uniqueId, note } = usePopover()\n\n  return (\n    <motion.span\n      layoutId={`popover-label-${uniqueId}`}\n      aria-hidden=\"true\"\n      style={{\n        opacity: note ? 0 : 1,\n      }}\n      className={cn(\n        \"absolute top-3 left-4 text-sm text-zinc-500 select-none dark:text-zinc-400\",\n        className\n      )}\n    >\n      {children}\n    </motion.span>\n  )\n}\n\ninterface PopoverTextareaProps {\n  className?: string\n}\n\nexport function PopoverTextarea({ className }: PopoverTextareaProps) {\n  const { note, setNote } = usePopover()\n\n  return (\n    <textarea\n      className={cn(\n        \"h-full w-full resize-none rounded-md bg-transparent px-4 py-3 text-sm outline-none\",\n        className\n      )}\n      autoFocus\n      value={note}\n      onChange={(e) => setNote(e.target.value)}\n    />\n  )\n}\n\ninterface PopoverFooterProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function PopoverFooter({ children, className }: PopoverFooterProps) {\n  return (\n    <div\n      key=\"close\"\n      className={cn(\"flex justify-between px-4 py-3\", className)}\n    >\n      {children}\n    </div>\n  )\n}\n\ninterface PopoverCloseButtonProps {\n  className?: string\n}\n\nexport function PopoverCloseButton({ className }: PopoverCloseButtonProps) {\n  const { closePopover } = usePopover()\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(\"flex items-center\", className)}\n      onClick={closePopover}\n      aria-label=\"Close popover\"\n    >\n      <X size={16} className=\"text-zinc-900 dark:text-zinc-100\" />\n    </button>\n  )\n}\n\ninterface PopoverSubmitButtonProps {\n  className?: string\n}\n\nexport function PopoverSubmitButton({ className }: PopoverSubmitButtonProps) {\n  return (\n    <button\n      className={cn(\n        \"relative ml-1 flex h-8 shrink-0 scale-100 appearance-none items-center justify-center rounded-lg border border-zinc-950/10 bg-transparent px-2 text-sm text-zinc-500 transition-colors select-none hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98] dark:border-zinc-50/10 dark:text-zinc-50 dark:hover:bg-zinc-800\",\n        className\n      )}\n      type=\"submit\"\n      aria-label=\"Submit note\"\n    >\n      Submit\n    </button>\n  )\n}\n\nexport function PopoverHeader({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"px-4 py-2 font-semibold text-zinc-900 dark:text-zinc-100\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function PopoverBody({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  return <div className={cn(\"p-4\", className)}>{children}</div>\n}\n\n// New component: PopoverButton\nexport function PopoverButton({\n  children,\n  onClick,\n  className,\n}: {\n  children: React.ReactNode\n  onClick?: () => void\n  className?: string\n}) {\n  return (\n    <button\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700\",\n        className\n      )}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}