{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-default",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/modal/dialog-default.tsx",
      "content": "'use client';\nimport { FramerModal, ModalContent } from '@/components/ui/dialog';\nimport type React from 'react';\nimport { useState } from 'react';\n\nconst DialogDefault: React.FC = () => {\n  const [modalOpen, setModalOpen] = useState(false);\n\n  return (\n    <div className=' h-full flex justify-center items-center'>\n      <button\n        onClick={() => setModalOpen(true)}\n        className='i h-12  rounded-md border-2 dark:border-[#656fe2] border-[#c0c6fc] dark:bg-[linear-gradient(110deg,#1e2a78,45%,#3749be,55%,#1e2a78)] bg-[linear-gradient(110deg,#3d5af1,45%,#5471ff,55%,#3d5af1)] bg-size-[200%_100%] dark:hover:border-white px-6 font-medium text-white dark:text-white transition-colors focus:outline-hidden focus:ring-2 dark:focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-50'\n      >\n        Open Dialog\n      </button>\n\n      <FramerModal open={modalOpen} setOpen={setModalOpen}>\n        <ModalContent>\n          <div className='flex flex-col space-y-1.5 text-center sm:text-left'>\n            <h2 className='text-lg font-semibold leading-none tracking-tight'>Edit profile</h2>\n            <p className='text-sm text-muted-foreground'>\n              Make changes to your profile here. Click save when you're done.\n            </p>\n          </div>\n          <div className='grid gap-4 py-4'>\n            <div className='grid grid-cols-4 items-center gap-4'>\n              <label className='text-sm font-medium leading-none text-right'>Name</label>\n              <input\n                className='flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 col-span-3'\n                id='name'\n                defaultValue='Pedro Duarte'\n              />\n            </div>\n            <div className='grid grid-cols-4 items-center gap-4'>\n              <label className='text-sm font-medium leading-none text-right'>Username</label>\n              <input\n                className='flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 col-span-3'\n                id='username'\n                defaultValue='@peduarte'\n              />\n            </div>\n          </div>\n          <div className='mt-4'>\n            <button\n              onClick={() => setModalOpen(false)}\n              className='w-full p-3 bg-black dark:bg-white text-white dark:text-black rounded-md'\n              type='button'\n            >\n              Got it, thanks!\n            </button>\n          </div>\n        </ModalContent>\n      </FramerModal>\n    </div>\n  );\n};\n\nexport default DialogDefault;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/dialog.tsx",
      "content": "'use client';\nimport { X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React, { createContext, type ReactNode, useContext, useEffect, useState } from 'react';\n\ninterface ModalContextProps {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst ModalContext = createContext<ModalContextProps | undefined>(undefined);\n\nconst useModal = () => {\n  const context = useContext(ModalContext);\n  if (!context) {\n    throw new Error('useModal must be used within a ModalProvider');\n  }\n  return context;\n};\n\ninterface FramerModalProps {\n  children: ReactNode;\n  open?: boolean;\n  setOpen?: (open: boolean) => void;\n}\n\nexport function FramerModal({\n  children,\n  open: controlledOpen,\n  setOpen: controlledSetOpen,\n}: FramerModalProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;\n  const setOpen = controlledSetOpen !== undefined ? controlledSetOpen : setInternalOpen;\n  useEffect(() => {\n    if (open) {\n      document.body.classList.add('overflow-hidden');\n    } else {\n      document.body.classList.remove('overflow-hidden');\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open, setOpen]);\n  return (\n    <ModalContext.Provider value={{ open, setOpen }}>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            className='fixed inset-0 z-50 top-0 left-0 right-0 bottom-0 flex flex-col items-center w-full h-screen justify-center dark:bg-black/90 bg-white/90 backdrop-blur-xs cursor-zoom-out border'\n            onClick={() => setOpen(false)}\n          >\n            <motion.div\n              initial={{ opacity: 0, y: 8 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: 8 }}\n              onClick={(e) => e.stopPropagation()}\n              className=' w-full max-w-md rounded-xl bg-white/5 p-6 backdrop-blur-2xl border'\n            >\n              <button className='absolute top-2 right-2' onClick={() => setOpen(false)}>\n                <X />\n              </button>\n              {children}\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </ModalContext.Provider>\n  );\n}\n\nexport function ModalContent({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}