{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-tree",
  "type": "registry:ui",
  "title": "Tree",
  "dependencies": [
    "react",
    "react-aria-components",
    "lucide-react",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-checkbox.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Tree.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  Tree as AriaTree,\n  TreeItem as AriaTreeItem,\n  TreeItemContent as AriaTreeItemContent,\n  Button,\n  type TreeItemProps as AriaTreeItemProps,\n  type TreeProps\n} from 'react-aria-components/Tree';\nimport {ChevronRight} from 'lucide-react';\nimport {tv} from 'tailwind-variants';\nimport {Checkbox} from '@/registry/react-aria/ui/Checkbox';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nconst itemStyles = tv({\n  extend: focusRing,\n  base: 'relative font-sans flex group gap-3 cursor-default select-none py-1 px-3 text-sm text-neutral-900 dark:text-neutral-200 bg-white dark:bg-neutral-900 border-t dark:border-t-neutral-700 border-transparent first:border-t-0 -outline-offset-2 first:rounded-t-lg last:rounded-b-lg',\n  variants: {\n    isSelected: {\n      false:\n        'hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800',\n      true: 'bg-blue-100 dark:bg-blue-700/30 hover:bg-blue-200 pressed:bg-blue-200 dark:hover:bg-blue-700/40 dark:pressed:bg-blue-700/40 border-y-blue-200 dark:border-y-blue-900 z-20'\n    },\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText] z-10'\n    }\n  }\n});\n\nexport function Tree<T>({children, ...props}: TreeProps<T>) {\n  return (\n    <AriaTree\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'w-48 max-w-full overflow-auto relative border border-neutral-200 dark:border-neutral-700 rounded-lg'\n      )}>\n      {children}\n    </AriaTree>\n  );\n}\n\nconst expandButton = tv({\n  extend: focusRing,\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 [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nconst chevron = tv({\n  base: 'w-4.5 h-4.5 text-neutral-500 dark:text-neutral-400 transition-transform duration-200 ease-in-out',\n  variants: {\n    isExpanded: {\n      true: 'transform rotate-90'\n    },\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nexport interface TreeItemProps extends Partial<AriaTreeItemProps> {\n  title: string;\n}\n\nexport function TreeItem(props: TreeItemProps) {\n  return (\n    <AriaTreeItem className={itemStyles} textValue={props.title} {...props}>\n      <AriaTreeItemContent {...props}>\n        {({selectionMode, selectionBehavior, hasChildItems, isExpanded, isDisabled}) => (\n          <div className={`flex items-center`}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              <Checkbox slot=\"selection\" />\n            )}\n            <div className=\"shrink-0 w-[calc(calc(var(--tree-item-level)_-_1)_*_calc(var(--spacing)_*_3))]\" />\n            {hasChildItems ? (\n              <Button slot=\"chevron\" className={expandButton({isDisabled})}>\n                <ChevronRight aria-hidden className={chevron({isExpanded, isDisabled})} />\n              </Button>\n            ) : (\n              <div className=\"shrink-0 w-8 h-8\" />\n            )}\n            {props.title}\n          </div>\n        )}\n      </AriaTreeItemContent>\n      {props.children}\n    </AriaTreeItem>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}