{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "folder-tree",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "devDependencies": [],
  "files": [
    {
      "path": "folder-tree.tsx",
      "content": "\"use client\";\n\nimport type { Variants } from \"motion/react\";\nimport { motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface FolderTreeIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface FolderTreeIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst DURATION = 0.35;\n\nconst BRANCH_VARIANTS: Variants = {\n  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    pathOffset: [1, 0],\n  },\n};\n\nconst PANEL_VARIANTS: Variants = {\n  normal: { pathLength: 1, opacity: 1 },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n  },\n};\n\nconst CALCULATE_DELAY = (index: number) => index * DURATION + 0.1;\n\nconst FolderTreeIcon = forwardRef<FolderTreeIconHandle, FolderTreeIconProps>(\n  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {\n    const controls = useAnimation();\n    const isControlledRef = useRef(false);\n\n    useImperativeHandle(ref, () => {\n      isControlledRef.current = true;\n      return {\n        startAnimation: () => controls.start(\"animate\"),\n        stopAnimation: () => controls.start(\"normal\"),\n      };\n    });\n\n    const handleMouseEnter = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (isControlledRef.current) {\n          onMouseEnter?.(event);\n        } else {\n          controls.start(\"animate\");\n        }\n      },\n      [controls, onMouseEnter]\n    );\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (isControlledRef.current) {\n          onMouseLeave?.(event);\n        } else {\n          controls.start(\"normal\");\n        }\n      },\n      [controls, onMouseLeave]\n    );\n\n    return (\n      <div\n        className={cn(className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        <svg\n          fill=\"none\"\n          height={size}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width={size}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <motion.path\n            animate={controls}\n            d=\"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z\"\n            initial=\"normal\"\n            transition={{\n              duration: DURATION,\n              delay: CALCULATE_DELAY(0),\n              opacity: { delay: CALCULATE_DELAY(0) },\n            }}\n            variants={PANEL_VARIANTS}\n          />\n          <motion.path\n            animate={controls}\n            d=\"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z\"\n            initial=\"normal\"\n            transition={{\n              duration: DURATION,\n              delay: CALCULATE_DELAY(2),\n              opacity: { delay: CALCULATE_DELAY(2) },\n            }}\n            variants={PANEL_VARIANTS}\n          />\n          <motion.path\n            animate={controls}\n            d=\"M3 5a2 2 0 0 0 2 2h3\"\n            initial=\"normal\"\n            transition={{\n              duration: DURATION,\n              delay: CALCULATE_DELAY(1),\n              opacity: { delay: CALCULATE_DELAY(1) },\n            }}\n            variants={BRANCH_VARIANTS}\n          />\n          <motion.path\n            animate={controls}\n            d=\"M3 3v13a2 2 0 0 0 2 2h3\"\n            initial=\"normal\"\n            transition={{\n              duration: DURATION,\n              delay: CALCULATE_DELAY(3),\n              opacity: { delay: CALCULATE_DELAY(3) },\n            }}\n            variants={BRANCH_VARIANTS}\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nFolderTreeIcon.displayName = \"FolderTreeIcon\";\n\nexport { FolderTreeIcon };\n",
      "type": "registry:ui"
    }
  ]
}