{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible2",
  "title": "Collapsible",
  "description": "An interactive component which expands/collapses a panel. Every example works interchangeably with Radix UI and Base UI primitives.",
  "files": [
    {
      "path": "contents/components/collapsible/2/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronDownIcon, FolderIcon, FileIcon, FolderOpenIcon } from \"lucide-react\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function CollapsibleComponent() {\n  const [srcOpen, setSrcOpen] = useState(false);\n  const [componentsOpen, setComponentsOpen] = useState(false);\n  const [utilsOpen, setUtilsOpen] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-1 rounded-md border p-2 font-mono text-sm\">\n      <Collapsible open={srcOpen} onOpenChange={setSrcOpen}>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" className=\"h-8 w-full justify-start gap-2 px-2\">\n            {srcOpen ? (\n              <FolderOpenIcon className=\"text-primary h-4 w-4\" />\n            ) : (\n              <FolderIcon className=\"h-4 w-4\" />\n            )}\n            <span>src</span>\n            <ChevronDownIcon\n              className={`ml-auto h-3 w-3 transition-transform duration-200 ${srcOpen ? \"rotate-180\" : \"\"}`}\n            />\n          </Button>\n        </CollapsibleTrigger>\n        <CollapsibleContent className=\"space-y-1 pl-6\">\n          <Collapsible open={componentsOpen} onOpenChange={setComponentsOpen}>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"ghost\" className=\"h-8 w-full justify-start gap-2 px-2\">\n                {componentsOpen ? (\n                  <FolderOpenIcon className=\"text-primary h-4 w-4\" />\n                ) : (\n                  <FolderIcon className=\"h-4 w-4\" />\n                )}\n                <span>components</span>\n                <ChevronDownIcon\n                  className={`ml-auto h-3 w-3 transition-transform duration-200 ${componentsOpen ? \"rotate-180\" : \"\"}`}\n                />\n              </Button>\n            </CollapsibleTrigger>\n            <CollapsibleContent className=\"space-y-1 pl-6\">\n              <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n                <FileIcon className=\"h-3 w-3\" />\n                <span>button.tsx</span>\n              </div>\n              <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n                <FileIcon className=\"h-3 w-3\" />\n                <span>input.tsx</span>\n              </div>\n              <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n                <FileIcon className=\"h-3 w-3\" />\n                <span>card.tsx</span>\n              </div>\n            </CollapsibleContent>\n          </Collapsible>\n          <Collapsible open={utilsOpen} onOpenChange={setUtilsOpen}>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"ghost\" className=\"h-8 w-full justify-start gap-2 px-2\">\n                {utilsOpen ? (\n                  <FolderOpenIcon className=\"text-primary h-4 w-4\" />\n                ) : (\n                  <FolderIcon className=\"h-4 w-4\" />\n                )}\n                <span>utils</span>\n                <ChevronDownIcon\n                  className={`ml-auto h-3 w-3 transition-transform duration-200 ${utilsOpen ? \"rotate-180\" : \"\"}`}\n                />\n              </Button>\n            </CollapsibleTrigger>\n            <CollapsibleContent className=\"space-y-1 pl-6\">\n              <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n                <FileIcon className=\"h-3 w-3\" />\n                <span>helpers.ts</span>\n              </div>\n              <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n                <FileIcon className=\"h-3 w-3\" />\n                <span>constants.ts</span>\n              </div>\n            </CollapsibleContent>\n          </Collapsible>\n          <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n            <FileIcon className=\"h-3 w-3\" />\n            <span>app.tsx</span>\n          </div>\n          <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n            <FileIcon className=\"h-3 w-3\" />\n            <span>index.ts</span>\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n      <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n        <FileIcon className=\"h-3 w-3\" />\n        <span>package.json</span>\n      </div>\n      <div className=\"hover:bg-muted flex items-center gap-2 rounded px-2 py-1.5 text-xs\">\n        <FileIcon className=\"h-3 w-3\" />\n        <span>tsconfig.json</span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/collapsible2.tsx"
    }
  ],
  "type": "registry:component"
}