{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-02",
  "title": "FAQ list",
  "description": "Stacked question rows; each answer expands with an animated chevron.",
  "dependencies": [],
  "registryDependencies": [
    "collapsible"
  ],
  "files": [
    {
      "path": "registry/patterns/collapsible/collapsible-02.tsx",
      "content": "import {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible'\nimport { ChevronDownIcon } from 'lucide-react'\n\nconst faqs = [\n  {\n    q: 'Can I cancel my subscription anytime?',\n    a: 'Yes. Your plan stays active until the end of the current billing period, and you keep full access until then.',\n  },\n  {\n    q: 'Do you offer refunds?',\n    a: 'We refund unused time on annual plans within 30 days of purchase. Monthly plans are non-refundable.',\n  },\n  {\n    q: 'Can I switch plans later?',\n    a: 'Absolutely — upgrade or downgrade at any time. Changes are prorated against your next invoice.',\n  },\n]\n\nexport function Collapsible02() {\n  return (\n    <div className=\"w-full max-w-md divide-y rounded-lg border\">\n      {faqs.map((faq) => (\n        <Collapsible key={faq.q} className=\"px-4\">\n          <CollapsibleTrigger className=\"group flex w-full items-center justify-between gap-4 py-4 text-left text-sm font-medium\">\n            {faq.q}\n            <ChevronDownIcon className=\"text-muted-foreground size-4 shrink-0 transition-transform group-data-panel-open:rotate-180\" />\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <p className=\"text-muted-foreground pb-4 text-sm leading-relaxed\">\n              {faq.a}\n            </p>\n          </CollapsibleContent>\n        </Collapsible>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/collapsible/collapsible-02.tsx"
    }
  ],
  "type": "registry:block"
}