{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq",
  "type": "registry:component",
  "title": "FAQ",
  "description": "Frequently asked questions section with expandable answers.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/faq/faq.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { ChevronDown, HelpCircle } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type FAQItemProps = {\n  children: ReactNode;\n  defaultOpen?: boolean;\n  question: string;\n};\n\nfunction FAQItem({ children, defaultOpen = false, question }: FAQItemProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  return (\n    <div className=\"border-b border-border last:border-b-0\">\n      <button\n        className=\"w-full flex items-center justify-between py-4 text-left hover:text-primary transition-colors\"\n        onClick={() => {\n          setIsOpen(!isOpen);\n        }}\n        type=\"button\"\n      >\n        <span className=\"font-medium text-sm pr-4\">{question}</span>\n        <ChevronDown\n          className={cn(\n            \"size-4 flex-shrink-0 transition-transform duration-200\",\n            isOpen && \"rotate-180\",\n          )}\n        />\n      </button>\n      <div\n        className={cn(\n          \"overflow-hidden transition-all duration-200\",\n          isOpen ? \"max-h-96 pb-4\" : \"max-h-0\",\n        )}\n      >\n        <div className=\"text-sm text-muted-foreground [&>p]:mb-2 [&>p:last-child]:mb-0\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport type FAQProps = {\n  children: ReactNode;\n  title?: string;\n};\n\nfunction FAQ({ children, title = \"Frequently Asked Questions\" }: FAQProps) {\n  return (\n    <div className=\"my-6 rounded-lg border bg-card\">\n      <div className=\"flex items-center gap-2 p-4 border-b border-border\">\n        <HelpCircle className=\"size-5 text-primary\" />\n        <h4 className=\"font-semibold\">{title}</h4>\n      </div>\n      <div className=\"px-4\">{children}</div>\n    </div>\n  );\n}\n\nFAQ.Item = FAQItem;\n\nexport { FAQ, FAQItem };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}