{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "smart-hover-card-shadcnui",
  "type": "registry:component",
  "title": "Smart Hover Card",
  "description": "Card that detects cursor direction and reveals content from that side",
  "registryDependencies": [
    "button",
    "card"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/smart-hover-card.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { MouseEvent, useRef, useState } from \"react\";\n\ntype Direction = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ntype SmartHoverCardProps = {\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n};\n\nexport function SmartHoverCard({\n  title = \"Smart Hover Card\",\n  description = \"Hover from different directions to see content reveal\",\n  children,\n}: SmartHoverCardProps) {\n  const [direction, setDirection] = useState<Direction>(\"top\");\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleMouseEnter = (e: MouseEvent<HTMLDivElement>) => {\n    if (!cardRef.current) return;\n\n    const rect = cardRef.current.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const mouseX = e.clientX;\n    const mouseY = e.clientY;\n\n    const deltaX = mouseX - centerX;\n    const deltaY = mouseY - centerY;\n\n    if (Math.abs(deltaX) > Math.abs(deltaY)) {\n      setDirection(deltaX > 0 ? \"right\" : \"left\");\n    } else {\n      setDirection(deltaY > 0 ? \"bottom\" : \"top\");\n    }\n  };\n\n  const cardVariants = {\n    top: {\n      clipPath: \"inset(0% 0% 50% 0%)\",\n      y: -20,\n      opacity: 0,\n    },\n    bottom: {\n      clipPath: \"inset(50% 0% 0% 0%)\",\n      y: 20,\n      opacity: 0,\n    },\n    left: {\n      clipPath: \"inset(0% 50% 0% 0%)\",\n      x: -20,\n      opacity: 0,\n    },\n    right: {\n      clipPath: \"inset(0% 0% 0% 50%)\",\n      x: 20,\n      opacity: 0,\n    },\n  };\n\n  const revealVariants = {\n    top: { clipPath: \"inset(0% 0% 0% 0%)\", y: 0, opacity: 1 },\n    bottom: { clipPath: \"inset(0% 0% 0% 0%)\", y: 0, opacity: 1 },\n    left: { clipPath: \"inset(0% 0% 0% 0%)\", x: 0, opacity: 1 },\n    right: { clipPath: \"inset(0% 0% 0% 0%)\", x: 0, opacity: 1 },\n  };\n\n  return (\n    <div\n      ref={cardRef}\n      onMouseEnter={handleMouseEnter}\n      className=\"group relative h-64 w-full max-w-md overflow-hidden rounded-2xl border border-border bg-card\"\n    >\n      <div className=\"absolute inset-0 flex items-center justify-center p-6\">\n        <div>\n          <h3 className=\"mb-2 text-lg font-semibold\">{title}</h3>\n          <p className=\"text-sm text-muted-foreground\">{description}</p>\n        </div>\n      </div>\n\n      <motion.div\n        initial={cardVariants[direction]}\n        whileHover={revealVariants[direction]}\n        transition={{ type: \"spring\", stiffness: 300, damping: 25 }}\n        className=\"absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-primary/20 to-primary/5 p-6 backdrop-blur-sm\"\n      >\n        {children || (\n          <div className=\"text-center\">\n            <div className=\"mb-3 text-4xl\">✨</div>\n            <p className=\"text-sm font-medium\">Revealed Content</p>\n            <p className=\"mt-1 text-xs text-muted-foreground\">\n              Direction: {direction}\n            </p>\n          </div>\n        )}\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/smart-hover-card-shadcnui.tsx"
    }
  ]
}