{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree",
  "title": "Tree",
  "files": [
    {
      "path": "components/tree/tree.tsx",
      "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { useState } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../button\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"../collapsible\";\n\n// Unified TreeTitle component for both leaf and parent nodes\ninterface TreeTitleProps {\n  title: React.ReactNode;\n  icon?: React.ReactNode;\n  isSelected?: boolean;\n  isDisabled?: boolean;\n  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLSpanElement>;\n  style?: React.CSSProperties;\n  showIcon?: boolean;\n}\n\nfunction TreeTitle({\n  title,\n  icon,\n  isSelected,\n  isDisabled,\n  onClick,\n  style,\n  showIcon,\n}: TreeTitleProps) {\n  return (\n    <div\n      tabIndex={0}\n      className={cn(\n        \"flex min-w-0 flex-1 items-center gap-2 truncate rounded px-2 py-1 pl-1 text-sm font-normal transition outline-none\",\n        \"justify-start\",\n        isSelected && \"bg-accent text-accent-foreground\",\n        isDisabled && \"cursor-not-allowed opacity-50\",\n        !isDisabled && \"hover:bg-accent hover:text-accent-foreground\",\n      )}\n      style={style}\n      // disabled={isDisabled}\n      onClick={isDisabled ? undefined : onClick}\n      data-slot=\"tree-node-content\"\n    >\n      {showIcon && icon && (\n        <span className=\"flex h-4 w-4 items-center justify-center\">{icon}</span>\n      )}\n      {typeof title === \"string\" ? (\n        <span className=\"truncate\">{title}</span>\n      ) : (\n        title\n      )}\n    </div>\n  );\n}\n\n/** Provide a wrap type define for developer to wrap with customize fieldNames data type */\nexport type FieldDataNode<\n  T,\n  ChildFieldName extends string = \"children\",\n> = BasicDataNode &\n  T &\n  Partial<Record<ChildFieldName, FieldDataNode<T, ChildFieldName>[]>>;\nexport type Key = React.Key;\nexport type DataNode = FieldDataNode<{\n  key: Key;\n  title?: React.ReactNode | ((data: DataNode) => React.ReactNode);\n}>;\nexport interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {\n  eventKey?: Key;\n  prefixCls?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  id?: string;\n  expanded?: boolean;\n  selected?: boolean;\n  checked?: boolean;\n  loaded?: boolean;\n  loading?: boolean;\n  halfChecked?: boolean;\n  title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);\n  dragOver?: boolean;\n  dragOverGapTop?: boolean;\n  dragOverGapBottom?: boolean;\n  pos?: string;\n  domRef?: React.Ref<HTMLDivElement>;\n  /** New added in Tree for easy data access */\n  data?: TreeDataType;\n  isStart?: boolean[];\n  isEnd?: boolean[];\n  active?: boolean;\n  onMouseMove?: React.MouseEventHandler<HTMLDivElement>;\n  isLeaf?: boolean;\n  checkable?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  disableCheckbox?: boolean;\n  icon?: IconType;\n  switcherIcon?: IconType;\n  children?: React.ReactNode;\n}\nexport type IconType =\n  | React.ReactNode\n  | ((props: TreeNodeProps) => React.ReactNode);\n\n/** For fieldNames, we provides a abstract interface */\nexport interface BasicDataNode {\n  checkable?: boolean;\n  disabled?: boolean;\n  disableCheckbox?: boolean;\n  icon?: IconType;\n  isLeaf?: boolean;\n  selectable?: boolean;\n  switcherIcon?: IconType;\n  /** Set style of TreeNode. This is not recommend if you don't have any force requirement */\n  className?: string;\n  style?: React.CSSProperties;\n}\n\ntype TreeProps<TreeDataType extends BasicDataNode = DataNode> = {\n  /** The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) */\n  treeData?: TreeDataType[];\n  /** Tree node data */\n  children?: React.ReactNode;\n  /** Default expanded keys */\n  defaultExpandedKeys?: Key[];\n  /** Expanded keys (controlled) */\n  expandedKeys?: Key[];\n  /** Callback function for when a tree node is expanded/collapsed */\n  onExpand?: (\n    expandedKeys: Key[],\n    info: { expanded: boolean; node: TreeDataType },\n  ) => void;\n  /** Callback function for when a tree node is selected */\n  onSelect?: (\n    selectedKeys: Key[],\n    info: { selected: boolean; node: TreeDataType },\n  ) => void;\n  /** Selected keys */\n  selectedKeys?: Key[];\n  /** Whether to show the connecting line */\n  showLine?: boolean;\n  /** Whether to show the icon */\n  showIcon?: boolean;\n  /** Custom icon */\n  icon?: IconType;\n  /** Custom switcher icon */\n  switcherIcon?: IconType;\n\n  className?: string;\n};\n\ntype TreeNodeData = {\n  key: Key;\n  title: React.ReactNode;\n  children?: TreeNodeData[];\n  icon?: React.ReactNode;\n  isLeaf?: boolean;\n  disabled?: boolean;\n};\n\ntype InternalTreeProps = TreeProps & {\n  /** Internal prop for recursive rendering */\n  item?: TreeNodeData;\n  /** Internal prop for tracking depth level */\n  depth?: number;\n  /** Internal prop for tracking if this is the last child */\n  isLast?: boolean;\n  /** Internal prop for tracking parent line states */\n  parentLines?: boolean[];\n  _parent?: {\n    depth: number;\n    isLast: boolean;\n  };\n};\n\nfunction Tree(props: InternalTreeProps) {\n  const {\n    treeData,\n    item,\n    children,\n    selectedKeys,\n    onSelect,\n    depth = 0,\n    isLast = false,\n    parentLines = [],\n    className,\n    ...restProps\n  } = props;\n\n  // If treeData is provided, render the tree structure\n  if (treeData && treeData.length > 0) {\n    return (\n      <div className={cn(\"tree-root\", depth === 0 ? className : undefined)}>\n        {treeData.map((node, index) => (\n          <TreeNode\n            key={node.key}\n            item={node as TreeNodeData}\n            selectedKeys={selectedKeys}\n            onSelect={onSelect}\n            depth={depth}\n            isLast={index === treeData.length - 1}\n            parentLines={parentLines}\n            {...restProps}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  // If item is provided (internal recursive call), render single node\n  if (item) {\n    return (\n      <TreeNode\n        item={item}\n        selectedKeys={selectedKeys}\n        onSelect={onSelect}\n        depth={depth}\n        isLast={isLast}\n        parentLines={parentLines}\n        {...restProps}\n      />\n    );\n  }\n\n  // Fallback to children\n  return <div className=\"tree-root\">{children}</div>;\n}\n\nfunction TreeNode({\n  item,\n  selectedKeys,\n  onSelect,\n  depth = 0,\n  isLast = false,\n  parentLines = [],\n  showIcon = false,\n  showLine = false,\n  _parent,\n  ...props\n}: {\n  item: TreeNodeData;\n  selectedKeys?: Key[];\n  onSelect?: TreeProps[\"onSelect\"];\n  depth?: number;\n  isLast?: boolean;\n  parentLines?: boolean[];\n  _parent?: {\n    depth: number;\n    isLast: boolean;\n  };\n  showLine?: boolean;\n} & Omit<TreeProps, \"selectedKeys\" | \"onSelect\" | \"showLine\">) {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const hasChildren = item.children && item.children.length > 0;\n  const isSelected = selectedKeys?.includes(item.key);\n\n  const handleClick = () => {\n    if (onSelect) {\n      const newSelectedKeys = (\n        isSelected\n          ? (selectedKeys?.filter((key) => key !== item.key) ?? [])\n          : [item.key]\n      ) as Key[];\n      onSelect(newSelectedKeys, {\n        selected: !isSelected,\n        node: item as any,\n      });\n    }\n  };\n\n  const handleToggle = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  // Add additional margin for nodes with lines to prevent text overlap\n  const nodeContentStyle: React.CSSProperties =\n    showLine && depth > 0\n      ? {\n          marginLeft: \"6px\", // Add margin to account for the horizontal line\n        }\n      : {};\n\n  if (!hasChildren) {\n    return (\n      <div\n        className=\"tree-node relative flex h-8 items-center\"\n        role=\"treeitem\"\n        data-slot=\"tree-leaf-node\"\n        data-title={item.title}\n        data-depth={depth}\n        data-is-last={isLast}\n      >\n        {/* Indent */}\n        <span\n          className=\"inline-flex\"\n          aria-hidden=\"true\"\n          data-slot=\"tree-indent\"\n        >\n          {Array.from({ length: depth }).map((_, i) => (\n            <span\n              key={i}\n              className=\"relative inline-block h-8 w-6\"\n              data-slot=\"tree-indent-unit\"\n              data-indent-level={i}\n            >\n              {/* {_parent?.depth}.{i} */}\n              <span\n                className={cn(\n                  \"absolute top-0 left-1/2 h-full w-px\",\n                  _parent?.isLast && _parent.depth === i ? \"hidden\" : \"\",\n                )}\n                style={{\n                  background: \"#d9d9d9\",\n                  transform: \"translateX(-50%)\",\n                }}\n                data-slot=\"tree-indent-vertical\"\n              />\n            </span>\n          ))}\n        </span>\n        {/* Switcher (noop for leaf, with leaf-line) */}\n        <span\n          className=\"relative flex h-full w-6 shrink-0 items-center justify-center\"\n          data-slot=\"switcher-leaf-noop\"\n          data-depth={depth}\n        >\n          {showLine && (\n            <span\n              data-slot=\"switcher-leaf-line\"\n              className=\"absolute inset-0 block\"\n            >\n              {/* Horizontal line */}\n              <span\n                className={cn(\"absolute top-1/2 left-1/2\", \"w-1/2\")}\n                style={{\n                  // width: \"20px\",\n                  height: \"1px\",\n                  background: \"#d9d9d9\",\n                  transform: \"translateY(-50%)\",\n                  zIndex: 2,\n                }}\n              />\n              {/* Vertical line */}\n              <span\n                className={cn(\n                  \"absolute left-1/2\",\n                  \"h-full\",\n                  isLast && \"h-[50%]\",\n                )}\n                style={{\n                  width: \"1px\",\n                  // height: \"24px\",\n                  background: \"#d9d9d9\",\n                  top: 0,\n                  transform: \"translateX(-50%)\",\n                  zIndex: 2,\n                }}\n              />\n            </span>\n          )}\n        </span>\n        {/* Content */}\n        <TreeTitle\n          title={item.title}\n          isSelected={isSelected}\n          isDisabled={item.disabled}\n          onClick={handleClick}\n          icon={item.icon}\n          showIcon={showIcon}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        \"tree-node relative\",\n        // isLast && '[&_span[data-slot=\"tree-indent-vertical\"]]:hidden',\n      )}\n      data-indent-level\n      data-slot=\"tree-parent-node\"\n      data-title={item.title}\n      data-depth={depth}\n      data-is-last={isLast}\n      data-expanded={isExpanded}\n    >\n      <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>\n        <div className=\"relative z-10 flex h-8 items-center\">\n          {/* Indent */}\n          <span\n            className=\"inline-flex\"\n            aria-hidden=\"true\"\n            data-slot=\"tree-indent\"\n          >\n            {Array.from({ length: depth }).map((_, i) => (\n              <span\n                key={i}\n                className=\"relative inline-block h-8 w-6\"\n                data-slot=\"tree-indent-unit\"\n                data-indent-level={i}\n              >\n                <span\n                  className=\"absolute top-0 left-1/2 h-full w-px\"\n                  style={{\n                    background: \"#d9d9d9\",\n                    transform: \"translateX(-50%)\",\n                  }}\n                  data-slot=\"tree-indent-vertical\"\n                />\n              </span>\n            ))}\n          </span>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              className=\"hover:bg-accent h-6 w-6 shrink-0 p-0\"\n              onClick={handleToggle}\n            >\n              <ChevronRight\n                className={cn(\n                  \"h-4 w-4 transition-transform\",\n                  isExpanded && \"rotate-90\",\n                )}\n              />\n            </Button>\n          </CollapsibleTrigger>\n          <TreeTitle\n            title={item.title}\n            icon={item.icon}\n            isSelected={isSelected}\n            isDisabled={item.disabled}\n            onClick={handleClick}\n            style={nodeContentStyle}\n            showIcon={showIcon}\n          />\n          {/* Horizontal connector line from parent title to child title */}\n          {/* {showLine &&\n            Array.isArray(item.children) &&\n            item.children.length > 0 && (\n              <div\n                className=\"absolute\"\n                data-slot=\"horizontal-parent-connector\"\n                style={{\n                  left: `${48 + depth * 24}px`, // 24px (indent) + 24px (expand+gap+icon)\n                  top: \"50%\",\n                  width: \"24px\", // distance to next level indent\n                  height: \"1px\",\n                  background: \"#d9d9d9\",\n                  transform: \"translateY(-50%)\",\n                  zIndex: 1,\n                }}\n              />\n            )} */}\n        </div>\n        <CollapsibleContent>\n          <div>\n            {item.children?.map((subItem, index) => {\n              const childCount = item.children ? item.children.length : 0;\n              const newParentLines = parentLines.slice(0, depth);\n              newParentLines[depth] = index !== childCount - 1;\n\n              return (\n                <Tree\n                  key={subItem.key}\n                  item={subItem}\n                  selectedKeys={selectedKeys}\n                  onSelect={onSelect}\n                  depth={depth + 1}\n                  isLast={index === childCount - 1}\n                  parentLines={newParentLines}\n                  _parent={{\n                    depth,\n                    isLast,\n                  }}\n                  showLine={showLine}\n                  showIcon={showIcon}\n                  {...props}\n                />\n              );\n            })}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n\nexport type { TreeProps };\n\nexport { Tree };\n",
      "type": "registry:file",
      "target": "components/tree/tree.tsx"
    }
  ],
  "type": "registry:component"
}