{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "accordion-faq-group",
  "type": "registry:ui",
  "title": "Kinetic Spring Accordion",
  "description": "Smooth physics-driven accordion stack with morphing plus/minus indicator, aria-expanded accessibility, and height interpolation.",
  "category": "layout",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/layout/accordion-faq-group/accordion-faq-group.tsx",
      "type": "registry:ui",
      "target": "components/ui/accordion-faq-group.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Plus } from '@phosphor-icons/react';\n\nconst ITEMS = [\n  {\n    id: '1',\n    q: 'How does Cooki UI achieve zero-backend delivery?',\n    a: 'Components are compiled directly into static JSON registry artifacts deployed over Vercel Edge CDN without requiring database lookups.'\n  },\n  {\n    id: '2',\n    q: 'Can components be installed via shadcn CLI?',\n    a: 'Yes, every component complies with the official shadcn registry schema endpoint at https://www.cooki-ui.design/r/{slug}.json.'\n  },\n  {\n    id: '3',\n    q: 'Are these components compatible with React 19 and Next.js 15?',\n    a: 'Fully verified with modern React 19 Server Components and Tailwind CSS v4 styling.'\n  }\n];\n\nexport const AccordionFaqGroup: React.FC = () => {\n  const [openId, setOpenId] = useState<string | null>('1');\n\n  return (\n    <div className=\"w-full max-w-md mx-auto space-y-2.5\">\n      {ITEMS.map((item) => {\n        const isOpen = openId === item.id;\n        return (\n          <div\n            key={item.id}\n            className=\"rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-900/80 overflow-hidden backdrop-blur-md transition-colors\"\n          >\n            <button\n              onClick={() => setOpenId(isOpen ? null : item.id)}\n              className=\"w-full flex items-center justify-between p-4 text-left font-sans text-xs sm:text-sm font-semibold text-zinc-900 dark:text-zinc-100 cursor-pointer\"\n            >\n              <span>{item.q}</span>\n              <motion.div\n                animate={{ rotate: isOpen ? 45 : 0 }}\n                transition={{ duration: 0.2 }}\n                className=\"text-zinc-400 shrink-0 ml-2\"\n              >\n                <Plus size={14} weight=\"bold\" />\n              </motion.div>\n            </button>\n\n            <AnimatePresence>\n              {isOpen && (\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.25, ease: 'easeInOut' }}\n                  className=\"overflow-hidden\"\n                >\n                  <p className=\"px-4 pb-4 text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed font-sans border-t border-zinc-100 dark:border-white/5 pt-2\">\n                    {item.a}\n                  </p>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"
    }
  ]
}