{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "family-receive-button",
  "type": "registry:component",
  "title": "Family Receive Button",
  "description": "Features a toggle button that transforms into a full confirmation modal with backdrop blur and elegant motion design.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/family-receive-button.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  LayoutGroup,\n  type Transition,\n} from 'motion/react';\nimport { X, Fingerprint } from 'lucide-react';\n\nexport interface FamilyReceiveComponentProps {\n  triggerLabel?: string;\n  title?: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm?: () => void;\n  icon?: React.ReactNode;\n}\n\nconst springTransition: Transition = {\n  type: 'spring',\n  bounce: 0,\n  duration: 0.4,\n};\n\nexport const FamilyReceiveComponent: React.FC<FamilyReceiveComponentProps> = ({\n  triggerLabel = 'Receive',\n  title = 'Confirm',\n  description = 'Are you sure you want to receive hell load of money?',\n  confirmLabel = 'Receive',\n  cancelLabel = 'Cancel',\n  onConfirm,\n  icon,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div className=\"relative flex h-[400px] w-[320px] max-w-full items-center justify-center md:w-[520px]\">\n      <LayoutGroup>\n        <AnimatePresence>\n          {!isOpen && (\n            <motion.button\n              key=\"trigger\"\n              layoutId=\"action-button\"\n              onClick={() => setIsOpen(true)}\n              className=\"relative h-12 w-64 cursor-pointer rounded-full bg-[#00A6F4] text-lg font-medium text-white shadow-lg md:h-14 md:w-96 md:text-xl\"\n              whileTap={{ scale: 0.95 }}\n              transition={springTransition}\n            >\n              {triggerLabel}\n            </motion.button>\n          )}\n        </AnimatePresence>\n\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              key=\"overlay\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"absolute inset-0 z-10 flex items-center justify-center px-4\"\n            >\n              <motion.div\n                initial={{ y: 100, opacity: 0, scale: 0.98 }}\n                animate={{ y: 0, opacity: 1, scale: 1 }}\n                exit={{ y: 100, opacity: 0, scale: 0.98 }}\n                transition={springTransition}\n                className=\"relative w-[280px] max-w-full overflow-hidden rounded-[24px] border border-zinc-200 bg-white p-5 text-zinc-900 shadow-2xl md:w-[520px] md:rounded-[32px] md:p-6 dark:border-white/5 dark:bg-[#080808] dark:text-white\"\n              >\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"absolute top-5 right-5 text-zinc-400 transition-colors hover:text-zinc-950 dark:text-zinc-500 dark:hover:text-white\"\n                >\n                  <X size={24} />\n                </button>\n\n                <div className=\"mb-4 flex items-center gap-3\">\n                  <div className=\"flex h-8 w-8 items-center justify-center rounded-sm bg-zinc-100 md:h-10 md:w-10 dark:bg-white/10\">\n                    {icon ?? (\n                      <Fingerprint size={28} className=\"text-[#00A6F4]\" />\n                    )}\n                  </div>\n                  <h2 className=\"text-xl font-semibold text-zinc-900 md:text-2xl dark:text-white\">\n                    {title}\n                  </h2>\n                </div>\n\n                <p className=\"my-4 max-w-xs text-lg font-semibold text-zinc-500 md:my-6 md:text-xl dark:text-[#727373]\">\n                  {description}\n                </p>\n\n                <div className=\"flex gap-3\">\n                  <button\n                    onClick={() => setIsOpen(false)}\n                    className=\"h-11 flex-1 rounded-full bg-zinc-100 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-200 md:h-13 md:text-lg dark:bg-[#121212] dark:text-gray-300 dark:hover:bg-[#1a1a1a]\"\n                  >\n                    {cancelLabel}\n                  </button>\n\n                  <motion.button\n                    layoutId=\"action-button\"\n                    onClick={() => {\n                      onConfirm?.();\n                      setIsOpen(false);\n                    }}\n                    className=\"h-11 flex-1 cursor-pointer rounded-full bg-[#00A6F4] text-sm font-medium text-white hover:bg-[#0095db] md:h-13 md:text-lg\"\n                    transition={springTransition}\n                  >\n                    {confirmLabel}\n                  </motion.button>\n                </div>\n              </motion.div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </LayoutGroup>\n    </div>\n  );\n};\n"
    }
  ]
}