{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tree-infinite-scroll-example",
  "title": "Tree Infinite Scroll",
  "description": "tree-infinite-scroll-example",
  "dependencies": [
    "react-aria-components",
    "react-stately"
  ],
  "registryDependencies": [
    "https://intentui.com/r/progress-circle",
    "https://intentui.com/r/tree"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/tree/tree-infinite-scroll-example.tsx",
      "content": "import { Collection } from 'react-aria-components/Collection'\nimport { TreeLoadMoreItem, type TreeLoadMoreItemProps } from 'react-aria-components/Tree'\nimport { useAsyncList } from 'react-stately/useAsyncList'\nimport { ProgressCircle } from '@/components/ui/progress-circle'\nimport { Tree, TreeContent, TreeItem as PrimitiveItem } from '@/components/ui/tree'\n\ninterface StarWarsCharacter {\n  name: string\n  height: number\n  mass: number\n  birth_year: number\n}\n\ninterface Pokemon {\n  name: string\n}\n\nexport default function TreeInfiniteScrollDemo() {\n  const starWarsList = useAsyncList<StarWarsCharacter>({\n    async load({ signal, cursor }) {\n      if (cursor) {\n        cursor = cursor.replace(/^http:\\/\\//i, 'https://')\n      }\n\n      const res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {\n        signal,\n      })\n      const json = await res.json()\n\n      return {\n        items: json.results,\n        cursor: json.next,\n      }\n    },\n  })\n\n  const pokemonList = useAsyncList<Pokemon>({\n    async load({ signal, cursor }) {\n      const res = await fetch(cursor || `https://pokeapi.co/api/v2/pokemon`, { signal })\n      const json = await res.json()\n\n      return {\n        items: json.results,\n        cursor: json.next,\n      }\n    },\n  })\n\n  return (\n    <Tree aria-label=\"async loading tree\" className=\"h-56 min-w-56 rounded-lg border p-2\">\n      <TreeItem id=\"pokemon\" title=\"Pokemon\">\n        <Collection items={pokemonList.items}>\n          {(item: Pokemon) => <TreeItem id={item.name} title={item.name} />}\n        </Collection>\n        <TreeLoader isLoading={pokemonList.isLoading} onLoadMore={pokemonList.loadMore} />\n      </TreeItem>\n      <TreeItem id=\"starwars\" title=\"Star Wars\">\n        <Collection items={starWarsList.items}>\n          {(item: StarWarsCharacter) => <TreeItem id={item.name} title={item.name} />}\n        </Collection>\n        <TreeLoader isLoading={starWarsList.isLoading} onLoadMore={starWarsList.loadMore} />\n      </TreeItem>\n    </Tree>\n  )\n}\n\ninterface TreeItemProps {\n  id: string\n  title: string\n  children?: React.ReactNode\n}\n\nfunction TreeItem({ id, title, children }: TreeItemProps) {\n  return (\n    <PrimitiveItem id={id} textValue={title}>\n      <TreeContent>{title}</TreeContent>\n      {children}\n    </PrimitiveItem>\n  )\n}\n\nconst TreeLoader = ({ className, ...props }: TreeLoadMoreItemProps) => {\n  return (\n    <TreeLoadMoreItem className={className} {...props}>\n      {({ level }) => {\n        return (\n          <ProgressCircle\n            style={{\n              marginLeft: `${level * 16}px`,\n              marginBottom: '8px',\n              marginTop: '8px',\n            }}\n            aria-label=\"Loading more...\"\n            isIndeterminate\n          />\n        )\n      }}\n    </TreeLoadMoreItem>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/tree-infinite-scroll-example/page.tsx"
    }
  ],
  "type": "registry:page"
}