{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "morph-confirm",
  "type": "registry:component",
  "title": "Morph Confirm",
  "description": "A button that morphs into its own confirmation card.",
  "dependencies": [
    "lucide-react@^0.577.0",
    "motion@^14.0.0"
  ],
  "registryDependencies": [
    "@dx/utils"
  ],
  "files": [
    {
      "path": "dx/morph-confirm.tsx",
      "type": "registry:component",
      "target": "components/dx/morph-confirm.tsx",
      "content": "import * as React from \"react\";\nimport { AnimatePresence, LayoutGroup, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * MorphConfirma button that morphs into an inline confirmation card via a\n * shared layoutId. Inspired by family.co.\n */\n\nconst SPRING = { type: \"spring\", stiffness: 350, damping: 35 } as const;\n\ntype MorphConfirmProps = {\n  /** Label of the trigger and the confirm button. */\n  label: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Dim + blur the page behind the card. */\n  backdrop?: boolean;\n  className?: string;\n  /** Tailwind classes for the primary button. */\n  buttonClassName?: string;\n};\n\nfunction MorphConfirm({\n  label,\n  title = \"Are you sure?\",\n  description,\n  icon,\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  open: openProp,\n  onOpenChange,\n  backdrop = true,\n  className,\n  buttonClassName,\n}: MorphConfirmProps) {\n  const [inner, setInner] = React.useState(false);\n  const open = openProp ?? inner;\n  const setOpen = (v: boolean) => {\n    setInner(v);\n    onOpenChange?.(v);\n  };\n  const id = React.useId();\n  const titleId = `${id}-title`;\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && (setOpen(false), onCancel?.());\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const primary = cn(\n    \"focus-ring h-10 w-full rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground\",\n    buttonClassName,\n  );\n\n  return (\n    <MotionConfig transition={SPRING}>\n      <LayoutGroup id={id}>\n        <AnimatePresence>\n          {open && backdrop && (\n            <motion.div\n              aria-hidden\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => (setOpen(false), onCancel?.())}\n              className=\"fixed inset-0 z-40 bg-overlay/30 backdrop-blur-[2px]\"\n            />\n          )}\n        </AnimatePresence>\n        <motion.div\n          layout\n          data-slot=\"morph-confirm\"\n          style={{ borderRadius: 28 }}\n          className={cn(\"relative z-50 w-full max-w-[420px] overflow-hidden\", className)}\n        >\n          <div className=\"relative z-10 flex w-full justify-center\" style={{ pointerEvents: open ? \"none\" : \"auto\" }}>\n            {!open && (\n              <motion.button\n                type=\"button\"\n                layoutId=\"confirm-primary\"\n                whileTap={{ scale: 0.95 }}\n                onClick={() => setOpen(true)}\n                className={cn(primary, \"max-w-[300px]\")}\n              >\n                <motion.span layout=\"position\" className=\"inline-block\">\n                  {label}\n                </motion.span>\n              </motion.button>\n            )}\n          </div>\n          <AnimatePresence mode=\"popLayout\">\n            {open && (\n              <motion.div\n                layout\n                role=\"alertdialog\"\n                aria-labelledby={titleId}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ type: \"spring\", stiffness: 550, damping: 45, mass: 0.7 }}\n                className=\"relative flex flex-col rounded-[28px] border border-outline-variant bg-card p-4 text-card-foreground shadow-lg\"\n              >\n                <div className=\"flex items-center justify-between\">\n                  <div id={titleId} className=\"flex items-center gap-2.5 text-lg font-medium\">\n                    {icon && <span className=\"flex size-10 items-center justify-center rounded-full bg-container-high [&_svg]:size-5\">{icon}</span>}\n                    {title}\n                  </div>\n                  <button\n                    type=\"button\"\n                    aria-label=\"Close\"\n                    onClick={() => (setOpen(false), onCancel?.())}\n                    className=\"focus-ring state-layer flex size-8 items-center justify-center rounded-full text-muted-foreground\"\n                  >\n                    <XIcon className=\"size-5\" />\n                  </button>\n                </div>\n                {description && <p className=\"my-4 max-w-[34ch] text-sm text-muted-foreground\">{description}</p>}\n                <div className={cn(\"flex items-center gap-2\", !description && \"mt-4\")}>\n                  <button\n                    type=\"button\"\n                    onClick={() => (setOpen(false), onCancel?.())}\n                    className=\"focus-ring state-layer h-10 w-full rounded-full bg-container-high text-sm font-medium\"\n                  >\n                    {cancelLabel}\n                  </button>\n                  <motion.button\n                    type=\"button\"\n                    layoutId=\"confirm-primary\"\n                    whileTap={{ scale: 0.95 }}\n                    onClick={() => (setOpen(false), onConfirm?.())}\n                    className={primary}\n                  >\n                    <motion.span layout=\"position\" className=\"inline-block\">\n                      {label}\n                    </motion.span>\n                  </motion.button>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      </LayoutGroup>\n    </MotionConfig>\n  );\n}\n\nexport { MorphConfirm };\nexport type { MorphConfirmProps };\n"
    }
  ],
  "categories": [
    "motion"
  ],
  "meta": {
    "group": "dx",
    "docs": "https://dxuireact.com/docs/components/morph-confirm"
  }
}