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