{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-cue",
  "type": "registry:component",
  "title": "Card Cue",
  "description": "Interactive micro-interaction component.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/watermelon/card-cue.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useRef, useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { ChevronLeft, X } from 'lucide-react';\n\nexport default function CardCue() {\n  const [cardNumber, setCardNumber] = useState('');\n  const [expiration, setExpiration] = useState('');\n  const [cvv, setCvv] = useState('');\n  const [isErrorAnimation, setIsErrorAnimation] = useState(false);\n  const [cardNumberFocused, setCardNumberFocused] = useState(false);\n\n  const cardNumberRef = useRef<HTMLInputElement>(null);\n\n  const handleAddCard = () => {\n    if (!cardNumber.trim()) {\n      setIsErrorAnimation(true);\n      setCardNumberFocused(true);\n      cardNumberRef.current?.focus();\n      setTimeout(() => setIsErrorAnimation(false), 200);\n    } else {\n      console.log('Card added', { cardNumber, expiration, cvv });\n    }\n  };\n\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center \">\n      <div className=\"mx-auto flex w-full max-w-sm flex-col gap-6 rounded-3xl bg-white p-6 dark:bg-zinc-950/50 border border-border\">\n        <div className=\"flex items-center justify-between\">\n          <button className=\"flex h-10 w-10 items-center justify-center rounded-full bg-zinc-100 text-zinc-600 transition-colors hover:bg-zinc-200 focus:outline-none dark:bg-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800\">\n            <ChevronLeft className=\"h-5 w-5\" />\n          </button>\n          <h2 className=\"text-lg font-semibold text-zinc-900 dark:text-zinc-100\">\n            Add Card\n          </h2>\n          <button className=\"flex h-10 w-10 items-center justify-center rounded-full bg-zinc-100 text-zinc-600 transition-colors hover:bg-zinc-200 focus:outline-none dark:bg-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800\">\n            <X className=\"h-5 w-5\" />\n          </button>\n        </div>\n\n        <div className=\"flex flex-col gap-4\">\n          <motion.div\n            animate={\n              isErrorAnimation\n                ? {\n                    scale: 1.1,\n                  }\n                : { scale: 1 }\n            }\n            transition={{ type: 'spring', bounce: 0.1, duration: 0.4 }}\n            className=\"rounded-2xl\"\n          >\n            <input\n              ref={cardNumberRef}\n              type=\"text\"\n              placeholder=\"Card Number\"\n              value={cardNumber}\n              onChange={(e) => setCardNumber(e.target.value)}\n              onFocus={() => setCardNumberFocused(true)}\n              onBlur={() => setCardNumberFocused(false)}\n              className={`h-14 w-full rounded-2xl bg-zinc-100 px-4 text-base text-zinc-900 ring-3 transition-all outline-none placeholder:text-zinc-400 focus:bg-white dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-950 ${\n                cardNumberFocused\n                  ? 'ring-zinc-900 dark:ring-zinc-100'\n                  : 'ring-transparent'\n              }`}\n            />\n          </motion.div>\n\n          <div className=\"flex gap-4\">\n            <input\n              type=\"text\"\n              placeholder=\"Expiration\"\n              value={expiration}\n              onChange={(e) => setExpiration(e.target.value)}\n              className=\"h-14 w-full rounded-2xl bg-zinc-100 px-4 text-base text-zinc-900 ring-3 ring-transparent transition-all outline-none placeholder:text-zinc-400 focus:bg-white focus:ring-zinc-900 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-950 dark:focus:ring-zinc-100\"\n            />\n            <input\n              type=\"text\"\n              placeholder=\"CVV\"\n              value={cvv}\n              onChange={(e) => setCvv(e.target.value)}\n              className=\"h-14 w-full rounded-2xl bg-zinc-100 px-4 text-base text-zinc-900 ring-3 ring-transparent transition-all outline-none placeholder:text-zinc-400 focus:bg-white focus:ring-zinc-900 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-950 dark:focus:ring-zinc-100\"\n            />\n          </div>\n        </div>\n\n        <motion.button\n          whileTap={{ scale: 0.97 }}\n          onClick={handleAddCard}\n          className=\"mt-2 w-full rounded-2xl bg-zinc-900 py-4 text-base font-medium text-white transition-colors hover:bg-zinc-800 focus:outline-none dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\"\n        >\n          Add Card\n        </motion.button>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}