{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion11",
  "title": "Accordion",
  "description": "Accordion built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/accordion/11/index.tsx",
      "content": "import { ChevronDownIcon } from \"lucide-react\";\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger\n} from \"@/components/ui/accordion\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\n\nconst items = [\n  {\n    collapsibles: [\n      {\n        content:\n          \"We offer several pricing tiers including free, starter, pro, and enterprise so you only pay for what you need.\",\n        title: \"Which plans can I choose from?\"\n      },\n      {\n        content:\n          \"You can adjust seat counts and upgrade or downgrade between plans at any time from your billing settings.\",\n        title: \"Can I change plans later?\"\n      }\n    ],\n    id: \"1\",\n    title: \"What pricing plans are available?\"\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"You can cancel your subscription in a few clicks from the billing page. Your access remains active until the end of the paid period.\",\n        title: \"How do I cancel my subscription?\"\n      },\n      {\n        content:\n          \"Once cancelled, you will not be billed again unless you decide to reactivate your subscription.\",\n        title: \"Will I be billed after cancelling?\"\n      }\n    ],\n    id: \"2\",\n    title: \"Can I cancel my subscription anytime?\"\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"We support major credit and debit cards, PayPal, and bank transfers for eligible annual contracts.\",\n        open: true,\n        title: \"Which payment methods are supported?\"\n      },\n      {\n        content:\n          \"All transactions are processed through a PCI-compliant provider and your payment details are never stored on our servers.\",\n        title: \"How secure are my payments?\"\n      }\n    ],\n    id: \"3\",\n    title: \"What payment methods do you accept?\"\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"Standard support includes 24/7 email assistance and access to our help center with guides and tutorials.\",\n        title: \"What is included in standard support?\"\n      },\n      {\n        content:\n          \"Higher tiers include priority support, faster response times, and a dedicated account manager for enterprise customers.\",\n        title: \"Do you offer priority or enterprise support?\"\n      }\n    ],\n    id: \"4\",\n    title: \"What kind of support do you provide?\"\n  }\n];\n\nexport default function Component() {\n  return (\n    <div className=\"w-full max-w-md\">\n      <Accordion className=\"w-full -space-y-px\" collapsible defaultValue=\"1\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem\n            className=\"bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative border outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:ring-[3px]\"\n            key={item.id}\n            value={item.id}>\n            <AccordionTrigger className=\"rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"p-0\">\n              {item.collapsibles.map((collapsible, _index) => (\n                <CollapsibleDemo\n                  content={collapsible.content}\n                  key={collapsible.title}\n                  open={collapsible.open}\n                  title={collapsible.title}\n                />\n              ))}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n\nfunction CollapsibleDemo({\n  title,\n  content,\n  open\n}: {\n  title: string;\n  content: string;\n  open?: boolean;\n}) {\n  return (\n    <Collapsible className=\"bg-accent border-t px-4 py-3\" defaultOpen={open}>\n      <CollapsibleTrigger className=\"flex gap-2 text-[15px] leading-6 font-semibold [&[data-state=open]>svg]:rotate-180\">\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          className=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\n          size={16}\n        />\n        {title}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm transition-all\">\n        {content}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/accordion11.tsx"
    }
  ],
  "type": "registry:component"
}