{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "files",
  "title": "Files",
  "description": "Files, Folder and File: a file tree with collapsible folders, also rendered from remark-mdx-files output.",
  "dependencies": [
    "class-variance-authority",
    "cn",
    "lucide-react"
  ],
  "registryDependencies": [
    "collapsible"
  ],
  "files": [
    {
      "path": "registry/base/docs/components/files.tsx",
      "content": "// Adapted from Fumadocs UI (https://github.com/fuma-nama/fumadocs)\n// Copyright (c) 2023 Fuma, MIT License\n\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"cn\";\nimport { FileIcon, FolderIcon, FolderOpen } from \"lucide-react\";\nimport { type HTMLAttributes, type ReactNode, useState } from \"react\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\n\nconst itemVariants = cva(\n  \"flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4 [&_svg]:shrink-0\",\n);\n\nexport function Files({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"not-docs-typeset my-4 rounded-xl border bg-card p-2\",\n        className,\n      )}\n      {...props}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport interface FileProps extends HTMLAttributes<HTMLDivElement> {\n  name: string;\n  icon?: ReactNode;\n}\n\nexport interface FolderProps extends HTMLAttributes<HTMLDivElement> {\n  name: string;\n\n  disabled?: boolean;\n\n  /**\n   * Open folder by default\n   *\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n}\n\nexport function File({\n  name,\n  icon = <FileIcon />,\n  className,\n  ...rest\n}: FileProps): React.ReactElement {\n  return (\n    <div className={cn(itemVariants({ className }))} {...rest}>\n      {icon}\n      {name}\n    </div>\n  );\n}\n\nexport function Folder({\n  name,\n  defaultOpen = false,\n  disabled,\n  ...props\n}: FolderProps): React.ReactElement {\n  const [open, setOpen] = useState(defaultOpen);\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      disabled={disabled}\n      {...props}\n    >\n      <CollapsibleTrigger className={cn(itemVariants({ className: \"w-full\" }))}>\n        {open ? <FolderOpen /> : <FolderIcon />}\n        {name}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0\">\n        <div className=\"ms-2 flex flex-col border-s ps-2\">{props.children}</div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/docs/components/files.tsx"
    }
  ],
  "type": "registry:component"
}