{
  "name": "image-viewer-motion",
  "type": "registry:component",
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react",
    "react-zoom-pan-pinch",
    "tailwind-motion"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogClose,\n  DialogTitle,\n} from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\ninterface ImageViewerProps {\n  className?: string;\n  classNameImageViewer?: string;\n  classNameThumbnailViewer?: string;\n  imageTitle?: string;\n  imageUrl: string;\n  thumbnailUrl?: string;\n}\n\nconst ImageViewer_Motion = ({\n  className,\n  classNameImageViewer,\n  classNameThumbnailViewer,\n  imageTitle,\n  imageUrl,\n  thumbnailUrl,\n}: ImageViewerProps) => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <div className={cn(\"cursor-pointer\", className)}>\n          {/* You can swap this with your preferred image optization technique, like using  next/image */}\n          <img\n            src={thumbnailUrl || imageUrl}\n            alt={`${imageTitle} - Preview`}\n            width={300}\n            height={300}\n            className={cn(\n              \"rounded-lg object-cover transition-opacity hover:opacity-90\",\n              classNameThumbnailViewer\n            )}\n          />\n        </div>\n      </DialogTrigger>\n      <DialogPortal>\n        <DialogOverlay className=\"motion-preset-fade motion-duration-150 fixed inset-0 z-50 bg-black/80\" />\n        <DialogContent className=\"bg-background motion-scale-in-[0.5] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-150 motion-duration-150/scale motion-duration-150/translate motion-duration-[0.00s]/rotate fixed inset-0 z-50 flex flex-col items-center justify-center p-0\">\n          <DialogTitle className=\"sr-only\">{imageTitle}</DialogTitle>\n          <div className=\"relative flex h-screen w-screen items-center justify-center\">\n            <TransformWrapper\n              initialScale={1}\n              initialPositionX={0}\n              initialPositionY={0}\n            >\n              {() => (\n                <>\n                  <TransformComponent>\n                    {/* You can swap this with your preferred image optization technique, like using  next/image */}\n                    <img\n                      src={imageUrl}\n                      alt={imageTitle}\n                      className={classNameImageViewer}\n                    />\n                  </TransformComponent>\n                </>\n              )}\n            </TransformWrapper>\n            <DialogClose asChild>\n              <button\n                className=\"absolute top-4 right-4 z-10 cursor-pointer rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70\"\n                aria-label=\"Close\"\n              >\n                <X className=\"size-6\" />\n              </button>\n            </DialogClose>\n          </div>\n        </DialogContent>\n      </DialogPortal>\n    </Dialog>\n  );\n};\n\nexport default ImageViewer_Motion;\n",
      "path": "/components/commerce-ui/components/image-viewer/motion/image-viewer-motion.tsx",
      "target": "components/commerce-ui/image-viewer-motion.tsx"
    }
  ]
}