{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-dialog-shadcnui",
  "type": "registry:component",
  "title": "Animated Dialog",
  "description": "Modal dialog with backdrop fade and spring animation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/modals/animated-dialog.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { X } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function AnimatedDialog() {\n  const [isOpen, setIsOpen] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n\n  const dialogAnimation = shouldReduceMotion\n    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }\n    : {\n        initial: { opacity: 0, scale: 0.97, y: 16 },\n        animate: { opacity: 1, scale: 1, y: 0 },\n        exit: { opacity: 0, scale: 0.97, y: 16 },\n      };\n\n  return (\n    <div>\n      <Button className=\"w-full\" onClick={() => setIsOpen(true)}>\n        Open Dialog\n      </Button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.25, ease: \"easeOut\" }}\n              className=\"fixed inset-0 z-50 bg-background/70 backdrop-blur-sm\"\n              onClick={() => setIsOpen(false)}\n            />\n\n            <div className=\"fixed inset-0 z-50 flex items-center justify-center px-4 py-10\">\n              <motion.div\n                {...dialogAnimation}\n                transition={{\n                  duration: shouldReduceMotion ? 0.2 : 0.4,\n                  ease: shouldReduceMotion ? \"linear\" : [0.16, 1, 0.3, 1],\n                }}\n                className=\"relative w-full max-w-md rounded-3xl border border-border/60 bg-card/90 p-6 shadow-[0_30px_120px_-40px_rgba(15,23,42,0.75)] backdrop-blur-xl\"\n                onClick={(event) => event.stopPropagation()}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby=\"dialog-title\"\n                aria-describedby=\"dialog-description\"\n              >\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"absolute right-4 top-4 rounded-full border border-border/40 bg-white/5 p-2 text-muted-foreground transition-colors hover:text-foreground\"\n                  aria-label=\"Close dialog\"\n                >\n                  <motion.span\n                    animate={\n                      shouldReduceMotion\n                        ? undefined\n                        : { rotate: [0, 15, -15, 0] }\n                    }\n                    transition={\n                      shouldReduceMotion\n                        ? undefined\n                        : { duration: 1.8, repeat: Infinity, ease: \"easeInOut\" }\n                    }\n                  >\n                    <X className=\"h-4 w-4\" />\n                  </motion.span>\n                </button>\n\n                <motion.div\n                  initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{\n                    delay: shouldReduceMotion ? 0 : 0.08,\n                    duration: 0.25,\n                  }}\n                >\n                  <div className=\"mb-3 inline-flex items-center gap-2 rounded-full border border-border/60 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.28em] text-muted-foreground\">\n                    Confirm\n                  </div>\n                  <h2\n                    id=\"dialog-title\"\n                    className=\"text-xl font-semibold text-foreground\"\n                  >\n                    Confirm Action\n                  </h2>\n                  <p\n                    id=\"dialog-description\"\n                    className=\"mt-2 text-sm leading-relaxed text-muted-foreground\"\n                  >\n                    Are you sure you want to perform this action? This can’t be\n                    undone and may affect related data.\n                  </p>\n                </motion.div>\n\n                <motion.div\n                  className=\"mt-6 flex gap-3\"\n                  initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 8 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{\n                    delay: shouldReduceMotion ? 0 : 0.14,\n                    duration: 0.25,\n                  }}\n                >\n                  <Button\n                    variant=\"outline\"\n                    onClick={() => setIsOpen(false)}\n                    className=\"flex-1 rounded-full border-border/60 bg-card/60 text-foreground\"\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    onClick={() => setIsOpen(false)}\n                    className=\"flex-1 rounded-full bg-primary text-primary-foreground shadow-[0_15px_35px_-20px_rgba(79,70,229,0.6)]\"\n                  >\n                    Confirm\n                  </Button>\n                </motion.div>\n              </motion.div>\n            </div>\n          </>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-dialog-shadcnui.tsx"
    }
  ]
}