{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree-12",
  "title": "Navigation tree",
  "description": "Documentation links with the current page open and marked.",
  "dependencies": [
    "@headless-tree/core"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/animated-size.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/tree.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/tree/tree-12.tsx",
      "content": "'use client';\n\nimport {\n  hotkeysCoreFeature,\n  syncDataLoaderFeature,\n  type ItemInstance,\n} from '@headless-tree/core';\n\nimport { AnimatedSize } from '@/registry/ndeko/ui/animated-size';\nimport {\n  Tree,\n  TreeItem,\n  TreeItemLabel,\n  useTree,\n} from '@/registry/ndeko/ui/tree';\n\ntype Item = {\n  name: string;\n  href?: string;\n  children?: string[];\n  current?: boolean;\n};\n\nconst ITEMS: Record<string, Item> = {\n  main: { name: 'Documentation', children: ['guides', 'api', 'resources'] },\n  guides: { name: 'User guides', children: ['getting-started', 'advanced'] },\n  'getting-started': {\n    name: 'Getting started',\n    children: ['installation', 'setup'],\n  },\n  installation: { name: 'Installation', href: '#', current: true },\n  setup: { name: 'Configuration', href: '#' },\n  advanced: { name: 'Advanced usage', href: '#' },\n  api: { name: 'API reference', children: ['endpoints', 'models'] },\n  endpoints: { name: 'Endpoints', href: '#' },\n  models: { name: 'Data models', href: '#' },\n  resources: { name: 'Resources', children: ['examples', 'faq'] },\n  examples: { name: 'Code examples', href: '#' },\n  faq: { name: 'FAQ', href: '#' },\n};\n\nconst INDENT = 20;\nconst ROOT_ID = 'main';\n\nconst CURRENT_PAGE =\n  'in-data-[current=true]:bg-primary/[0.08] in-data-[current=true]:font-medium';\n\nfunction nameOf(item: ItemInstance<Item>) {\n  return item.getItemData().name;\n}\n\nfunction hasChildren(item: ItemInstance<Item>) {\n  const children = item.getItemData().children ?? [];\n  return children.length > 0;\n}\n\nfunction itemOf(itemId: string) {\n  return ITEMS[itemId];\n}\n\nfunction childrenOf(itemId: string) {\n  return ITEMS[itemId].children ?? [];\n}\n\nfunction pathToCurrent(itemId: string): string[] {\n  const item = ITEMS[itemId];\n  if (item.current) {\n    return [itemId];\n  }\n  for (const childId of childrenOf(itemId)) {\n    const path = pathToCurrent(childId);\n    if (path.length > 0) {\n      return [itemId, ...path];\n    }\n  }\n  return [];\n}\n\nfunction isFolderId(itemId: string) {\n  const children = childrenOf(itemId);\n  return children.length > 0;\n}\n\nconst EXPANDED_ITEMS = pathToCurrent(ROOT_ID).filter(isFolderId);\n\nfunction currentStateOf(item: Item) {\n  if (item.current) {\n    return 'page' as const;\n  }\n  return undefined;\n}\n\nfunction linkOf(item: Item) {\n  if (!item.href) {\n    return undefined;\n  }\n  return (\n    <a\n      href={item.href}\n      data-current={item.current}\n      aria-current={currentStateOf(item)}\n    />\n  );\n}\n\nexport default function Tree12() {\n  const tree = useTree<Item>({\n    initialState: { expandedItems: EXPANDED_ITEMS },\n    indent: INDENT,\n    rootItemId: ROOT_ID,\n    getItemName: nameOf,\n    isItemFolder: hasChildren,\n    dataLoader: { getItem: itemOf, getChildren: childrenOf },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n  });\n\n  return (\n    <div className='w-full'>\n      <AnimatedSize>\n        <Tree aria-label='Documentation' indent={INDENT} tree={tree}>\n          {tree.getItems().map((item) => (\n            <TreeItem\n              key={item.getId()}\n              item={item}\n              render={linkOf(item.getItemData())}\n            >\n              <TreeItemLabel className={CURRENT_PAGE} />\n            </TreeItem>\n          ))}\n        </Tree>\n      </AnimatedSize>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "tree"
  ],
  "type": "registry:component"
}