{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-modal",
  "type": "registry:ui",
  "title": "Modal",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/Modal.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {ModalOverlay, type ModalOverlayProps, Modal as RACModal} from 'react-aria-components/Modal';\nimport {tv} from 'tailwind-variants';\n\nconst overlayStyles = tv({\n  base: 'absolute top-0 left-0 w-full h-(--page-height) isolate z-20 bg-black/[50%] text-center backdrop-blur-lg',\n  variants: {\n    isEntering: {\n      true: 'animate-in fade-in duration-200 ease-out'\n    },\n    isExiting: {\n      true: 'animate-out fade-out duration-200 ease-in'\n    }\n  }\n});\n\nconst modalStyles = tv({\n  base: 'font-sans w-full max-w-[min(90vw,450px)] max-h-[calc(var(--visual-viewport-height)*.9)] rounded-2xl bg-white dark:bg-neutral-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas] text-left align-middle text-neutral-700 dark:text-neutral-300 shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10',\n  variants: {\n    isEntering: {\n      true: 'animate-in zoom-in-105 ease-out duration-200'\n    },\n    isExiting: {\n      true: 'animate-out zoom-out-95 ease-in duration-200'\n    }\n  }\n});\n\nexport function Modal(props: ModalOverlayProps) {\n  return (\n    <ModalOverlay {...props} className={overlayStyles}>\n      <div className=\"sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center box-border\">\n        <RACModal {...props} className={modalStyles} />\n      </div>\n    </ModalOverlay>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}