{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tree",
  "title": "tree",
  "description": "tree",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/checkbox"
  ],
  "files": [
    {
      "path": "src/components/ui/tree.tsx",
      "content": "'use client'\n\nimport { ChevronRightIcon } from '@heroicons/react/20/solid'\nimport { Button } from 'react-aria-components/Button'\nimport type {\n  TreeItemContentProps,\n  TreeItemContentRenderProps,\n  TreeItemProps,\n  TreeProps,\n} from 'react-aria-components/Tree'\nimport {\n  Tree as TreePrimitive,\n  TreeItem as TreeItemPrimitive,\n  TreeItemContent,\n} from 'react-aria-components/Tree'\nimport { twJoin, twMerge } from 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\nimport { Checkbox, CheckboxField } from './checkbox'\n\nconst Tree = <T extends object>({ className, ...props }: TreeProps<T>) => {\n  return (\n    <TreePrimitive\n      className={cx(\n        twJoin(\n          'flex cursor-default flex-col gap-y-2 overflow-auto outline-hidden forced-color-adjust-none',\n          '[--tree-active-bg:var(--color-primary-subtle)] [--tree-active-fg:var(--color-primary-subtle-fg)]'\n        ),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst TreeItem = <T extends object>({ className, ...props }: TreeItemProps<T>) => {\n  return (\n    <TreeItemPrimitive\n      className={cx(\n        [\n          'shrink-0 rounded-lg px-2 py-1.5 pe-2',\n          'group/tree-item relative flex select-none rounded-lg focus:outline-hidden',\n          'focus:bg-(--tree-active-bg) focus:text-(--tree-active-fg) focus:**:[.text-muted-fg]:text-(--tree-active-fg)',\n          '**:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5',\n          '**:[svg]:size-5 **:[svg]:shrink-0 sm:**:[svg]:size-4',\n          '**:[svg:not([data-slot=check-indicator]):not([data-slot=chevron])]:me-1',\n          'disabled:opacity-50 forced-colors:[',\n          'href' in props ? 'cursor-pointer' : 'cursor-default',\n        ],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface TreeContentProps extends TreeItemContentProps {\n  className?: string\n}\n\nconst TreeContent = ({ className, children, ...props }: TreeContentProps) => {\n  return (\n    <TreeItemContent {...props}>\n      {(values) => (\n        <div\n          className={twMerge(\n            'relative flex w-full min-w-0 items-center gap-x-1 truncate text-sm/6',\n            className\n          )}\n        >\n          {values.allowsDragging && <Button className=\"sr-only\" slot=\"drag\" />}\n          {values.selectionMode === 'multiple' && values.selectionBehavior === 'toggle' && (\n            <CheckboxField className=\"gap-x-0\" slot=\"selection\">\n              <Checkbox className=\"col-span-1\" />\n            </CheckboxField>\n          )}\n          <div\n            className={twJoin(\n              'relative w-[calc(calc(var(--tree-item-level)-1)*(--spacing(5)))] shrink-0',\n              'before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-item-level)-1px),var(--border)_calc(var(--tree-item-level)-1px),var(--border)_calc(var(--tree-item-level)))]'\n            )}\n          />\n          {values.hasChildItems ? (\n            <TreeIndicator\n              values={{\n                isDisabled: values.isDisabled,\n                isExpanded: values.isExpanded,\n              }}\n            />\n          ) : (\n            <span aria-hidden className=\"block w-5 shrink-0\" />\n          )}\n          {typeof children === 'function' ? children(values) : children}\n        </div>\n      )}\n    </TreeItemContent>\n  )\n}\n\nconst TreeIndicator = ({\n  values,\n}: {\n  values: Pick<TreeItemContentRenderProps, 'isDisabled' | 'isExpanded'>\n}) => {\n  return (\n    <Button\n      slot=\"chevron\"\n      isDisabled={values.isDisabled}\n      className={twJoin(\n        'shrink-0 content-center text-muted-fg hover:text-fg',\n        values.isExpanded && 'text-fg'\n      )}\n    >\n      <ChevronRightIcon\n        data-slot=\"chevron\"\n        className={twJoin(\n          'size-5 transition-transform duration-200 ease-in-out sm:size-4',\n          values.isExpanded && 'rotate-90'\n        )}\n      />\n    </Button>\n  )\n}\n\nexport type { TreeItemProps, TreeProps }\nexport { Tree, TreeContent, TreeIndicator, TreeItem }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}