{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-accordion-shadcnui",
  "type": "registry:component",
  "title": "Animated Accordion",
  "description": "Accordion with smooth expand/collapse and rotate arrow",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/disclosure/animated-accordion.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst items = [\n  {\n    title: \"What is your return policy?\",\n    content:\n      \"We offer a 30-day money-back guarantee on all our products. If you're not satisfied, contact our support team for a full refund.\",\n  },\n  {\n    title: \"How long does shipping take?\",\n    content:\n      \"Standard shipping takes 5-7 business days. Express shipping is available for 2-3 day delivery.\",\n  },\n  {\n    title: \"Do you ship internationally?\",\n    content:\n      \"Yes, we ship to over 50 countries worldwide. International shipping times vary by location.\",\n  },\n];\n\nexport function AnimatedAccordion() {\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n\n  return (\n    <div className=\"w-full max-w-2xl space-y-2\">\n      {items.map((item, index) => (\n        <div\n          key={index}\n          className=\"overflow-hidden rounded-xl border  bg-[var(--card-bg)]\"\n        >\n          <motion.button\n            onClick={() => setOpenIndex(openIndex === index ? null : index)}\n            className=\"flex w-full items-center justify-between p-4 text-left text-sm font-medium\"\n            whileHover={{ backgroundColor: \"rgba(var(--accent-rgb), 0.05)\" }}\n          >\n            <span>{item.title}</span>\n            <motion.div\n              animate={{ rotate: openIndex === index ? 180 : 0 }}\n              transition={{ duration: 0.3 }}\n            >\n              <ChevronDown className=\"h-5 w-5\" />\n            </motion.div>\n          </motion.button>\n\n          <AnimatePresence initial={false}>\n            {openIndex === index && (\n              <motion.div\n                initial={{ height: 0, opacity: 0 }}\n                animate={{ height: \"auto\", opacity: 1 }}\n                exit={{ height: 0, opacity: 0 }}\n                transition={{ duration: 0.3, ease: \"easeInOut\" }}\n              >\n                <div className=\"border-t  p-4 text-sm text-[var(--foreground)]/70\">\n                  {item.content}\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-accordion-shadcnui.tsx"
    }
  ]
}