{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree",
  "dependencies": [
    "lucide-react",
    "react-aria-components",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/button.json",
    "https://taki-ui.com/r/checkbox.json",
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/tree.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\nimport {\n  Tree as AriaTree,\n  TreeItem as AriaTreeItem,\n  TreeItemContent as AriaTreeItemContent,\n  TreeItemProps as AriaTreeItemProps,\n  Button,\n  composeRenderProps,\n  TreeProps,\n} from \"react-aria-components\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cn, focusRing } from \"../lib/utils\"\nimport { buttonVariants } from \"./button\"\nimport { Checkbox } from \"./checkbox\"\n\nconst itemStyles = tv({\n  extend: focusRing,\n  base: \"group relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-1 text-sm outline-none transition-colors\",\n  variants: {\n    isSelected: {\n      false: \"hover:bg-accent hover:text-accent-foreground\",\n      true: \"bg-accent text-accent-foreground\",\n    },\n    isDisabled: {\n      true: \"pointer-events-none opacity-50\",\n    },\n  },\n})\n\nexport function Tree<T extends object>({ children, ...props }: TreeProps<T>) {\n  return (\n    <AriaTree\n      {...props}\n      className={composeRenderProps(props.className, (className) =>\n        cn(\"relative space-y-0.5 overflow-auto p-1 outline-0\", className)\n      )}\n    >\n      {children}\n    </AriaTree>\n  )\n}\n\nconst expandButton = tv({\n  extend: buttonVariants,\n  base: \"border-0 p-0 bg-transparent shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-start cursor-default\",\n  variants: {\n    isDisabled: {\n      true: \"opacity-50\",\n    },\n  },\n})\n\nconst chevron = tv({\n  base: \"transition-transform duration-200 ease-in-out\",\n  variants: {\n    isExpanded: {\n      true: \"transform rotate-90\",\n    },\n    isDisabled: {\n      true: \"opacity-50\",\n    },\n  },\n})\n\nexport interface TreeItemProps extends Partial<AriaTreeItemProps> {\n  title: string\n}\n\nexport function TreeItem({ children, title, ...props }: TreeItemProps) {\n  return (\n    <AriaTreeItem className={itemStyles} textValue={title} {...props}>\n      <AriaTreeItemContent>\n        {({\n          selectionMode,\n          selectionBehavior,\n          hasChildItems,\n          isExpanded,\n          isDisabled,\n        }) => (\n          <div className=\"flex items-center\">\n            {selectionMode === \"multiple\" && selectionBehavior === \"toggle\" && (\n              <Checkbox slot=\"selection\" />\n            )}\n            <div className=\"w-[calc(calc(var(--tree-item-level)_-_1)_*_calc(var(--spacing)_*_3))] shrink-0\" />\n            {hasChildItems ? (\n              <Button\n                slot=\"chevron\"\n                className={expandButton({\n                  isDisabled,\n                  size: \"icon-xs\",\n                  variant: \"ghost\",\n                })}\n              >\n                <ChevronRight\n                  aria-hidden\n                  className={chevron({ isExpanded, isDisabled })}\n                />\n              </Button>\n            ) : (\n              <div className=\"size-7 shrink-0\" />\n            )}\n            {title}\n          </div>\n        )}\n      </AriaTreeItemContent>\n      {children}\n    </AriaTreeItem>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}