{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transfer-funds-card",
  "title": "Transfer Funds Card",
  "description": "A money transfer form card with account pickers, a summary and a confirm action.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "app/registry/transfer-funds-card/transfer-funds-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport { ChevronsUpDown, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface TransferSummaryRow {\n  label: string;\n  value: string;\n  emphasized?: boolean;\n}\n\nexport interface TransferFundsCardProps {\n  title?: string;\n  description?: string;\n  amountLabel?: string;\n  currencySymbol?: string;\n  amount?: string;\n  fromLabel?: string;\n  fromAccount?: string;\n  toLabel?: string;\n  toAccount?: string;\n  summary?: TransferSummaryRow[];\n  buttonLabel?: string;\n  onConfirm?: () => void;\n  onClose?: () => void;\n  className?: string;\n}\n\nconst DEFAULT_SUMMARY: TransferSummaryRow[] = [\n  { label: \"Estimated arrival\", value: \"Today, Apr 14\" },\n  { label: \"Transaction fee\", value: \"$0.00\" },\n  { label: \"Total amount\", value: \"$1,200.00\", emphasized: true },\n];\n\nfunction SelectField({ value }: { value: string }) {\n  return (\n    <motion.div\n      whileHover=\"hover\"\n      whileTap={{ scale: 0.99 }}\n      className=\"mt-3 flex h-9 cursor-pointer items-center justify-between rounded-[22px] bg-neutral-200/50 pl-3 pr-3 transition-colors hover:bg-neutral-200/70 dark:bg-neutral-800/50 dark:hover:bg-neutral-800/70\"\n    >\n      <span className=\"truncate text-sm leading-5 text-foreground\">\n        {value}\n      </span>\n      <motion.span\n        variants={{\n          hover: { y: [0, -2, 2, 0], transition: { duration: 0.4 } },\n        }}\n        className=\"flex shrink-0\"\n      >\n        <ChevronsUpDown className=\"h-4 w-4 text-muted-foreground\" />\n      </motion.span>\n    </motion.div>\n  );\n}\n\nexport function TransferFundsCard({\n  title = \"Transfer Funds\",\n  description = \"Move money between your connected accounts.\",\n  amountLabel = \"Amount to Transfer\",\n  currencySymbol = \"$\",\n  amount = \"1,200.00\",\n  fromLabel = \"From Account\",\n  fromAccount = \"Main Checking (··8402) — $12,450.00\",\n  toLabel = \"To Account\",\n  toAccount = \"High Yield Savings (··1192) — $42,100.00\",\n  summary = DEFAULT_SUMMARY,\n  buttonLabel = \"Confirm Transfer\",\n  onConfirm,\n  onClose,\n  className,\n}: TransferFundsCardProps) {\n  return (\n    <div\n      className={cn(\n        \"relative w-full rounded-[26px] bg-white p-6 font-inter\",\n        \"shadow-[0_0_0_1px_rgba(10,10,10,0.05),0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\",\n        \"dark:bg-neutral-950 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.12),0_4px_6px_-1px_rgba(0,0,0,0.5)]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <h3 className=\"text-[16px] font-medium leading-6 text-foreground\">\n          {title}\n        </h3>\n        <motion.button\n          type=\"button\"\n          onClick={onClose}\n          whileTap={{ scale: 0.88 }}\n          aria-label=\"Close\"\n          className=\"flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full bg-neutral-100 text-foreground transition-colors hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800\"\n        >\n          <motion.span\n            whileHover={{ rotate: 90 }}\n            transition={{ type: \"spring\", bounce: 0.4, duration: 0.4 }}\n            className=\"flex\"\n          >\n            <X className=\"h-4 w-4\" />\n          </motion.span>\n        </motion.button>\n      </div>\n      <p className=\"mt-1.5 max-w-[254px] text-sm leading-5 text-muted-foreground\">\n        {description}\n      </p>\n\n      {/* Amount */}\n      <div className=\"mt-6\">\n        <label className=\"text-sm font-medium leading-[14px] text-foreground\">\n          {amountLabel}\n        </label>\n        <div className=\"mt-3 flex h-9 items-center gap-1.5 rounded-[26px] bg-neutral-200/50 px-3 transition-colors hover:bg-neutral-200/70 dark:bg-neutral-800/50 dark:hover:bg-neutral-800/70\">\n          <span className=\"text-sm font-medium leading-5 text-muted-foreground\">\n            {currencySymbol}\n          </span>\n          <span className=\"text-sm text-foreground\">{amount}</span>\n        </div>\n      </div>\n\n      {/* From */}\n      <div className=\"mt-7\">\n        <label className=\"text-sm font-medium leading-[14px] text-foreground\">\n          {fromLabel}\n        </label>\n        <SelectField value={fromAccount} />\n      </div>\n\n      {/* To */}\n      <div className=\"mt-7\">\n        <label className=\"text-sm font-medium leading-[14px] text-foreground\">\n          {toLabel}\n        </label>\n        <SelectField value={toAccount} />\n      </div>\n\n      {/* Summary */}\n      <div className=\"mt-7 rounded-[18px] bg-neutral-100/50 px-4 dark:bg-neutral-900/50\">\n        {summary.map((row, index) => (\n          <div\n            key={row.label}\n            className={cn(\n              \"flex h-[46px] items-center justify-between\",\n              index > 0 && \"border-t border-border\",\n            )}\n          >\n            <span\n              className={cn(\n                \"text-sm leading-5\",\n                row.emphasized\n                  ? \"font-medium text-foreground\"\n                  : \"text-muted-foreground\",\n              )}\n            >\n              {row.label}\n            </span>\n            <span\n              className={cn(\n                \"text-sm leading-5 text-foreground\",\n                row.emphasized ? \"font-semibold\" : \"font-medium\",\n              )}\n            >\n              {row.value}\n            </span>\n          </div>\n        ))}\n      </div>\n\n      {/* Confirm */}\n      <motion.button\n        type=\"button\"\n        onClick={onConfirm}\n        whileHover={{ scale: 1.015 }}\n        whileTap={{ scale: 0.97 }}\n        transition={{ type: \"spring\", bounce: 0.4, duration: 0.35 }}\n        className=\"mt-[25px] flex h-[34px] w-full items-center justify-center rounded-[26px] bg-black text-sm font-medium leading-5 text-[#eff6ff] transition-colors hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200\"\n      >\n        {buttonLabel}\n      </motion.button>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/transfer-funds-card.tsx"
    }
  ],
  "type": "registry:component"
}