{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "folder-arrow-down",
  "title": "folder-arrow-down",
  "description": "Animated folder-arrow-down icon for React",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "files": [
    {
      "path": "folder-arrow-down.tsx",
      "content": "\"use client\";\n\nimport type { Transition, Variants } from \"motion/react\";\nimport { motion, useAnimation } from \"motion/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FolderArrowDownIconHandle {\n  startAnimation: () => void;\n  stopAnimation: () => void;\n}\n\ninterface FolderArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {\n  size?: number;\n}\n\nconst ARROW_VARIANTS: Variants = {\n  normal: { y: 0 },\n  animate: { y: [0, 2, 0] },\n};\n\nconst ARROW_TRANSITION: Transition = {\n  times: [0, 0.4, 1],\n  duration: 0.5,\n};\n\nconst FolderArrowDownIcon = forwardRef<\n  FolderArrowDownIconHandle,\n  FolderArrowDownIconProps\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\n    return {\n      startAnimation: () => controls.start(\"animate\"),\n      stopAnimation: () => controls.start(\"normal\"),\n    };\n  });\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseEnter?.(e);\n      } else {\n        controls.start(\"animate\");\n      }\n    },\n    [controls, onMouseEnter]\n  );\n\n  const handleMouseLeave = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (isControlledRef.current) {\n        onMouseLeave?.(e);\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=\"1.5\"\n        viewBox=\"0 0 24 24\"\n        width={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z\" />\n        <motion.g\n          animate={controls}\n          initial=\"normal\"\n          transition={ARROW_TRANSITION}\n          variants={ARROW_VARIANTS}\n        >\n          <path d=\"M9 13.5L12 16.5M12 16.5L15 13.5M12 16.5L12 10.5\" />\n        </motion.g>\n      </svg>\n    </div>\n  );\n});\n\nFolderArrowDownIcon.displayName = \"FolderArrowDownIcon\";\n\nexport { FolderArrowDownIcon };\n",
      "type": "registry:ui"
    }
  ]
}