{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-accordion",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/faq-accordion.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FaqItem {\n  question: string;\n  answer: React.ReactNode;\n}\n\nexport interface FaqAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items?: FaqItem[];\n  title?: string;\n}\n\nconst DEFAULT_ITEMS: FaqItem[] = [\n  { question: \"What is Vengeance UI?\", answer: \"Vengeance UI is a high-performance, dark-mode first component library designed for the next generation of web applications.\" },\n  { question: \"Can I use it with Tailwind CSS?\", answer: \"Yes! All components are built on top of Tailwind CSS and highly customizable using utility classes.\" },\n  { question: \"Are the components accessible?\", answer: \"Accessibility is a core focus. We ensure proper ARIA attributes, keyboard navigation, and semantic HTML structure.\" },\n  { question: \"Do I need to install a heavy npm package?\", answer: \"No. Vengeance UI provides a CLI that lets you copy and paste only the components you need directly into your project.\" },\n  { question: \"Is it compatible with React and Next.js?\", answer: \"Absolutely. The library is built with React in mind and perfectly supports Next.js Server Components and client-side rendering.\" },\n];\n\nexport function FaqAccordion({\n  items = DEFAULT_ITEMS,\n  title = \"Vengeance UI FAQs\",\n  className,\n  ...props\n}: FaqAccordionProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleItem = (index: number) => {\n    setActiveIndex(activeIndex === index ? null : index);\n  };\n\n  return (\n    <div className={cn(\"w-full max-w-3xl mx-auto py-8 relative font-sans\", className)} {...props}>\n      {title && (\n        <h2 className=\"text-center font-bold text-2xl md:text-3xl mb-10 text-neutral-500 dark:text-neutral-400\">\n          {title}\n        </h2>\n      )}\n      \n      <ul className=\"w-full mx-auto list-none p-0 flex flex-col\">\n        {items.map((item, index) => {\n          const isActive = activeIndex === index;\n          return (\n            <li\n              key={index}\n              className={cn(\n                \"w-full relative transition-all duration-300 ease-in\",\n                \"border-b-2 border-neutral-100 dark:border-neutral-800\",\n                \"last:border-b-0\",\n                isActive ? \"border-b border-neutral-200 dark:border-neutral-700\" : \"\"\n              )}\n            >\n              <button\n                className={cn(\n                  \"flex flex-row items-center justify-start w-full min-h-[60px] py-4 relative m-0 px-4 pl-14 cursor-pointer\",\n                  \"border-l-[6px] md:border-l-[10px] transition-colors duration-200 text-left outline-none text-base md:text-lg\",\n                  isActive \n                    ? \"border-l-neutral-900 dark:border-l-neutral-100 bg-neutral-100/50 dark:bg-neutral-800/30 text-neutral-900 dark:text-neutral-100 font-semibold\" \n                    : \"border-l-neutral-300 dark:border-l-neutral-700 bg-transparent text-neutral-600 dark:text-neutral-400 hover:border-l-neutral-500 dark:hover:border-l-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-900/50\"\n                )}\n                onClick={() => toggleItem(index)}\n                aria-expanded={isActive}\n              >\n                {/* Plus/Minus Icon */}\n                <span \n                  className={cn(\n                    \"absolute left-4 md:left-5 top-1/2 -translate-y-1/2 transition-all duration-200 leading-none\",\n                    isActive ? \"text-[32px] md:text-[40px] font-normal text-neutral-900 dark:text-neutral-100\" : \"text-[24px] md:text-[30px] font-normal text-neutral-400 dark:text-neutral-500\"\n                  )}\n                >\n                  {isActive ? \"-\" : \"+\"}\n                </span>\n                \n                <span className=\"pr-8\">{item.question}</span>\n                \n                {/* Chevron */}\n                <span \n                  className={cn(\n                    \"absolute right-6 block w-2 h-2 border-t-[3px] border-r-[3px] transition-transform duration-200 ease-in-out\",\n                    isActive ? \"rotate-[-44deg] border-neutral-900 dark:border-neutral-100\" : \"rotate-[133deg] border-neutral-400 dark:border-neutral-500\"\n                  )}\n                />\n              </button>\n\n              <div \n                className={cn(\n                  \"grid transition-all duration-300 ease-in-out w-full\",\n                  \"border-l-[6px] md:border-l-[10px]\",\n                  isActive ? \"grid-rows-[1fr] border-l-neutral-900 dark:border-l-neutral-100 bg-neutral-100/50 dark:bg-neutral-800/30\" : \"grid-rows-[0fr] border-l-neutral-300 dark:border-l-neutral-700 bg-transparent\"\n                )}\n              >\n                <div className=\"overflow-hidden\">\n                  <div className=\"flex flex-row items-start justify-start w-full px-4 pl-14 pb-6 pt-2 text-base md:text-lg font-normal text-neutral-700 dark:text-neutral-300\">\n                    <span className=\"opacity-90\">{item.answer}</span>\n                  </div>\n                </div>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\nexport default FaqAccordion;\n",
      "type": "registry:ui",
      "target": "components/ui/faq-accordion.tsx"
    }
  ]
}