{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "morphing-modal",
  "type": "registry:component",
  "title": "Morphing Modal",
  "description": "A card that morphs into a full modal.",
  "dependencies": [
    "motion@^14.0.0"
  ],
  "registryDependencies": [
    "@dx/lib-ease",
    "@dx/lib-presence-gate",
    "@dx/utils"
  ],
  "files": [
    {
      "path": "components/motion/morphing-modal.tsx",
      "type": "registry:component",
      "target": "components/motion/morphing-modal.tsx",
      "content": "import {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useEffect } from \"react\";\nimport { EASE_OUT, SPRING_PANEL } from \"@/lib/ease\";\nimport { PresenceGate } from \"@/lib/presence-gate\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MorphingModalProps {\n  /** Which view is currently shown. `null` closes the modal. */\n  viewId: string | null;\n  onClose: () => void;\n  children: ReactNode;\n  /** \"bottom\" anchors to the viewport bottom (mobile-like). \"center\" centers vertically. */\n  placement?: \"bottom\" | \"center\";\n  className?: string;\n}\n\nexport function MorphingModal({\n  viewId,\n  onClose,\n  children,\n  placement = \"bottom\",\n  className,\n}: MorphingModalProps) {\n  const open = viewId !== null;\n  const reduce = useReducedMotion();\n  const enterY = reduce ? 0 : placement === \"bottom\" ? 40 : 20;\n  const enterScale = reduce ? 1 : 0.97;\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Mounted only while open, and while open the chrome is two fixed siblings\n  // rather than one wrapper: the backdrop spans the viewport edges but carries\n  // the scrim colour, and the layer positioning the panel sits inset off every\n  // edge (`inset-4`, with the bottom placement's `pb-4` on top of it). Both hang\n  // off `PresenceGate`, so interaction releases in the same commit that starts\n  // the exit rather than when it ends`open` is already false for those\n  // frames.\n  return (\n    <AnimatePresence initial={false}>\n      {open ? (\n        <PresenceGate key=\"backdrop\">\n          {({ gate }) => (\n            <motion.button\n              type=\"button\"\n              aria-label=\"Close modal\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2, ease: EASE_OUT }}\n              {...gate}\n              onClick={onClose}\n              className=\"pointer-events-auto fixed inset-0 z-[80] bg-background/5 [backdrop-filter:blur(14px)_saturate(140%)] [-webkit-backdrop-filter:blur(14px)_saturate(140%)]\"\n            />\n          )}\n        </PresenceGate>\n      ) : null}\n\n      {open ? (\n        <PresenceGate key=\"panel-layer\">\n          {({ isPresent, gate }) => (\n            // The layer itself never takes pointer events, so it carries\n            // `inert` alone rather than the gate's pointer-events value.\n            <div\n              inert={!isPresent}\n              className={cn(\n                \"pointer-events-none fixed inset-4 z-[80] flex justify-center\",\n                placement === \"bottom\" ? \"items-end pb-4\" : \"items-center\",\n              )}\n            >\n              <motion.div\n                key=\"panel\"\n                layout\n                initial={{ opacity: 0, y: enterY, scale: enterScale }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                exit={{\n                  opacity: 0,\n                  y: enterY,\n                  scale: reduce ? 1 : 0.98,\n                  transition: { duration: 0.18, ease: EASE_OUT },\n                }}\n                transition={SPRING_PANEL}\n                {...gate}\n                className={cn(\n                  \"pointer-events-auto relative w-full max-w-sm overflow-hidden rounded-3xl border border-border bg-background shadow-2xl will-change-transform\",\n                  className,\n                )}\n              >\n                <motion.div layout=\"position\" className=\"p-5\">\n                  <AnimatePresence mode=\"popLayout\" initial={false}>\n                    <motion.div\n                      key={viewId}\n                      initial={\n                        reduce\n                          ? { opacity: 0 }\n                          : { opacity: 0, y: 8, filter: \"blur(4px)\" }\n                      }\n                      animate={\n                        reduce\n                          ? {\n                              opacity: 1,\n                              transition: {\n                                duration: 0.18,\n                                ease: EASE_OUT,\n                              },\n                            }\n                          : {\n                              opacity: 1,\n                              y: 0,\n                              filter: \"blur(0px)\",\n                              transition: {\n                                duration: 0.24,\n                                ease: EASE_OUT,\n                              },\n                            }\n                      }\n                      exit={\n                        reduce\n                          ? {\n                              opacity: 0,\n                              transition: {\n                                duration: 0.14,\n                                ease: EASE_OUT,\n                              },\n                            }\n                          : {\n                              opacity: 0,\n                              y: -8,\n                              filter: \"blur(4px)\",\n                              transition: {\n                                duration: 0.16,\n                                ease: EASE_OUT,\n                              },\n                            }\n                      }\n                    >\n                      {children}\n                    </motion.div>\n                  </AnimatePresence>\n                </motion.div>\n              </motion.div>\n            </div>\n          )}\n        </PresenceGate>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n"
    }
  ],
  "categories": [
    "motion-kit"
  ],
  "meta": {
    "group": "motion",
    "docs": "https://dxuireact.com/docs/components/morphing-modal"
  }
}