{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-tree",
  "title": "File Tree",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A folder and file explorer with semantic tree navigation and file-type icons.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.ballmac.com/r/tree-view.json",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/file-tree.tsx",
      "content": "// Ballmac UI: File Tree. https://ui.ballmac.com/components/file-tree\n\"use client\"\n\nimport * as React from \"react\"\nimport { FileCode2, FileText, Folder, FolderOpen } from \"lucide-react\"\nimport { TreeView, type TreeNode } from \"@/components/ballmac/tree-view\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype FileNode = TreeNode & {\n  /** Folder or file type. Folders can contain children. */\n  type: \"folder\" | \"file\"\n  /** Optional language or file extension used for the icon. */\n  extension?: string\n  /** Nested files and folders. */\n  children?: FileNode[]\n}\ntype FileTreeProps = Omit<\n  React.ComponentProps<typeof TreeView>,\n  \"nodes\" | \"renderIcon\" | \"label\"\n> & {\n  /** Files and folders to display. */\n  files: FileNode[]\n  /** Accessible name for the file tree. */\n  label?: string\n}\nfunction FileTree({ files, label, ...props }: FileTreeProps) {\n  const msg = useMessages()\n  label ??= msg(\"file-tree.label\", \"Files\")\n  return (\n    <TreeView\n      data-slot=\"file-tree\"\n      nodes={files}\n      label={label}\n      renderIcon={(node, expanded) => {\n        const file = node as FileNode\n        if (file.type === \"folder\")\n          return expanded ? (\n            <FolderOpen className=\"size-4\" />\n          ) : (\n            <Folder className=\"size-4\" />\n          )\n        return file.extension === \"tsx\" ||\n          file.extension === \"ts\" ||\n          file.extension === \"js\" ? (\n          <FileCode2 className=\"size-4\" />\n        ) : (\n          <FileText className=\"size-4\" />\n        )\n      }}\n      {...props}\n    />\n  )\n}\nexport { FileTree, type FileTreeProps, type FileNode }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/file-tree.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "files",
      "folders",
      "tree"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A folder and file explorer with semantic tree navigation and file-type icons.",
      "whenToUse": [
        "Browse a project or document hierarchy"
      ],
      "whenNotToUse": [
        "Use Tree View for non-file hierarchies"
      ],
      "composesWith": [
        "tree-view"
      ],
      "a11y": [
        {
          "keys": "Arrow keys / Home / End / Enter / Space",
          "action": "Navigates folders and selects files"
        }
      ],
      "customization": [
        "Controlled and uncontrolled state",
        "Content and token-based className styling"
      ]
    },
    "examples": [
      "file-tree-demo",
      "file-tree-states"
    ],
    "url": "https://ui.ballmac.com/components/file-tree"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}