{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "minimal-carousel",
  "type": "registry:component",
  "title": "Minimal Carousel",
  "description": "Interactive wallet interface with expandable cards featuring smooth layout animations and micro-interactions.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/minimal-carousel.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { MoreHorizontal, Copy } from \"lucide-react\";\n\n/* --- Types --- */\nexport interface CarouselCard {\n  id: string;\n  title: string;\n  value: string;\n  color: string;\n  icon: React.ElementType;\n}\n\ninterface MinimalCarouselProps {\n  cards: CarouselCard[];\n  onCopyClick?: (card: CarouselCard) => void;\n  onCustomizeClick?: (card: CarouselCard) => void;\n}\n\nexport const MinimalCarousel: React.FC<MinimalCarouselProps> = ({\n  cards,\n  onCopyClick,\n  onCustomizeClick,\n}) => {\n  const [activeId, setActiveId] = useState<string | null>(null);\n\n  const activeCard = cards.find((c) => c.id === activeId);\n  const secondaryCards = cards.filter((c) => c.id !== activeId);\n\n  const handleBackgroundClick = (e: React.MouseEvent) => {\n    if (e.target === e.currentTarget) setActiveId(null);\n  };\n\n  return (\n    <div className=\"min-h-full w-full flex items-center justify-center bg-transparent\">\n      <div\n        className=\"w-full flex flex-col items-center justify-center px-3 sm:px-4 select-none font-sans\"\n        onClick={handleBackgroundClick}\n      >\n        {/* Container  */}\n        <div className=\"w-full max-w-105\">\n          <motion.div layout className=\"flex flex-col gap-3\">\n\n            {/* Expanded Card */}\n            <AnimatePresence mode=\"popLayout\">\n              {activeCard && (\n                <motion.div\n                  key={activeCard.id}\n                  layoutId={activeCard.id}\n                  className={`relative flex w-full flex-col justify-between\n                             rounded-[28px] sm:rounded-[32px] p-4 sm:p-5 text-white shadow-2xl\n                             ${activeCard.color}\n                             min-h-42.5 sm:h-48`}\n                  transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n                >\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"flex h-10 w-10 sm:h-11 sm:w-11 items-center justify-center rounded-full shrink-0\">\n                      <activeCard.icon size={38} className=\"sm:w-11 sm:h-11\" />\n                    </div>\n\n                    <motion.button\n                      initial={{ opacity: 0, scale: 0.8 }}\n                      animate={{ opacity: 1, scale: 1 }}\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onCopyClick?.(activeCard);\n                      }}\n                      className=\"flex items-center gap-1.5 rounded-full bg-white/10\n                                 px-3 py-1.5 sm:px-4 sm:py-2 font-bold backdrop-blur-md \n                                 text-xs sm:text-base whitespace-nowrap\n                                 hover:bg-white/20 transition-colors\"\n                    >\n                      Copy <span className=\"hidden xs:inline\">Address</span> <Copy size={16} />\n                    </motion.button>\n                  </div>\n\n                  <div className=\"flex items-end justify-between mt-4\">\n                    <div className=\"overflow-hidden mr-2\">\n                      <h3 className=\"text-xl sm:text-2xl font-semibold opacity-90 leading-tight truncate\">\n                        {activeCard.title}\n                      </h3>\n                      <p className=\"text-lg sm:text-xl font-semibold tracking-tight opacity-60 truncate\">\n                        {activeCard.value}\n                      </p>\n                    </div>\n\n                    <button\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onCustomizeClick?.(activeCard);\n                      }}\n                      className=\"rounded-full bg-white/30 px-3 py-1 sm:px-4 sm:py-1.5\n                                 text-sm sm:text-base font-bold backdrop-blur-md \n                                 hover:bg-white/40 transition-colors shrink-0\"\n                    >\n                      Edit\n                    </button>\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n\n            {/* Grid Layout */}\n            <motion.div\n              layout\n              className={`grid gap-2 sm:gap-3 transition-all duration-500 ${activeId ? \"grid-cols-3\" : \"grid-cols-2\"\n                }`}\n            >\n              {(activeId ? secondaryCards : cards).map((card) => (\n                <motion.div\n                  key={card.id}\n                  layoutId={card.id}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    setActiveId(card.id);\n                  }}\n                  transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n                  className={`relative flex flex-col justify-between cursor-pointer\n                             rounded-[22px] sm:rounded-[28px] p-3 sm:p-4 text-white shadow-lg\n                             ${card.color}\n                             ${activeId ? \"h-24 sm:h-28\" : \"h-28 sm:h-32\"}`}\n                >\n                  <div className=\"flex justify-between items-start\">\n                    <card.icon size={activeId ? 20 : 28} className=\"shrink-0\" />\n                    <div className=\"rounded-full bg-white/10 p-1 sm:p-1.5 transition-colors\">\n                      <MoreHorizontal size={16} />\n                    </div>\n                  </div>\n\n                  <div className=\"mt-1 overflow-hidden\">\n                    <h4 className={`${activeId ? \"text-[10px] sm:text-xs\" : \"text-sm sm:text-base\"} \n                                   font-medium opacity-90 truncate leading-tight`}>\n                      {card.title}\n                    </h4>\n                    <p className={`${activeId ? \"text-[10px] sm:text-xs\" : \"text-sm sm:text-base\"} \n                                   font-semibold text-white/60 truncate`}>\n                      {card.value}\n                    </p>\n                  </div>\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n      </div>\n    </div>\n  );\n};"
    }
  ]
}