{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tooltip-shadcnui",
  "type": "registry:component",
  "title": "Animated Tooltip",
  "description": "Tooltip with delay and slide animation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/tooltips/animated-tooltip.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Info } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function AnimatedTooltip() {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      <div className=\"relative\">\n        <motion.button\n          onMouseEnter={() => setIsVisible(true)}\n          onMouseLeave={() => setIsVisible(false)}\n          className=\"flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-[var(--muted-foreground)]\"\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <Info className=\"h-4 w-4\" />\n          Hover me\n        </motion.button>\n\n        <AnimatePresence>\n          {isVisible && (\n            <motion.div\n              initial={{ opacity: 0, y: 10, scale: 0.95, x: \"-50%\" }}\n              animate={{ opacity: 1, y: 0, scale: 1, x: \"-50%\" }}\n              exit={{ opacity: 0, y: 10, scale: 0.95, x: \"-50%\" }}\n              transition={{\n                duration: 0.2,\n                delay: 0.1,\n              }}\n              className=\"absolute bottom-full left-1/2 mb-2 w-48\"\n            >\n              <div className=\"rounded-lg border  bg-[var(--card-bg)] p-3 shadow-lg\">\n                <p className=\"text-sm text-[var(--foreground)]\">\n                  This is a helpful tooltip with smooth animation and delay.\n                </p>\n              </div>\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                className=\"absolute left-1/2 top-full h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r  bg-[var(--card-bg)]\"\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-tooltip-shadcnui.tsx"
    }
  ]
}