{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tree",
  "title": "tree",
  "description": "tree",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "cn"
  ],
  "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, cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport { Checkbox, CheckboxField } from \"./checkbox\"\n\nexport function 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-foreground:var(--color-primary-subtle-foreground)]\"\n        ),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function 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-foreground) focus:**:[.text-muted-foreground]:text-(--tree-active-foreground)\",\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\nexport interface TreeContentProps extends TreeItemContentProps {\n  className?: string\n}\n\nexport function TreeContent({ className, children, ...props }: TreeContentProps) {\n  return (\n    <TreeItemContent {...props}>\n      {(values) => (\n        <div\n          className={cn(\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\nexport function 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-foreground hover:text-foreground\",\n        values.isExpanded && \"text-foreground\"\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 }\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-primary-subtle": "var(--primary-subtle)",
      "color-primary-subtle-foreground": "var(--primary-subtle-foreground)"
    },
    "light": {
      "primary-subtle": "oklch(0.623 0.214 259.815 / 0.15)",
      "primary-subtle-foreground": "oklch(0.488 0.243 264.376)"
    },
    "dark": {
      "primary-subtle": "oklch(0.623 0.214 259.815 / 0.1)",
      "primary-subtle-foreground": "oklch(0.707 0.165 254.624)"
    }
  },
  "type": "registry:ui"
}