{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-select-shadcnui",
  "type": "registry:component",
  "title": "Animated Select",
  "description": "Select dropdown with smooth open/close animation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/forms/animated-select.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst options = [\"React\", \"Vue\", \"Angular\", \"Svelte\", \"Next.js\"];\n\nexport function AnimatedSelect() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState(options[0]);\n\n  return (\n    <div className=\"relative w-full max-w-xs\">\n      <motion.button\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"flex w-full items-center justify-between rounded-lg border  bg-[var(--card-bg)] px-4 py-2 text-sm\"\n        whileHover={{ scale: 1.01 }}\n        whileTap={{ scale: 0.99 }}\n      >\n        <span>{selected}</span>\n        <motion.div animate={{ rotate: isOpen ? 180 : 0 }}>\n          <ChevronDown className=\"h-4 w-4\" />\n        </motion.div>\n      </motion.button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.2 }}\n            className=\"absolute top-full z-50 mt-2 w-full rounded-lg border  bg-[var(--card-bg)] py-2 shadow-lg\"\n          >\n            {options.map((option, index) => (\n              <motion.button\n                key={option}\n                initial={{ opacity: 0, x: -10 }}\n                animate={{ opacity: 1, x: 0 }}\n                transition={{ delay: index * 0.05 }}\n                onClick={() => {\n                  setSelected(option);\n                  setIsOpen(false);\n                }}\n                className=\"flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-accent/10\"\n                whileHover={{ x: 4 }}\n              >\n                <span>{option}</span>\n                {selected === option && (\n                  <Check className=\"h-4 w-4 text-accent\" />\n                )}\n              </motion.button>\n            ))}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-select-shadcnui.tsx"
    }
  ]
}