{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-352",
  "type": "registry:component",
  "title": "Comp 352",
  "description": "Comp 352",
  "files": [
    {
      "path": "registry/ui-basic/comp-352.tsx",
      "content": "import {\r\n\tAccordion,\r\n\tAccordionContent,\r\n\tAccordionItem,\r\n\tAccordionTrigger,\r\n} from \"@/components/ui/accordion\";\r\nimport {\r\n\tCollapsible,\r\n\tCollapsibleContent,\r\n\tCollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\";\r\nimport { ChevronDownIcon } from \"lucide-react\";\r\n\r\nconst items = [\r\n\t{\r\n\t\tid: \"1\",\r\n\t\ttitle: \"What makes Origin UI different?\",\r\n\t\tcollapsibles: [\r\n\t\t\t{\r\n\t\t\t\ttitle: \"What about performance?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"We optimize every component for maximum performance and minimal bundle size.\",\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\ttitle: \"How is the documentation?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"Our documentation is comprehensive and includes live examples for every component.\",\r\n\t\t\t},\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\tid: \"2\",\r\n\t\ttitle: \"How can I customize the components?\",\r\n\t\tcollapsibles: [\r\n\t\t\t{\r\n\t\t\t\ttitle: \"Can I use custom themes?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"Yes, our theming system is fully customizable and supports both light and dark modes.\",\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\ttitle: \"What about Tailwind support?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"We have first-class support for Tailwind CSS with custom utility classes.\",\r\n\t\t\t},\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\tid: \"3\",\r\n\t\ttitle: \"Is Origin UI optimized for performance?\",\r\n\t\tcollapsibles: [\r\n\t\t\t{\r\n\t\t\t\ttitle: \"What's the bundle size impact?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\r\n\t\t\t\topen: true,\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\ttitle: \"How is code splitting handled?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"We support automatic code splitting for optimal loading performance.\",\r\n\t\t\t},\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\tid: \"4\",\r\n\t\ttitle: \"How accessible are the components?\",\r\n\t\tcollapsibles: [\r\n\t\t\t{\r\n\t\t\t\ttitle: \"Which screen readers are supported?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\ttitle: \"What about keyboard navigation?\",\r\n\t\t\t\tcontent:\r\n\t\t\t\t\t\"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\r\n\t\t\t},\r\n\t\t],\r\n\t},\r\n];\r\n\r\nexport default function Component() {\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t<h2 className=\"text-xl font-bold\">Multi-level</h2>\r\n\t\t\t<Accordion\r\n\t\t\t\ttype=\"single\"\r\n\t\t\t\tcollapsible\r\n\t\t\t\tclassName=\"w-full -space-y-px\"\r\n\t\t\t\tdefaultValue=\"3\"\r\n\t\t\t>\r\n\t\t\t\t{items.map((item) => (\r\n\t\t\t\t\t<AccordionItem\r\n\t\t\t\t\t\tvalue={item.id}\r\n\t\t\t\t\t\tkey={item.id}\r\n\t\t\t\t\t\tclassName=\"bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative border outline-hidden first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:ring-[3px]\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<AccordionTrigger className=\"rounded-md px-4 py-3 text-[15px] leading-6 outline-hidden hover:no-underline focus-visible:ring-0\">\r\n\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t</AccordionTrigger>\r\n\t\t\t\t\t\t<AccordionContent className=\"p-0\">\r\n\t\t\t\t\t\t\t{item.collapsibles.map((collapsible, index) => (\r\n\t\t\t\t\t\t\t\t<CollapsibleDemo\r\n\t\t\t\t\t\t\t\t\tkey={index}\r\n\t\t\t\t\t\t\t\t\ttitle={collapsible.title}\r\n\t\t\t\t\t\t\t\t\tcontent={collapsible.content}\r\n\t\t\t\t\t\t\t\t\topen={collapsible.open}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</AccordionContent>\r\n\t\t\t\t\t</AccordionItem>\r\n\t\t\t\t))}\r\n\t\t\t</Accordion>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction CollapsibleDemo({\r\n\ttitle,\r\n\tcontent,\r\n\topen,\r\n}: {\r\n\ttitle: string;\r\n\tcontent: string;\r\n\topen?: boolean;\r\n}) {\r\n\treturn (\r\n\t\t<Collapsible className=\"bg-accent border-t px-4 py-3\" defaultOpen={open}>\r\n\t\t\t<CollapsibleTrigger className=\"flex gap-2 text-[15px] leading-6 font-semibold [&[data-state=open]>svg]:rotate-180\">\r\n\t\t\t\t<ChevronDownIcon\r\n\t\t\t\t\tsize={16}\r\n\t\t\t\t\tclassName=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\r\n\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t/>\r\n\t\t\t\t{title}\r\n\t\t\t</CollapsibleTrigger>\r\n\t\t\t<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\">\r\n\t\t\t\t{content}\r\n\t\t\t</CollapsibleContent>\r\n\t\t</Collapsible>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}