{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "list-box-infinite-scroll-example",
  "title": "List Box Infinite Scroll",
  "description": "list-box-infinite-scroll-example",
  "dependencies": [
    "react-aria-components",
    "react-stately"
  ],
  "registryDependencies": [
    "https://intentui.com/r/list-box",
    "https://intentui.com/r/progress-circle"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/list-box/list-box-infinite-scroll-example.tsx",
      "content": "'use client'\nimport { Collection } from 'react-aria-components/Collection'\nimport { ListBoxLoadMoreItem } from 'react-aria-components/ListBox'\nimport { useAsyncList } from 'react-stately/useAsyncList'\nimport { ListBox, ListBoxItem } from '@/components/ui/list-box'\nimport { ProgressCircle } from '@/components/ui/progress-circle'\n\ninterface Character {\n  name: string\n}\nexport default function ListBoxInfiniteScrollDemo() {\n  const list = useAsyncList<Character>({\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    <ListBox aria-label=\"Pick a Pokemon\" items={list.items} selectionMode=\"single\">\n      <Collection items={list.items}>\n        {(item) => (\n          <ListBoxItem id={item.name} textValue={item.name}>\n            {item.name}\n          </ListBoxItem>\n        )}\n      </Collection>\n      <ListBoxLoadMoreItem\n        onLoadMore={list.loadMore}\n        isLoading={list.loadingState === 'loadingMore'}\n      >\n        <ProgressCircle className=\"mx-auto mb-4\" isIndeterminate aria-label=\"Loading more...\" />\n      </ListBoxLoadMoreItem>\n    </ListBox>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/list-box-infinite-scroll-example/page.tsx"
    }
  ],
  "type": "registry:page"
}