{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-cards",
  "type": "registry:ui",
  "title": "Expandable Cards",
  "description": "Interactive card layout where hovered cards expand smoothly for focused content viewing.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/expandable-cards.tsx",
      "content": "'use client';\nimport { useState } from 'react';\nimport { motion, Variants } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface ExpandableCard {\n  id: number;\n  content: React.ReactNode;\n}\n\ninterface ExpandableCardsProps {\n  cards: ExpandableCard[];\n  defaultExpanded?: number;\n  className?: string;\n}\n\nexport default function ExpandableCards({\n  cards,\n  defaultExpanded = 1,\n  className,\n}: ExpandableCardsProps) {\n  const [expandedId, setExpandedId] = useState<number>(defaultExpanded);\n\n  const cardVariants: Variants = {\n    expanded: {\n      flex: 3,\n      transition: { duration: 0.5, ease: [0.4, 0.0, 0.2, 1] },\n    },\n    collapsed: {\n      flex: 1,\n      transition: { duration: 0.5, ease: [0.4, 0.0, 0.2, 1] },\n    },\n  };\n\n  return (\n    <div className={cn('flex gap-3 sm:gap-4 w-full h-full', className)}>\n      {cards.map((card) => {\n        const isExpanded = expandedId === card.id;\n\n        return (\n          <motion.div\n            key={card.id}\n            className='relative h-full overflow-hidden rounded-2xl sm:rounded-3xl cursor-pointer'\n            variants={cardVariants}\n            initial={isExpanded ? 'expanded' : 'collapsed'}\n            animate={isExpanded ? 'expanded' : 'collapsed'}\n            onMouseEnter={() => setExpandedId(card.id)}\n          >\n            <div className='absolute inset-0'>{card.content}</div>\n\n            {!isExpanded && (\n              <motion.div\n                className='absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300'\n                initial={{ opacity: 0 }}\n                whileHover={{ opacity: 1 }}\n              />\n            )}\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}