{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "add-cash-disclosure",
  "type": "registry:component",
  "title": "Add Cash Disclosure",
  "description": "Disclosure panel explaining add-cash details, limits, fees, and confirmation.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/add-cash-disclosure.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { Plus, X, Wallet, Check } from 'lucide-react';\nimport { MdOutlineAddCard } from 'react-icons/md';\n\nexport interface PaymentCard {\n  id: string;\n  last4: string;\n  brand: 'VISA' | 'MASTERCARD';\n  isDefault?: boolean;\n  hasToggle?: boolean;\n}\n\nexport interface CashDisclosureProps {\n  initialBalance: number;\n  cards: PaymentCard[];\n  presets: number[];\n  onConfirm: (amount: number) => Promise<void>;\n}\n\nexport const AddCashDisclosure: React.FC<CashDisclosureProps> = ({\n  initialBalance,\n  cards,\n  presets,\n  onConfirm,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedCard, setSelectedCard] = useState<string>(cards[0]?.id || '');\n  const [selectedAmount, setSelectedAmount] = useState<number>(presets[1]);\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [isDone, setIsDone] = useState(false);\n  const [displayBalance, setDisplayBalance] = useState(initialBalance);\n\n  useEffect(() => {\n    if (!isProcessing && !isDone) {\n      setTimeout(() => setDisplayBalance(initialBalance), 0);\n    }\n  }, [initialBalance, isProcessing, isDone]);\n\n  const handleOpen = () => setIsOpen(true);\n  const handleClose = () => {\n    setIsOpen(false);\n    setIsProcessing(false);\n    setIsDone(false);\n  };\n\n  const handleConfirm = async () => {\n    setIsProcessing(true);\n    await onConfirm(selectedAmount);\n    setIsDone(true);\n    setTimeout(() => handleClose(), 1500);\n  };\n\n  const formatCurrency = (val: number) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n    }).format(val);\n  };\n\n  return (\n    <div className=\"flex min-h-full w-full flex-col items-center justify-center bg-transparent p-2 transition-colors duration-500 sm:p-4\">\n      <MotionConfig transition={{ type: 'spring', bounce: 0, duration: 0.6 }}>\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {!isOpen ? (\n            <motion.div\n              key=\"collapsed\"\n              layoutId=\"add-cash-disclosure\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{\n                opacity: { duration: 0.3 },\n              }}\n              style={{\n                borderRadius: 24,\n              }}\n              className=\"flex w-xs sm:w-sm items-center justify-between gap-4 sm:gap-10 border border-[#ECECEC] bg-white p-3 dark:border-white/5 dark:bg-[#1C1C1E] overflow-hidden\"\n            >\n              <div className=\"flex items-center gap-2 sm:gap-3\">\n                <motion.div\n                  layoutId=\"wallet-icon\"\n                  className=\"flex h-10 w-10 items-center justify-center rounded-xl border-[1.5px] border-[#ECECEC] bg-linear-to-b from-[#F4F4F4] to-[#E2E3EA]/50 shadow-sm transition-colors sm:h-14 sm:w-14 dark:border-white/10 dark:from-[#2A2A2D] dark:to-[#1C1C1E]\"\n                >\n                  <Wallet\n                    className=\"h-5 w-5 text-[#D1D0D7] sm:h-8 sm:w-8 dark:text-[#4A4A4D]\"\n                    fill=\"currentColor\"\n                    strokeWidth={1.5}\n                  />\n                </motion.div>\n                <div className=\"flex flex-col\">\n                  <motion.span\n                    layoutId=\"wallet-name\"\n                    className=\"text-[10px] font-normal tracking-wider text-gray-400 capitalize sm:text-xs\"\n                  >\n                    Wallet\n                  </motion.span>\n                  <motion.span\n                    layoutId=\"wallet-balance\"\n                    className=\"font-sans text-base font-semibold text-[#010103] sm:text-xl dark:text-white\"\n                  >\n                    {formatCurrency(displayBalance)}\n                  </motion.span>\n                </div>\n              </div>\n              <motion.button\n                layoutId=\"add-cash-button\"\n                onClick={handleOpen}\n                className=\"flex items-center gap-1 rounded-full bg-[#262629] px-3 py-2 text-xs font-semibold text-[#fefefe] transition-colors hover:bg-[#3d3d42] sm:px-4 sm:text-sm dark:bg-white dark:text-black dark:hover:bg-gray-200\"\n              >\n                <Plus className=\"h-3 w-3 sm:h-4 sm:w-4\" strokeWidth={3} />\n                Add Cash\n              </motion.button>\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"expanded\"\n              layoutId=\"add-cash-disclosure\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{\n                opacity: { duration: 0.3 },\n              }}\n              className=\"flex w-xs sm:w-sm flex-col border border-[#ECECEC] bg-white py-3 dark:border-white/5 dark:bg-[#1C1C1E] overflow-hidden\"\n              style={{\n                borderRadius: 24,\n              }}\n            >\n              <motion.div layout>\n                <div className=\"flex items-center justify-between gap-2 px-4\">\n                  <div className=\"flex items-center gap-2\">\n                    <motion.div\n                      layoutId=\"wallet-icon\"\n                      className=\"flex h-10 w-10 items-center justify-center rounded-xl border-[1.5px] border-[#ECECEC] bg-linear-to-b from-[#F4F4F4] to-[#E2E3EA]/50 shadow-sm sm:h-12 sm:w-12 dark:border-white/10 dark:from-[#2A2A2D] dark:to-[#1C1C1E]\"\n                    >\n                      <Wallet\n                        className=\"h-5 w-5 text-[#D1D0D7] sm:h-7 sm:w-7 dark:text-[#4A4A4D]\"\n                        fill=\"currentColor\"\n                        strokeWidth={1.5}\n                      />\n                    </motion.div>\n                    <div className=\"flex flex-col\">\n                      <motion.span\n                        layoutId=\"wallet-name\"\n                        className=\"text-[9px] font-medium text-[#9C9BA2] sm:text-[10px]\"\n                      >\n                        Wallet\n                      </motion.span>\n                      <motion.span\n                        layoutId=\"wallet-balance\"\n                        className=\"text-sm font-semibold text-[#010101] sm:text-base dark:text-white\"\n                      >\n                        {formatCurrency(displayBalance)}\n                      </motion.span>\n                    </div>\n                  </div>\n                  <button\n                    title=\"close\"\n                    onClick={handleClose}\n                    className=\"flex h-7 w-7 items-center justify-center rounded-full bg-[#F0EFF8] text-[#ACABB7] transition-colors hover:text-[#a09fab] sm:h-8 sm:w-8 dark:bg-white/10 dark:text-gray-400 dark:hover:text-white\"\n                  >\n                    <X className=\"h-4 w-4 sm:h-5 sm:w-5\" strokeWidth={3} />\n                  </button>\n                </div>\n\n                <div className=\"mt-4 h-px w-full bg-[#ECECEC] dark:bg-white/5\" />\n\n                <div className=\"mt-5 flex flex-col gap-2 px-4\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-xs font-medium text-[#848488] sm:text-sm\">\n                      Payment Mode\n                    </span>\n                    <button className=\"flex items-center gap-1 rounded-2xl border-[1.5px] border-[#E8E8EE] bg-gray-50 px-2.5 py-1 text-[10px] font-semibold text-[#000000] transition-colors hover:bg-gray-100 sm:text-xs dark:border-white/10 dark:bg-white/5 dark:text-white\">\n                      <MdOutlineAddCard className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n                      Add Card\n                    </button>\n                  </div>\n\n                  <div className=\"space-y-2\">\n                    {cards.map((card) => {\n                      const isSelected = selectedCard === card.id;\n                      return (\n                        <div\n                          key={card.id}\n                          onClick={() => setSelectedCard(card.id)}\n                          className={`flex cursor-pointer items-center justify-between rounded-xl border-[1.5px] p-3 transition-all sm:p-4 ${isSelected\n                              ? 'border-[#010103] ring-1 ring-[#010103] dark:border-white dark:bg-white/5 dark:ring-white'\n                              : 'border-[#ECECEC] bg-[#F6F5FA] hover:border-gray-300 dark:border-white/5 dark:bg-white/2 dark:hover:border-white/20'\n                            }`}\n                        >\n                          <div className=\"flex items-center gap-2 sm:gap-3\">\n                            <div\n                              className={`flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors sm:h-5 sm:w-5 ${isSelected\n                                  ? 'border-[#010103] dark:border-white'\n                                  : 'border-[#ECECEC] dark:border-white/10'\n                                }`}\n                            >\n                              {isSelected && (\n                                <div className=\"h-2 w-2 rounded-full bg-[#010103] sm:h-2.5 sm:w-2.5 dark:bg-white\" />\n                              )}\n                            </div>\n                            <span className=\"text-xs font-medium text-gray-900 sm:text-sm dark:text-gray-200\">\n                              <span className=\"mr-1 tracking-tighter text-[#000000] dark:text-gray-500\">\n                                ••••\n                              </span>\n                              {card.last4}\n                            </span>\n                          </div>\n                          <span className=\"text-[9px] font-extrabold text-[#000000] italic sm:text-[10px] dark:text-gray-400\">\n                            {card.brand}\n                          </span>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n                <div className=\"my-4 flex flex-col gap-2 px-4\">\n                  <span className=\"text-xs font-medium text-[#808083] sm:text-sm\">\n                    Amount\n                  </span>\n                  <div className=\"flex gap-2\">\n                    {presets.map((amount) => {\n                      const isSelected = selectedAmount === amount;\n                      return (\n                        <button\n                          key={amount}\n                          onClick={() => setSelectedAmount(amount)}\n                          className={`flex-1 rounded-lg border-[1.5px] py-2 text-[11px] font-semibold transition-all sm:text-sm ${isSelected\n                              ? 'border-[#000000] bg-[#fefefe] text-[#000000] ring-1 ring-[#000000] dark:border-white dark:bg-white dark:text-black'\n                              : 'border-[#ECECEC] bg-[#F6F5FA] text-[#000000] hover:border-[#dedbdb] dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:border-white/20'\n                            }`}\n                        >\n                          ${amount}\n                        </button>\n                      );\n                    })}\n                  </div>\n                </div>\n                <div className=\"mt-1 px-4\">\n                  <motion.button\n                    layoutId=\"add-cash-button\"\n                    onClick={handleConfirm}\n                    disabled={isProcessing || isDone}\n                    className={`relative flex h-10 w-full items-center justify-start overflow-hidden rounded-full bg-neutral-900 px-6 font-semibold text-neutral-100 transition-colors sm:w-fit sm:min-w-35 dark:bg-white dark:text-black`}\n                  >\n                    <AnimatePresence mode=\"popLayout\" initial={false}>\n                      {isDone ? (\n                        <motion.div\n                          key=\"done\"\n                          initial={{ scale: 0.8, opacity: 0 }}\n                          animate={{ scale: 1, opacity: 1 }}\n                          className=\"mx-auto flex items-center justify-center gap-2\"\n                        >\n                          <div className=\"flex items-center justify-center rounded-full bg-white p-1 dark:bg-black\">\n                            <Check\n                              className=\"size-3 text-[#262629] dark:text-white\"\n                              strokeWidth={4}\n                            />\n                          </div>\n                          <span className=\"text-sm\">Done</span>\n                        </motion.div>\n                      ) : isProcessing ? (\n                        <motion.div\n                          key=\"processing\"\n                          className=\"absolute inset-0 flex items-center bg-[#AFAEB8] dark:bg-neutral-800\"\n                        >\n                          <motion.div\n                            className=\"h-full bg-[#FEFEFE] dark:bg-white\"\n                            initial={{ width: '0%' }}\n                            animate={{ width: '100%' }}\n                            transition={{ duration: 1.5, ease: 'easeInOut' }}\n                          />\n                        </motion.div>\n                      ) : (\n                        <motion.div\n                          key=\"idle\"\n                          initial={{ opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          className=\"flex items-center gap-2\"\n                        >\n                          <Plus className=\"h-4 w-4\" strokeWidth={3} />\n                          <span className=\"text-sm\">Add Cash</span>\n                        </motion.div>\n                      )}\n                    </AnimatePresence>\n                  </motion.button>\n                </div>\n              </motion.div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </MotionConfig>\n    </div>\n  );\n};\n"
    }
  ]
}