{
  "name": "currency-transfer",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "card",
    "tooltip"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Currency Transfer\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport {\n  ArrowDownIcon,\n  ArrowUpDown,\n  ArrowUpIcon,\n  Check,\n  InfoIcon,\n} from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\ninterface CheckmarkProps {\n  size?: number;\n  strokeWidth?: number;\n  color?: string;\n  className?: string;\n}\n\nconst draw = {\n  hidden: { pathLength: 0, opacity: 0 },\n  visible: (i: number) => ({\n    pathLength: 1,\n    opacity: 1,\n    transition: {\n      pathLength: {\n        delay: i * 0.2,\n        type: \"spring\",\n        duration: 1.5,\n        bounce: 0.2,\n        ease: [0.22, 1, 0.36, 1],\n      },\n      opacity: { delay: i * 0.2, duration: 0.3 },\n    },\n  }),\n};\n\nexport function Checkmark({\n  size = 100,\n  strokeWidth = 2,\n  color = \"currentColor\",\n  className = \"\",\n}: CheckmarkProps) {\n  return (\n    <motion.svg\n      animate=\"visible\"\n      className={className}\n      height={size}\n      initial=\"hidden\"\n      viewBox=\"0 0 100 100\"\n      width={size}\n    >\n      <title>Animated Checkmark</title>\n      <motion.circle\n        custom={0}\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42\"\n        stroke={color}\n        style={{\n          strokeWidth,\n          strokeLinecap: \"round\",\n          fill: \"transparent\",\n          filter: \"drop-shadow(0 0 2px rgba(16, 185, 129, 0.2))\",\n        }}\n        variants={draw as any}\n      />\n      <motion.path\n        custom={1}\n        d=\"M32 50L45 63L68 35\"\n        stroke={color}\n        style={{\n          strokeWidth: strokeWidth + 0.5,\n          strokeLinecap: \"round\",\n          strokeLinejoin: \"round\",\n          fill: \"transparent\",\n          filter: \"drop-shadow(0 0 1px rgba(16, 185, 129, 0.3))\",\n        }}\n        variants={draw as any}\n      />\n    </motion.svg>\n  );\n}\n\nexport default function CurrencyTransfer() {\n  const [isCompleted, setIsCompleted] = useState(false);\n  const transactionId = \"TXN-DAB3UL494\";\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsCompleted(true);\n    }, 1500);\n\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <TooltipProvider>\n      <Card className=\"mx-auto flex h-[420px] w-full max-w-sm flex-col border border-zinc-200/60 bg-white p-6 shadow-[0_0_0_1px_rgba(0,0,0,0.03)] backdrop-blur-sm transition-all duration-500 hover:border-emerald-500/20 dark:border-zinc-800/60 dark:bg-zinc-900 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:border-emerald-500/20\">\n        <CardContent className=\"flex flex-1 flex-col justify-center space-y-4\">\n          <div className=\"flex h-[80px] items-center justify-center\">\n            <motion.div\n              animate={{ opacity: 1, y: 0 }}\n              className=\"flex justify-center\"\n              initial={{ opacity: 0, y: -10 }}\n              transition={{\n                duration: 0.5,\n                ease: [0.22, 1, 0.36, 1],\n              }}\n            >\n              <div className=\"relative flex h-[100px] w-[100px] items-center justify-center\">\n                <motion.div\n                  animate={{\n                    opacity: [0, 1, 0.8],\n                  }}\n                  className=\"absolute inset-0 rounded-full bg-emerald-500/10 blur-2xl dark:bg-emerald-500/5\"\n                  initial={{ opacity: 0 }}\n                  transition={{\n                    duration: 1.5,\n                    times: [0, 0.5, 1],\n                    ease: [0.22, 1, 0.36, 1],\n                  }}\n                />\n                <AnimatePresence mode=\"wait\">\n                  {isCompleted ? (\n                    <motion.div\n                      animate={{\n                        opacity: 1,\n                        rotate: 0,\n                      }}\n                      className=\"flex h-[100px] w-[100px] items-center justify-center\"\n                      initial={{\n                        opacity: 0,\n                        rotate: -180,\n                      }}\n                      key=\"completed\"\n                      transition={{\n                        duration: 0.6,\n                        ease: \"easeInOut\",\n                      }}\n                    >\n                      <div className=\"relative z-10 rounded-full border border-emerald-500 bg-white p-5 dark:bg-zinc-900\">\n                        <Check\n                          className=\"h-10 w-10 text-emerald-500\"\n                          strokeWidth={3.5}\n                        />\n                      </div>\n                    </motion.div>\n                  ) : (\n                    <motion.div\n                      animate={{ opacity: 1 }}\n                      className=\"flex h-[100px] w-[100px] items-center justify-center\"\n                      exit={{\n                        opacity: 0,\n                        rotate: 360,\n                      }}\n                      initial={{ opacity: 0 }}\n                      key=\"progress\"\n                      transition={{\n                        duration: 0.6,\n                        ease: \"easeInOut\",\n                      }}\n                    >\n                      <div className=\"relative z-10\">\n                        <motion.div\n                          animate={{\n                            rotate: 360,\n                            scale: [1, 1.02, 1],\n                          }}\n                          className=\"absolute inset-0 rounded-full border-2 border-transparent\"\n                          style={{\n                            borderLeftColor: \"rgb(16 185 129)\",\n                            borderTopColor: \"rgb(16 185 129 / 0.2)\",\n                            filter: \"blur(0.5px)\",\n                          }}\n                          transition={{\n                            rotate: {\n                              duration: 3,\n                              repeat: Number.POSITIVE_INFINITY,\n                              ease: \"linear\",\n                            },\n                            scale: {\n                              duration: 2,\n                              repeat: Number.POSITIVE_INFINITY,\n                              ease: \"easeInOut\",\n                            },\n                          }}\n                        />\n                        <div className=\"relative z-10 rounded-full bg-white p-5 shadow-[0_0_15px_rgba(16,185,129,0.1)] dark:bg-zinc-900\">\n                          <ArrowUpDown className=\"h-10 w-10 text-emerald-500\" />\n                        </div>\n                      </div>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n            </motion.div>\n          </div>\n          <div className=\"flex h-[280px] flex-col\">\n            <motion.div\n              animate={{ opacity: 1, y: 0 }}\n              className=\"mb-4 w-full space-y-2 text-center\"\n              initial={{ opacity: 0, y: 10 }}\n              transition={{\n                delay: 0.3,\n                duration: 0.8,\n                ease: [0.22, 1, 0.36, 1],\n              }}\n            >\n              <AnimatePresence mode=\"wait\">\n                {isCompleted ? (\n                  <motion.h2\n                    animate={{ opacity: 1, y: 0 }}\n                    className=\"font-semibold text-lg text-zinc-900 uppercase tracking-tighter dark:text-zinc-100\"\n                    exit={{ opacity: 0, y: -20 }}\n                    initial={{ opacity: 0, y: 20 }}\n                    key=\"completed-title\"\n                    transition={{\n                      duration: 0.5,\n                      ease: [0.22, 1, 0.36, 1],\n                    }}\n                  >\n                    Transfer Completed\n                  </motion.h2>\n                ) : (\n                  <motion.h2\n                    animate={{ opacity: 1, y: 0 }}\n                    className=\"font-semibold text-lg text-zinc-900 uppercase tracking-tighter dark:text-zinc-100\"\n                    exit={{ opacity: 0, y: -20 }}\n                    initial={{ opacity: 0, y: 20 }}\n                    key=\"progress-title\"\n                    transition={{\n                      duration: 0.5,\n                      ease: [0.22, 1, 0.36, 1],\n                    }}\n                  >\n                    Transfer in Progress\n                  </motion.h2>\n                )}\n              </AnimatePresence>\n              <AnimatePresence mode=\"wait\">\n                {isCompleted ? (\n                  <motion.div\n                    animate={{ opacity: 1, y: 0 }}\n                    className=\"font-medium text-emerald-600 text-xs dark:text-emerald-400\"\n                    exit={{ opacity: 0, y: -10 }}\n                    initial={{ opacity: 0, y: 10 }}\n                    key=\"completed-id\"\n                    transition={{\n                      duration: 0.4,\n                      ease: [0.22, 1, 0.36, 1],\n                    }}\n                  >\n                    Transaction ID: {transactionId}\n                  </motion.div>\n                ) : (\n                  <motion.div\n                    animate={{ opacity: 1, y: 0 }}\n                    className=\"font-medium text-emerald-600 text-xs dark:text-emerald-400\"\n                    exit={{ opacity: 0, y: -10 }}\n                    initial={{ opacity: 0, y: 10 }}\n                    key=\"progress-status\"\n                    transition={{\n                      duration: 0.4,\n                      ease: [0.22, 1, 0.36, 1],\n                    }}\n                  >\n                    Processing Transaction...\n                  </motion.div>\n                )}\n              </AnimatePresence>\n              <div className=\"mt-4 flex items-center gap-4\">\n                <motion.div\n                  animate={{ opacity: 1 }}\n                  className=\"relative flex-1\"\n                  initial={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: [0.22, 1, 0.36, 1],\n                  }}\n                >\n                  <motion.div\n                    animate={{\n                      gap: isCompleted ? \"0px\" : \"12px\",\n                    }}\n                    className=\"relative flex flex-col items-start\"\n                    initial={{ gap: \"12px\" }}\n                    transition={{\n                      duration: 0.6,\n                      ease: [0.32, 0.72, 0, 1],\n                    }}\n                  >\n                    <motion.div\n                      animate={{\n                        y: 0,\n                        scale: 1,\n                      }}\n                      className={cn(\n                        \"w-full rounded-xl border border-zinc-200 bg-zinc-50 p-2.5 backdrop-blur-md transition-all duration-300 dark:border-zinc-700/50 dark:bg-zinc-800/50\",\n                        isCompleted\n                          ? \"rounded-b-none border-b-0\"\n                          : \"hover:border-emerald-500/30\"\n                      )}\n                      transition={{\n                        duration: 0.6,\n                        ease: [0.32, 0.72, 0, 1],\n                      }}\n                    >\n                      <div className=\"w-full space-y-1\">\n                        <motion.span\n                          animate={{ opacity: 1 }}\n                          className=\"flex items-center gap-1.5 font-medium text-xs text-zinc-500 dark:text-zinc-400\"\n                          initial={{ opacity: 1 }}\n                          transition={{\n                            duration: 0.3,\n                            ease: [0.22, 1, 0.36, 1],\n                          }}\n                        >\n                          <ArrowUpIcon className=\"h-3 w-3\" />\n                          From\n                        </motion.span>\n                        <div className=\"flex flex-col gap-1.5\">\n                          <motion.div\n                            animate={{ opacity: 1 }}\n                            className=\"group flex items-center gap-2.5\"\n                            initial={{ opacity: 1 }}\n                            transition={{\n                              duration: 0.3,\n                              ease: [0.22, 1, 0.36, 1],\n                            }}\n                          >\n                            <motion.span\n                              className=\"inline-flex h-7 w-7 items-center justify-center rounded-lg border border-zinc-300 bg-white font-medium text-sm text-zinc-900 shadow-lg transition-colors duration-300 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100\"\n                              transition={{\n                                type: \"spring\",\n                                stiffness: 400,\n                                damping: 10,\n                              }}\n                              whileHover={{\n                                scale: 1.05,\n                              }}\n                            >\n                              $\n                            </motion.span>\n                            <div className=\"flex flex-col items-start\">\n                              <AnimatePresence mode=\"wait\">\n                                <motion.span\n                                  animate={{\n                                    opacity: isCompleted ? 1 : 0.5,\n                                  }}\n                                  className={cn(\n                                    \"font-medium text-zinc-900 tracking-tight dark:text-zinc-100\"\n                                  )}\n                                  exit={{\n                                    opacity: isCompleted ? 1 : 0.5,\n                                  }}\n                                  initial={{\n                                    opacity: isCompleted ? 1 : 0.5,\n                                  }}\n                                  key={\n                                    isCompleted\n                                      ? \"completed-amount\"\n                                      : \"processing-amount\"\n                                  }\n                                  transition={{\n                                    duration: 0.3,\n                                    ease: [0.22, 1, 0.36, 1],\n                                  }}\n                                >\n                                  500.00 USD\n                                </motion.span>\n                              </AnimatePresence>\n                              <motion.span\n                                animate={{\n                                  opacity: 1,\n                                }}\n                                className=\"text-xs text-zinc-500 dark:text-zinc-400\"\n                                initial={{\n                                  opacity: 1,\n                                }}\n                                transition={{\n                                  duration: 0.3,\n                                  ease: [0.22, 1, 0.36, 1],\n                                }}\n                              >\n                                Chase Bank ••••4589\n                              </motion.span>\n                            </div>\n                          </motion.div>\n                        </div>\n                      </div>\n                    </motion.div>\n\n                    <motion.div\n                      animate={{\n                        y: 0,\n                        scale: 1,\n                      }}\n                      className={cn(\n                        \"w-full rounded-xl border border-zinc-200 bg-zinc-50 p-2.5 backdrop-blur-md transition-all duration-300 dark:border-zinc-700/50 dark:bg-zinc-800/50\",\n                        isCompleted\n                          ? \"rounded-t-none border-t-0\"\n                          : \"hover:border-emerald-500/30\"\n                      )}\n                      transition={{\n                        duration: 0.6,\n                        ease: [0.32, 0.72, 0, 1],\n                      }}\n                    >\n                      <div className=\"w-full space-y-1\">\n                        <motion.span\n                          animate={{ opacity: 1 }}\n                          className=\"flex items-center gap-1.5 font-medium text-xs text-zinc-500 dark:text-zinc-400\"\n                          initial={{ opacity: 1 }}\n                          transition={{\n                            duration: 0.3,\n                            ease: [0.22, 1, 0.36, 1],\n                          }}\n                        >\n                          <ArrowDownIcon className=\"h-3 w-3\" />\n                          To\n                        </motion.span>\n                        <div className=\"flex flex-col gap-1.5\">\n                          <motion.div\n                            animate={{ opacity: 1 }}\n                            className=\"group flex items-center gap-2.5\"\n                            initial={{ opacity: 1 }}\n                            transition={{\n                              duration: 0.3,\n                              ease: [0.22, 1, 0.36, 1],\n                            }}\n                          >\n                            <motion.span\n                              className=\"inline-flex h-7 w-7 items-center justify-center rounded-lg border border-zinc-300 bg-white font-medium text-sm text-zinc-900 shadow-lg transition-colors duration-300 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100\"\n                              transition={{\n                                type: \"spring\",\n                                stiffness: 400,\n                                damping: 10,\n                              }}\n                              whileHover={{\n                                scale: 1.05,\n                              }}\n                            >\n                              €\n                            </motion.span>\n                            <div className=\"flex flex-col items-start\">\n                              <AnimatePresence mode=\"wait\">\n                                <motion.span\n                                  animate={{\n                                    opacity: isCompleted ? 1 : 0.5,\n                                  }}\n                                  className={cn(\n                                    \"font-medium text-zinc-900 tracking-tight dark:text-zinc-100\"\n                                  )}\n                                  exit={{\n                                    opacity: isCompleted ? 1 : 0.5,\n                                  }}\n                                  initial={{\n                                    opacity: isCompleted ? 1 : 0.5,\n                                  }}\n                                  key={\n                                    isCompleted\n                                      ? \"completed-amount-eur\"\n                                      : \"processing-amount-eur\"\n                                  }\n                                  transition={{\n                                    duration: 0.3,\n                                    ease: [0.22, 1, 0.36, 1],\n                                  }}\n                                >\n                                  460.00 EUR\n                                </motion.span>\n                              </AnimatePresence>\n                              <motion.span\n                                animate={{\n                                  opacity: 1,\n                                }}\n                                className=\"text-xs text-zinc-500 dark:text-zinc-400\"\n                                initial={{\n                                  opacity: 1,\n                                }}\n                                transition={{\n                                  duration: 0.3,\n                                  ease: [0.22, 1, 0.36, 1],\n                                }}\n                              >\n                                Deutsche Bank ••••7823\n                              </motion.span>\n                            </div>\n                          </motion.div>\n                        </div>\n                      </div>\n                    </motion.div>\n                  </motion.div>\n                </motion.div>\n              </div>\n              <motion.div\n                animate={{ opacity: 1 }}\n                className=\"mt-2 flex items-center justify-center gap-2 text-xs text-zinc-500 dark:text-zinc-400\"\n                initial={{ opacity: 0 }}\n                transition={{\n                  delay: 0.5,\n                  duration: 0.6,\n                  ease: [0.22, 1, 0.36, 1],\n                }}\n              >\n                <AnimatePresence mode=\"wait\">\n                  {isCompleted ? (\n                    <motion.span\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -10 }}\n                      initial={{ opacity: 0, y: 10 }}\n                      key=\"completed-rate\"\n                      transition={{\n                        duration: 0.4,\n                        ease: [0.22, 1, 0.36, 1],\n                      }}\n                    >\n                      Exchange Rate: 1 USD = 0.92 EUR\n                    </motion.span>\n                  ) : (\n                    <motion.span\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -10 }}\n                      initial={{ opacity: 0, y: 10 }}\n                      key=\"calculating-rate\"\n                      transition={{\n                        duration: 0.4,\n                        ease: [0.22, 1, 0.36, 1],\n                      }}\n                    >\n                      Calculating exchange rate...\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n                <Tooltip>\n                  <TooltipTrigger>\n                    <InfoIcon className=\"h-3 w-3 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-300\" />\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    <p className=\"text-xs\">\n                      {isCompleted\n                        ? \"Rate updated at 10:45 AM\"\n                        : \"Please wait...\"}\n                    </p>\n                  </TooltipContent>\n                </Tooltip>\n              </motion.div>\n            </motion.div>\n          </div>\n        </CardContent>\n      </Card>\n    </TooltipProvider>\n  );\n}\n",
      "path": "/components/kokonutui/currency-transfer.tsx",
      "target": "components/kokonutui/currency-transfer.tsx"
    }
  ]
}