{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fluid-modal-transition-shadcnui",
  "type": "registry:component",
  "title": "Fluid Modal Transition",
  "description": "Modal that expands smoothly from clicked trigger element using layoutId",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/fluid-modal-transition.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { X } from \"lucide-react\";\nimport React, { useEffect, useState } from \"react\";\n\ntype FluidModalTransitionProps = {\n  trigger?: React.ReactNode;\n  title?: string;\n  children?: React.ReactNode;\n};\n\nexport function FluidModalTransition({\n  trigger,\n  title = \"Modal Title\",\n  children,\n}: FluidModalTransitionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  // If no trigger provided, auto-open for preview\n  useEffect(() => {\n    if (!trigger) {\n      setIsOpen(true);\n    }\n  }, [trigger]);\n\n  return (\n    <>\n      {trigger ? (\n        <div onClick={() => setIsOpen(true)}>{trigger}</div>\n      ) : (\n        <button\n          onClick={() => setIsOpen(true)}\n          className=\"rounded-lg bg-primary px-4 py-2 text-primary-foreground\"\n        >\n          Open Modal\n        </button>\n      )}\n\n      <AnimatePresence>\n        {isOpen && (\n          <>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => setIsOpen(false)}\n              className=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\"\n            />\n\n            <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n              <motion.div\n                layoutId=\"modal-content\"\n                initial={{ opacity: 0, scale: 0.8 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.8 }}\n                transition={{\n                  type: \"spring\",\n                  stiffness: 300,\n                  damping: 30,\n                }}\n                className=\"relative w-full max-w-lg rounded-2xl border border-border bg-card p-6 shadow-2xl\"\n              >\n                <div className=\"mb-4 flex items-center justify-between\">\n                  <h2 className=\"text-xl font-semibold\">{title}</h2>\n                  <motion.button\n                    whileHover={{ scale: 1.1, rotate: 90 }}\n                    whileTap={{ scale: 0.9 }}\n                    onClick={() => setIsOpen(false)}\n                    className=\"flex h-8 w-8 items-center justify-center rounded-full hover:bg-muted\"\n                  >\n                    <X className=\"h-4 w-4\" />\n                  </motion.button>\n                </div>\n\n                <div>\n                  {children || (\n                    <div>\n                      <p className=\"text-muted-foreground mb-4\">\n                        This is a fluid modal transition. The modal expands\n                        smoothly from the trigger element.\n                      </p>\n                      <p className=\"text-sm text-muted-foreground\">\n                        Click the X button to close.\n                      </p>\n                    </div>\n                  )}\n                </div>\n              </motion.div>\n            </div>\n          </>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/fluid-modal-transition-shadcnui.tsx"
    }
  ]
}