{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-card",
  "type": "registry:ui",
  "title": "Flip Card",
  "description": "The FlipCard component creates an elegant, Apple-inspired interactive card that flips to reveal additional content. It features smooth animations, subtle gradients, and a clean design that's perfect for showcasing key information or features.",
  "author": "Michael (https://github.com/lappemic)",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/demo/card/flip-card.tsx",
      "content": "\"use client\";\nimport React, { useRef, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FlipCardProps {\n  frontContent: {\n    title: string;\n    subtitle?: string;\n  };\n  backContent: {\n    title: string;\n    description: string;\n  };\n  width?: string;\n  height?: string;\n  flipDirection?: \"horizontal\" | \"vertical\";\n  triggerMode?: \"hover\" | \"click\";\n}\n\nconst FlipCard: React.FC<FlipCardProps> = ({\n  frontContent,\n  backContent,\n  width = \"300px\",\n  height = \"200px\",\n  flipDirection = \"horizontal\",\n  triggerMode = \"hover\",\n}) => {\n  const [isFlipped, setIsFlipped] = useState(false);\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const toggleFlip = () => {\n    if (triggerMode === \"click\") {\n      setIsFlipped(!isFlipped);\n    }\n  };\n\n  const rotateValue =\n    flipDirection === \"horizontal\" ? \"rotateY(180deg)\" : \"rotateX(180deg)\";\n\n  const cardStyle = {\n    width,\n    height,\n    perspective: \"1000px\",\n  };\n\n  const faceClassNames = cn(\n    \"absolute flex h-full w-full flex-col items-center justify-center p-6\",\n    \"rounded-2xl border border-gray-200 shadow-lg backface-hidden\",\n    \"overflow-hidden dark:border-gray-700\",\n  );\n\n  return (\n    <div\n      ref={cardRef}\n      style={cardStyle}\n      onMouseEnter={() => {\n        if (triggerMode === \"hover\") setIsFlipped(true);\n      }}\n      onMouseLeave={() => {\n        if (triggerMode === \"hover\") setIsFlipped(false);\n      }}\n      onClick={toggleFlip}\n      className=\"relative cursor-pointer rounded-2xl\"\n    >\n      <motion.div\n        className=\"relative h-full w-full rounded-2xl\"\n        style={{ transformStyle: \"preserve-3d\" }}\n        animate={{ transform: isFlipped ? rotateValue : \"none\" }}\n        transition={{ duration: 0.6, ease: [0.23, 1, 0.32, 1] }}\n      >\n        <div\n          className={cn(\n            faceClassNames,\n            \"bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900\",\n          )}\n        >\n          <h3 className=\"mb-2 text-2xl font-semibold text-gray-800 dark:text-white\">\n            {frontContent.title}\n          </h3>\n          {frontContent.subtitle && (\n            <p className=\"text-sm text-gray-600 dark:text-gray-300\">\n              {frontContent.subtitle}\n            </p>\n          )}\n          <ArrowRight className=\"absolute right-4 bottom-4 h-6 w-6 text-gray-400 dark:text-gray-500\" />\n        </div>\n        <div\n          className={cn(\n            faceClassNames,\n            \"bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800\",\n          )}\n          style={{ transform: rotateValue, backfaceVisibility: \"hidden\" }}\n        >\n          <h3 className=\"mb-3 text-xl font-semibold text-gray-800 dark:text-white\">\n            {backContent.title}\n          </h3>\n          <p className=\"text-center text-sm text-gray-600 dark:text-gray-300\">\n            {backContent.description}\n          </p>\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n\nexport default FlipCard;\n",
      "type": "registry:ui",
      "target": "components/ui/flip-card.tsx"
    }
  ]
}